Skip to content
This repository has been archived by the owner on Jun 25, 2020. It is now read-only.

Commit

Permalink
feat: update data format returned from query api and add getGroupBys (#…
Browse files Browse the repository at this point in the history 
…72)

* fix: update data format returned from query api

* fix: format

* fix: remove unnecessary type

* fix: remove hack prior to typescript 3.4
  • Loading branch information
@kristw
kristw authored Apr 24, 2019
1 parent 4d9a479 commit 3bbedb2
Show file tree
Hide file tree
Showing 10 changed files with 367 additions and 361 deletions.
447 changes: 222 additions & 225 deletions packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/Line/data/data.js
View file

Large diffs are not rendered by default.

183 changes: 90 additions & 93 deletions packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/Line/data/data2.js
View file
Original file line number Diff line number Diff line change
@@ -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' },
];
11 changes: 4 additions & 7 deletions packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/Line/stories/missing.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 [
{
Expand Down
22 changes: 7 additions & 15 deletions packages/superset-ui-preset-chart-xy/src/Line/Encoder.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
9 changes: 3 additions & 6 deletions packages/superset-ui-preset-chart-xy/src/Line/Line.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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];
Expand Down
17 changes: 7 additions & 10 deletions packages/superset-ui-preset-chart-xy/src/Line/legacy/transformProps.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
2 changes: 1 addition & 1 deletion packages/superset-ui-preset-chart-xy/src/components/ChartLegend.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)),
Expand Down
17 changes: 17 additions & 0 deletions packages/superset-ui-preset-chart-xy/src/encodeable/AbstractEncoder.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
15 changes: 15 additions & 0 deletions packages/superset-ui-preset-chart-xy/src/encodeable/ChannelEncoder.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
isValueDef,
isFieldDef,
isNonValueDef,
isTypedFieldDef,
} from './types/ChannelDef';
import isEnabled from './utils/isEnabled';
import isDisabled from './utils/isDisabled';
Expand Down Expand Up @@ -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';
}
Expand Down
5 changes: 1 addition & 4 deletions packages/superset-ui-preset-chart-xy/src/encodeable/types/Data.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>>[];

0 comments on commit 3bbedb2

Please sign in to comment.