feat: use fold to visualize more than 2 fields

da730 · da730 · commit b21450f2f740 · 2024-03-22T19:30:18.000+08:00
diff --git a/packages/vmind/src/common/vizDataToSpec/utils.ts b/packages/vmind/src/common/vizDataToSpec/utils.ts
@@ -1,5 +1,6 @@
-import { Cell, DataType, ROLE, SimpleFieldInfo } from 'src/typings';
+import { Cell, DataItem, DataType, ROLE, SimpleFieldInfo } from 'src/typings';
 import { VIDEO_LENGTH_BY_CHART_TYPE, DEFAULT_VIDEO_LENGTH } from './constants';
+import { FOLD_NAME, FOLD_VALUE, fold } from '@visactor/chart-advisor';
 
 export const detectAxesType = (values: any[], field: string) => {
   const isNumber = values.every(d => !d[field] || !isNaN(Number(d[field])));
@@ -58,3 +59,9 @@ export const getFieldByRole = (fields: SimpleFieldInfo[], role: ROLE) => {
 export const getFieldByDataType = (fields: SimpleFieldInfo[], dataTypeList: DataType[]) => {
   return fields.find(f => dataTypeList.includes(f.type));
 };
+
+export const foldDatasetByYField = (dataset: DataItem[], yFieldList: string[], fieldInfo: SimpleFieldInfo[]) => {
+  const aliasMap = Object.fromEntries(fieldInfo.map(d => [d.fieldName, d.fieldName]));
+
+  return fold(dataset as any, yFieldList, FOLD_NAME, FOLD_VALUE, aliasMap, false);
+};
diff --git a/packages/vmind/src/gpt/chart-generation/NLToChart.ts b/packages/vmind/src/gpt/chart-generation/NLToChart.ts
@@ -58,6 +58,7 @@ export const generateChartWithGPT = async (
     if (checkChartTypeAndCell(patchResult.chartTypeNew, patchResult.cellNew, fieldInfo)) {
       chartType = patchResult.chartTypeNew;
       cell = patchResult.cellNew;
+      dataset = patchResult.datasetNew;
     }
   } catch (err) {
     console.warn(err);
diff --git a/packages/vmind/src/gpt/chart-generation/patch.ts b/packages/vmind/src/gpt/chart-generation/patch.ts
@@ -1,13 +1,15 @@
-import { isNil } from 'lodash';
+import { isArray, isNil } from 'lodash';
 import {
   CARTESIAN_CHART_LIST,
   detectAxesType,
+  foldDatasetByYField,
   getFieldByDataType,
   getFieldByRole,
   getRemainedFields
 } from '../../common/vizDataToSpec/utils';
 import { Cell, DataItem, DataType, PatchContext, PatchPipeline, ROLE, SimpleFieldInfo } from '../../typings';
 import { execPipeline } from '../../common/utils';
+import { FOLD_NAME, FOLD_VALUE } from '@visactor/chart-advisor';
 
 export const patchUserInput = (userInput: string) => {
   const FULL_WIDTH_SYMBOLS = ['，', '。'];
@@ -38,7 +40,6 @@ export const patchUserInput = (userInput: string) => {
 };
 
 const patchAxisField: PatchPipeline = (context: PatchContext, _originalContext: PatchContext) => {
-  // Todo: When multiple Y fields, use FOLD
   const { cell } = context;
 
   const cellNew: any = { ...cell };
@@ -84,42 +85,44 @@ const patchLabelField: PatchPipeline = (context: PatchContext, _originalContext:
 };
 
 const patchYField: PatchPipeline = (context: PatchContext, _originalContext: PatchContext) => {
-  const { chartType, cell } = context;
+  const { chartType, cell, dataset, fieldInfo } = context;
   let cellNew = { ...cell };
   const { x, y } = cellNew;
   let chartTypeNew = chartType;
+  let datasetNew = dataset;
 
   // y轴字段有多个时，处理方式:
   // 1. 图表类型为: 箱型图, 图表类型不做矫正
   // 2. 图表类型为: 柱状图 或 折线图, 图表类型矫正为双轴图
   // 3. 其他情况, 图表类型矫正为散点图
-  if (y && typeof y !== 'string' && y.length > 1) {
-    if (chartTypeNew === 'BOX PLOT') {
+  if (y && isArray(y) && y.length > 1) {
+    if (chartTypeNew === 'BOX PLOT' || (chartTypeNew === 'DUAL AXIS CHART' && y.length === 2)) {
       return {
         ...context
       };
     }
+
     if (chartTypeNew === 'BAR CHART' || chartTypeNew === 'LINE CHART' || chartTypeNew === 'DUAL AXIS CHART') {
-      if (y.length === 2) {
-        chartTypeNew = 'DUAL AXIS CHART';
-      } else {
-        //TODO: use fold to visualize more than 2 y fields
-      }
+      //use fold to visualize more than 2 y fields
+      datasetNew = foldDatasetByYField(datasetNew, y, fieldInfo);
+      cellNew.y = FOLD_VALUE.toString();
+      cellNew.color = FOLD_NAME.toString();
     } else {
-      (chartTypeNew = 'SCATTER PLOT'),
-        (cellNew = {
-          ...cell,
-          x: y[0],
-          y: y[1],
-          color: typeof x === 'string' ? x : x[0]
-        });
+      chartTypeNew = 'SCATTER PLOT';
+      cellNew = {
+        ...cell,
+        x: y[0],
+        y: y[1],
+        color: typeof x === 'string' ? x : x[0]
+      };
     }
   }
 
   return {
     ...context,
     chartType: chartTypeNew,
-    cell: cellNew
+    cell: cellNew,
+    dataset: datasetNew
   };
 };
 
diff --git a/packages/vmind/src/skylark/chart-generation/NLToChart.ts b/packages/vmind/src/skylark/chart-generation/NLToChart.ts
@@ -58,6 +58,7 @@ export const generateChartWithSkylark = async (
     if (checkChartTypeAndCell(patchResult.chartTypeNew, patchResult.cellNew, patchResult.fieldInfoNew)) {
       chartType = patchResult.chartTypeNew;
       cell = patchResult.cellNew;
+      dataset = patchResult.datasetNew;
     }
   } catch (err) {
     console.warn(err);
diff --git a/packages/vmind/src/skylark/chart-generation/constants.ts b/packages/vmind/src/skylark/chart-generation/constants.ts
@@ -34,7 +34,7 @@ export const ChartFieldInfo: ChannelInfo = {
   'LINE CHART': {
     visualChannels: {
       x: "x-axis of line chart. Can't be empty. Only string fields",
-      y: "y-axis of line chart. Can't be empty. Only number fields",
+      y: "y-axis of line chart. Can't be empty. Only number fields. Use array if there are more than one number fields need to show.",
       color:
         'color channel of line chart. Used to distinguish different lines. Only string fields. Can be empty if no suitable field.'
     },
@@ -43,7 +43,10 @@ export const ChartFieldInfo: ChannelInfo = {
       y: 'field assigned to y channel',
       color: 'field assigned to color channel. Can be empty if no suitable field.'
     },
-    knowledge: ['Only string fields can be used in color channel.']
+    knowledge: [
+      'Only string fields can be used in color channel.',
+      'Use an array in y-axis if you want to assign more than one fields in y-axis.'
+    ]
   },
   'SCATTER PLOT': {
     visualChannels: {
diff --git a/packages/vmind/src/skylark/chart-generation/patch.ts b/packages/vmind/src/skylark/chart-generation/patch.ts
@@ -1,7 +1,8 @@
-import { isArray } from 'lodash';
-import { Cell, DataItem, DataType, PatchContext, PatchPipeline, SimpleFieldInfo } from '../../typings';
-import { detectAxesType } from '../../common/vizDataToSpec/utils';
+import { isArray, isString } from 'lodash';
+import { Cell, DataItem, DataType, PatchContext, PatchPipeline, ROLE, SimpleFieldInfo } from '../../typings';
 import { execPipeline } from '../../common/utils';
+import { foldDatasetByYField } from '../../common/vizDataToSpec/utils';
+import { FOLD_NAME, FOLD_VALUE } from '@visactor/chart-advisor';
 
 const matchFieldWithoutPunctuation = (field: string, fieldList: string[]): string | undefined => {
   //try to match the field without punctuation
@@ -47,6 +48,49 @@ const patchNullField: PatchPipeline = (context: PatchContext, _originalContext:
   };
 };
 
+const patchField: PatchPipeline = (context: PatchContext, _originalContext: PatchContext) => {
+  const { fieldInfo, cell } = context;
+  const fieldNames = fieldInfo.map(field => field.fieldName);
+  const cellNew = { ...cell };
+  Object.keys(cellNew).forEach(key => {
+    const value = cellNew[key];
+    if (isString(value) && (value ?? '').includes(',')) {
+      const newValue = (value as string).split(',').map(f => f.trim());
+      if (newValue.every(f => fieldNames.includes(f))) {
+        cellNew[key] = newValue;
+      }
+    }
+  });
+  return {
+    ...context,
+    cell: cellNew
+  };
+};
+
+const patchColorField: PatchPipeline = (context: PatchContext, _originalContext: PatchContext) => {
+  const { chartType, fieldInfo, cell } = context;
+  const cellNew = { ...cell };
+  const { color } = cellNew;
+  let chartTypeNew = chartType;
+  if (color) {
+    const colorField = fieldInfo.find(f => f.fieldName === color);
+    if (colorField && colorField.role === ROLE.MEASURE) {
+      cellNew.color = undefined;
+      if (['BAR CHART', 'LINE CHART', 'DUAL AXIS CHART'].includes(chartTypeNew)) {
+        cellNew.y = [cellNew.y, color].flat();
+        if (chartTypeNew === 'DUAL AXIS CHART' && cellNew.y.length > 2) {
+          chartTypeNew = 'BAR CHART';
+        }
+      }
+    }
+  }
+
+  return {
+    ...context,
+    cell: cellNew
+  };
+};
+
 const patchRadarChart: PatchPipeline = (context: PatchContext, _originalContext: PatchContext) => {
   const { chartType, cell } = context;
 
@@ -83,27 +127,22 @@ const patchBoxPlot: PatchPipeline = (context: PatchContext, _originalContext: Pa
 };
 
 const patchBarChart: PatchPipeline = (context: PatchContext, _originalContext: PatchContext) => {
-  const { chartType, cell } = context;
-  let chartTypeNew = chartType;
-  let cellNew = { ...cell };
-  if (chartTypeNew === 'BAR CHART') {
-    if (isArray(cell.y) && cell.y.length === 2) {
-      chartTypeNew = 'DUAL AXIS CHART';
-    } else if ((cell.y ?? '').includes(',')) {
-      const yNew = (cell.y as string).split(',');
-      if (yNew.length === 2) {
-        chartTypeNew = 'DUAL AXIS CHART';
-        cellNew = {
-          ...cell,
-          y: yNew
-        };
-      }
+  const { chartType, cell, fieldInfo, dataset } = context;
+  const chartTypeNew = chartType;
+  const cellNew = { ...cell };
+  let datasetNew = dataset;
+  if (chartTypeNew === 'BAR CHART' || chartTypeNew === 'LINE CHART') {
+    if (isArray(cellNew.y) && cellNew.y.length > 1) {
+      datasetNew = foldDatasetByYField(datasetNew, cellNew.y, fieldInfo);
+      cellNew.y = FOLD_VALUE.toString();
+      cellNew.color = FOLD_NAME.toString();
     }
   }
   return {
     ...context,
     chartType: chartTypeNew,
-    cell: cellNew
+    cell: cellNew,
+    dataset: datasetNew
   };
 };
 
@@ -162,6 +201,8 @@ const patchArrayField: PatchPipeline = (context: PatchContext, _originalContext:
 
 const patchPipelines: PatchPipeline[] = [
   patchNullField,
+  patchField,
+  patchColorField,
   patchRadarChart,
   patchBoxPlot,
   patchBarChart,

Original file line number	Diff line number	Diff line change
`@@ -58,6 +58,7 @@ export const generateChartWithGPT = async (`
`58`	`58`	`if (checkChartTypeAndCell(patchResult.chartTypeNew, patchResult.cellNew, fieldInfo)) {`
`59`	`59`	`chartType = patchResult.chartTypeNew;`
`60`	`60`	`cell = patchResult.cellNew;`
	`61`	`+ dataset = patchResult.datasetNew;`
`61`	`62`	`}`
`62`	`63`	`} catch (err) {`
`63`	`64`	`console.warn(err);`