Skip to content

Commit

Permalink
Merge pull request #20 from VisActor/feat-vmind-doc-page
Browse files Browse the repository at this point in the history
Feat vmind doc page
  • Loading branch information
da730 authored Feb 5, 2024
2 parents 7d2f1bc + b2a544b commit 262e25d
Show file tree
Hide file tree
Showing 78 changed files with 9,625 additions and 553 deletions.
1 change: 1 addition & 0 deletions .github/workflows/pre-release.yml
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ jobs:
env:
NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
NPM_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
NODE_OPTIONS: '--max_old_space_size=4096'
run: node common/scripts/install-run-rush.js publish --publish --include-all --tag ${{ steps.semver_parser.outputs.pre_release_type }}

- name: Update shrinkwrap
Expand Down
1 change: 1 addition & 0 deletions .github/workflows/release.yml
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ jobs:
env:
NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
NPM_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
NODE_OPTIONS: '--max_old_space_size=4096'
run: node common/scripts/install-run-rush.js publish --publish --include-all --tag latest

- name: Update shrinkwrap
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/sync-main-to-develop.yml
Original file line number Diff line number Diff line change
Expand Up @@ -57,5 +57,5 @@ jobs:
title: '[Auto Sync] Sync the code from branch main to branch develop after release ${{ steps.package-version.outputs.current_version }}'
base: develop
head: sync/main-${{ steps.package-version.outputs.current_version }}
reviewers: xile611
reviewers: da730
body: 'Sync the code from branch main to branch develop after release ${{ steps.package-version.outputs.current_version }}'
44 changes: 37 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -136,9 +136,9 @@ const { fieldInfo, dataset } = await vmind.parseCSVDataWithLLM(csv, userInput);
We want to show "the changes in sales rankings of various car brands". Call the generateChart method and pass the data and display content description directly to VMind:

```typescript
const describe = 'show me the changes in sales rankings of various car brand';
const userPrompt = 'show me the changes in sales rankings of various car brand';
//Call the chart generation interface to get spec and chart animation duration
const { spec, time } = await vmind.generateChart(userInput, fieldInfo, dataset);
const { spec, time } = await vmind.generateChart(userPrompt, fieldInfo, dataset);
```

In this way, we get the VChart spec of the corresponding dynamic chart. We can render the chart based on this spec:
Expand All @@ -161,19 +161,19 @@ Thanks to the capabilities of the large language model, users can describe more
Users can specify different theme styles (currently only gpt chart generation supports this feature). For example, users can specify to generate a tech-style chart:

```typescript
//describe can be in both Chinese and English
//userPrompt can be in both Chinese and English
//Specify to generate a tech-style chart
const describe = 'show me the changes in sales rankings of various car brand,tech style';
const { spec, time } = await vmind.generateChart(userInput, fieldInfo, dataset);
const userPrompt = 'show me the changes in sales rankings of various car brand,tech style';
const { spec, time } = await vmind.generateChart(userPrompt, fieldInfo, dataset);
```

You can also specify the chart type, field mapping, etc. supported by VMind. For example:

```typescript
//Specify to generate a line chart, with car manufacturers as the x-axis
const describe =
const userPrompt =
'show me the changes in sales rankings of various car brands,tech style.Using a line chart, Manufacturer makes the x-axis';
const { spec, time } = await(vmind.generateChart(csvData, describe));
const { spec, time } = await vmind.generateChart(userPrompt, fieldInfo, dataset);
```

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



#### Data Aggregation
📢 Note: The data aggregation function only supports GPT series models, more models will come soon.

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.

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.


Use the `dataQuery` function of the VMind object to aggregate data. This method has three parameters:
- userInput: user input. You can use the same input as generateChart
- fieldInfo: Dataset field information. The same as generateChart, it can be obtained by parseCSVData, or built by the user.
- dataset: Dataset. The same as generateChart, it can be obtained by parseCSVData, or built by the user.


```typescript
const { fieldInfo, dataset } = await vmind?.dataQuery(userInput, fieldInfo, dataset);
```


The fieldInfo and dataset returned by this method are the field information and dataset after data aggregation, which can be used for chart generation.
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:
```typescript
const userInput = 'show me the changes in sales rankings of various car brand';
const { spec, time } = await vmind.generateChart(userInput, fieldInfo, dataset, false); //pass false as the forth parameter to disable data aggregation before generating a chart.
```


#### Dialog-based editing

Under development, stay tuned
Expand All @@ -213,3 +242,4 @@ Under development, stay tuned
#### Pie chart

![Alt text](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VChart-Video-3.gif)

Loading

0 comments on commit 262e25d

Please sign in to comment.