feat(plugin-chart-echarts): Echarts Treemap (#1094)

* feat(plugin-chart-echarts): add echarts treemap plugin

* fix(plugin-chart-echarts): add sort descending

* fix(plugin-chart-echarts): add label position and set clear before setOption

* fix(plugin-chart-echarts): metric -> metrics

* fix(plugin-chart-echarts): change thumbnail.

* fix(plugin-chart-echarts): fix treemap transformProps test

* fix(plugin-chart-echarts): clear nouse types

* fix(plugin-chart-echarts): storybook data

* fix(plugin-chart-echarts): remove features

* fix(plugin-chart-echarts): add forceClear

* fix(plugin-chart-echarts): change storybook data

* fix(plugin-chart-echarts): enhancements

* fix(plugin-chart-echarts): enhancements for color and fix ci

superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/.storybook/preview.js

@@ -1,6 +1,7 @@
 import { addParameters, addDecorator } from '@storybook/react';
 import { jsxDecorator } from 'storybook-addon-jsx';
 import categoricalD3 from '@superset-ui/core/lib/color/colorSchemes/categorical/d3';
+import categoricalSuperset from '@superset-ui/core/lib/color/colorSchemes/categorical/superset';
 import sequentialCommon from '@superset-ui/core/lib/color/colorSchemes/sequential/common';
 import sequentialD3 from '@superset-ui/core/lib/color/colorSchemes/sequential/d3';
 import {
@@ -55,7 +56,7 @@ configure();
 
 // Register color schemes
 const categoricalSchemeRegistry = getCategoricalSchemeRegistry();
-[categoricalD3].forEach(group => {
+[categoricalD3, categoricalSuperset].forEach(group => {
   group.forEach(scheme => {
     categoricalSchemeRegistry.registerValue(scheme.id, scheme);
   });

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
+import { boolean, withKnobs, select } from '@storybook/addon-knobs';
+import { EchartsTreemapChartPlugin } from '@superset-ui/plugin-chart-echarts';
+import transformProps from '@superset-ui/plugin-chart-echarts/lib/Treemap/transformProps';
+import data from './data';
+import { withResizableChartDemo } from '../../../../shared/components/ResizableChartDemo';
+
+new EchartsTreemapChartPlugin().configure({ key: 'echarts-treemap' }).register();
+
+getChartTransformPropsRegistry().registerValue('echarts-treemap', transformProps);
+
+export default {
+  title: 'Chart Plugins|plugin-chart-echarts/Treemap',
+  decorators: [withKnobs, withResizableChartDemo],
+};
+
+export const Treemap = ({ width, height }) => {
+  return (
+    <SuperChart
+      chartType="echarts-treemap"
+      width={width}
+      height={height}
+      queriesData={[{ data }]}
+      formData={{
+        colorScheme: 'supersetColors',
+        groupby: ['gender', 'name'],
+        metrics: ['count', 'MIN(num_boys)'],
+        showLabels: boolean('Show labels', true),
+        showUpperLabels: boolean('Show upperLabels', true),
+        labelType: select('Treemap label type', ['key', 'value', 'key_value'], 'key_value'),
+      }}
+    />
+  );
+};

superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Treemap/data.ts

@@ -0,0 +1,50 @@
+export default [
+  {
+    genre: 'Action',
+    count: 3315,
+  },
+  {
+    genre: 'Adventure',
+    count: 1286,
+  },
+  {
+    genre: 'Fighting',
+    count: 848,
+  },
+  {
+    genre: 'Misc',
+    count: 1739,
+  },
+  {
+    genre: 'Platform',
+    count: 886,
+  },
+  {
+    genre: 'Puzzle',
+    count: 582,
+  },
+  {
+    genre: 'Racing',
+    count: 1249,
+  },
+  {
+    genre: 'Role-Playing',
+    count: 1487,
+  },
+  {
+    genre: 'Shooter',
+    count: 1310,
+  },
+  {
+    genre: 'Simulation',
+    count: 866,
+  },
+  {
+    genre: 'Sports',
+    count: 2346,
+  },
+  {
+    genre: 'Strategy',
+    count: 681,
+  },
+];

superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Treemap/EchartsTreemap.tsx

@@ -0,0 +1,25 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { EchartsProps } from '../types';
+import Echart from '../components/Echart';
+
+export default function EchartsTreemap({ height, width, echartOptions }: EchartsProps) {
+  return <Echart height={height} width={width} echartOptions={echartOptions} forceClear />;
+}

superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Treemap/buildQuery.ts

@@ -0,0 +1,27 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { buildQueryContext, QueryFormData } from '@superset-ui/core';
+
+export default function buildQuery(formData: QueryFormData) {
+  return buildQueryContext(formData, baseQueryObject => [
+    {
+      ...baseQueryObject,
+    },
+  ]);
+}

superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Treemap/controlPanel.tsx

@@ -0,0 +1,161 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { t } from '@superset-ui/core';
+import {
+  ControlPanelConfig,
+  D3_FORMAT_DOCS,
+  D3_FORMAT_OPTIONS,
+  D3_TIME_FORMAT_OPTIONS,
+  sections,
+} from '@superset-ui/chart-controls';
+import { DEFAULT_FORM_DATA } from './types';
+import { LABEL_POSITION } from '../constants';
+
+const {
+  labelType,
+  labelPosition,
+  numberFormat,
+  showLabels,
+  showUpperLabels,
+  dateFormat,
+} = DEFAULT_FORM_DATA;
+
+const config: ControlPanelConfig = {
+  controlPanelSections: [
+    sections.legacyRegularTime,
+    {
+      label: t('Query'),
+      expanded: true,
+      controlSetRows: [
+        ['groupby'],
+        ['metrics'],
+        ['row_limit'],
+        ['timeseries_limit_metric'],
+        [
+          {
+            name: 'order_desc',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Sort Descending'),
+              default: true,
+              description: t('Whether to sort descending or ascending'),
+            },
+          },
+        ],
+        ['adhoc_filters'],
+      ],
+    },
+    {
+      label: t('Chart Options'),
+      expanded: true,
+      controlSetRows: [
+        ['color_scheme'],
+        [<h1 className="section-header">{t('Labels')}</h1>],
+        [
+          {
+            name: 'show_labels',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Show Labels'),
+              renderTrigger: true,
+              default: showLabels,
+              description: t('Whether to display the labels.'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'show_upper_labels',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Show Upper Labels'),
+              renderTrigger: true,
+              default: showUpperLabels,
+              description: t('Show labels when the node has children.'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'label_type',
+            config: {
+              type: 'SelectControl',
+              label: t('Label Type'),
+              default: labelType,
+              renderTrigger: true,
+              choices: [
+                ['Key', 'Key'],
+                ['value', 'Value'],
+                ['key_value', 'Category and Value'],
+              ],
+              description: t('What should be shown on the label?'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'label_position',
+            config: {
+              type: 'SelectControl',
+              freeForm: false,
+              label: t('Label position'),
+              renderTrigger: true,
+              choices: LABEL_POSITION,
+              default: labelPosition,
+              description: D3_FORMAT_DOCS,
+            },
+          },
+        ],
+        [
+          {
+            name: 'number_format',
+            config: {
+              type: 'SelectControl',
+              freeForm: true,
+              label: t('Number format'),
+              renderTrigger: true,
+              default: numberFormat,
+              choices: D3_FORMAT_OPTIONS,
+              description: `${t('D3 format syntax: https://github.com/d3/d3-format. ')} ${t(
+                'Only applies when "Label Type" is set to show values.',
+              )}`,
+            },
+          },
+        ],
+        [
+          {
+            name: 'date_format',
+            config: {
+              type: 'SelectControl',
+              freeForm: true,
+              label: t('Date format'),
+              renderTrigger: true,
+              choices: D3_TIME_FORMAT_OPTIONS,
+              default: dateFormat,
+              description: D3_FORMAT_DOCS,
+            },
+          },
+        ],
+      ],
+    },
+  ],
+};
+
+export default config;

superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Treemap/index.ts

@@ -0,0 +1,55 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regardin
+ * g copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { ChartMetadata, ChartPlugin, t } from '@superset-ui/core';
+import buildQuery from './buildQuery';
+import controlPanel from './controlPanel';
+import transformProps from './transformProps';
+import thumbnail from './images/thumbnail.png';
+import { EchartsTreemapChartProps, EchartsTreemapFormData } from './types';
+
+export default class EchartsTreemapChartPlugin extends ChartPlugin<
+  EchartsTreemapFormData,
+  EchartsTreemapChartProps
+> {
+  /**
+   * The constructor is used to pass relevant metadata and callbacks that get
+   * registered in respective registries that are used throughout the library
+   * and application. A more thorough description of each property is given in
+   * the respective imported file.
+   *
+   * It is worth noting that `buildQuery` and is optional, and only needed for
+   * advanced visualizations that require either post processing operations
+   * (pivoting, rolling aggregations, sorting etc) or submitting multiple queries.
+   */
+  constructor() {
+    super({
+      buildQuery,
+      controlPanel,
+      loadChart: () => import('./EchartsTreemap'),
+      metadata: new ChartMetadata({
+        credits: ['https://echarts.apache.org'],
+        description: 'Treemap (Apache ECharts)',
+        name: t('Treemap'),
+        thumbnail,
+      }),
+      transformProps,
+    });
+  }
+}