docs: update storybook to use new SuperChart props and convert to TS …

…(+8 squashed commits) (#127) Squashed commits: [ffdde0c] fix: dimensions [57f5334] fix: path [61191fc] docs: update remaining stories [240b171] docs: update nvd3 stories [38e2804] docs: update more storybooks [18b9401] docs: update more stories [7f8fb07] docs: update storybook to use new SuperChart props and convert to TS [2e31ddb] docs: update how superchart are used
zhaoyongjie · Nov 17, 2021 · 5ff04c3 · 5ff04c3
1 parent 26d6a1f
commit 5ff04c3
Show file tree

Hide file tree

Showing 72 changed files with 1,892 additions and 2,223 deletions.
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/package.json b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/package.json
@@ -41,12 +41,12 @@
   "devDependencies": {
     "@superset-ui/build-config": "^0.1.0",
     "@superset-ui/commit-config": "^0.0.9",
-    "@superset-ui/chart": "^0.11.8",
+    "@superset-ui/chart": "^0.11.13",
     "@superset-ui/chart-composition": "^0.11.9",
     "@superset-ui/color": "^0.11.9",
-    "@superset-ui/connection": "^0.11.5",
-    "@superset-ui/core": "^0.11.9",
-    "@superset-ui/dimension": "^0.11.7",
+    "@superset-ui/connection": "^0.11.10",
+    "@superset-ui/core": "^0.11.10",
+    "@superset-ui/dimension": "^0.11.10",
     "@superset-ui/number-format": "^0.11.5",
     "@superset-ui/time-format": "^0.11.5",
     "@superset-ui/translation": "^0.11.9",

diff --git a/...ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/package.json b/...ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/package.json
@@ -49,9 +49,9 @@
     "gh-pages": "^2.0.1"
   },
   "peerDependencies": {
-    "@superset-ui/chart": "^0.11.6",
-    "@superset-ui/chart-composition": "^0.11.5",
-    "@superset-ui/color": "^0.11.0",
+    "@superset-ui/chart": "^0.11.13",
+    "@superset-ui/chart-composition": "^0.11.9",
+    "@superset-ui/color": "^0.11.9",
     "@superset-ui/connection": "^0.11.0",
     "@superset-ui/time-format": "^0.11.0",
     "@superset-ui/translation": "^0.11.4"

diff --git a/...lugins/packages/superset-ui-plugins-demo/storybook/shared/components/createQueryStory.tsx b/...lugins/packages/superset-ui-plugins-demo/storybook/shared/components/createQueryStory.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { text, select } from '@storybook/addon-knobs';
-import { SuperChart, ChartDataProvider, ChartProps } from '@superset-ui/chart';
+import { SuperChart, ChartDataProvider } from '@superset-ui/chart';
 import { SupersetClient } from '@superset-ui/connection';
 import Expandable from './Expandable';
 import VerifyCORS, { renderError } from './VerifyCORS';
@@ -50,17 +50,15 @@ export default function createQueryStory({
                       <>
                         <SuperChart
                           chartType={chartType}
-                          chartProps={
-                            new ChartProps({
-                              formData: payload.formData,
-                              height: Number(height),
-                              // @TODO fix typing
-                              // all vis's now expect objects but api/v1/ returns an array
-                              payload: Array.isArray(payload.queryData)
-                                ? payload.queryData[0]
-                                : payload.queryData,
-                              width: Number(width),
-                            })
+                          width={width}
+                          height={height}
+                          formData={payload.formData}
+                          // @TODO fix typing
+                          // all vis's now expect objects but api/v1/ returns an array
+                          payload={
+                            Array.isArray(payload.queryData)
+                              ? payload.queryData[0]
+                              : payload.queryData
                           }
                         />
                         <br />

diff --git a/...superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/shared/dummyDatasource.ts b/...superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/shared/dummyDatasource.ts
@@ -0,0 +1 @@
+export default { verboseMap: {} };
diff --git a/...kages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-calendar/Stories.jsx b/...kages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-calendar/Stories.jsx
diff --git a/...kages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-calendar/Stories.tsx b/...kages/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-calendar/Stories.tsx
@@ -0,0 +1,33 @@
+/* eslint-disable sort-keys, no-magic-numbers */
+import React from 'react';
+import { SuperChart } from '@superset-ui/chart';
+import data from './data';
+import dummyDatasource from '../../shared/dummyDatasource';
+
+export default [
+  {
+    renderStory: () => (
+      <SuperChart
+        chartType="calendar"
+        width={400}
+        height={400}
+        datasource={dummyDatasource}
+        payload={{ data }}
+        formData={{
+          cellSize: 10,
+          cellPadding: 2,
+          cellRadius: 0,
+          linearColorScheme: 'schemeRdYlBu',
+          steps: 10,
+          yAxisFormat: '.3s',
+          xAxisTimeFormat: 'smart_date',
+          showLegend: true,
+          showValues: false,
+          showMetricName: true,
+        }}
+      />
+    ),
+    storyName: 'Basic',
+    storyPath: 'legacy-|plugin-chart-calendar|CalendarChartPlugin',
+  },
+];
diff --git a/...ies/legacy-plugin-chart-chord/Stories.jsx → ...ies/legacy-plugin-chart-chord/Stories.tsx b/...ies/legacy-plugin-chart-chord/Stories.jsx → ...ies/legacy-plugin-chart-chord/Stories.tsx
@@ -8,14 +8,12 @@ export default [
     renderStory: () => (
       <SuperChart
         chartType="chord"
-        chartProps={{
-          formData: {
-            colorScheme: 'd3Category10',
-            yAxisFormat: '.2f',
-          },
-          height: 400,
-          payload: { data },
-          width: 400,
+        width={400}
+        height={400}
+        payload={{ data }}
+        formData={{
+          colorScheme: 'd3Category10',
+          yAxisFormat: '.2f',
         }}
       />
     ),

diff --git a/...gacy-plugin-chart-country-map/Stories.jsx → ...gacy-plugin-chart-country-map/Stories.tsx b/...gacy-plugin-chart-country-map/Stories.jsx → ...gacy-plugin-chart-country-map/Stories.tsx
@@ -10,15 +10,13 @@ export default [
     renderStory: () => (
       <SuperChart
         chartType="country-map"
-        chartProps={{
-          formData: {
-            linearColorScheme: 'schemeRdYlBu',
-            numberFormat: '.3s',
-            selectCountry: select('Country', Object.keys(countries), 'france', 'country'),
-          },
-          height: 400,
-          payload: { data },
-          width: 400,
+        width={400}
+        height={400}
+        payload={{ data }}
+        formData={{
+          linearColorScheme: 'schemeRdYlBu',
+          numberFormat: '.3s',
+          selectCountry: select('Country', Object.keys(countries!), 'france', 'country'),
         }}
       />
     ),

diff --git a/...ges/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-event-flow/Stories.jsx b/...ges/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-event-flow/Stories.jsx
@@ -14,15 +14,13 @@ export default [
     renderStory: () => (
       <SuperChart
         chartType="event-flow"
-        chartProps={{
-          formData: {
-            allColumnsX: 'eventName',
-            entity: 'userId',
-            minLeafNodeEventCount: 1,
-          },
-          height: 400,
-          payload: { data },
-          width: 400,
+        width={400}
+        height={400}
+        payload={{ data }}
+        formData={{
+          allColumnsX: 'eventName',
+          entity: 'userId',
+          minLeafNodeEventCount: 1,
         }}
       />
     ),

diff --git a/...y-plugin-chart-force-directed/Stories.jsx → ...y-plugin-chart-force-directed/Stories.tsx b/...y-plugin-chart-force-directed/Stories.jsx → ...y-plugin-chart-force-directed/Stories.tsx
@@ -6,15 +6,7 @@ import data from './data';
 export default [
   {
     renderStory: () => (
-      <SuperChart
-        chartType="force-directed"
-        chartProps={{
-          formData: {},
-          height: 400,
-          payload: { data },
-          width: 400,
-        }}
-      />
+      <SuperChart chartType="force-directed" width={400} height={400} payload={{ data }} />
     ),
     storyName: 'Basic',
     storyPath: 'legacy-|plugin-chart-force-directed|ForceDirectedChartPlugin',