feat: update data format returned from query api and add getGroupBys (#…

…72) * fix: update data format returned from query api * fix: format * fix: remove unnecessary type * fix: remove hack prior to typescript 3.4
apache · Nov 26, 2021 · 8273942 · 8273942
1 parent 911382f
commit 8273942
Show file tree

Hide file tree

Showing 10 changed files with 367 additions and 361 deletions.
diff --git a/...ins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/Line/data/data.js b/...ins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/Line/data/data.js
diff --git a/...ns/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/Line/data/data2.js b/...ns/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/Line/data/data2.js
@@ -1,94 +1,91 @@
 /* eslint-disable sort-keys, no-magic-numbers */
-export default {
-  keys: ['snapshot', 'x', 'y'],
-  values: [
-    { x: -157766400000, y: 24703, snapshot: 'Last year' },
-    { x: -126230400000, y: 27861, snapshot: 'Last year' },
-    { x: -94694400000, y: 29436, snapshot: 'Last year' },
-    { x: -63158400000, y: 31463, snapshot: 'Last year' },
-    { x: -31536000000, y: 35718, snapshot: 'Last year' },
-    { x: 0, y: 41758, snapshot: 'Last year' },
-    { x: 31536000000, y: 48172, snapshot: 'Last year' },
-    { x: 63072000000, y: 52092, snapshot: 'Last year' },
-    { x: 94694400000, y: 48217, snapshot: 'Last year' },
-    { x: 126230400000, y: 48476, snapshot: 'Last year' },
-    { x: 157766400000, y: 46438, snapshot: 'Last year' },
-    { x: 189302400000, y: 45086, snapshot: 'Last year' },
-    { x: 220924800000, y: 46610, snapshot: 'Last year' },
-    { x: 252460800000, y: 47107, snapshot: 'Last year' },
-    { x: 283996800000, y: 50514, snapshot: 'Last year' },
-    { x: 315532800000, y: 48969, snapshot: 'Last year' },
-    { x: 347155200000, y: 50108, snapshot: 'Last year' },
-    { x: 378691200000, y: 59055, snapshot: 'Last year' },
-    { x: 410227200000, y: 59188, snapshot: 'Last year' },
-    { x: 441763200000, y: 59859, snapshot: 'Last year' },
-    { x: 473385600000, y: 59516, snapshot: 'Last year' },
-    { x: 504921600000, y: 56633, snapshot: 'Last year' },
-    { x: 536457600000, y: 54466, snapshot: 'Last year' },
-    { x: 567993600000, y: 52996, snapshot: 'Last year' },
-    { x: 599616000000, y: 53205, snapshot: 'Last year' },
-    { x: 631152000000, y: 52322, snapshot: 'Last year' },
-    { x: 662688000000, y: 47109, snapshot: 'Last year' },
-    { x: 694224000000, y: 42470, snapshot: 'Last year' },
-    { x: 725846400000, y: 38257, snapshot: 'Last year' },
-    { x: 757382400000, y: 34823, snapshot: 'Last year' },
-    { x: 788918400000, y: 32728, snapshot: 'Last year' },
-    { x: 820454400000, y: 30988, snapshot: 'Last year' },
-    { x: 852076800000, y: 29179, snapshot: 'Last year' },
-    { x: 883612800000, y: 27083, snapshot: 'Last year' },
-    { x: 915148800000, y: 25700, snapshot: 'Last year' },
-    { x: 946684800000, y: 24959, snapshot: 'Last year' },
-    { x: 978307200000, y: 23180, snapshot: 'Last year' },
-    { x: 1009843200000, y: 21731, snapshot: 'Last year' },
-    { x: 1041379200000, y: 20793, snapshot: 'Last year' },
-    { x: 1072915200000, y: 19739, snapshot: 'Last year' },
-    { x: 1104537600000, y: 19190, snapshot: 'Last year' },
-    { x: 1136073600000, y: 19674, snapshot: 'Last year' },
-    { x: 1167609600000, y: 19986, snapshot: 'Last year' },
-    { x: 1199145600000, y: 17771, snapshot: 'Last year' },
-    { x: -157766400000, y: 80812, snapshot: 'Current' },
-    { x: -126230400000, y: 79709, snapshot: 'Current' },
-    { x: -94694400000, y: 82204, snapshot: 'Current' },
-    { x: -63158400000, y: 81785, snapshot: 'Current' },
-    { x: -31536000000, y: 84893, snapshot: 'Current' },
-    { x: 0, y: 85015, snapshot: 'Current' },
-    { x: 31536000000, y: 77321, snapshot: 'Current' },
-    { x: 63072000000, y: 71197, snapshot: 'Current' },
-    { x: 94694400000, y: 67598, snapshot: 'Current' },
-    { x: 126230400000, y: 67304, snapshot: 'Current' },
-    { x: 157766400000, y: 68149, snapshot: 'Current' },
-    { x: 189302400000, y: 66686, snapshot: 'Current' },
-    { x: 220924800000, y: 67344, snapshot: 'Current' },
-    { x: 252460800000, y: 66875, snapshot: 'Current' },
-    { x: 283996800000, y: 67473, snapshot: 'Current' },
-    { x: 315532800000, y: 68375, snapshot: 'Current' },
-    { x: 347155200000, y: 68467, snapshot: 'Current' },
-    { x: 378691200000, y: 67904, snapshot: 'Current' },
-    { x: 410227200000, y: 67708, snapshot: 'Current' },
-    { x: 441763200000, y: 67457, snapshot: 'Current' },
-    { x: 473385600000, y: 64667, snapshot: 'Current' },
-    { x: 504921600000, y: 63959, snapshot: 'Current' },
-    { x: 536457600000, y: 63442, snapshot: 'Current' },
-    { x: 567993600000, y: 63924, snapshot: 'Current' },
-    { x: 599616000000, y: 65233, snapshot: 'Current' },
-    { x: 631152000000, y: 65138, snapshot: 'Current' },
-    { x: 662688000000, y: 60646, snapshot: 'Current' },
-    { x: 694224000000, y: 54216, snapshot: 'Current' },
-    { x: 725846400000, y: 49443, snapshot: 'Current' },
-    { x: 757382400000, y: 44361, snapshot: 'Current' },
-    { x: 788918400000, y: 41311, snapshot: 'Current' },
-    { x: 820454400000, y: 38284, snapshot: 'Current' },
-    { x: 852076800000, y: 37459, snapshot: 'Current' },
-    { x: 883612800000, y: 36525, snapshot: 'Current' },
-    { x: 915148800000, y: 33820, snapshot: 'Current' },
-    { x: 946684800000, y: 31956, snapshot: 'Current' },
-    { x: 978307200000, y: 29612, snapshot: 'Current' },
-    { x: 1009843200000, y: 28156, snapshot: 'Current' },
-    { x: 1041379200000, y: 27031, snapshot: 'Current' },
-    { x: 1072915200000, y: 25418, snapshot: 'Current' },
-    { x: 1104537600000, y: 23678, snapshot: 'Current' },
-    { x: 1136073600000, y: 22498, snapshot: 'Current' },
-    { x: 1167609600000, y: 21805, snapshot: 'Current' },
-    { x: 1199145600000, y: 20271, snapshot: 'Current' },
-  ],
-};
+export default [
+  { x: -157766400000, y: 24703, snapshot: 'Last year' },
+  { x: -126230400000, y: 27861, snapshot: 'Last year' },
+  { x: -94694400000, y: 29436, snapshot: 'Last year' },
+  { x: -63158400000, y: 31463, snapshot: 'Last year' },
+  { x: -31536000000, y: 35718, snapshot: 'Last year' },
+  { x: 0, y: 41758, snapshot: 'Last year' },
+  { x: 31536000000, y: 48172, snapshot: 'Last year' },
+  { x: 63072000000, y: 52092, snapshot: 'Last year' },
+  { x: 94694400000, y: 48217, snapshot: 'Last year' },
+  { x: 126230400000, y: 48476, snapshot: 'Last year' },
+  { x: 157766400000, y: 46438, snapshot: 'Last year' },
+  { x: 189302400000, y: 45086, snapshot: 'Last year' },
+  { x: 220924800000, y: 46610, snapshot: 'Last year' },
+  { x: 252460800000, y: 47107, snapshot: 'Last year' },
+  { x: 283996800000, y: 50514, snapshot: 'Last year' },
+  { x: 315532800000, y: 48969, snapshot: 'Last year' },
+  { x: 347155200000, y: 50108, snapshot: 'Last year' },
+  { x: 378691200000, y: 59055, snapshot: 'Last year' },
+  { x: 410227200000, y: 59188, snapshot: 'Last year' },
+  { x: 441763200000, y: 59859, snapshot: 'Last year' },
+  { x: 473385600000, y: 59516, snapshot: 'Last year' },
+  { x: 504921600000, y: 56633, snapshot: 'Last year' },
+  { x: 536457600000, y: 54466, snapshot: 'Last year' },
+  { x: 567993600000, y: 52996, snapshot: 'Last year' },
+  { x: 599616000000, y: 53205, snapshot: 'Last year' },
+  { x: 631152000000, y: 52322, snapshot: 'Last year' },
+  { x: 662688000000, y: 47109, snapshot: 'Last year' },
+  { x: 694224000000, y: 42470, snapshot: 'Last year' },
+  { x: 725846400000, y: 38257, snapshot: 'Last year' },
+  { x: 757382400000, y: 34823, snapshot: 'Last year' },
+  { x: 788918400000, y: 32728, snapshot: 'Last year' },
+  { x: 820454400000, y: 30988, snapshot: 'Last year' },
+  { x: 852076800000, y: 29179, snapshot: 'Last year' },
+  { x: 883612800000, y: 27083, snapshot: 'Last year' },
+  { x: 915148800000, y: 25700, snapshot: 'Last year' },
+  { x: 946684800000, y: 24959, snapshot: 'Last year' },
+  { x: 978307200000, y: 23180, snapshot: 'Last year' },
+  { x: 1009843200000, y: 21731, snapshot: 'Last year' },
+  { x: 1041379200000, y: 20793, snapshot: 'Last year' },
+  { x: 1072915200000, y: 19739, snapshot: 'Last year' },
+  { x: 1104537600000, y: 19190, snapshot: 'Last year' },
+  { x: 1136073600000, y: 19674, snapshot: 'Last year' },
+  { x: 1167609600000, y: 19986, snapshot: 'Last year' },
+  { x: 1199145600000, y: 17771, snapshot: 'Last year' },
+  { x: -157766400000, y: 80812, snapshot: 'Current' },
+  { x: -126230400000, y: 79709, snapshot: 'Current' },
+  { x: -94694400000, y: 82204, snapshot: 'Current' },
+  { x: -63158400000, y: 81785, snapshot: 'Current' },
+  { x: -31536000000, y: 84893, snapshot: 'Current' },
+  { x: 0, y: 85015, snapshot: 'Current' },
+  { x: 31536000000, y: 77321, snapshot: 'Current' },
+  { x: 63072000000, y: 71197, snapshot: 'Current' },
+  { x: 94694400000, y: 67598, snapshot: 'Current' },
+  { x: 126230400000, y: 67304, snapshot: 'Current' },
+  { x: 157766400000, y: 68149, snapshot: 'Current' },
+  { x: 189302400000, y: 66686, snapshot: 'Current' },
+  { x: 220924800000, y: 67344, snapshot: 'Current' },
+  { x: 252460800000, y: 66875, snapshot: 'Current' },
+  { x: 283996800000, y: 67473, snapshot: 'Current' },
+  { x: 315532800000, y: 68375, snapshot: 'Current' },
+  { x: 347155200000, y: 68467, snapshot: 'Current' },
+  { x: 378691200000, y: 67904, snapshot: 'Current' },
+  { x: 410227200000, y: 67708, snapshot: 'Current' },
+  { x: 441763200000, y: 67457, snapshot: 'Current' },
+  { x: 473385600000, y: 64667, snapshot: 'Current' },
+  { x: 504921600000, y: 63959, snapshot: 'Current' },
+  { x: 536457600000, y: 63442, snapshot: 'Current' },
+  { x: 567993600000, y: 63924, snapshot: 'Current' },
+  { x: 599616000000, y: 65233, snapshot: 'Current' },
+  { x: 631152000000, y: 65138, snapshot: 'Current' },
+  { x: 662688000000, y: 60646, snapshot: 'Current' },
+  { x: 694224000000, y: 54216, snapshot: 'Current' },
+  { x: 725846400000, y: 49443, snapshot: 'Current' },
+  { x: 757382400000, y: 44361, snapshot: 'Current' },
+  { x: 788918400000, y: 41311, snapshot: 'Current' },
+  { x: 820454400000, y: 38284, snapshot: 'Current' },
+  { x: 852076800000, y: 37459, snapshot: 'Current' },
+  { x: 883612800000, y: 36525, snapshot: 'Current' },
+  { x: 915148800000, y: 33820, snapshot: 'Current' },
+  { x: 946684800000, y: 31956, snapshot: 'Current' },
+  { x: 978307200000, y: 29612, snapshot: 'Current' },
+  { x: 1009843200000, y: 28156, snapshot: 'Current' },
+  { x: 1041379200000, y: 27031, snapshot: 'Current' },
+  { x: 1072915200000, y: 25418, snapshot: 'Current' },
+  { x: 1104537600000, y: 23678, snapshot: 'Current' },
+  { x: 1136073600000, y: 22498, snapshot: 'Current' },
+  { x: 1167609600000, y: 21805, snapshot: 'Current' },
+  { x: 1199145600000, y: 20271, snapshot: 'Current' },
+];
diff --git a/...kages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/Line/stories/missing.tsx b/...kages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/Line/stories/missing.tsx
@@ -4,13 +4,10 @@ import { SuperChart, ChartProps } from '@superset-ui/chart';
 import data from '../data/data';
 import { LINE_PLUGIN_TYPE } from '../constants';
 
