Resolved #461 - Implement line charts, Resolved #464 - Make Vertical …

…Bar for discrete data available for everyone, Resolved #465 - Remove the Scatter visualizer as it doesn't visualize data properly

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",

src/config.ts

@@ -30,6 +30,7 @@ export interface IVisualizerPanelElement {
    *
    * - `"bar"`
    * - `"vbar"`
+   * - `"line"`
    * - `"stackedbar"`
    * - `"pie"`
    * - `"doughnut"`

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,

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) {

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,

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)

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:
    *