feat: support line strokeWidth (#105)

zhaoyongjie · Nov 24, 2021 · 96f15dd · 96f15dd
1 parent b0036ef
commit 96f15dd
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 5 deletions.
diff --git a/...ges/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/Line/stories/timeShift.tsx b/...ges/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/Line/stories/timeShift.tsx
@@ -63,6 +63,16 @@ export default [
                   },
                   legend: false,
                 },
+                strokeWidth: {
+                  field: 'snapshot',
+                  type: 'nominal',
+                  scale: {
+                    type: 'ordinal',
+                    domain: ['Current', 'Last year'],
+                    range: [3, 1.5],
+                  },
+                  legend: false,
+                },
               },
             },
             height: 400,

diff --git a/...erset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/DefaultTooltipRenderer.tsx b/...erset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/DefaultTooltipRenderer.tsx
@@ -27,7 +27,7 @@ export default function DefaultTooltipRenderer({
               .filter(({ key }) => series[key])
               .concat()
               .sort((a, b) => series[b.key].y - series[a.key].y)
-              .map(({ key, stroke, strokeDasharray }) => ({
+              .map(({ key, stroke, strokeDasharray, strokeWidth }) => ({
                 key,
                 keyColumn: (
                   <>
@@ -37,7 +37,7 @@ export default function DefaultTooltipRenderer({
                         y1="3"
                         y2="3"
                         stroke={stroke}
-                        strokeWidth="2"
+                        strokeWidth={strokeWidth}
                         strokeDasharray={strokeDasharray}
                       />
                     </svg>

diff --git a/...t-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/Encoder.ts b/...t-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/Encoder.ts
@@ -9,6 +9,7 @@ const channelTypes = {
   fill: 'Category',
   stroke: 'Color',
   strokeDasharray: 'Category',
+  strokeWidth: 'Numeric',
   x: 'X',
   y: 'Y',
 } as const;
@@ -21,9 +22,10 @@ export type ChannelTypes = typeof channelTypes;
 export interface Outputs {
   x: number | null;
   y: number | null;
-  stroke: string;
   fill: boolean;
+  stroke: string;
   strokeDasharray: string;
+  strokeWidth: number;
 }
 
 /**
@@ -36,6 +38,7 @@ export default class Encoder extends AbstractEncoder<ChannelTypes, Outputs> {
     fill: { value: false },
     stroke: { value: '#222' },
     strokeDasharray: { value: '' },
+    strokeWidth: { value: 1 },
     x: { field: 'x', type: 'quantitative' },
     y: { field: 'y', type: 'quantitative' },
   };

diff --git a/...set-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/Line.tsx b/...set-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/Line.tsx
@@ -66,6 +66,7 @@ export interface Series {
   stroke: Outputs['stroke'];
   fill: Outputs['fill'];
   strokeDasharray: Outputs['strokeDasharray'];
+  strokeWidth: Outputs['strokeWidth'];
   values: SeriesValue[];
 }
 
@@ -120,6 +121,7 @@ export default class LineChart extends PureComponent<Props> {
         fill: channels.fill.encode(firstDatum, false),
         stroke: channels.stroke.encode(firstDatum, '#222'),
         strokeDasharray: channels.strokeDasharray.encode(firstDatum, ''),
+        strokeWidth: channels.strokeWidth.encode(firstDatum, 1),
         values: [],
       };
 
@@ -160,7 +162,7 @@ export default class LineChart extends PureComponent<Props> {
               interpolation="linear"
               fill={`url(#${gradientId})`}
               stroke={series.stroke}
-              strokeWidth={1.5}
+              strokeWidth={series.strokeWidth}
             />,
           ];
         }),
@@ -176,7 +178,7 @@ export default class LineChart extends PureComponent<Props> {
           data={series.values}
           stroke={series.stroke}
           strokeDasharray={series.strokeDasharray}
-          strokeWidth={1.5}
+          strokeWidth={series.strokeWidth}
         />
       ));