feat: Add ECharts Timeseries plugin (#737)

* make it work

* Add color scheme and timeseries limits

* latest improvements

* bump

* moving dependencies to plugin

* Shuffling logic to transformProps, making Typescript happy.

* zoom controls!

* declaration for the dang PNG files

* Revert "declaration for the dang PNG files"

This reverts commit b37f010.

* PIE! (super basic)

* lowercase import name, moving types.

* capitalization fix

* nixing console log

* removing echarts peer dependency (missed it earlier)

* basic pie controls/types

* typescript fixes and whatnot

* yarn alphabetizing peerDependencies

* fixing Pie chart typing

* less enthusiasm

* fixing resize and data redraw quirks

* fixing zoom display quirks

* add predictive analytics

* fix controls

* improve typing and tests

* add rebasing to forecasts

* improve stacking etc

* Minor improvements

* add tooltip

* Charts draw and resize correctly

* clean up code

* lint

* yet more lint

* fix unit tests

* fix unit tests

* fix tests

* add useEchartsComponent and address comments

* address comments

* address more comments

* Add Echart component

* bump echarts to 4.9.0

* clean up Echart component

* add storybook

* replace radios with boolean

* address review comments

Co-authored-by: Evan Rusackas <[email protected]>

Author: villebro

packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Stories.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/chart';
+import { boolean, number, select, withKnobs } from '@storybook/addon-knobs';
+import { EchartsTimeseriesChartPlugin } from '@superset-ui/plugin-chart-echarts';
+import transformProps from '@superset-ui/plugin-chart-echarts/lib/Timeseries/transformProps';
+import { withResizableChartDemo } from '../../../shared/components/ResizableChartDemo';
+import data from './data';
+
+new EchartsTimeseriesChartPlugin().configure({ key: 'echarts-timeseries' }).register();
+
+getChartTransformPropsRegistry().registerValue('echarts-timeseries', transformProps);
+
+export default {
+  title: 'Chart Plugins|plugin-chart-echarts',
+  decorators: [withKnobs, withResizableChartDemo],
+};
+
+export const Timeseries = ({ width, height }) => {
+  const forecastEnabled = boolean('Enable forecast', true);
+  const queryData = data
+    .map(row =>
+      forecastEnabled
+        ? row
+        : {
+            __timestamp: row.__timestamp,
+            Boston: row.Boston,
+            California: row.California,
+            WestTexNewMexico: row.WestTexNewMexico,
+          },
+    )
+    .filter(row => forecastEnabled || !!row.Boston);
+  return (
+    <SuperChart
+      chartType="echarts-timeseries"
+      width={width}
+      height={height}
+      queryData={{ data: queryData }}
+      formData={{
+        contributionMode: undefined,
+        forecastEnabled,
+        colorScheme: 'supersetColors',
+        seriesType: select(
+          'Line type',
+          ['line', 'scatter', 'smooth', 'bar', 'start', 'middle', 'end'],
+          'line',
+        ),
+        logAxis: boolean('Log axis', false),
+        yAxisFormat: 'SMART_NUMBER',
+        stack: boolean('Stack', false),
+        area: boolean('Area chart', false),
+        markerEnabled: boolean('Enable markers', false),
+        markerSize: number('Marker Size', 6),
+        minorSplitLine: boolean('Minor splitline', false),
+        opacity: number('Opacity', 0.2),
+        zoomable: boolean('Zoomable', false),
+      }}
+    />
+  );
+};