refactor: rename channel color to stroke (#100)

* refactor: rename channel color to stroke * fix: legend item color and types * feat: can override createTooltip * refactor: renderTooltip
zhaoyongjie · Nov 24, 2021 · 0e4ff5a · 0e4ff5a
1 parent a66ccc4
commit 0e4ff5a
Show file tree

Hide file tree

Showing 13 changed files with 126 additions and 86 deletions.
diff --git a/...ackages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/Line/stories/basic.tsx b/...ackages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/Line/stories/basic.tsx
@@ -51,7 +51,7 @@ export default [
                     ),
                   },
                 },
-                color: {
+                stroke: {
                   field: 'name',
                   type: 'nominal',
                   legend: true,

diff --git a/...kages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/Line/stories/missing.tsx b/...kages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/Line/stories/missing.tsx
@@ -43,7 +43,7 @@ export default [
                     title: 'Score',
                   },
                 },
-                color: {
+                stroke: {
                   field: 'name',
                   type: 'nominal',
                   scale: {},

diff --git a/...ackages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/Line/stories/query.tsx b/...ackages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/Line/stories/query.tsx
@@ -54,7 +54,7 @@ export default [
                 title: 'Number of Babies',
               },
             },
-            color: {
+            stroke: {
               field: 'gender',
               type: 'nominal',
               legend: true,

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
@@ -38,7 +38,7 @@ export default [
                     title: 'Score',
                   },
                 },
-                color: {
+                stroke: {
                   value: '#1abc9c',
                   type: 'nominal',
                   scale: false,

diff --git a/...lugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/ChartFormData.ts b/...lugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/ChartFormData.ts
@@ -1,10 +1,12 @@
 import { ChartFormData } from '@superset-ui/chart';
 import { Margin } from '@superset-ui/dimension';
+import { ChartTheme } from '@data-ui/theme';
 import { Encoding } from './Encoder';
 
 type LineFormData = ChartFormData & {
   encoding: Encoding;
   margin?: Margin;
+  theme?: ChartTheme;
 };
 
 export default LineFormData;
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
@@ -6,8 +6,8 @@ import { EncodingFromChannelsAndOutputs } from '../encodeable/types/Channel';
  * Define channel types
  */
 const channelTypes = {
-  color: 'Color',
   fill: 'Category',
+  stroke: 'Color',
   strokeDasharray: 'Category',
   x: 'X',
   y: 'Y',
@@ -21,7 +21,7 @@ export type ChannelTypes = typeof channelTypes;
 export interface Outputs {
   x: number | null;
   y: number | null;
-  color: string;
+  stroke: string;
   fill: boolean;
   strokeDasharray: string;
 }
@@ -33,8 +33,8 @@ export type Encoding = EncodingFromChannelsAndOutputs<ChannelTypes, Outputs>;
 
 export default class Encoder extends AbstractEncoder<ChannelTypes, Outputs> {
   static readonly DEFAULT_ENCODINGS: Encoding = {
-    color: { value: '#222' },
     fill: { value: false },
+    stroke: { value: '#222' },
     strokeDasharray: { value: '' },
     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
@@ -14,20 +14,33 @@ import { chartTheme, ChartTheme } from '@data-ui/theme';
 import { Margin, Dimension } from '@superset-ui/dimension';
 
 import { createSelector } from 'reselect';
-import createTooltip from './createTooltip';
 import XYChartLayout from '../utils/XYChartLayout';
 import WithLegend from '../components/WithLegend';
 import Encoder, { ChannelTypes, Encoding, Outputs } from './Encoder';
 import { Dataset, PlainObject } from '../encodeable/types/Data';
 import ChartLegend from '../components/legend/ChartLegend';
 import { PartialSpec } from '../encodeable/types/Specification';
+import defaultTooltip from './renderTooltip';
 
 chartTheme.gridStyles.stroke = '#f1f3f5';
 
 const DEFAULT_MARGIN = { top: 20, right: 20, left: 20, bottom: 20 };
 
+export interface TooltipInput {
+  encoder: Encoder;
+  allSeries: Series[];
+  datum: SeriesValue;
+  series: {
+    [key: string]: {
+      y: number;
+    };
+  };
+  theme: ChartTheme;
+}
+
 const defaultProps = {
   className: '',
+  renderTooltip: defaultTooltip,
   margin: DEFAULT_MARGIN,
   theme: chartTheme,
 };
@@ -39,12 +52,13 @@ type Props = {
   margin?: Margin;
   data: Dataset;
   theme?: ChartTheme;
+  renderTooltip?: React.ComponentType<TooltipInput>;
 } & PartialSpec<Encoding> &
   Readonly<typeof defaultProps>;
 
 export interface Series {
   key: string;
-  color: Outputs['color'];
+  stroke: Outputs['stroke'];
   fill: Outputs['fill'];
   strokeDasharray: Outputs['strokeDasharray'];
   values: SeriesValue[];
@@ -85,7 +99,7 @@ class LineChart extends PureComponent<Props> {
 
   renderChart(dim: Dimension) {
     const { width, height } = dim;
-    const { data, margin, theme } = this.props;
+    const { data, margin, theme, renderTooltip } = this.props;
 
     const { channels } = this.encoder;
     const fieldNames = this.encoder.getGroupBys();
@@ -96,9 +110,9 @@ class LineChart extends PureComponent<Props> {
       const firstDatum = seriesData[0];
       const key = fieldNames.map(f => firstDatum[f]).join(',');
       const series: Series = {
-        key: kebabCase(key.length === 0 ? channels.y.definition.field : key),
-        color: channels.color.encode(firstDatum, '#222'),
+        key: key.length === 0 ? channels.y.definition.field : key,
         fill: channels.fill.encode(firstDatum, false),
+        stroke: channels.stroke.encode(firstDatum, '#222'),
         strokeDasharray: channels.strokeDasharray.encode(firstDatum, ''),
         values: [],
       };
@@ -124,13 +138,13 @@ class LineChart extends PureComponent<Props> {
       allSeries
         .filter(({ fill }) => fill)
         .map(series => {
-          const gradientId = uniqueId(`gradient-${series.key}`);
+          const gradientId = uniqueId(kebabCase(`gradient-${series.key}`));
 
           return [
             <LinearGradient
               key={`${series.key}-gradient`}
               id={gradientId}
-              from={series.color}
+              from={series.stroke}
               to="#fff"
             />,
             <AreaSeries
@@ -139,7 +153,7 @@ class LineChart extends PureComponent<Props> {
               data={series.values}
               interpolation="linear"
               fill={`url(#${gradientId})`}
-              stroke={series.color}
+              stroke={series.stroke}
               strokeWidth={1.5}
             />,
           ];
@@ -154,7 +168,7 @@ class LineChart extends PureComponent<Props> {
           seriesKey={series.key}
           interpolation="linear"
           data={series.values}
-          stroke={series.color}
+          stroke={series.stroke}
           strokeDasharray={series.strokeDasharray}
           strokeWidth={1.5}
         />
@@ -173,7 +187,27 @@ class LineChart extends PureComponent<Props> {
     });
 
     return layout.renderChartWithFrame((chartDim: Dimension) => (
-      <WithTooltip renderTooltip={createTooltip(this.encoder, allSeries)}>
+      <WithTooltip
+        renderTooltip={({
+          datum,
+          series,
+        }: {
+          datum: SeriesValue;
+          series: {
+            [key: string]: {
+              y: number;
+            };
+          };
+        }) =>
+          renderTooltip({
+            encoder: this.encoder,
+            allSeries,
+            theme,
+            datum,
+            series,
+          })
+        }
+      >
         {({
           onMouseLeave,
           onMouseMove,
@@ -207,11 +241,11 @@ class LineChart extends PureComponent<Props> {
               strokeDasharray=""
               showHorizontalLine={false}
               circleFill={(d: SeriesValue) =>
-                d.y === tooltipData.datum.y ? d.parent.color : '#fff'
+                d.y === tooltipData.datum.y ? d.parent.stroke : '#fff'
               }
               circleSize={(d: SeriesValue) => (d.y === tooltipData.datum.y ? 6 : 4)}
               circleStroke={(d: SeriesValue) =>
-                d.y === tooltipData.datum.y ? '#fff' : d.parent.color
+                d.y === tooltipData.datum.y ? '#fff' : d.parent.stroke
               }
               circleStyles={CIRCLE_STYLE}
               stroke="#ccc"

diff --git a/...ugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/createTooltip.tsx b/...ugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/createTooltip.tsx
diff --git a/...uperset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/legacy/transformProps.ts b/...uperset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/legacy/transformProps.ts
@@ -51,7 +51,7 @@ export default function transformProps(chartProps: ChartProps) {
           title: yAxisLabel,
         },
       },
-      color: {
+      stroke: {
         field: 'name',
         type: 'nominal',
         scale: {

diff --git a/...ugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/renderTooltip.tsx b/...ugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/renderTooltip.tsx
@@ -0,0 +1,55 @@
+/* eslint-disable no-magic-numbers */
+
+import React from 'react';
+import { chartTheme } from '@data-ui/theme';
+import TooltipFrame from '../components/tooltip/TooltipFrame';
+import TooltipTable from '../components/tooltip/TooltipTable';
+import { TooltipInput } from './Line';
+
+const MARK_STYLE = { marginRight: 4 };
+
+export default function renderTooltip({
+  allSeries,
+  datum,
+  encoder,
+  series = {},
+  theme = chartTheme,
+}: TooltipInput) {
+  return (
+    <TooltipFrame>
+      <>
+        <div style={{ fontFamily: theme.labelStyles.fontFamily }}>
+          <strong>{encoder.channels.x.formatValue(datum.x)}</strong>
+        </div>
+        <br />
+        {series && (
+          <TooltipTable
+            data={allSeries
+              .filter(({ key }) => series[key])
+              .concat()
+              .sort((a, b) => series[b.key].y - series[a.key].y)
+              .map(({ key, stroke, strokeDasharray }) => ({
+                key,
+                keyColumn: (
+                  <>
+                    <svg width="12" height="8" style={MARK_STYLE}>
+                      <line
+                        x2="12"
+                        y1="3"
+                        y2="3"
+                        stroke={stroke}
+                        strokeWidth="2"
+                        strokeDasharray={strokeDasharray}
+                      />
+                    </svg>
+                    {series[key] === datum ? <b>{key}</b> : key}
+                  </>
+                ),
+                valueColumn: encoder.channels.y.formatValue(series[key].y),
+              }))}
+          />
+        )}
+      </>
+    </TooltipFrame>
+  );
+}
diff --git a/...ugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/transformProps.ts b/...ugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/transformProps.ts
@@ -1,9 +1,11 @@
 import { ChartProps } from '@superset-ui/chart';
+import ChartFormData from './ChartFormData';
 
 /* eslint-disable sort-keys */
 
 export default function transformProps(chartProps: ChartProps) {
-  const { width, height, formData, payload } = chartProps;
+  const { width, height, payload } = chartProps;
+  const formData = chartProps.formData as ChartFormData;
   const { encoding, margin, theme } = formData;
   const { data } = payload;
 

diff --git a/...set-ui-plugins/packages/superset-ui-preset-chart-xy/src/components/legend/ChartLegend.tsx b/...set-ui-plugins/packages/superset-ui-preset-chart-xy/src/components/legend/ChartLegend.tsx
@@ -21,15 +21,18 @@ const LEGEND_CONTAINER_STYLE: CSSProperties = {
   position: 'relative',
 };
 
-type Props<Encoder, ChannelTypes> = {
-  data: Dataset;
-  encoder: Encoder;
+export type Hooks<ChannelTypes> = {
   LegendGroupRenderer?: LegendGroupRendererType<ChannelTypes>;
   LegendItemRenderer?: LegendItemRendererType<ChannelTypes>;
   LegendItemMarkRenderer?: LegendItemMarkRendererType<ChannelTypes>;
   LegendItemLabelRenderer?: LegendItemLabelRendererType<ChannelTypes>;
 };
 
+export type Props<Encoder, ChannelTypes> = {
+  data: Dataset;
+  encoder: Encoder;
+} & Hooks<ChannelTypes>;
+
 export default class ChartLegend<
   ChannelTypes extends ObjectWithKeysFromAndValueType<Outputs, ChannelType>,
   Outputs extends ObjectWithKeysFromAndValueType<Encoding, Value>,