Add lineShape option for Line and Area charts (#7582)

Linear
Spline
Horizontal-Vertical
Vertical-Horizontal

Author: eradman

viz-lib/src/visualizations/chart/Editor/GeneralSettings.tsx

@@ -336,6 +336,38 @@ export default function GeneralSettings({ options, data, onOptionsChange }: any)
         </Section>
       )}
 
+      {includes(["line", "area"], options.globalSeriesType) && (
+        // @ts-expect-error ts-migrate(2745) FIXME: This JSX tag's 'children' prop expects type 'never... Remove this comment to see the full error message
+        <Section>
+          <Select
+            label="Line Shape"
+            data-test="Chart.LineShape"
+            defaultValue={options.lineShape}
+            onChange={(val: any) => onOptionsChange({ lineShape: val })}>
+            {/* @ts-expect-error ts-migrate(2339) FIXME: Property 'Option' does not exist on type '({ class... Remove this comment to see the full error message */}
+            <Select.Option value="linear" data-test="Chart.LineShape.Linear">
+              Linear
+              {/* @ts-expect-error ts-migrate(2339) FIXME: Property 'Option' does not exist on type '({ class... Remove this comment to see the full error message */}
+            </Select.Option>
+            {/* @ts-expect-error ts-migrate(2339) FIXME: Property 'Option' does not exist on type '({ class... Remove this comment to see the full error message */}
+            <Select.Option value="spline" data-test="Chart.LineShape.Spline">
+              Spline
+              {/* @ts-expect-error ts-migrate(2339) FIXME: Property 'Option' does not exist on type '({ class... Remove this comment to see the full error message */}
+            </Select.Option>
+            {/* @ts-expect-error ts-migrate(2339) FIXME: Property 'Option' does not exist on type '({ class... Remove this comment to see the full error message */}
+            <Select.Option value="hv" data-test="Chart.LineShape.HorizontalVertical">
+              Horizontal-Vertical
+              {/* @ts-expect-error ts-migrate(2339) FIXME: Property 'Option' does not exist on type '({ class... Remove this comment to see the full error message */}
+            </Select.Option>
+            {/* @ts-expect-error ts-migrate(2339) FIXME: Property 'Option' does not exist on type '({ class... Remove this comment to see the full error message */}
+            <Select.Option value="vh" data-test="Chart.LineShape.VerticalHorizontal">
+              Vertical-Horizontal
+              {/* @ts-expect-error ts-migrate(2339) FIXME: Property 'Option' does not exist on type '({ class... Remove this comment to see the full error message */}
+            </Select.Option>
+          </Select>
+        </Section>
+      )}
+
       {!includes(["custom", "heatmap", "bubble"], options.globalSeriesType) && (
         // @ts-expect-error ts-migrate(2745) FIXME: This JSX tag's 'children' prop expects type 'never... Remove this comment to see the full error message
         <Section>

viz-lib/src/visualizations/chart/getOptions.ts

@@ -18,6 +18,7 @@ const DEFAULT_OPTIONS = {
   coefficient: 1,
   piesort: true,
   color_scheme: "Redash",
+  lineShape: "linear",
 
   // showDataLabels: false, // depends on chart type
   numberFormat: "0,0[.]00000",

viz-lib/src/visualizations/chart/plotly/fixtures/prepareData/line-area/default.json

@@ -20,7 +20,8 @@
         "x": "x",
         "y1": "y"
       },
-      "missingValuesAsZero": true
+      "missingValuesAsZero": true,
+      "lineShape": "linear"
     },
     "data": [
       {
@@ -46,6 +47,7 @@
         "hoverinfo": "text+x+name",
         "hover": [],
         "text": ["10 ± 0", "20 ± 0", "30 ± 0", "40 ± 0"],
+        "line": { "shape": "linear" },
         "marker": { "color": "red" },
         "insidetextfont": { "color": "#ffffff" },
         "yaxis": "y"

viz-lib/src/visualizations/chart/plotly/fixtures/prepareData/line-area/keep-missing-values.json

@@ -21,7 +21,8 @@
         "x": "x",
         "y1": "y"
       },
-      "missingValuesAsZero": false
+      "missingValuesAsZero": false,
+      "lineShape": "linear"
     },
     "data": [
       {
@@ -54,6 +55,7 @@
         "hoverinfo": "text+x+name",
         "hover": [],
         "text": ["10 ± 0", "20 ± 0", "30 ± 0", "40 ± 0"],
+        "line": { "shape": "linear" },
         "marker": { "color": "red" },
         "insidetextfont": { "color": "#ffffff" },
         "yaxis": "y"
@@ -68,6 +70,7 @@
         "hoverinfo": "text+x+name",
         "hover": [],
         "text": ["", "2 ± 0", "", "4 ± 0"],
+        "line": { "shape": "linear" },
         "marker": { "color": "blue" },
         "insidetextfont": { "color": "#ffffff" },
         "yaxis": "y"

viz-lib/src/visualizations/chart/plotly/fixtures/prepareData/line-area/missing-values-0.json

@@ -21,7 +21,8 @@
         "x": "x",
         "y1": "y"
       },
-      "missingValuesAsZero": true
+      "missingValuesAsZero": true,
+      "lineShape": "linear"
     },
     "data": [
       {
@@ -54,6 +55,7 @@
         "hoverinfo": "text+x+name",
         "hover": [],
         "text": ["10 ± 0", "20 ± 0", "30 ± 0", "40 ± 0"],
+        "line": { "shape": "linear" },
         "marker": { "color": "red" },
         "insidetextfont": { "color": "#ffffff" },
         "yaxis": "y"
@@ -68,6 +70,7 @@
         "hoverinfo": "text+x+name",
         "hover": [],
         "text": ["0", "2 ± 0", "0", "4 ± 0"],
+        "line": { "shape": "linear" },
         "marker": { "color": "blue" },
         "insidetextfont": { "color": "#ffffff" },
         "yaxis": "y"

viz-lib/src/visualizations/chart/plotly/fixtures/prepareData/line-area/normalized-stacked.json

@@ -21,7 +21,8 @@
         "x": "x",
         "y1": "y"
       },
-      "missingValuesAsZero": true
+      "missingValuesAsZero": true,
+      "lineShape": "linear"
     },
     "data": [
       {
@@ -56,6 +57,7 @@
         "hoverinfo": "text+x+name",
         "hover": [],
         "text": ["20% (10 ± 0)", "40% (20 ± 0)", "60% (30 ± 0)", "80% (40 ± 0)"],
+        "line": { "shape": "linear" },
         "marker": { "color": "red" },
         "insidetextfont": { "color": "#ffffff" },
         "yaxis": "y"
@@ -70,6 +72,7 @@
         "hoverinfo": "text+x+name",
         "hover": [],
         "text": ["80% (40 ± 0)", "60% (30 ± 0)", "40% (20 ± 0)", "20% (10 ± 0)"],
+        "line": { "shape": "linear" },
         "marker": { "color": "blue" },
         "insidetextfont": { "color": "#ffffff" },
         "yaxis": "y"

viz-lib/src/visualizations/chart/plotly/fixtures/prepareData/line-area/normalized.json

@@ -21,7 +21,8 @@
         "x": "x",
         "y1": "y"
       },
-      "missingValuesAsZero": true
+      "missingValuesAsZero": true,
+      "lineShape": "linear"
     },
     "data": [
       {
@@ -56,6 +57,7 @@
         "hoverinfo": "text+x+name",
         "hover": [],
         "text": ["20% (10 ± 0)", "40% (20 ± 0)", "60% (30 ± 0)", "80% (40 ± 0)"],
+        "line": { "shape": "linear" },
         "marker": { "color": "red" },
         "insidetextfont": { "color": "#ffffff" },
         "yaxis": "y"
@@ -70,6 +72,7 @@
         "hoverinfo": "text+x+name",
         "hover": [],
         "text": ["80% (40 ± 0)", "60% (30 ± 0)", "40% (20 ± 0)", "20% (10 ± 0)"],
+        "line": { "shape": "linear" },
         "marker": { "color": "blue" },
         "insidetextfont": { "color": "#ffffff" },
         "yaxis": "y"

viz-lib/src/visualizations/chart/plotly/fixtures/prepareData/line-area/stacked.json

@@ -21,7 +21,8 @@
         "x": "x",
         "y1": "y"
       },
-      "missingValuesAsZero": true
+      "missingValuesAsZero": true,
+      "lineShape": "linear"
     },
     "data": [
       {
@@ -56,6 +57,7 @@
         "hoverinfo": "text+x+name",
         "hover": [],
         "text": ["10 ± 0", "20 ± 0", "30 ± 0", "40 ± 0"],
+        "line": { "shape": "linear" },
         "marker": { "color": "red" },
         "insidetextfont": { "color": "#ffffff" },
         "yaxis": "y"
@@ -70,6 +72,7 @@
         "hoverinfo": "text+x+name",
         "hover": [],
         "text": ["1 ± 0", "2 ± 0", "3 ± 0", "4 ± 0"],
+        "line": { "shape": "linear" },
         "marker": { "color": "blue" },
         "insidetextfont": { "color": "#ffffff" },
         "yaxis": "y"

viz-lib/src/visualizations/chart/plotly/prepareDefaultData.ts

@@ -39,11 +39,17 @@ function prepareBarSeries(series: any, options: any, additionalOptions: any) {
 
 function prepareLineSeries(series: any, options: any) {
   series.mode = "lines" + (options.showDataLabels ? "+text" : "");
+  series.line = {
+    shape: options.lineShape,
+  }
   return series;
 }
 
 function prepareAreaSeries(series: any, options: any) {
   series.mode = "lines" + (options.showDataLabels ? "+text" : "");
+  series.line = {
+    shape: options.lineShape,
+  }
   series.fill = options.series.stacking ? "tonexty" : "tozeroy";
   return series;
 }