diff --git a/src/analytics-localization/english.ts b/src/analytics-localization/english.ts index 237dc3c35..2c03df0f6 100644 --- a/src/analytics-localization/english.ts +++ b/src/analytics-localization/english.ts @@ -30,6 +30,7 @@ export var englishStrings = { chartType_scatter: "Scatter", chartType_gauge: "Gauge", chartType_bullet: "Bullet", + chartType_line: "Line", hideButton: "Hide", makePrivateButton: "Make private", makePublicButton: "Make public", diff --git a/src/config.ts b/src/config.ts index 4c202a973..7d6c25de7 100644 --- a/src/config.ts +++ b/src/config.ts @@ -30,6 +30,7 @@ export interface IVisualizerPanelElement { * * - `"bar"` * - `"vbar"` + * - `"line"` * - `"stackedbar"` * - `"pie"` * - `"doughnut"` diff --git a/src/plotly/histogram.ts b/src/plotly/histogram.ts index 86762c48d..3db58dbae 100644 --- a/src/plotly/histogram.ts +++ b/src/plotly/histogram.ts @@ -6,7 +6,7 @@ import { DocumentHelper } from "../utils"; export class HistogramPlotly extends HistogramModel { private _chartAdapter: PlotlyChartAdapter; - public static types = ["vbar", "bar", "scatter"]; + public static types = ["vbar", "bar", "line"]; constructor( question: Question, diff --git a/src/plotly/selectBase.ts b/src/plotly/selectBase.ts index 8c7e4647f..65b1bfeba 100644 --- a/src/plotly/selectBase.ts +++ b/src/plotly/selectBase.ts @@ -127,7 +127,7 @@ export class PlotlyChartAdapter { export class SelectBasePlotly extends SelectBase { private _chartAdapter: PlotlyChartAdapter; - public static types = ["bar", "pie", "doughnut", "scatter"]; + public static types = ["bar", "vbar", "pie", "doughnut", "line"]; public static displayModeBar: any = undefined; constructor( @@ -142,7 +142,7 @@ export class SelectBasePlotly extends SelectBase { this.chartTypes.push("stackedbar"); } if(options.allowExperimentalFeatures) { - this.chartTypes.splice(1, 0, "vbar"); + // this.chartTypes.splice(1, 0, "vbar"); } this._chartType = this.chartTypes[0]; if (this.chartTypes.indexOf(options.defaultChartType) !== -1) { diff --git a/src/plotly/setup.ts b/src/plotly/setup.ts index 895adaac3..0d40f6b29 100644 --- a/src/plotly/setup.ts +++ b/src/plotly/setup.ts @@ -32,6 +32,7 @@ export class PlotlySetup { static setups: { [type: string]: (model: SelectBase, answersData: IAnswersData) => PlotlyOptions } = { bar: PlotlySetup.setupBar, vbar: PlotlySetup.setupVBar, + line: PlotlySetup.setupVBar, stackedbar: PlotlySetup.setupBar, doughnut: PlotlySetup.setupPie, pie: PlotlySetup.setupPie, @@ -282,6 +283,21 @@ export class PlotlySetup { seriesLabels, } = answersData; + if(model.type !== "histogram") { + labels = [].concat(labels).reverse(); + colors = [].concat(colors.slice(0, labels.length)).reverse(); + const ts = []; + texts.forEach(text => { + ts.push([].concat(text).reverse()); + }); + texts = ts; + const ds = []; + datasets.forEach(dataset => { + ds.push([].concat(dataset).reverse()); + }); + datasets = ds; + } + const traces: any = []; const hasSeries = seriesLabels.length > 1 || model.question.getType() === "matrix"; @@ -305,10 +321,10 @@ export class PlotlySetup { }; const traceConfig: any = { - type: "bar", + type: model.chartType === "line" ? "line" : "bar", customdata: hasSeries ? seriesLabels : labels, hoverinfo: "x+y", - mode: "markers", + mode: model.chartType === "line" ? "lines+markers" : "markers", textposition: "none", width: 0.5, bargap: 0.5, diff --git a/src/selectBase.ts b/src/selectBase.ts index fbd4f022c..364a04048 100644 --- a/src/selectBase.ts +++ b/src/selectBase.ts @@ -234,7 +234,7 @@ export class SelectBase this.emptyAnswersBtn.innerText = this._hideEmptyAnswers ? localization.getString("showEmptyAnswers") : localization.getString("hideEmptyAnswers"); - if (this.chartType == "bar" || this.chartType == "vbar" || this.chartType == "scatter") { + if (this.chartType == "bar" || this.chartType == "vbar" || this.chartType == "line" || this.chartType == "scatter") { this.emptyAnswersBtn.style.display = "inline"; } else { this.emptyAnswersBtn.style.display = "none"; @@ -260,6 +260,7 @@ export class SelectBase if ( this.chartType == "bar" || this.chartType == "vbar" || + this.chartType == "line" || this.chartType == "scatter" || ((this.chartType == "pie" || this.chartType == "doughnut") && this.topN > 0) diff --git a/src/visualizationPanel.ts b/src/visualizationPanel.ts index 8e75cb7a9..398e109ae 100644 --- a/src/visualizationPanel.ts +++ b/src/visualizationPanel.ts @@ -220,7 +220,7 @@ export interface IVisualizationPanelOptions { * - Date, Number: `"bar"` | `"scatter"` * - Matrix: `"bar"` | `"pie"` | `"doughnut"` | `"stackedbar"` * - Rating: `"bar"` | `"scatter"` | `"gauge"` | `"bullet"` - * - Radiogroup, Checkbox, Dropdown, Image Picker: `"bar"` | `"pie"` | `"doughnut"` | `"scatter"` + * - Radiogroup, Checkbox, Dropdown, Image Picker: `"bar"` | `"pie"` | `"doughnut"` | `"scatter"` | `"line"` * * To set a type for an individual chart, access this chart in the `visualizers` array and set its `chartType` property to one of the values described above: *