The chart types are expanded synchronously on GPT and Skylark models; the method of obtaining cells is unified.

packages/vmind/__tests__/browser/src/pages/ChartGeneration/DataInput.tsx

@@ -49,7 +49,11 @@ import {
   linearProgressChartData,
   basicHeatMapChartData,
   vennChartData,
-  mapChartData
+  mapChartData,
+  singleColumnLineCombinationChartData,
+  singleColumnLineCombinationChartData1,
+  singleColumnBarCombinationChartData1,
+  singleColumnBarCombinationChartData
 } from '../../constants/mockData';
 import VMind, { ArcoTheme, builtinThemeMap, BuiltinThemeType } from '../../../../../src/index';
 import { Model } from '../../../../../src/index';
@@ -106,7 +110,11 @@ const demoDataList: { [key: string]: any } = {
   Gauge: gaugeChartData,
   LinearProgress: linearProgressChartData,
   BasicHeatMap: basicHeatMapChartData,
-  Venn: vennChartData
+  Venn: vennChartData,
+  SingleColumnLineCommon: singleColumnLineCombinationChartData,
+  SingleColumnLineCommon1: singleColumnLineCombinationChartData1,
+  SingleColumnBarCommon: singleColumnBarCombinationChartData,
+  SingleColumnBarCommon1: singleColumnBarCombinationChartData1
 };
 
 const globalVariables = (import.meta as any).env;
