Custom visualization is one of the open capabilities provided by this product, supporting users in creating personalized data display according to their needs. This capability not only includes custom fields and configuration options, but also covers compatibility support for multiple frameworks. In addition to using the system's preset chart components, users can further develop and customize their own charts and controls with the help of component software development kits (SDKs) and popular tools from the community. This provides users with great flexibility, making data display better suited to specific scenarios and personal preferences. (Currently, the custom visualization feature is still in the internal testing phase. To meet specific needs for this feature, please contact the Volcano Engine business team for more details about purchasing and cooperation.)

First, you need to quickly understand the basic development process through the Echarts Pie Chart plugin. This plugin loads a Pie Chart based on Echarts in the chart area of visual queries.

3.1 Preparing the environment #

You need to complete the following two items to prepare the required environment:
(1) Install Node and Npm
The download address for the Node.js installation package and source code is: https://nodejs.org/zh-cn/download/
After installing Node, Npm will be installed automatically.
(2) Plugin development tool @datawind/extension-cli
You can use the CLI tool @datawind/extension-cli to debug and compile plugin projects. By running datawind-extension -h, you can view all commands.

npm i -g @datawind/extension-cli
datawind-extension -h

Note: If the current registry in use is not https://registry.npmjs.org, you need to specify the registry for installation:

npm i -g @datawind/extension-cli --registry=https://registry.npmjs.org

3.2 Project initialization #

First, download the following sample plugin package.
React+Echarts template package:

Vue+Echarts template package:

Next, after downloading the plugin package, extract it, then go to the root directory of the plugin package to install dependencies.

cd <YOUR_PROJECT_DIR>
npm install

// 同上，如果当前使用的registry不是https://registry.npmjs.org，需要指定registry进行安装
npm install --registry=https://registry.npmjs.org

Finally, the functions of each file in the project will be described in detail in the article "Custom Chart Plugin Structure". For now, you can complete the chart development procedure.

3.3 Debugging #

The following steps are required to complete debugging in the development environment.
(1) Run npm run dev to start the plugin

npm run dev

If you visit http://localhost:5000/satellite/dev/extension and see the plugin's JSON description, the local plugin debugging server has started successfully.
(2) Start the development environment and debug the plugin
Step 1: Go to the plugin debugging settings page of this product at https://<HOST>/<PATH>/#/devtools/extensionDebug

• Set the port number to 5000 (consistent with the locally configured debugging port)
• Switch the toggle to enable and click Confirm
• Enable local plugin debugging

Step 2: Go to the visual query page of this product at https://<HOST>/<PATH>/#/dataQuery

• The plugin chart can be seen below the original chart selection area.
• Select the locally developed Pie Chart plugin chart, add one dimension and one metric, and the chart rendering result will be displayed in the chart area on the right.

The URL https://<HOST>/<PATH> mentioned in this document is configured differently in different deployment environments. You can directly access this product to confirm the current HOST and PATH.
For example, if the address of a dashboard in your deployment environment is: https://company.site.com/console/bi/#/dashboard/1?appId=2, then:

• HOST=company.site.com
• PATH=console/bi
• Plugin debugging configuration address: https://company.site.com/console/bi/#/devtools/extensionDebug
• Visual query page address: https://company.site.com/console/bi/#/dataQuery