0.1 Start demo

0.1.1 Fork the project

On Github, you need to Fork the VChart project.

0.1.2 Clone the Project

In the repository you forked, click the Code button to copy the project address. Then use the git clone command to clone the project locally. For example:

git clone https://github.com/your-username/VChart.git

After cloning, you need to add the remote address of VChart.

git remote add upstream https://github.com/VisActor/VChart.git

This way, you can get the latest source code from the remote address of VChart.

git pull upstream develop

0.1.3 Start demo

We use @microsoft/rush to manage the monorepo. So, first install rush.

npm install -g @microsoft/rush

Next, execute the command to start the demo.

*安装依赖*
$ rush update
*启动 vchart 的demo页*
$ rush start
*启动 react-vchart 的demo页*
$ rush react
*启动本地文档站点*
$ rush docs

0.1.4 What happens when starting the demo?

When you run rush start, it will launch the demo page of vchart. But what exactly happens?

First, we configured the start command in command-line.json:

{"commandKind": "global","name": "start","summary": "Start the development server","description": "Run this command to start vchart development server","shellCommand": "rush run -p @visactor/vchart -s start"},

So we know that the start command will execute the rush run -p @visactor/vchart -s start command.

Let me explain the rush run -p @visactor/vchart -s start command in detail:

This is a command from the Rush tool, which can be broken down into the following parts:

rush run: A subcommand of Rush, used to run specific project npm scripts in a monorepo
-p @visactor/vchart: The -p or --project parameter specifies the project name for which the script is to be run, here it specifies the @visactor/vchart project
-s start: The -s or --script parameter specifies the npm script name to be run, here the start script is to be run

According to the codebase, we can see that this command will eventually execute the start script defined in the package.json of the @visactor/vchart package:

ts-node __tests__/runtime/browser/scripts/initVite.ts && vite serve __tests__/runtime/browser

The first part of this command runs the initialization script initVite.ts, which mainly generates the local version files vite.config.local.ts and index.page.local.ts. These files are ignored by git and are used for local development configuration, which will be explained in detail later.

The second part of the script vite serve __tests__/runtime/browser is to launch the demo webpage.

0.1.5 How to use

The default content of this file is

import './test-page/area';

Generally speaking, it can be used to specify launching different chart pages. In fact, it runs the VChart table generation code of different files to achieve the effect of launching different chart pages on the web. So you just need to import different files to launch different chart pages.

0.1.6 How to use

This file is mainly used to configure ports and local packages. For example, the following configuration:

export default {
  *// 启动端口*port: 4000,
  resolve: {
    alias: {
      '@visactor/vgrammar-core': '/path/to/visactor/VGrammar/packages/vgrammar-core/src/index.ts',
      '@visactor/vgrammar-util': '/path/to/visactor/VGrammar/packages/vgrammar-util/src/index.ts',
      '@visactor/vgrammar-wordcloud': '/path/to/visactor/VGrammar/packages/vgrammar-wordcloud/src/index.ts',
      '@visactor/vgrammar-wordcloud-shape': '/path/to/visactor/VGrammar/packages/vgrammar-wordcloud-shape/src/index.ts',
      '@visactor/vgrammar-sankey': '/path/to/visactor/VGrammar/packages/vgrammar-sankey/src/index.ts',
      '@visactor/vgrammar-hierarchy': '/path/to/visactor/VGrammar/packages/vgrammar-hierarchy/src/index.ts',
      '@visactor/vgrammar-projection': '/path/to/visactor/VGrammar/packages/vgrammar-projection/src/index.ts',
      '@visactor/vgrammar-coordinate': '/path/to/visactor/VGrammar/packages/vgrammar-coordinate/src/index.ts',
      '@visactor/vgrammar-venn': '/path/to/visactor/VGrammar/packages/vgrammar-venn/src/index.ts',
      '@visactor/vscale': '/path/to/visactor/VUtil/packages/vscale/src/index.ts',
      '@visactor/vdataset': '/path/to/visactor/VUtil/packages/vdataset/src/index.ts',
      '@visactor/vutils': '/path/to/visactor/VUtil/packages/vutils/src/index.ts',
      '@visactor/vrender-core': '/path/to/visactor/VRender/packages/vrender-core/src/index.ts',
      '@visactor/vrender-kits': '/path/to/visactor/VRender/packages/vrender-kits/src/index.ts',
      '@visactor/vrender-components': '/path/to/visactor/VRender/packages/vrender-components/src/index.ts'
    }
  }
};