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 b37f01076e36ba2b05424f861187a182f4d327d6. * 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 <evan@preset.io>
apache · Nov 26, 2021 · e916fd9 · e916fd9
1 parent 9f1aafa
commit e916fd9
Show file tree

Hide file tree

Showing 31 changed files with 5,979 additions and 13 deletions.
diff --git a/...t-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Stories.tsx b/...t-ui/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),
+      }}
+    />
+  );
+};