-const missingData = {
-  keys: data.keys,
-  values: data.values.map(({ y, ...rest }) => ({
-    ...rest,
-    y: Math.random() < 0.25 ? null : y,
-  })),
-};
+const missingData = data.map(({ y, ...rest }) => ({
+  ...rest,
+  y: Math.random() < 0.25 ? null : y,
+}));
 
 export default [
   {

diff --git a/...t-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/Encoder.ts b/...t-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/Encoder.ts
@@ -5,21 +5,13 @@ import { EncodingFromChannelsAndOutputs } from '../encodeable/types/Channel';
 /**
  * Define channel types
  */
-// This is a workaround until TypeScript 3.4 which has const context
-// which will allow use to derive type from object literal
-// without type widening (e.g. 'X' instead of string).
-// Now we have to define class with readonly fields
-// to be able to use "typeof" to infer strict types
-// See more details from
-// https://github.com/Microsoft/TypeScript/issues/20195
-// https://github.com/Microsoft/TypeScript/pull/29510
-const channelTypes = new (class Channels {
-  readonly x = 'X';
-  readonly y = 'Y';
-  readonly color = 'Color';
-  readonly fill = 'Category';
-  readonly strokeDasharray = 'Category';
-})();
+const channelTypes = {
+  color: 'Color',
+  fill: 'Category',
+  strokeDasharray: 'Category',
+  x: 'X',
+  y: 'Y',
+} as const;
 
 export type ChannelTypes = typeof channelTypes;
 

diff --git a/...set-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/Line.tsx b/...set-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/Line.tsx
@@ -81,15 +81,12 @@ class LineChart extends PureComponent<Props> {
 
   renderChart(dim: Dimension) {
     const { width, height } = dim;
-    const { data, encoding, margin, theme } = this.props;
+    const { data, margin, theme } = this.props;
 
     const { channels } = this.encoder;
+    const fieldNames = this.encoder.getGroupBys();
 
-    const fieldNames = data.keys
-      .filter(k => k !== encoding.x.field && k !== encoding.y.field)
-      .sort((a, b) => a.localeCompare(b));
-
-    const groups = groupBy(data.values, row => fieldNames.map(f => `${f}=${row[f]}`).join(','));
+    const groups = groupBy(data, row => fieldNames.map(f => `${f}=${row[f]}`).join(','));
 
     const allSeries = values(groups).map(seriesData => {
       const firstDatum = seriesData[0];

diff --git a/...uperset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/legacy/transformProps.ts b/...uperset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/legacy/transformProps.ts
@@ -16,17 +16,14 @@ export default function transformProps(chartProps: ChartProps) {
   const data = payload.data as DataRow[];
 
   return {
-    data: {
-      keys: ['name', 'x', 'y'],
-      values: flatMap(
-        data.map((row: DataRow) =>
-          row.values.map(v => ({
-            ...v,
-            name: row.key[0],
-          })),
-        ),
+    data: flatMap(
+      data.map((row: DataRow) =>
+        row.values.map(v => ({
+          ...v,
+          name: row.key[0],
+        })),
       ),
-    },
+    ),
     width,
     height,
     encoding: {

diff --git a/...s/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/components/ChartLegend.tsx b/...s/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/components/ChartLegend.tsx
@@ -47,7 +47,7 @@ export default class ChartLegend<
     const legends = Object.keys(encoder.legends).map((field: string) => {
       const channelNames = encoder.legends[field];
       const channelEncoder = encoder.channels[channelNames[0]];
-      const domain = Array.from(new Set(data.values.map(channelEncoder.get)));
+      const domain = Array.from(new Set(data.map(channelEncoder.get)));
       const scale = scaleOrdinal({
         domain,
         range: domain.map((key: string) => channelEncoder.encodeValue(key)),

diff --git a/...uperset-ui-plugins/packages/superset-ui-preset-chart-xy/src/encodeable/AbstractEncoder.ts b/...uperset-ui-plugins/packages/superset-ui-preset-chart-xy/src/encodeable/AbstractEncoder.ts
@@ -99,6 +99,23 @@ export default abstract class AbstractEncoder<
     };
   }
 
+  getChannelNames() {
+    return Object.keys(this.channelTypes) as (keyof ChannelTypes)[];
+  }
+
+  getChannelsAsArray() {
+    return this.getChannelNames().map(name => this.channels[name]);
+  }
+
+  getGroupBys() {
+    const fields = this.getChannelsAsArray()
+      .filter(c => c.isGroupBy())
+      .map(c => (isFieldDef(c.definition) ? c.definition.field : ''))
+      .filter(field => field !== '');
+
+    return Array.from(new Set(fields));
+  }
+
   hasLegend() {
     return Object.keys(this.legends).length > 0;
   }

diff --git a/...superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/encodeable/ChannelEncoder.ts b/...superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/encodeable/ChannelEncoder.ts
@@ -11,6 +11,7 @@ import {
   isValueDef,
   isFieldDef,
   isNonValueDef,
+  isTypedFieldDef,
 } from './types/ChannelDef';
 import isEnabled from './utils/isEnabled';
 import isDisabled from './utils/isDisabled';
@@ -107,6 +108,20 @@ export default class ChannelEncoder<Def extends ChannelDef<Output>, Output exten
     return isScaleFieldDef(this.definition);
   }
 
+  isGroupBy() {
+    if (isTypedFieldDef(this.definition)) {
+      return (
+        this.type === 'XBand' ||
+        this.type === 'YBand' ||
+        this.type === 'Category' ||
+        this.type === 'Text' ||
+        (this.type === 'Color' && this.definition.type === 'nominal')
+      );
+    }
+
+    return false;
+  }
+
   isX() {
     return this.type === 'X' || this.type === 'XBand';
   }

diff --git a/...ins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/encodeable/types/Data.ts b/...ins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/encodeable/types/Data.ts
@@ -2,7 +2,4 @@ export type PlainObject<Key extends string = string, Value extends any = any> =
   [key in Key]: Value
 };
 
-export type Dataset<T extends string = string> = {
-  keys: T[];
-  values: Partial<PlainObject<T>>[];
-};
+export type Dataset<T extends string = string> = Partial<PlainObject<T>>[];