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

Linear
Spline
Horizontal-Vertical
Vertical-Horizontal
This commit is contained in:
Eric Radman
2025-11-25 11:43:15 -05:00
committed by GitHub
parent b6f4159be9
commit b5781a8ebe
9 changed files with 62 additions and 6 deletions

View File

@@ -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>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -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;
}