github/DB-GPT
1
0
Fork 0
mirror of https://github.com/csunny/DB-GPT.git synced 2025-07-23 20:26:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): fix line chart using interval field as xAxis & fix pie chart tooltip (#1697)

Browse Source
This commit is contained in:
chenluli 2024-07-17 16:40:42 +08:00 committed by GitHub
parent 1775b87606
commit 083becde08
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 18 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
web/components/chart/autoChart/charts/multi-line-chart.ts
View File

@ -7,12 +7,13 @@ const MULTI_LINE_CHART = 'multi_line_chart'
const getChartSpec = (data: GetChartConfigProps['data'], dataProps: GetChartConfigProps['dataProps']) => {
const ordinalField = findOrdinalField(dataProps);
const nominalField = findNominalField(dataProps);
// 放宽折线图的 x 轴条件，优先选择 time， ordinal 类型，没有的话使用 nominal 类型
const field4X = ordinalField ?? nominalField;
// 放宽折线图的 x 轴条件，优先选择 time， ordinal, nominal 类型，没有的话使用第一个字段作兜底
const field4X = ordinalField ?? nominalField ?? dataProps[0];
const remainFields = dataProps.filter((field) => field.name !== field4X?.name);
const field4Y = dataProps.filter((field) => field.levelOfMeasurements && hasSubset(field.levelOfMeasurements, ['Interval']));
const field4Nominal = dataProps.find(
(field) => field.name !== field4X?.name && field.levelOfMeasurements && hasSubset(field.levelOfMeasurements, ['Nominal']),
const field4Y = remainFields.filter((field) => field.levelOfMeasurements && hasSubset(field.levelOfMeasurements, ['Interval'])) ?? [remainFields[0]];
const field4Nominal = remainFields.filter(field => !field4Y.find(y => y.name === field.name)).find(
(field) => field.levelOfMeasurements && hasSubset(field.levelOfMeasurements, ['Nominal']),
);
if (!field4X || !field4Y) return null;

5
web/components/chart/autoChart/charts/multi-measure-line-chart.ts
View File

@ -6,9 +6,10 @@ import { Datum } from '@antv/ava';
const MULTI_MEASURE_LINE_CHART = 'multi_measure_line_chart'
const getChartSpec = (data: GetChartConfigProps['data'], dataProps: GetChartConfigProps['dataProps']) => {
try {
// 优先确认 x 轴，如果没有枚举类型字段，取第一个字段为 x 轴
const field4Nominal = findNominalField(dataProps) ?? findOrdinalField(dataProps) ?? dataProps[0];
// @ts-ignore
const field4Y = dataProps?.filter((field) => hasSubset(field.levelOfMeasurements, ['Interval']));
const field4Nominal = findNominalField(dataProps) ?? findOrdinalField(dataProps);
const field4Y = dataProps?.filter((field) => field.name !== field4Nominal?.name && hasSubset(field.levelOfMeasurements, ['Interval']));
if (!field4Nominal || !field4Y) return null;
const spec: Specification = {

5
web/components/chart/autoChart/charts/util.ts
View File

@ -61,6 +61,11 @@ export const sortData = ({ data, chartType, xField }: {
sortedData.sort((datum1, datum2) => new Date(datum1[xField.name as string]).getTime() - new Date(datum2[xField.name as string]).getTime())
return sortedData
}
// 如果折线图横轴是数值类型，则按照数值大小排序
if (chartType.includes('line') && xField?.name && ['float', 'integer'].includes(xField.recommendation)) {
sortedData.sort((datum1, datum2) => (datum1[xField.name as string] as number) - (datum2[xField.name as string] as number))
return sortedData
}
} catch (err) {
console.error(err)
}

4
web/components/chart/autoChart/index.tsx
View File

@ -102,6 +102,10 @@ export const AutoChart = (props: AutoChartProps) => {
spec.data = sortData({ data: spec.data, xField: dataAnalyzerOutput.dataProps?.find(field => field.recommendation === 'date'), chartType: chartTypeInput });
}
}
if (chartTypeInput === 'pie_chart' && spec?.encode?.color) {
// 补充饼图的 tooltip title 展示
spec.tooltip = { title: { field: spec.encode.color } }
}
return (
<Chart
key={chartTypeInput}