feat(plugin-chart-echart): New Tree chart (apache#1018)

* initial * tests added,1 typing issue present * remove log * remove color * remove duplicate tooltip * Update plugins/plugin-chart-echarts/src/Tree/transformProps.ts Co-authored-by: Ville Brofeldt <33317356+villebro@users.noreply.github.com> * clean * merge * optional name column,more tests... * bug fix * remove unused imports * lint * bug fix * tying fix * clean,typing fix * stories added * optional metric control * bigger thumbnail * optional root node name * storybokk updated * children list seperated instead of mutating data,if root node not provided defaault it to node with most children * remove logs,optimization needed * find best node if root not provided,use seperate children list to avoid issues if column name is children * remove unused import * type fix * Update transformProps.ts * Update debugging.md * better todo * updated radio button with new signature Co-authored-by: Ville Brofeldt <33317356+villebro@users.noreply.github.com>
zhaoyongjie · Nov 26, 2021 · d1312ab · d1312ab
1 parent cb76b9d
commit d1312ab
Show file tree

Hide file tree

Showing 13 changed files with 1,266 additions and 0 deletions.
diff --git a/...packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Tree/Stories.tsx b/...packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Tree/Stories.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
+import { select, withKnobs, text, number } from '@storybook/addon-knobs';
+import { EchartsTreeChartPlugin } from '@superset-ui/plugin-chart-echarts';
+import transformProps from '@superset-ui/plugin-chart-echarts/lib/Tree/transformProps';
+import data from './data';
+import { withResizableChartDemo } from '../../../../shared/components/ResizableChartDemo';
+
+new EchartsTreeChartPlugin().configure({ key: 'echarts-tree' }).register();
+
+getChartTransformPropsRegistry().registerValue('echarts-tree', transformProps);
+
+export default {
+  title: 'Chart Plugins|plugin-chart-echarts/Tree',
+  decorators: [withKnobs, withResizableChartDemo],
+};
+
+export const Tree = ({ width, height }) => {
+  return (
+    <SuperChart
+      chartType="echarts-tree"
+      width={width}
+      height={height}
+      queriesData={[{ data }]}
+      formData={{
+        colorScheme: 'bnbColors',
+        datasource: '3__table',
+        granularity_sqla: 'ds',
+        metric: 'count',
+        id: select('Id Column', ['id_column', 'name_column', 'parent_column'], 'id_column'),
+        rootNodeId: text('Root Node', '1'),
+        parent: select('Parent Column', ['parent_column', 'id_column'], 'parent_column'),
+        name: select('Name Column', [null, 'name_column'], 'name_column'),
+
+        position: select('Label Position', ['top', 'right', 'left', 'bottom'], 'top'),
+        layout: select('Tree Layout', ['orthogonal', 'radial'], 'orthogonal'),
+        orient: select('Orientation', ['LR', 'RL', 'TB', 'BT'], 'LR'),
+        emphasis: select('Emphasis', ['ancestor', 'descendant'], 'descendant'),
+        symbol: select('Symbol', ['emptyCircle', 'circle', 'rect', 'triangle'], 'circle'),
+        symbol_size: number('[Symbol Size', 7, { range: true, min: 5, max: 30, step: 2 }),
+      }}
+    />
+  );
+};
diff --git a/...-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Tree/data.ts b/...-ui/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Tree/data.ts
@@ -0,0 +1,104 @@
+export default [
+  {
+    id_column: '1',
+    parent_column: null,
+    name_column: 'root',
+    count: 10,
+  },
+  {
+    id_column: '2',
+    parent_column: '1',
+    name_column: 'software',
+    count: 10,
+  },
+  {
+    id_column: '3',
+    parent_column: '1',
+    name_column: 'hardware',
+    count: 10,
+  },
+  {
+    id_column: '4',
+    parent_column: '2',
+    name_column: 'freeware',
+    count: 10,
+  },
+  {
+    id_column: '5',
+    parent_column: '2',
+    name_column: 'shareware',
+    count: 10,
+  },
+  {
+    id_column: '6',
+    parent_column: '2',
+    name_column: 'opensource',
+    count: 10,
+  },
+  {
+    id_column: '7',
+    parent_column: '3',
+    name_column: 'computer',
+    count: 10,
+  },
+  {
+    id_column: '8',
+    parent_column: '3',
+    name_column: 'cpu',
+    count: 10,
+  },
+  {
+    id_column: '9',
+    parent_column: '3',
+    name_column: 'mouse',
+    count: 10,
+  },
+  {
+    id_column: '10',
+    parent_column: '3',
+    name_column: 'keyboard',
+    count: 10,
+  },
+  {
+    id_column: '11',
+    parent_column: '8',
+    name_column: 'intel',
+    count: 10,
+  },
+  {
+    id_column: '12',
+    parent_column: '8',
+    name_column: 'ryzen',
+    count: 10,
+  },
+  {
+    id_column: '13',
+    parent_column: '9',
+    name_column: 'razor',
+    count: 10,
+  },
+  {
+    id_column: '14',
+    parent_column: '10',
+    name_column: 'Wired',
+    count: 10,
+  },
+  {
+    id_column: '15',
+    parent_column: '10',
+    name_column: 'Wireless',
+    count: 10,
+  },
+  {
+    id_column: '16',
+    parent_column: '10',
+    name_column: 'Ergonomic',
+    count: 10,
+  },
+  {
+    id_column: '17',
+    parent_column: '10',
+    name_column: 'Cherry mx',
+    count: 10,
+  },
+];
diff --git a/...d/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Tree/EchartsTree.tsx b/...d/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Tree/EchartsTree.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 EchartsGraph({ height, width, echartOptions }: EchartsProps) {
+  return <Echart height={height} width={width} echartOptions={echartOptions} />;
+}
diff --git a/...end/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Tree/buildQuery.ts b/...end/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Tree/buildQuery.ts
@@ -0,0 +1,29 @@
+/**
+ * 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, {
+    queryFields: {
+      id: 'columns',
+      parent: 'columns',
+      name: 'columns',
+    },
+  });
+}
diff --git a/...tend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Tree/constants.ts b/...tend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Tree/constants.ts
@@ -0,0 +1,30 @@
+/**
+ * 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 { TreeSeriesOption } from 'echarts';
+
+export const DEFAULT_TREE_SERIES_OPTION: TreeSeriesOption = {
+  label: {
+    position: 'left',
+    fontSize: 15,
+  },
+  animation: true,
+  animationDuration: 500,
+  animationEasing: 'cubicOut',
+  lineStyle: { color: 'source', width: 1.5 },
+};