feat: update tooltip and use selector (#31)

superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/Line/stories/missing.tsx

@@ -8,7 +8,7 @@ const missingData = {
   keys: data.keys,
   values: data.values.map(({ y, ...rest }) => ({
     ...rest,
-    y: Math.random() < 0.05 ? null : y,
+    y: Math.random() < 0.25 ? null : y,
   })),
 };
 

superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/tsconfig.json

@@ -1,23 +1,28 @@
 {
   "compilerOptions": {
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
     "baseUrl": ".",
     "outDir": "./dist",
-    "module": "commonjs",
+    "esModuleInterop": true,
-    "target": "es5",
-    "lib": ["es6", "dom"],
-    "sourceMap": true,
-    "allowJs": true,
-    "jsx": "react",
-    "moduleResolution": "node",
     "forceConsistentCasingInFileNames": true,
+    "importHelpers": true,
+    "jsx": "react",
+    "lib": ["dom", "esnext"],
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
     "noImplicitReturns": true,
     "noImplicitThis": true,
     "noImplicitAny": true,
-    "importHelpers": true,
+    "noUnusedLocals": true,
+    "pretty": true,
+    "removeComments": false,
     "strictNullChecks": true,
     "suppressImplicitAnyIndexErrors": true,
-    "noUnusedLocals": true,
+    "skipLibCheck": true,
-    "skipLibCheck": true
+    "sourceMap": true,
+    "target": "esnext"
   },
   "include": ["./storybook/stories/**/*", "../superset-ui-*/src/**/*", "./src/**/*", "./spec/**/*"]
 }

superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/Line.tsx

@@ -12,6 +12,7 @@ import {
 import { chartTheme, ChartTheme } from '@data-ui/theme';
 import { Margin, Dimension } from '@superset-ui/dimension';
 import { groupBy, flatMap, uniqueId, values } from 'lodash';
+import { createSelector } from 'reselect';
 import createTooltip from './createTooltip';
 import XYChartLayout from '../utils/XYChartLayout';
 import WithLegend from '../components/WithLegend';
@@ -59,13 +60,22 @@ class LineChart extends PureComponent<Props> {
 
   constructor(props: Props) {
     super(props);
-    const { encoding } = this.props;
 
-    this.encoder = new Encoder({ encoding });
+    const createEncoder = createSelector(
+      (enc: Encoding) => enc,
+      (enc: Encoding) => new Encoder({ encoding: enc }),
+    );
+
+    this.createEncoder = () => {
+      this.encoder = createEncoder(this.props.encoding);
+    };
+
+    this.encoder = createEncoder(this.props.encoding);
     this.renderChart = this.renderChart.bind(this);
   }
 
   encoder: Encoder;
+  private createEncoder: () => void;
 
   renderChart(dim: Dimension) {
     const { width, height } = dim;
@@ -113,6 +123,7 @@ class LineChart extends PureComponent<Props> {
             />,
             <AreaSeries
               key={`${series.key}-fill`}
+              seriesKey={series.key}
               data={series.values}
               interpolation="linear"
               fill={`url(#${gradientId})`}
@@ -202,9 +213,9 @@ class LineChart extends PureComponent<Props> {
   }
 
   render() {
-    const { className, data, width, height, encoding } = this.props;
+    const { className, data, width, height } = this.props;
 
-    this.encoder = new Encoder({ encoding });
+    this.createEncoder();
     const renderLegend = this.encoder.hasLegend()
       ? // eslint-disable-next-line react/jsx-props-no-multi-spaces
         () => <ChartLegend<ChannelTypes, Outputs, Encoding> data={data} encoder={this.encoder} />

superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/createTooltip.tsx

@@ -6,6 +6,8 @@ import TooltipTable from '../components/tooltip/TooltipTable';
 import { Series, SeriesValue } from './Line';
 import Encoder from './Encoder';
 
+const MARK_STYLE = { marginRight: 4 };
+
 export default function createTooltip(encoder: Encoder, allSeries: Series[]) {
   function LineTooltip({
     datum,
@@ -31,13 +33,24 @@ export default function createTooltip(encoder: Encoder, allSeries: Series[]) {
                 .filter(({ key }) => series[key])
                 .concat()
                 .sort((a, b) => series[b.key].y - series[a.key].y)
-                .map(({ key, color }) => ({
+                .map(({ key, color, strokeDasharray }) => ({
                   key,
-                  keyStyle: {
+                  keyColumn: (
-                    color,
+                    <>
-                    fontWeight: series[key] === datum ? 600 : 200,
+                      <svg width="12" height="8" style={MARK_STYLE}>
-                  },
+                        <line
-                  value: encoder.channels.y.formatValue(series[key].y),
+                          x2="12"
+                          y1="3"
+                          y2="3"
+                          stroke={color}
+                          strokeWidth="2"
+                          strokeDasharray={strokeDasharray}
+                        />
+                      </svg>
+                      {series[key] === datum ? <b>{key}</b> : key}
+                    </>
+                  ),
+                  valueColumn: encoder.channels.y.formatValue(series[key].y),
                 }))}
             />
           )}

superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/components/tooltip/TooltipTable.tsx

@@ -1,11 +1,12 @@
-import React, { CSSProperties, PureComponent } from 'react';
+import React, { CSSProperties, PureComponent, ReactNode } from 'react';
 
 type Props = {
   className?: string;
   data: {
-    key: string;
+    key: string | number;
+    keyColumn: ReactNode;
     keyStyle?: CSSProperties;
-    value: string | number;
+    valueColumn: ReactNode;
     valueStyle?: CSSProperties;
   }[];
 };
@@ -24,11 +25,11 @@ export default class TooltipTable extends PureComponent<Props, {}> {
     return (
       <table className={className}>
         <tbody>
-          {data.map(({ key, keyStyle, value, valueStyle }) => (
+          {data.map(({ key, keyColumn, keyStyle, valueColumn, valueStyle }, i) => (
             <tr key={key}>
-              <td style={keyStyle}>{key}</td>
+              <td style={keyStyle}>{keyColumn}</td>
               <td style={valueStyle ? { ...VALUE_CELL_STYLE, ...valueStyle } : VALUE_CELL_STYLE}>
-                {value}
+                {valueColumn}
               </td>
             </tr>
           ))}