Merge pull request #155 from VisActor/feat/support-progress-chart

Feat/support progress chart

packages/vmind/__tests__/browser/src/constants/mockData.ts

@@ -4855,3 +4855,15 @@ export const mockUserTextInput10 = {
 
 如果你需要了解更多股市指数波动信息，可以访问财经新闻网站或咨询专业的投资顾问。`
 };
+
+export const mockProgressData = {
+  csv: `年份,进度
+ 2024,0.56`,
+  input: '帮我展示今年的进度数据'
+};
+
+export const liquidData = {
+  csv: `进度
+ 0.56`,
+  input: '展示进度数据'
+};

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

@@ -1,7 +1,7 @@
 import React, { useState, useCallback, useEffect, useRef } from 'react';
 import './index.scss';
 import { Button, Input, Card, Space, Modal, Spin } from '@arco-design/web-react';
-import VChart from '@visactor/vchart';
+import VChart, { registerLiquidChart } from '@visactor/vchart';
 import { ManualTicker, defaultTimeline } from '@visactor/vrender-core';
 import VMind from '../../../../../src';
 import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';
@@ -36,6 +36,8 @@ function downloadVideo(link: string, filename = 'out') {
   a.dispatchEvent(new MouseEvent('click'));
 }
 
+registerLiquidChart();
+
 export function ChartPreview(props: IPropsType) {
   const [generating, setGenerating] = useState<boolean>(false);
   const [outType, setOutType] = useState<'gif' | 'video' | ''>('');

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

@@ -38,7 +38,9 @@ import {
   mockUserInput17,
   mockUserInput18,
   SalesRecordsData,
-  gmvData
+  gmvData,
+  mockProgressData,
+  liquidData
 } from '../../constants/mockData';
 import VMind, { ArcoTheme, builtinThemeMap, BuiltinThemeType } from '../../../../../src/index';
 import { Model } from '../../../../../src/index';
@@ -83,7 +85,9 @@ const demoDataList: { [key: string]: any } = {
   'Sales of different drinkings': mockUserInput3Eng,
   'Multi measure': mockUserInput17,
   DataQuery: mockUserInput18,
-  salesData: SalesRecordsData
+  salesData: SalesRecordsData,
+  progress: mockProgressData,
+  liquid: liquidData
 };
 
 const globalVariables = (import.meta as any).env;

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

@@ -60,5 +60,18 @@ export const chartKnowledgeBase: ChartKnowledgeBase = {
       'Dynamic Bar Chart can only be used when data has a field that is date type.'
     ],
     constraints: ['Use Dynamic Bar Chart if user want to show changes of rankings in data.']
+  },
+
+  [ChartType.LinearProgress]: {
+    knowledge: ['Linear progress chart shows progress value of one or more categories ']
+  },
+
+  [ChartType.CircularProgress]: {
+    knowledge: ['Circular progress chart shows progress value of one or more categories']
+  },
+
+  [ChartType.LiquidChart]: {
+    knowledge: ['Liquid chart show a percent value'],
+    constraints: ['Use Liquid Chart if user want to show a percent value']
   }
 };

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

@@ -1,4 +1,5 @@
 /* eslint-disable max-len */
+import { ChartType } from '../../../../../../common/typings';
 import type { ChannelInfo } from './types';
 
 export const ChartFieldInfo: ChannelInfo = {
@@ -204,5 +205,56 @@ export const ChartFieldInfo: ChannelInfo = {
       "time channel can't be empty",
       'Only date fields can be used in time channel.'
     ]
+  },
+
+  [ChartType.LinearProgress.toUpperCase()]: {
+    visualChannels: {
+      x: "x-axis of bar chart. Can't be empty. Can only use categorical field.",
+      y: "y-axis of bar chart. Can't be empty. Only number fields",
+      color:
+        'color channel of bar. Used to distinguish different bars. Only categorical fields. Can be empty if no suitable field.'
+    },
+    responseDescription: {
+      x: 'field assigned to x channel',
+      y: 'field assigned to y channel',
+      color: 'field assigned to color channel'
+    },
+    knowledge: [
+      "x-axis in linear progress chart can only be a categorical field. Don't use time field",
+      'Only use categorical field can be used in x channel',
+      'y field can not be empty'
+    ]
+  },
+
+  [ChartType.CircularProgress.toUpperCase()]: {
+    visualChannels: {
+      x: "x-axis of bar chart. Can't be empty. Can only use categorical field.",
+      y: "y-axis of bar chart. Can't be empty. Only number fields",
+      color:
+        'color channel of bar. Used to distinguish different bars. Only categorical fields. Can be empty if no suitable field.'
+    },
+    responseDescription: {
+      x: 'field assigned to x channel',
+      y: 'field assigned to y channel',
+      color: 'field assigned to color channel'
+    },
+    knowledge: [
+      "x-axis in linear progress chart can only be a categorical field. Don't use time field",
+      'Only use categorical field can be used in x channel',
+      'y field can not be empty'
+    ]
+  },
+
+  [ChartType.LiquidChart.toUpperCase()]: {
+    visualChannels: {
+      value: "value field of liquid chart. Can't be empty. Only number fields"
+    },
+    responseDescription: {
+      value: 'field assigned to value channel'
+    },
+    knowledge: [
+      'Liquid chart is used to display a single value, with the value range typically from 0 to 1.',
+      'The value usually represents progress, completion, or percentage, and is associated with only one field'
+    ]
   }
 };

packages/vmind/src/applications/chartGeneration/taskNodes/generateTypeAndFieldMap/GPT/prompt/knowledges.ts

@@ -117,6 +117,30 @@ export const chartKnowledgeDict: ChartKnowledge = {
     knowledge: [
       'Dynamic Bar Chart is a dynamic chart that is suitable for displaying changing data and can be used to show ranking, comparisons or data changes over time. It usually has a time field. It updates the data dynamically according to the time field.'
     ]
+  },
+  [ChartType.LiquidChart]: {
+    index: 14,
+    visualChannels: ['x', 'y'],
+    examples: [],
+    knowledge: [
+      'Liquid chart is used to display a single value, with the value range typically from 0 to 1. The value usually represents progress, completion, or percentage, and is associated with only one field'
+    ]
+  },
+  [ChartType.LinearProgress]: {
+    index: 15,
+    visualChannels: ['x', 'y'],
+    examples: [],
+    knowledge: [
+      'Linear Progress chart is typically used to display progress data, which is usually a value between 0 and 1. Linear progress bars can show single progress values as well as multiple progress values. By default, the left Y-axis of the linear progress bar is the categorical field, and the bottom X-axis is the numerical field.'
+    ]
+  },
+  [ChartType.CircularProgress]: {
+    index: 16,
+    visualChannels: ['x', 'y'],
+    examples: [],
+    knowledge: [
+      'Circular progress chart is also used to display progress data, presented in a circular form, with the values on the numerical axis typically ranging from 0 to 1.'
+    ]
   }
 };
 

packages/vmind/src/applications/chartGeneration/taskNodes/getChartSpec/VChart/chartPipeline.ts

@@ -1,3 +1,4 @@
+import { ChartType } from '../../../../../common/typings';
 import type { Transformer } from '../../../../../base/tools/transformer';
 import type { GetChartSpecContext, GetChartSpecOutput } from '../types';
 import {
@@ -25,10 +26,6 @@ import {
   rankingBarField,
   customMark,
   scatterAxis,
-  animationOneByOne,
-  animationCartesianBar,
-  animationCartisianLine,
-  animationCartesianPie,
   wordCloudData,
   displayConfBar,
   displayConfLine,
@@ -46,7 +43,15 @@ import {
   waterfallStackLabel,
   boxPlotField,
   boxPlotStyle,
-  theme
+  theme,
+  liquidField,
+  liquidStyle,
+  linearProgressField,
+  circularProgressField,
+  circularProgressStyle,
+  linearProgressStyle,
+  linearProgressAxes,
+  indicator
 } from './transformers';
 
 const pipelineBar = [
@@ -145,6 +150,28 @@ const pipelineWaterfall = [chartType, data, color, waterfallField, waterfallAxes
 
 const pipelineBoxPlot = [chartType, data, color, boxPlotField, boxPlotStyle, legend, theme];
 
+const pipelineLiquid = [chartType, data, color, liquidField, liquidStyle, indicator, theme];
+
+const pipelineLinearProgress = [
+  chartType,
+  data,
+  color,
+  linearProgressField,
+  linearProgressAxes,
+  linearProgressStyle,
+  theme
+];
+
+const pipelineCircularProgress = [
+  chartType,
+  data,
+  color,
+  circularProgressField,
+  circularProgressStyle,
+  indicator,
+  theme
+];
+
 const pipelineMap: { [chartType: string]: any } = {
   'BAR CHART': pipelineBar,
   'LINE CHART': pipelineLine,
@@ -158,7 +185,10 @@ const pipelineMap: { [chartType: string]: any } = {
   'RADAR CHART': pipelineRadar,
   'SANKEY CHART': pipelineSankey,
   'WATERFALL CHART': pipelineWaterfall,
-  'BOX PLOT': pipelineBoxPlot
+  'BOX PLOT': pipelineBoxPlot,
+  [ChartType.LiquidChart.toUpperCase()]: pipelineLiquid,
+  [ChartType.LinearProgress.toUpperCase()]: pipelineLinearProgress,
+  [ChartType.CircularProgress.toUpperCase()]: pipelineCircularProgress
 };
 
 export const beforePipe: Transformer<GetChartSpecContext & GetChartSpecOutput, GetChartSpecOutput> = (