@@ -187,14 +195,14 @@ export function DataInput(props: IPropsType) {
     console.log(chartGenerationRes);
     if (isArray(chartGenerationRes)) {
       const resNew = chartGenerationRes.map(res => {
-        const { spec, cell } = res;
+        const { spec, cells } = res;
         specTemplateTest && (spec.data = undefined);
-        const finalSpec = specTemplateTest ? vmind.fillSpecWithData(spec, dataset, cell) : spec;
+        const finalSpec = specTemplateTest ? vmind.fillSpecWithData(spec, dataset, cells) : spec;
         return finalSpec;
       });
       props.onSpecListGenerate(resNew);
     } else {
-      const { spec, time, cell } = chartGenerationRes;
+      const { spec, time, cells } = chartGenerationRes;
 
       const finalSpec = specTemplateTest ? vmind.fillSpecWithData(spec, dataset) : spec;
 

packages/vmind/src/applications/chartGeneration/constants.ts

@@ -1,11 +1,13 @@
 import type { BasemapOption } from '../../common/typings';
-import { ChartType, MapRegionCoordinate } from '../../common/typings';
+import { ChartType, CombinationBasicChartType, CombinationChartType, MapRegionCoordinate } from '../../common/typings';
 
 export const SUPPORTED_CHART_LIST = Object.values(ChartType);
+export const COMBINATION_BASIC_CHART_LIST = Object.values(CombinationBasicChartType);
+export const COMBINATION_CHART_LIST = Object.values(CombinationChartType);
 
 export const NEED_COLOR_FIELD_CHART_LIST = [ChartType.PieChart, ChartType.RoseChart, ChartType.LinearProgress];
 
-export const NEED_SIZE_FIELD_CHART_LIST = [ChartType.ScatterPlot, ChartType.BasicHeatMap];
+export const NEED_SIZE_FIELD_CHART_LIST = [ChartType.ScatterPlot, ChartType.BasicHeatMap, ChartType.LiquidChart];
 
 export const NEED_COLOR_AND_SIZE_CHART_LIST = [
   ChartType.WordCloud,
@@ -15,8 +17,7 @@ export const NEED_COLOR_AND_SIZE_CHART_LIST = [
   ChartType.Gauge,
   ChartType.SunburstChart,
   ChartType.TreemapChart,
-  ChartType.CircularProgress,
-  ChartType.LiquidChart
+  ChartType.CircularProgress
 ];
 
 export const CARTESIAN_CHART_LIST = [
@@ -29,7 +30,8 @@ export const CARTESIAN_CHART_LIST = [
   ChartType.WaterFallChart,
   ChartType.BoxPlot,
   ChartType.RangeColumnChart,
-  ChartType.LinearProgress
+  ChartType.LinearProgress,
+  ChartType.BasicHeatMap
 ];
 
 export const DEFAULT_MAP_OPTION: BasemapOption = {

packages/vmind/src/applications/chartGeneration/taskNodes/chartAdvisor/transformers.ts

@@ -36,7 +36,7 @@ type getAdvisedListOutput = {
   chartSource: string;
   advisedList: {
     chartType: string;
-    cell: Cell;
+    cells: Cell[];
     dataset: VMindDataset;
     score: number;
   }[];
@@ -70,7 +70,7 @@ export const getAdvisedListTransformer: Transformer<ChartAdvisorContext, getAdvi
     .filter((d: any) => availableChartTypeList.includes(d.chartType) && d.score - 0 >= 0.00000001)
     .map((result: any) => ({
       chartType: chartTypeMap(result.chartType as unknown as ChartType).toUpperCase(),
-      cell: getCell(result.cell),
+      cells: [getCell(result.cell)],
       dataset: result.dataset,
       score: result.score
     }));
@@ -92,7 +92,7 @@ const getTop1AdvisedChart: Transformer<getAdvisedListOutput, ChartAdvisorOutput>
   if (advisedList.length === 0) {
     return {
       chartType: VMindChartType.BarChart.toUpperCase() as VMindChartType,
-      cell: {},
+      cells: [{}],
       dataset: undefined,
       chartSource,
       usage
@@ -101,7 +101,7 @@ const getTop1AdvisedChart: Transformer<getAdvisedListOutput, ChartAdvisorOutput>
   const result = advisedList[0];
   return {
     chartType: result.chartType as VMindChartType,
-    cell: getCell(result.cell),
+    cells: [getCell(result.cells[0])],
     dataset: result.dataset,
     chartSource,
     usage
@@ -116,8 +116,8 @@ const chartAdvisorHandler = (context: ChartAdvisorContext & ChartAdvisorOutput)
 export const chartGenerationErrorWrapper: Transformer<ChartAdvisorContext & ChartAdvisorOutput, ChartAdvisorOutput> = (
   context: ChartAdvisorContext & ChartAdvisorOutput
 ) => {
-  const { error, chartType, fieldInfo, cell } = context as any;
-  if (error || !checkChartTypeAndCell(chartType, cell, fieldInfo)) {
+  const { error, chartType, fieldInfo, cells } = context as any;
+  if (error || cells.some((cell: Cell) => !checkChartTypeAndCell(chartType, cell, fieldInfo))) {
     console.warn('LLM generation error, use rule generation.');
     return chartAdvisorHandler(context);
   }

packages/vmind/src/applications/chartGeneration/taskNodes/generateChartType/skylark/prompt/index.ts

@@ -3,6 +3,7 @@ import type { GenerateChartTypeContext } from '../../types';
 import { getChartRecommendPrompt } from './template';
 import { getStrFromArray } from '../../../../../../common/utils/utils';
 import { chartKnowledgeBase } from './knowledge';
+import { COMBINATION_CHART_LIST } from '../../../../constants';
 
 export class ChartTypeGenerationPrompt extends Prompt<GenerateChartTypeContext> {
   constructor() {
@@ -25,6 +26,7 @@ export class ChartTypeGenerationPrompt extends Prompt<GenerateChartTypeContext>
 
     const chartRecommendPrompt = getChartRecommendPrompt(
       chartTypeList,
+      COMBINATION_CHART_LIST,
       chartRecommendKnowledgeStr,
       chartRecommendConstraintsStr,
       llmOptions.showThoughts ?? true

packages/vmind/src/applications/chartGeneration/taskNodes/generateChartType/skylark/prompt/knowledge.ts

@@ -1,6 +1,7 @@
 /* eslint-disable max-len */
 
 import { ChartType } from '../../../../../../common/typings';
+import { COMBINATION_BASIC_CHART_LIST } from '../../../../constants';
 
 type ChartKnowledgeBase = {
   [chartType: string]: {
@@ -73,5 +74,53 @@ export const chartKnowledgeBase: ChartKnowledgeBase = {
   [ChartType.LiquidChart]: {
     knowledge: ['Liquid chart show a percent value'],
     constraints: ['Use Liquid Chart if user want to show a percent value']
+  },
+  [ChartType.BubbleCirclePacking]: {
+    knowledge: [
+      'Bubble Circle Packing is useful for visualizing hierarchical data with circles representing nodes, where the size and color can convey additional information about the data points.'
+    ]
+  },
+  [ChartType.MapChart]: {
+    knowledge: [
+      'Map Charts are used to visualize geographical data, allowing for the identification of spatial patterns and trends.'
+    ]
+  },
+  [ChartType.RangeColumnChart]: {
+    knowledge: [
+      'Range Column Charts are designed to show data that has a minimum and a maximum value, making them effective for displaying variability or uncertainty within data sets.'
+    ]
+  },
+  [ChartType.SunburstChart]: {
+    knowledge: [
+      'Sunburst Charts are excellent for visualizing hierarchical data, allowing users to see relationships between categories and subcategories at varying levels of detail.',
+      'The colors field for sunburst chart and treemap chart must be an array. The order of the elements in the array needs to be sorted from large to small according to the coverage described by the data field.'
+    ]
+  },
+  [ChartType.TreemapChart]: {
+    knowledge: [
+      'Treemap Charts are effective for displaying large amounts of hierarchical data in a compact space, where areas represent the size of each category.',
+      'The colors field for sunburst chart and treemap chart must be an array. The order of the elements in the array needs to be sorted from large to small according to the coverage described by the data field.'
+    ]
+  },
+  [ChartType.Gauge]: {
+    knowledge: [
+      'Gauge Charts are useful for displaying performance metrics against a target, providing a quick visual summary at a glance.',
+      'The gauge chart must contain two fields: size and color.'
+    ]
+  },
+  [ChartType.BasicHeatMap]: {
+    knowledge: [
+      'Basic Heat Maps are great for visualizing data intensity over two dimensions, helping to identify patterns through color coding.'
+    ]
+  },
+  [ChartType.VennChart]: {
+    knowledge: [
+      'Venn Charts are useful for displaying the relationships between different groups, emphasizing similarities and differences visually.',
+      'The color field of the Venn diagram requires an array of length 2. The field with subscript 0 maps to the sets, and the field with subscript 1 maps to the name.'
+    ]
+  },
+  [ChartType.SingleColumnCombinationChart]: {
+    knowledge: ['Single column combination charts can be combined with a variety of different basic chart types'],
+    constraints: [`subChartType cannot be empty, it is an array of values in ${COMBINATION_BASIC_CHART_LIST}.`]
   }
 };

packages/vmind/src/applications/chartGeneration/taskNodes/generateChartType/skylark/prompt/template.ts

@@ -3,6 +3,7 @@ import type { ChartType } from '../../../../../../common/typings';
 
 export const getChartRecommendPrompt = (
   chartTypeList: ChartType[],
+  combinationChartList: string[],
   knowledgeStr: string,
   constraintsStr: string,
   showThoughts: boolean
@@ -25,4 +26,5 @@ Response in the following format:
 ${
   showThoughts ? 'thoughts: //Your thoughts\n' : ''
 }chartType: //chart type you choose based on data and user's command. Only one chart type can be used.
+subChartType: //The default value is an empty array. It is assigned only when chartType is in ${combinationChartList}.
 `;

packages/vmind/src/applications/chartGeneration/taskNodes/generateChartType/skylark/utils.ts

@@ -23,7 +23,7 @@ export const parseChartTypeResponse: Parser<GenerateChartTypeContext, Partial<Ge
     throw Error(chartRecommendResJSON.message);
   }
 
-  const { charttype: chartType } = chartRecommendResJSON;
+  const { charttype: chartType, subcharttype: subChartType } = chartRecommendResJSON;
 
-  return { chartType: chartType, chartTypeTokenUsage: chartRecommendResJSON.usage };
+  return { chartType: chartType, subChartType: subChartType, chartTypeTokenUsage: chartRecommendResJSON.usage };
 };

packages/vmind/src/applications/chartGeneration/taskNodes/generateChartType/types.ts

@@ -1,10 +1,12 @@
 import type { ChartType } from '../../../../common/typings';
 import type { GetVizSchemaContext, GetVizSchemaOutput } from '../getVizSchema/types';
+import type { CombinationBasicChartType } from '../../../../common/typings';
 
 export type GenerateChartTypeContext = GetVizSchemaContext & GetVizSchemaOutput;
 
 export type GenerateChartTypeOutput = {
   chartType: ChartType;
+  subChartType?: CombinationBasicChartType[];
   chartSource: string;
   chartTypeTokenUsage: any;
 };