Skip to content

Commit 81577a8

Browse files
committed
feat: update readme
1 parent e300f59 commit 81577a8

File tree

4 files changed

+84
-6
lines changed

4 files changed

+84
-6
lines changed

packages/vmind/README.md

+32-3
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ We want to show "the changes in sales rankings of various car brands". Call the
138138
```typescript
139139
const describe = 'show me the changes in sales rankings of various car brand';
140140
//Call the chart generation interface to get spec and chart animation duration
141-
const { spec, time } = await vmind.generateChart(userInput, fieldInfo, dataset);
141+
const { spec, time } = await vmind.generateChart(describe, fieldInfo, dataset);
142142
```
143143

144144
In this way, we get the VChart spec of the corresponding dynamic chart. We can render the chart based on this spec:
@@ -164,7 +164,7 @@ Users can specify different theme styles (currently only gpt chart generation su
164164
//describe can be in both Chinese and English
165165
//Specify to generate a tech-style chart
166166
const describe = 'show me the changes in sales rankings of various car brand,tech style';
167-
const { spec, time } = await vmind.generateChart(userInput, fieldInfo, dataset);
167+
const { spec, time } = await vmind.generateChart(describe, fieldInfo, dataset);
168168
```
169169

170170
You can also specify the chart type, field mapping, etc. supported by VMind. For example:
@@ -173,7 +173,7 @@ You can also specify the chart type, field mapping, etc. supported by VMind. For
173173
//Specify to generate a line chart, with car manufacturers as the x-axis
174174
const describe =
175175
'show me the changes in sales rankings of various car brands,tech style.Using a line chart, Manufacturer makes the x-axis';
176-
const { spec, time } = await(vmind.generateChart(csvData, describe));
176+
const { spec, time } = await(vmind.generateChart(csvData, describe, dataset));
177177
```
178178

179179
#### Customizing LLM Request Method
@@ -196,6 +196,35 @@ temperature?: number;//recommended to set to 0
196196
Specify your LLM service url in url (default is https://api.openai.com/v1/chat/completions)
197197
In subsequent calls, VMind will use the parameters in params to request the LLM service url.
198198

199+
200+
201+
#### Data Aggregation
202+
📢 Note: The data aggregation function only supports GPT series models, more models will come soon.
203+
204+
When using the chart library to draw bar charts, line charts, etc., if the data is not aggregated, it will affect the visualization effect. At the same time, because no filtering and sorting of fields has been done, some visualization intentions cannot be met, for example: show me the top 10 departments with the most cost, show me the sales of various products in the north, etc.
205+
206+
VMind supports intelligent data aggregation since version 1.2.2. This function uses the data input by the user as a data table, uses a LLM to generate SQL queries according to the user's command, queries data from the data table, and uses GROUP BY and SQL aggregation methods to group, aggregate, sort, and filter data. Supported SQL statements include: SELECT, GROUP BY, WHERE, HAVING, ORDER BY, LIMIT. Supported aggregation methods are: MAX(), MIN(), SUM(), COUNT(), AVG(). Complex SQL operations such as subqueries, JOIN, and conditional statements are not supported.
207+
208+
209+
Use the `dataQuery` function of the VMind object to aggregate data. This method has three parameters:
210+
- userInput: user input. You can use the same input as generateChart
211+
- fieldInfo: Dataset field information. The same as generateChart, it can be obtained by parseCSVData, or built by the user.
212+
- dataset: Dataset. The same as generateChart, it can be obtained by parseCSVData, or built by the user.
213+
214+
215+
```typescript
216+
const { fieldInfo, dataset } = await vmind?.dataQuery(userInput, fieldInfo, dataset);
217+
```
218+
219+
220+
The fieldInfo and dataset returned by this method are the field information and dataset after data aggregation, which can be used for chart generation.
221+
By default, the `generateChart` function will perform a data aggregation using the same user input before generating the chart. You can disable data aggregation by passing in the fourth parameter:
222+
```typescript
223+
const userInput = 'show me the changes in sales rankings of various car brand';
224+
const { spec, time } = await vmind.generateChart(userInput, fieldInfo, dataset, false); //pass false as the forth parameter to disable data aggregation before generating a chart.
225+
```
226+
227+
199228
#### Dialog-based editing
200229

201230
Under development, stay tuned

packages/vmind/package.json

+21
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,27 @@
1111
"esm",
1212
"build"
1313
],
14+
"keywords": [
15+
"charts",
16+
"visualization",
17+
"VMind",
18+
"LLM",
19+
"storytelling",
20+
"VisActor",
21+
"graphics",
22+
"AIGC"
23+
],
24+
"homepage": "https://www.visactor.io/vmind",
25+
"bugs": "https://github.com/VisActor/VMind/issues",
26+
"repository": {
27+
"type": "git",
28+
"url": "https://github.com/VisActor/VMind.git",
29+
"directory": "packages/vmind"
30+
},
31+
"author": {
32+
"name": "VisActor",
33+
"url": "https://www.visactor.io/"
34+
},
1435
"scripts": {
1536
"start": "vite ./__tests__/browser",
1637
"build": "bundle --clean",

packages/vmind/readme-zh.md

+30-3
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ const { fieldInfo, dataset } = await vmind.parseCSVDataWithLLM(csv, userInput);
138138
```typescript
139139
const describe = 'show me the changes in sales rankings of various car brand';
140140
//调用图表生成接口,获得 spec 和图表动画时长
141-
const { spec, time } = await vmind.generateChart(userInput, fieldInfo, dataset);
141+
const { spec, time } = await vmind.generateChart(describe, fieldInfo, dataset);
142142
```
143143

144144
这样我们就得到了对应动态图表的 VChart spec。我们可以基于该 spec 渲染图表:
@@ -164,7 +164,7 @@ vchart.renderAsync();
164164
//describe使用中英文均可
165165
//指定生成科技感风格的图表
166166
const describe = 'show me the changes in sales rankings of various car brand,tech style';
167-
const { spec, time } = await vmind.generateChart(userInput, fieldInfo, dataset);
167+
const { spec, time } = await vmind.generateChart(describe, fieldInfo, dataset);
168168
```
169169

170170
也可以指定 VMind 支持的图表类型,字段映射等等。比如:
@@ -173,7 +173,7 @@ const { spec, time } = await vmind.generateChart(userInput, fieldInfo, dataset);
173173
//指定生成折线图,汽车厂商做 x 轴
174174
const describe =
175175
'show me the changes in sales rankings of various car brands,tech style.Using a line chart, Manufacturer makes the x-axis';
176-
const { spec, time } = await(vmind.generateChart(csvData, describe));
176+
const { spec, time } = await(vmind.generateChart(csvData, describe, dataset));
177177
```
178178

179179
#### 自定义大模型调用方式
@@ -196,6 +196,33 @@ const vmind = new VMind(openAIKey:string, params:{
196196
在 url 中指定您的大模型服务 url(默认为https://api.openai.com/v1/chat/completions)
197197
在随后的调用中,VMind 会使用 params 中的参数请求大模型服务 url
198198

199+
#### 数据聚合
200+
📢 Note: 数据聚合功能只支持GPT系列模型,更多模型正在接入中。
201+
202+
在使用图表库绘制柱状图、折线图等图表时,若传入的数据不是聚合后的数据,会影响可视化效果。同时由于没有对字段进行筛选和排序,某些图表展示意图无法满足,例如:帮我展示使用量最多的10个部门,帮我展示北方各商品的销售额等。
203+
204+
VMind 1.2.2版本开始支持智能数据聚合功能。该功能会将用户传入的数据作为一张数据表,使用大模型根据用户的指令生成SQL查询,从数据表中查询数据,并通过GROUP BY和SQL聚合函数对数据进行分组聚合、排序、筛选。目前支持的SQL语句:SELECT, GROUP BY, WHERE, HAVING, ORDER BY, LIMIT。目前支持的聚合函数:MAX(), MIN(), SUM(), COUNT(), AVG()。不支持子查询、JOIN、条件语句等复杂的SQL操作。
205+
206+
207+
使用VMind对象的`dataQuery`函数对数据进行聚合。该方法有3个参数:
208+
- userInput:用户输入。使用与generateChart相同的输入即可
209+
- fieldInfo:数据集字段信息。与generateChart相同,可使用parseCSVData获得,或者由用户自己构建。
210+
- dataset:数据集。与generateChart相同,可使用parseCSVData获得,或者由用户自己构建。
211+
212+
213+
```typescript
214+
const { fieldInfo, dataset } = await vmind?.dataQuery(userInput, fieldInfo, dataset);
215+
```
216+
217+
218+
该方法返回的fieldInfo和dataset是数据聚合后的字段信息和数据集,可用于后续的图表生成。
219+
`generateChart`函数默认会在生成图表之前,使用相同的用户输入进行一次数据聚合。可通过传入第四个参数来禁用数据聚合:
220+
```typescript
221+
const userInput = 'show me the changes in sales rankings of various car brand';
222+
const { spec, time } = await vmind.generateChart(userInput, fieldInfo, dataset, false); //pass false as the forth parameter to disable data aggregation before generating a chart.
223+
```
224+
225+
199226
#### 对话式编辑
200227

201228
开发中,敬请期待

packages/vmind/src/core/VMind.ts

+1
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ class VMind {
8989
return queryDatasetWithGPT(userPrompt, fieldInfo, dataset, this._options);
9090
}
9191
if ([Model.SKYLARK, Model.SKYLARK2].includes(this._model)) {
92+
console.error('Please user GPT model');
9293
return { fieldInfo: [], dataset };
9394
}
9495
console.error('unsupported model in data query!');

0 commit comments

Comments
 (0)