Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Jul 17, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions web/components/chart/autoChart/charts/multi-line-chart.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
5 changes: 5 additions & 0 deletions web/components/chart/autoChart/charts/util.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}
Expand Down
4 changes: 4 additions & 0 deletions web/components/chart/autoChart/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
Loading