feat: migrate xy-chart to use encodable (apache-superset#438)

* feat: migrate xy-chart to use encodable (apache-superset#420)

* feat: use encodable in BoxPlot

* feat: migrate legend

* docs: update storybook

* fix: label overlap

* fix: lint

* fix: remove comments

* fix: path

* feat: migrate scatterplot to use encodable (apache-superset#421)

* feat: migrate scatter plot

(cherry picked from commit 0d607a6)

* fix: legend

* feat: migrate line chart to use encodable (apache-superset#427)

* feat: migrate line to use encodable

* fix: storybook ts

* fix: remove comment

* refactor: delete deprecated files (apache-superset#430)

* refactor: delete outdated files

* feat: update index exports and add test

* refactor: delete more files

* fix: import order

* fix: update dependency

* fix: update dependency

* build: fix babel

* fix: remvoe comments

* fix: babel

* refactor: move files (apache-superset#432)

* refactor: move files

* refactor: move files

* fix: small issues with charts post-migration (apache-superset#433)

* fix: scatterplot issue

* fix: bump encodable and fix time scale nicing

* fix: issue with label rotation

* refactor: remove deep import

* fix: demo import

* feat: bump and remove unnecessary dependencies (apache-superset#436)

* feat: bump dependencies

* feat: remove unnecessary dependencies

Author: kristw

.gitignore

@@ -38,7 +38,6 @@ test-changelog.md
 .eslintrc.js
 .flowconfig
 .prettierignore
-babel.config.js
 jest.config.js
 prettier.config.js
 tsconfig.eslint.json

babel.config.js

@@ -0,0 +1,24 @@
+// eslint-disable-next-line no-undef, import/no-extraneous-dependencies
+const { getConfig } = require('@airbnb/config-babel');
+
+const config = getConfig({
+  library: true,
+  react: true,
+  next: true,
+  node: process.env.NODE_ENV === 'test',
+  typescript: true,
+  env: {
+    targets: false,
+  },
+});
+
+if (process.env.NODE_ENV !== 'test') {
+  config.presets[0][1].modules = false;
+}
+
+// Override to allow transpile es modules inside vega-lite
+config.ignore = config.ignore.filter(item => item !== 'node_modules/');
+config.ignore.push('node_modules/(?!(vega-lite|lodash-es))');
+
+// eslint-disable-next-line no-undef
+module.exports = config;

package.json

@@ -6,8 +6,8 @@
   "scripts": {
     "build": "yarn babel && yarn type && yarn build:assets",
     "babel": "yarn babel:cjs && yarn babel:esm",
-    "babel:cjs": "nimbus babel --clean --workspaces=\"@superset-ui/!(plugins-demo)\"",
-    "babel:esm": "nimbus babel --clean --workspaces=\"@superset-ui/!(plugins-demo)\" --esm",
+    "babel:cjs": "nimbus babel --clean --workspaces=\"@superset-ui/!(plugins-demo)\" --config-file=../../babel.config.js",
+    "babel:esm": "nimbus babel --clean --workspaces=\"@superset-ui/!(plugins-demo)\" --esm --config-file=../../babel.config.js",
     "build:assets": "node ./scripts/buildAssets.js",
     "clean": "rm -rf ./packages/**/{lib,esm}",
     "commit": "superset-commit",
@@ -42,14 +42,14 @@
   ],
   "license": "Apache-2.0",
   "devDependencies": {
-    "@airbnb/config-babel": "^2.1.3",
-    "@airbnb/config-eslint": "^2.1.3",
-    "@airbnb/config-jest": "^2.1.3",
-    "@airbnb/config-prettier": "^2.0.4",
-    "@airbnb/config-typescript": "^2.1.2",
-    "@airbnb/nimbus": "^2.1.3",
+    "@airbnb/config-babel": "^2.2.2",
+    "@airbnb/config-eslint": "^2.5.1",
+    "@airbnb/config-jest": "^2.2.2",
+    "@airbnb/config-prettier": "^2.1.1",
+    "@airbnb/config-typescript": "^2.2.2",
+    "@airbnb/nimbus": "^2.2.3",
     "@superset-ui/commit-config": "^0.0.9",
-    "@superset-ui/superset-ui": "^0.12.5",
+    "@superset-ui/superset-ui": "^0.12.15",
     "@types/enzyme": "^3.10.3",
     "@types/jest": "^25.1.3",
     "@types/jsdom": "^12.2.4",
@@ -86,7 +86,7 @@
   ],
   "nimbus": {
     "drivers": [
-      "babel",
+      { "driver": "babel", "strategy": "none" },
       "eslint",
       "jest",
       "prettier",
@@ -106,6 +106,9 @@
         "@airbnb/config-jest/enzyme",
         "./scripts/setupJest.js"
       ],
+      "transformIgnorePatterns": [
+        "node_modules/(?!(vega-lite|lodash-es))"
+      ],
       "coverageThreshold": {
         "global": {
           "branches": 1,

packages/superset-ui-plugin-chart-word-cloud/package.json

@@ -33,7 +33,7 @@
     "@types/react": "^16.3.0",
     "d3-cloud": "^1.2.5",
     "d3-scale": "^3.0.1",
-    "encodable": "^0.2.0"
+    "encodable": "^0.3.3"
   },
   "peerDependencies": {
     "@superset-ui/chart": "^0.12.0",

packages/superset-ui-plugin-chart-word-cloud/src/chart/Encoder.ts

@@ -1,5 +1,4 @@
-import { createEncoderFactory } from 'encodable';
-import { DeriveEncoding } from 'encodable/lib/types/Encoding';
+import { createEncoderFactory, DeriveEncoding } from 'encodable';
 
 type WordCloudEncodingConfig = {
   color: ['Color', string];

packages/superset-ui-plugin-chart-word-cloud/src/chart/WordCloud.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import cloudLayout, { Word } from 'd3-cloud';
-import { PlainObject } from 'encodable/lib/types/Data';
+import { PlainObject } from 'encodable';
 import { WordCloudEncoding, wordCloudEncoderFactory } from './Encoder';
 
 export const ROTATION = {

packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/BoxPlot/data.js renamed to packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/BoxPlot/data.ts

@@ -1,5 +1,7 @@
-import { BoxPlotChartPlugin as LegacyBoxPlotChartPlugin } from '../../../../../superset-ui-preset-chart-xy/esm/legacy';
-import { BoxPlotChartPlugin } from '../../../../../superset-ui-preset-chart-xy';
+import {
+  BoxPlotChartPlugin,
+  LegacyBoxPlotChartPlugin,
+} from '../../../../../superset-ui-preset-chart-xy';
 import Stories from './stories/Basic';
 import LegacyStories from './stories/Legacy';
 import { BOX_PLOT_PLUGIN_LEGACY_TYPE, BOX_PLOT_PLUGIN_TYPE } from './constants';

packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/BoxPlot/index.js renamed to packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/BoxPlot/index.ts

@@ -1,5 +1,4 @@
-import { LineChartPlugin as LegacyLineChartPlugin } from '../../../../../superset-ui-preset-chart-xy/esm/legacy';
-import { LineChartPlugin } from '../../../../../superset-ui-preset-chart-xy';
+import { LineChartPlugin, LegacyLineChartPlugin } from '../../../../../superset-ui-preset-chart-xy';
 import BasicStories from './stories/basic';
 import FlushStories from './stories/flush';
 import QueryStories from './stories/query';

packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/Line/index.js renamed to packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/Line/index.ts

@@ -0,0 +1,15 @@
+import {
+  ScatterPlotChartPlugin,
+  LegacyScatterPlotChartPlugin,
+} from '../../../../../superset-ui-preset-chart-xy';
+import BasicStories from './stories/basic';
+import BubbleStories from './stories/bubble';
+import LegacyStories from './stories/legacy';
+import { SCATTER_PLOT_PLUGIN_TYPE, SCATTER_PLOT_PLUGIN_LEGACY_TYPE } from './constants';
+
+new LegacyScatterPlotChartPlugin().configure({ key: SCATTER_PLOT_PLUGIN_LEGACY_TYPE }).register();
+new ScatterPlotChartPlugin().configure({ key: SCATTER_PLOT_PLUGIN_TYPE }).register();
+
+export default {
+  examples: [...BasicStories, ...BubbleStories, ...LegacyStories],
+};

packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/ScatterPlot/index.js

@@ -28,7 +28,7 @@ export default [
           vizType: 'bubble',
           x: 'sum__SP_RUR_TOTL_ZS',
           xAxisFormat: '.3s',
-          xAxisLabel: 'x-axis label',
+          xAxisLabel: 'x-axis label test',
           xAxisShowminmax: false,
           xLogScale: false,
           xTicksLayout: 'auto',

packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/ScatterPlot/index.ts

@@ -31,31 +31,23 @@
   "dependencies": {
     "@data-ui/theme": "^0.0.84",
     "@data-ui/xy-chart": "^0.0.84",
-    "@types/d3-scale": "^2.1.1",
     "@vx/axis": "^0.0.195",
-    "@vx/group": "^0.0.194",
-    "@vx/legend": "^0.0.194",
-    "@vx/responsive": "^0.0.195",
+    "@vx/legend": "^0.0.195",
     "@vx/scale": "^0.0.195",
-    "@vx/shape": "^0.0.194",
     "csstype": "^2.6.3",
-    "d3-array": "^2.1.0",
-    "d3-scale": "^3.0.0",
+    "encodable": "^0.3.4",
     "lodash": "^4.17.11",
-    "prop-types": "^15.6.2",
-    "reselect": "^4.0.0",
-    "vega": "^5.8.1",
-    "vega-lite": "~4.1.1"
+    "reselect": "^4.0.0"
   },
   "peerDependencies": {
     "@superset-ui/chart": "^0.12.0",
     "@superset-ui/chart-composition": "^0.12.0",
-    "@superset-ui/color": "^0.12.0",
+    "@superset-ui/color": "^0.12.15",
     "@superset-ui/core": "^0.12.0",
     "@superset-ui/dimension": "^0.12.0",
-    "@superset-ui/number-format": "^0.12.0",
+    "@superset-ui/number-format": "^0.12.15",
     "@superset-ui/query": "^0.12.0",
-    "@superset-ui/time-format": "^0.12.0",
+    "@superset-ui/time-format": "^0.12.15",
     "@superset-ui/translation": "^0.12.0",
     "react": "^16.2"
   }

packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/ScatterPlot/stories/legacy.tsx

@@ -23,7 +23,7 @@ import transformProps from './transformProps';
 export default class BoxPlotChartPlugin extends ChartPlugin {
   constructor() {
     super({
-      loadChart: () => import('./BoxPlot'),
+      loadChart: () => import('../components/BoxPlot/BoxPlot'),
       metadata: createMetadata(),
       transformProps,
     });

packages/superset-ui-preset-chart-xy/package.json

@@ -23,7 +23,7 @@ import transformProps from './transformProps';
 export default class BoxPlotChartPlugin extends ChartPlugin {
   constructor() {
     super({
-      loadChart: () => import('../BoxPlot'),
+      loadChart: () => import('../../components/BoxPlot/BoxPlot'),
       metadata: createMetadata(true),
       transformProps,
     });

packages/superset-ui-preset-chart-xy/src/BoxPlot/Encoder.ts

@@ -17,7 +17,7 @@
  * under the License.
  */
 import { ChartProps } from '@superset-ui/chart';
-import { RawBoxPlotDataRow, BoxPlotDataRow } from '../types';
+import { RawBoxPlotDataRow, BoxPlotDataRow } from '../../components/BoxPlot/types';
 
 export default function transformProps(chartProps: ChartProps) {
   const { width, height, datasource = {}, formData, queryData } = chartProps;

packages/superset-ui-preset-chart-xy/src/BoxPlot/index.ts

@@ -1,7 +1,7 @@
 import { pick } from 'lodash';
 import { ChartProps } from '@superset-ui/chart';
-import { BoxPlotDataRow, RawBoxPlotDataRow } from './types';
-import { HookProps } from './BoxPlot';
+import { BoxPlotDataRow, RawBoxPlotDataRow } from '../components/BoxPlot/types';
+import { HookProps } from '../components/BoxPlot/BoxPlot';
 
 export default function transformProps(chartProps: ChartProps) {
   const { width, height, formData, queryData } = chartProps;

packages/superset-ui-preset-chart-xy/src/BoxPlot/legacy/index.ts

@@ -1,5 +1,5 @@
 import { QueryFormData } from '@superset-ui/query';
-import { FormDataProps } from './Line';
+import { FormDataProps } from '../components/Line/Line';
 
 type CombinedFormData = QueryFormData & FormDataProps;
 

packages/superset-ui-preset-chart-xy/src/BoxPlot/legacy/transformProps.ts

@@ -1,11 +1,11 @@
 import { buildQueryContext } from '@superset-ui/query';
 import ChartFormData from './ChartFormData';
-import Encoder from './Encoder';
+import { lineEncoderFactory } from '../components/Line/Encoder';
 
 export default function buildQuery(formData: ChartFormData) {
   const queryContext = buildQueryContext(formData);
   const { encoding } = formData;
-  const encoder = new Encoder({ encoding });
+  const encoder = lineEncoderFactory.create(encoding);
 
   queryContext.queries.forEach(query => {
     const q = query;

packages/superset-ui-preset-chart-xy/src/BoxPlot/transformProps.ts

@@ -8,7 +8,7 @@ export default class LineChartPlugin extends ChartPlugin<ChartFormData> {
   constructor() {
     super({
       buildQuery,
-      loadChart: () => import('./Line'),
+      loadChart: () => import('../components/Line/Line'),
       metadata: createMetadata(),
       transformProps,
     });

packages/superset-ui-preset-chart-xy/src/Line/ChartFormData.ts

@@ -5,7 +5,7 @@ import createMetadata from '../createMetadata';
 export default class LineChartPlugin extends ChartPlugin {
   constructor() {
     super({
-      loadChart: () => import('../Line'),
+      loadChart: () => import('../../components/Line/Line'),
       metadata: createMetadata(true),
       transformProps,
     });