Skip to content
This repository has been archived by the owner on Dec 10, 2021. It is now read-only.

Commit

Permalink
feat: simply the data processing logic
Browse files Browse the repository at this point in the history
  • Loading branch information
Conglei Shi committed May 21, 2019
1 parent 2cdf2f6 commit 604fd44
Show file tree
Hide file tree
Showing 6 changed files with 130 additions and 117 deletions.
3 changes: 1 addition & 2 deletions plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-table/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@
"@superset-ui/chart": "^0.10.0",
"@superset-ui/number-format": "^0.10.0",
"@superset-ui/time-format": "^0.10.0",
"@superset-ui/translation": "^0.10.0",
"core-js": "^3.0.1"
"@superset-ui/translation": "^0.10.0"
}
}
78 changes: 17 additions & 61 deletions plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-table/src/Table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,14 @@ import DataTable from '@airbnb/lunar/lib/components/DataTable';
import { Renderers, RendererProps } from '@airbnb/lunar/lib/components/DataTable/types';
import { HEIGHT_TO_PX } from '@airbnb/lunar/lib/components/DataTable/constants';
import { FormDataMetric, Metric } from '@superset-ui/chart';
import { getNumberFormatter, NumberFormats } from '@superset-ui/number-format';
import { getTimeFormatter } from '@superset-ui/time-format';

type ColumnType = {
key: string;
label: string;
format: string;
format?: (value: any) => string;
type: 'metric' | 'string';
maxValue?: number;
minValue?: number;
};

