fix: compatibility of @ant-design/plots 2.x (#3734)
* fix: compatibility of @ant-design/plots 2.x * fix: dual-axes chart bug * fix: auto infer bug
This commit is contained in:
parent
c191f149f9
commit
542fb65b50
@ -121,6 +121,7 @@ export class Chart implements ChartType {
|
|||||||
let xField: FieldOption;
|
let xField: FieldOption;
|
||||||
let yField: FieldOption;
|
let yField: FieldOption;
|
||||||
let seriesField: FieldOption;
|
let seriesField: FieldOption;
|
||||||
|
let colorField: FieldOption;
|
||||||
let yFields: FieldOption[];
|
let yFields: FieldOption[];
|
||||||
const getField = (fields: FieldOption[], selected: { field: string | string[]; alias?: string }) => {
|
const getField = (fields: FieldOption[], selected: { field: string | string[]; alias?: string }) => {
|
||||||
if (selected.alias) {
|
if (selected.alias) {
|
||||||
@ -146,17 +147,19 @@ export class Chart implements ChartType {
|
|||||||
xIndex = i;
|
xIndex = i;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
if (xIndex) {
|
xIndex = xIndex || 0;
|
||||||
// If there is a time field, the other field is used as the series field by default.
|
xField = xField || getField(fields, dimensions[xIndex]);
|
||||||
const index = xIndex === 0 ? 1 : 0;
|
const restFields = dimensions.filter((_, i) => i !== xIndex).map((i) => getField(fields, i));
|
||||||
seriesField = getField(fields, dimensions[index]);
|
if (restFields.length === 1) {
|
||||||
} else {
|
seriesField = restFields[0];
|
||||||
xField = getField(fields, dimensions[0]);
|
colorField = restFields[0];
|
||||||
seriesField = getField(fields, dimensions[1]);
|
} else if (restFields.length > 1) {
|
||||||
|
colorField = restFields[0];
|
||||||
|
seriesField = restFields[1];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return { xField, yField, seriesField, yFields };
|
return { xField, yField, seriesField, colorField, yFields };
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -49,4 +49,5 @@ export default {
|
|||||||
xField: (props: FieldConfigProps) => selectField({ name: 'xField', title: 'xField', required: true, ...props }),
|
xField: (props: FieldConfigProps) => selectField({ name: 'xField', title: 'xField', required: true, ...props }),
|
||||||
yField: (props: FieldConfigProps) => selectField({ name: 'yField', title: 'yField', required: true, ...props }),
|
yField: (props: FieldConfigProps) => selectField({ name: 'yField', title: 'yField', required: true, ...props }),
|
||||||
seriesField: (props: FieldConfigProps) => selectField({ name: 'seriesField', title: 'seriesField', ...props }),
|
seriesField: (props: FieldConfigProps) => selectField({ name: 'seriesField', title: 'seriesField', ...props }),
|
||||||
|
colorField: (props: FieldConfigProps) => selectField({ name: 'colorField', title: 'colorField', ...props }),
|
||||||
};
|
};
|
||||||
|
@ -2,6 +2,7 @@ import { G2PlotChart } from './g2plot';
|
|||||||
import { ChartType, RenderProps } from '../chart';
|
import { ChartType, RenderProps } from '../chart';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { DualAxes as G2DualAxes } from '@ant-design/plots';
|
import { DualAxes as G2DualAxes } from '@ant-design/plots';
|
||||||
|
import lodash from 'lodash';
|
||||||
|
|
||||||
export class DualAxes extends G2PlotChart {
|
export class DualAxes extends G2PlotChart {
|
||||||
constructor() {
|
constructor() {
|
||||||
@ -59,18 +60,38 @@ export class DualAxes extends G2PlotChart {
|
|||||||
return {
|
return {
|
||||||
general: {
|
general: {
|
||||||
xField: xField?.value,
|
xField: xField?.value,
|
||||||
yField: yFields?.map((f) => f.value).slice(0, 2) || [],
|
yField: yFields?.map((f) => f.value) || [],
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
render({ data, general, advanced, fieldProps }: RenderProps) {
|
getProps({ data, general, advanced, fieldProps }: RenderProps) {
|
||||||
const props = this.getProps({ data, general, advanced, fieldProps });
|
const props = super.getProps({ data, general, advanced, fieldProps });
|
||||||
const { data: _data } = props;
|
return {
|
||||||
return () =>
|
...lodash.omit(props, ['legend', 'tooltip']),
|
||||||
React.createElement(this.component, {
|
children:
|
||||||
...props,
|
props.yField?.map((yField: string, index: number) => {
|
||||||
data: [_data, _data],
|
return {
|
||||||
});
|
type: 'line',
|
||||||
|
yField,
|
||||||
|
colorField: () => {
|
||||||
|
const props = fieldProps[yField];
|
||||||
|
const transformer = props?.transformer;
|
||||||
|
return props?.label || (transformer ? transformer(yField) : yField);
|
||||||
|
},
|
||||||
|
axis: {
|
||||||
|
y: {
|
||||||
|
title: fieldProps[yField]?.label || yField,
|
||||||
|
position: index === 0 ? 'left' : 'right',
|
||||||
|
labelFormatter: (datnum) => {
|
||||||
|
const props = fieldProps[yField];
|
||||||
|
const transformer = props?.transformer;
|
||||||
|
return transformer ? transformer(datnum) : datnum;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}) || [],
|
||||||
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,5 @@
|
|||||||
|
import { transform } from 'lodash';
|
||||||
import { Chart, ChartProps, ChartType, RenderProps } from '../chart';
|
import { Chart, ChartProps, ChartType, RenderProps } from '../chart';
|
||||||
import { FieldOption } from '../../hooks';
|
|
||||||
import { QueryProps } from '../../renderer';
|
|
||||||
import configs from './configs';
|
import configs from './configs';
|
||||||
|
|
||||||
export class G2PlotChart extends Chart {
|
export class G2PlotChart extends Chart {
|
||||||
@ -29,15 +28,6 @@ export class G2PlotChart extends Chart {
|
|||||||
const meta = {};
|
const meta = {};
|
||||||
// Some charts render wrong when the field name contains a dot in G2Plot
|
// Some charts render wrong when the field name contains a dot in G2Plot
|
||||||
const replace = (key: string) => key.replace(/\./g, '_');
|
const replace = (key: string) => key.replace(/\./g, '_');
|
||||||
Object.entries(fieldProps).forEach(([key, props]) => {
|
|
||||||
if (key.includes('.')) {
|
|
||||||
key = replace(key);
|
|
||||||
}
|
|
||||||
meta[key] = {
|
|
||||||
formatter: props.transformer,
|
|
||||||
alias: props.label,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
general = Object.entries(general).reduce((obj, [key, value]) => {
|
general = Object.entries(general).reduce((obj, [key, value]) => {
|
||||||
obj[key] = value;
|
obj[key] = value;
|
||||||
if (key.includes('Field')) {
|
if (key.includes('Field')) {
|
||||||
@ -49,7 +39,40 @@ export class G2PlotChart extends Chart {
|
|||||||
}
|
}
|
||||||
return obj;
|
return obj;
|
||||||
}, {});
|
}, {});
|
||||||
return {
|
const config = {
|
||||||
|
legend: {
|
||||||
|
color: {
|
||||||
|
itemLabelText: (datnum) => {
|
||||||
|
const props = fieldProps[datnum.label];
|
||||||
|
const transformer = props?.transformer;
|
||||||
|
return props?.label || (transformer ? transformer(datnum.label) : datnum.label);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tooltip: (d, index, data, column) => {
|
||||||
|
const field = column.y.field;
|
||||||
|
const props = fieldProps[field];
|
||||||
|
const name = props?.label || field;
|
||||||
|
const transformer = props?.transformer;
|
||||||
|
const value = column.y.value[index];
|
||||||
|
return { name, value: transformer ? transformer(value) : value };
|
||||||
|
},
|
||||||
|
axis: {
|
||||||
|
x: {
|
||||||
|
labelFormatter: (datnum) => {
|
||||||
|
const props = fieldProps[general.xField];
|
||||||
|
const transformer = props?.transformer;
|
||||||
|
return transformer ? transformer(datnum) : datnum;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
y: {
|
||||||
|
labelFormatter: (datnum) => {
|
||||||
|
const props = fieldProps[general.yField];
|
||||||
|
const transformer = props?.transformer;
|
||||||
|
return transformer ? transformer(datnum) : datnum;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
data: data.map((item) => {
|
data: data.map((item) => {
|
||||||
const obj = {};
|
const obj = {};
|
||||||
Object.entries(item).forEach(([key, value]) => {
|
Object.entries(item).forEach(([key, value]) => {
|
||||||
@ -60,11 +83,27 @@ export class G2PlotChart extends Chart {
|
|||||||
});
|
});
|
||||||
return obj;
|
return obj;
|
||||||
}),
|
}),
|
||||||
meta,
|
theme: 'classic',
|
||||||
animation: false,
|
animate: {
|
||||||
|
enter: {
|
||||||
|
type: false,
|
||||||
|
},
|
||||||
|
update: {
|
||||||
|
type: false,
|
||||||
|
},
|
||||||
|
exit: {
|
||||||
|
type: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
colorField: general.seriesField,
|
||||||
|
stack: general.isStack,
|
||||||
|
percent: general.isPercent ? true : undefined,
|
||||||
|
...(general.smooth ? { shapeField: 'smooth' } : {}),
|
||||||
...general,
|
...general,
|
||||||
|
seriesField: general.isGroup ? general.seriesField : undefined,
|
||||||
...advanced,
|
...advanced,
|
||||||
};
|
};
|
||||||
|
return config;
|
||||||
}
|
}
|
||||||
|
|
||||||
getReference() {
|
getReference() {
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import { Area, Column, Line, Scatter } from '@ant-design/plots';
|
import { Area, Column, Line, Scatter, Bar } from '@ant-design/plots';
|
||||||
import { Bar } from './bar';
|
|
||||||
import { Pie } from './pie';
|
import { Pie } from './pie';
|
||||||
import { DualAxes } from './dualAxes';
|
import { DualAxes } from './dualAxes';
|
||||||
import { G2PlotChart } from './g2plot';
|
import { G2PlotChart } from './g2plot';
|
||||||
@ -30,7 +29,12 @@ export default [
|
|||||||
component: Column,
|
component: Column,
|
||||||
config: ['isGroup', 'isStack', 'isPercent'],
|
config: ['isGroup', 'isStack', 'isPercent'],
|
||||||
}),
|
}),
|
||||||
new Bar(),
|
new G2PlotChart({
|
||||||
|
name: 'bar',
|
||||||
|
title: 'Bar Chart',
|
||||||
|
component: Bar,
|
||||||
|
config: ['isGroup', 'isStack', 'isPercent'],
|
||||||
|
}),
|
||||||
new Pie(),
|
new Pie(),
|
||||||
new DualAxes(),
|
new DualAxes(),
|
||||||
new G2PlotChart({ name: 'scatter', title: 'Scatter Chart', component: Scatter }),
|
new G2PlotChart({ name: 'scatter', title: 'Scatter Chart', component: Scatter }),
|
||||||
|
Loading…
Reference in New Issue
Block a user