fix(web): fix line chart using interval field as xAxis & fix pie char…

…t tooltip (#1697)
eosphoros-ai · Jul 17, 2024 · 083becd · 083becd
1 parent 1775b87
commit 083becd
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 7 deletions.
diff --git a/web/components/chart/autoChart/charts/multi-line-chart.ts b/web/components/chart/autoChart/charts/multi-line-chart.ts
@@ -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;
 

diff --git a/web/components/chart/autoChart/charts/multi-measure-line-chart.ts b/web/components/chart/autoChart/charts/multi-measure-line-chart.ts
@@ -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 = {

diff --git a/web/components/chart/autoChart/charts/util.ts b/web/components/chart/autoChart/charts/util.ts
@@ -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)
   }

diff --git a/web/components/chart/autoChart/index.tsx b/web/components/chart/autoChart/index.tsx
@@ -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}