type Props = {
Expand Down Expand Up @@ -58,8 +59,6 @@ type TableState = {
const NEGATIVE_COLOR = '#ff8787';
const POSITIVE_COLOR = '#ced4da';

const formatPercent = getNumberFormatter(NumberFormats.PERCENT_3_POINT);

class TableVis extends React.Component<TableProps, TableState> {
static defaultProps = defaultProps;

Expand Down Expand Up @@ -91,7 +90,10 @@ class TableVis extends React.Component<TableProps, TableState> {
});
};

static getDerivedStateFromProps(props: TableProps, state: TableState) {
static getDerivedStateFromProps: React.GetDerivedStateFromProps<TableProps, TableState> = (
props: TableProps,
state: TableState,
) => {
const { filters } = props;
const { selectedCells } = state;
const newSelectedCells = new Set(Array.from(selectedCells));
Expand All @@ -104,62 +106,25 @@ class TableVis extends React.Component<TableProps, TableState> {
...state,
selectedCells: newSelectedCells,
};
}
};

render() {
const {
metrics: rawMetrics,
metrics,
timeseriesLimitMetric,
orderDesc,
percentMetrics,
data,
alignPositiveNegative,
colorPositiveNegative,
columns,
tableTimestampFormat,
tableFilter,
} = this.props;
const { selectedCells } = this.state;
const metrics = (rawMetrics || [])
.map(m => (m as Metric).label || (m as string))
// Add percent metrics
.concat((percentMetrics || []).map(m => `%${m}`))
// Removing metrics (aggregates) that are strings
.filter(m => typeof data[0][m as string] === 'number');
const dataArray: {
[key: string]: any;
} = {};

const sortByKey =
timeseriesLimitMetric &&
((timeseriesLimitMetric as Metric).label || (timeseriesLimitMetric as string));

metrics.forEach(metric => {
const arr = [];
for (let i = 0; i < data.length; i += 1) {
arr.push(data[i][metric]);
}

dataArray[metric] = arr;
});

const maxes: {
[key: string]: number;
} = {};
const mins: {
[key: string]: number;
} = {};

for (let i = 0; i < metrics.length; i += 1) {
if (alignPositiveNegative) {
maxes[metrics[i]] = Math.max(...dataArray[metrics[i]].map(Math.abs));
} else {
maxes[metrics[i]] = Math.max(...dataArray[metrics[i]]);
mins[metrics[i]] = Math.min(...dataArray[metrics[i]]);
}
}

// const tsFormatter = getTimeFormatter(tableTimestampFormat);
let formattedData = data.map(row => ({
data: row,
}));
Expand All @@ -183,8 +148,6 @@ class TableVis extends React.Component<TableProps, TableState> {
}
}

const tsFormatter = getTimeFormatter(tableTimestampFormat);

const heightType = 'small';
const getRenderer = (column: ColumnType) => (props: RendererProps) => {
const { key } = props;
Expand All @@ -197,10 +160,12 @@ class TableVis extends React.Component<TableProps, TableState> {
let left = 0;
let width = 0;
if (alignPositiveNegative) {
width = Math.abs(Math.round((value / maxes[key]) * 100));
width = Math.abs(
Math.round((value / Math.max(column.maxValue!, Math.abs(column.minValue!))) * 100),
);
} else {
const posExtent = Math.abs(Math.max(maxes[key], 0));
const negExtent = Math.abs(Math.min(mins[key], 0));
const posExtent = Math.abs(Math.max(column.maxValue!, 0));
const negExtent = Math.abs(Math.min(column.minValue!, 0));
const tot = posExtent + negExtent;
left = Math.round((Math.min(negExtent + value, negExtent) / tot) * 100);
width = Math.round((Math.abs(value) / tot) * 100);
Expand Down Expand Up @@ -236,16 +201,7 @@ class TableVis extends React.Component<TableProps, TableState> {
</div>
);
};

if (key[0] === '%') {
value = formatPercent(value);
} else {
value = getNumberFormatter(column.format)(value);
}
} else {
if (key === '__timestamp') {
value = tsFormatter(value);
}
Parent = ({ children }: { children: React.ReactNode }) => (
<React.Fragment>{children}</React.Fragment>
);
Expand All @@ -255,10 +211,10 @@ class TableVis extends React.Component<TableProps, TableState> {
<div
onClick={this.handleCellSelected({
key,
value: props.row.rowData.data[key],
value,
})}
>
<Parent>{value}</Parent>
<Parent>{column.format ? column.format(value) : value}</Parent>
</div>
);
};
Expand Down
5 changes: 3 additions & 2 deletions plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-table/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,15 @@
* under the License.
*/
import { ChartPlugin } from '@superset-ui/chart';
import Core from '@airbnb/lunar/lib';
import transformProps from './transformProps';
import createMetadata from './createMetadata';
import buildQuery from './buildQuery';
import Core from '@airbnb/lunar/lib';
import TableFormData from './TableFormData';

Core.initialize({ name: 'superset-datatable' });

export default class TableChartPlugin extends ChartPlugin {
export default class TableChartPlugin extends ChartPlugin<TableFormData> {
constructor() {
super({
buildQuery,
Expand Down
64 changes: 61 additions & 3 deletions .../superset-ui-plugins/packages/superset-ui-plugin-chart-table/src/legacy/transformProps.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,17 @@
*/
/* eslint-disable sort-keys */

import { ChartProps } from '@superset-ui/chart';
import { ChartProps, FormDataMetric, Metric } from '@superset-ui/chart';
import { getNumberFormatter, NumberFormats, NumberFormatter } from '@superset-ui/number-format';
import { getTimeFormatter, TimeFormatter } from '@superset-ui/time-format';

export default function transformProps(chartProps: ChartProps) {
const { height, datasource, filters, formData, onAddFilter, payload } = chartProps;
const {
alignPn,
colorPn,
includeSearch,
metrics,
metrics: rawMetrics,
orderDesc,
pageLength,
percentMetrics,
Expand All @@ -37,22 +39,78 @@ export default function transformProps(chartProps: ChartProps) {
const { columnFormats, verboseMap } = datasource;
const { records, columns } = payload.data;

const metrics = ((rawMetrics as FormDataMetric[]) || [])
.map(m => (m as Metric).label || (m as string))
// Add percent metrics
.concat(((percentMetrics as string[]) || []).map(m => `%${m}`))
// Removing metrics (aggregates) that are strings
.filter(m => typeof records[0][m as string] === 'number');

const dataArray: {
[key: string]: any;
} = {};

metrics.forEach(metric => {
const arr = [];
for (let i = 0; i < records.length; i += 1) {
arr.push(records[i][metric]);
}

dataArray[metric] = arr;
});

const maxes: {
[key: string]: number;
} = {};
const mins: {
[key: string]: number;
} = {};

for (let i = 0; i < metrics.length; i += 1) {
maxes[metrics[i]] = Math.max(...dataArray[metrics[i]]);
mins[metrics[i]] = Math.min(...dataArray[metrics[i]]);
}

const formatPercent = getNumberFormatter(NumberFormats.PERCENT_3_POINT);
const tsFormatter = getTimeFormatter(tableTimestampFormat);

const processedColumns = columns.map((key: string) => {
let label = verboseMap[key];
let formatString = columnFormats && columnFormats[key];
let formatFunction: NumberFormatter | TimeFormatter | undefined;
let type = 'string';

// Handle verbose names for percents
if (!label) {
if (key[0] === '%') {
const cleanedKey = key.substring(1);
label = `% ${verboseMap[cleanedKey] || cleanedKey}`;
formatFunction = formatPercent;
} else {
label = key;
}
}

if (key === '__timestamp') {
formatFunction = tsFormatter;
}

const extraField: {
[key: string]: any;
} = {};

if (metrics.indexOf(key) >= 0) {
formatFunction = getNumberFormatter(formatString);
type = 'metric';
extraField['maxValue'] = maxes[key];
extraField['minValue'] = mins[key];
}
return {
key,
label,
format: columnFormats && columnFormats[key],
format: formatFunction,
type,
...extraField,
};
});

Expand Down
10 changes: 6 additions & 4 deletions plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-table/src/transformProps.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,16 @@
* specific language governing permissions and limitations
* under the License.
*/
/* eslint-disable sort-keys */

import { ChartProps, Metric, FormDataMetric } from '@superset-ui/chart';

const DTTM_ALIAS = '__timestamp';

function transformData(data: ChartProps['payload'][], formData: ChartProps['formData']) {
type PlainObject = {
[key: string]: any;
};

function transformData(data: PlainObject[], formData: PlainObject) {
const columns = new Set(
[...formData.groupby, ...formData.metrics, ...formData.allColumns].map(
column => column.label || column,
Expand Down Expand Up @@ -88,8 +91,7 @@ export default function transformProps(chartProps: ChartProps) {
timeseriesLimitMetric,
} = formData;
const { columnFormats, verboseMap } = datasource;
const data = payload.data || payload[0].data;
const { records, columns } = transformData(data, formData);
const { records, columns } = transformData(payload.data, formData);

const processedColumns = columns.map((key: string) => {
let label = verboseMap[key];
Expand Down
Loading

0 comments on commit 604fd44

Please sign in to comment.