github/DB-GPT
1
0
Fork 0
mirror of https://github.com/csunny/DB-GPT.git synced 2025-09-18 07:30:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): sort line chart data according to time order (#1639)

Browse Source
This commit is contained in:
chenluli
2024-06-17 21:33:54 +08:00
committed by GitHub
parent e1e94f997a
commit 49b56b4576
5 changed files with 47 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,9 @@
import { hasSubset, intersects } from '../advisor/utils';
import { findOrdinalField, processDateEncode, findNominalField, isUniqueXValue, getLineSize } from './util';
import { hasSubset } from '../advisor/utils';
import { findOrdinalField, processDateEncode, findNominalField, getLineSize, sortData } from './util';
import type { ChartKnowledge, CustomChart, GetChartConfigProps, Specification } from '../types';
import type { Datum } from '@antv/ava';
const MULTI_LINE_CHART = 'multi_line_chart'
const getChartSpec = (data: GetChartConfigProps['data'], dataProps: GetChartConfigProps['dataProps']) => {
const ordinalField = findOrdinalField(dataProps);
const nominalField = findNominalField(dataProps);
@@ -18,7 +19,7 @@ const getChartSpec = (data: GetChartConfigProps['data'], dataProps: GetChartConf
const spec: Specification = {
type: 'view',
autoFit: true,
data,
data: sortData({ data, chartType: MULTI_LINE_CHART, xField: field4X }),
children: [],
};
@@ -43,7 +44,7 @@ const getChartSpec = (data: GetChartConfigProps['data'], dataProps: GetChartConf
};
const ckb: ChartKnowledge = {
id: 'multi_line_chart',
id: MULTI_LINE_CHART,
name: 'multi_line_chart',
alias: ['multi_line_chart'],
family: ['LineCharts'],

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

@@ -1,8 +1,9 @@
import { hasSubset } from '../advisor/utils';
import { findNominalField, findOrdinalField, getLineSize, processDateEncode } from './util';
import { findNominalField, findOrdinalField, getLineSize, processDateEncode, sortData } from './util';
import type { ChartKnowledge, CustomChart, GetChartConfigProps, Specification } from '../types';
import { Datum } from '@antv/ava';
const MULTI_MEASURE_LINE_CHART = 'multi_measure_line_chart'
const getChartSpec = (data: GetChartConfigProps['data'], dataProps: GetChartConfigProps['dataProps']) => {
try {
// @ts-ignore
@@ -12,7 +13,7 @@ const getChartSpec = (data: GetChartConfigProps['data'], dataProps: GetChartConf
const spec: Specification = {
type: 'view',
data,
data: sortData({ data, chartType: MULTI_MEASURE_LINE_CHART, xField: field4Nominal }),
children: [],
};
@@ -40,7 +41,7 @@ const getChartSpec = (data: GetChartConfigProps['data'], dataProps: GetChartConf
};
const ckb: ChartKnowledge = {
id: 'multi_measure_line_chart',
id: MULTI_MEASURE_LINE_CHART,
name: 'multi_measure_line_chart',
alias: ['multi_measure_line_chart'],
family: ['LineCharts'],

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

@@ -1,8 +1,6 @@
import { Datum, FieldInfo } from '@antv/ava';
import { hasSubset, intersects } from '../advisor/utils';
import { uniq } from 'lodash';
type BasicDataPropertyForAdvice = any;
import type { Datum, FieldInfo } from "@antv/ava";
import { hasSubset, intersects } from "../advisor/utils";
import { cloneDeep, uniq } from "lodash";
/**
* Process date column to new Date().
@@ -10,7 +8,7 @@ type BasicDataPropertyForAdvice = any;
* @param dataProps
* @returns
*/
export function processDateEncode(field: string, dataProps: BasicDataPropertyForAdvice[]) {
export function processDateEncode(field: string, dataProps: FieldInfo[]) {
const dp = dataProps.find((dataProp) => dataProp.name === field);
if (dp?.recommendation === 'date') {
@@ -50,3 +48,21 @@ export const getLineSize = (
}
return field4X?.name && isUniqueXValue({ data: allData, xField: field4X.name }) ? 5 : undefined;
};
export const sortData = ({ data, chartType, xField }: {
data: Datum[];
xField?: FieldInfo;
chartType: string;
}) => {
const sortedData = cloneDeep(data)
try {
// 折线图绘制需要将数据点按照日期从小到大的顺序排序和连线
if (chartType.includes('line') && xField?.name && xField.recommendation === 'date') {
sortedData.sort((datum1, datum2) => new Date(datum1[xField.name as string]).getTime() - new Date(datum2[xField.name as string]).getTime())
return sortedData
}
} catch (err) {
console.error(err)
}
return sortedData
}