Custom visualization is one of the open capabilities provided by this product. It supports users in creating personalized data displays according to their needs. This document introduces plugin publishing and the deployment of plugin package resources in custom visualization. You can use this document to obtain resources for deploying plugin packages, or develop the required plugins yourself, and complete the plugin package publishing process. (Currently, the custom visualization feature is still in the internal testing phase. If you have specific requirements for this feature, you are welcome to contact the Volcano Engine business team to obtain more detailed information about purchasing and cooperation.)
Caution: Before reading and completing the configuration items in this document, you need to first complete the relevant configurations in Overview of Custom Visualization, Structure and Development of Custom Chart Plugins, and Custom Chart Data Structure and Plugin Property Configuration in sequence.

To use plugins in this product, you must first upload the plugin package to the plugin marketplace. After uploading and completing the review and publishing process, the plugin can be used within this product.

The content on this page is for demonstration purposes. The actual resource package should be determined based on your development situation. For official plugin package resources, refer to Section 3 as the standard.

2.1 Preparation #

Prepare all plugin packages, plugin icons, sample images, description information, and other relevant materials for all plugins to be uploaded.

2.2.1 Developing plugins yourself #

For plugins you develop yourself, after completing local debugging, you need to execute the following command in the project root directory:

npm run build

After execution, a compressed package named satellite.tgz will appear in the root directory, which is the plugin package to be uploaded.
In addition, you also need to prepare the corresponding plugin icon (SVG/PNG are both acceptable), sample images (images describing the display effect of the plugin), and description information (basic information about the plugin).

2.1.2 Official plugins #

This product also provides official plugin charts such as Boxplot, Mekko, and Treemap. These official plugin packages can be uploaded directly to the plugin marketplace for use. For related resources, refer to Section 3, "Plugin package resources," in this document.

2.2 Plugin upload #

Caution: If the plugin to be uploaded already exists in the plugin marketplace, it is recommended to install the plugin by updating to a newer version. Otherwise, multiple plugins of the same type will appear in the plugin marketplace.
Access the developer console page of this product at /bi/developers/console/ as shown below:

The content on this page is for demonstration purposes. The actual resource package should be determined based on your development situation. For official plugin package resources, refer to Section 3.

Click Upload Plugin to enter the upload page.

2.2.1 Information completion #

Complete the configuration of the name, summary, and description, and upload the corresponding icon and schematic diagram. (For official plugins, refer to the information provided in Section 3, "Plugin package resources," of this document.)

After completing the information, click "Next" to proceed to "Visibility settings".

2.2.2 Visibility settings #

First, set the visibility range of the plugin in the plugin marketplace:
(1) Public
Everyone can access the plugin in the plugin marketplace.
(2) Specific projects

• After selecting specific projects, enter the visible projects.
• The specified projects will be able to access the plugin in the plugin marketplace.

(3) Private
When set to private, the plugin will not be found in the plugin marketplace.
Next, after making your selection, click "Next" to proceed to "Upload plugin".

2.2.3 Start upload #

Click to upload the plugin package generated in Step 1. After the upload is complete, click Publish. The plugin will be in a pending review state. Once approved by an administrator, the plugin will be published.
The uploaded plugin will be visible in the plugin marketplace.

2.3 Plugin review #

Currently, only the primary account or system administrator can approve plugins. Log in to the developer console with administrator privileges. The Administrator Center is visible in the upper right corner; click it to access the administrator console.
In the administrator console, the Plugin Review section displays all plugins currently pending review and those already completed.
To complete the plugin review, click Approve in the action column of the pending review list. Plugins that pass the review will be automatically published in the plugin marketplace.

2.4 Update version #

To update a plugin version later, go to the developer console page /bi/developers/console/, and click the View button in the list to enter the plugin details page.
After entering the details page, first click Version Management on the left to access the version operations page, then click the Create Version button in the upper right corner:
In the Create Version pop-up window, enter the new version number and update notes, upload the new plugin package, and after clicking Confirm, the new plugin version will enter the review status. Once approved, the new version will be published.

3.1 Rectangular treemap #

Rectangular treemap implemented based on G2

(1) Plugin icon

(2) Example image

(3) Description
The rectangular treemap visually displays the proportion of data using area size, supporting one or more dimensions with one metric, or zero dimensions with multiple metrics.

• One or more dimensions with one metric, for example: Dimension [Province], Metric [Profit], generates a rectangular treemap showing the profit size for different provinces.
• Zero dimensions with multiple metrics, for example: Dimension [None], Metrics [Profit] [Sales amount], generates a rectangular treemap showing the proportion between profit and sales amount.

3.2 Mekko chart #

The Mekko chart (market matrix segmentation chart) is a two-dimensional stacked chart.
Plugin package

New version of the mekko plugin package (temporary version supporting field-specified colors)

New version of the mekko plugin package (version with maximum stack count limit removed)

(1) Plugin icon

(2) Example image

(3) Description
The dimension axis of the Mekko chart displays groups, while the measure axis shows the normalized percentage value for each category item. The size of each group represents its value.
In a Mekko chart, you need two dimensions and one measure:

• Each bar corresponds to the first dimension and is divided into smaller category labels based on the second dimension, with different categories displayed in different colors.
• The value of the measure determines the height of each category within the bar as well as the size of the bar.
• You can also drag in a color dimension. When a color dimension is present, labels are colored according to the categories of that color dimension.
  • For example: with dimensions [Creation Type] and [Creation Status], measure [Read Count], and color [Platform], the chart displays bars for each creation type. Each bar is divided into several labels by creation status, label height represents the read count value, and label color corresponds to the current platform dimension.

3.3 Calendar heatmap #

A calendar heatmap is a chart composed of small color blocks arranged in an orderly and compact manner, displayed in a calendar format, and used to show the data distribution over a period of time.

(1) Plugin icon

(2) Example image

(3) Description
Each small color block represents a time dimension, and the color of the block represents the measure.
One dimension and one measure, with the dimension type being date, for example: dimension [Date], measure [Read Count].

3.4 Leaderboard chart #

A leaderboard chart is a bar chart that describes ranking order or key progress indicators.

(1) Plugin icon

(2) Example image

(3) Description
The leaderboard generally reflects the distribution and ranking order of measures within dimensions, and concisely displays the top N rankings in descending order. For example, the leaderboard displays the top 10 provinces in descending order by payment amount.

3.5 Boxplot chart #

Boxplot chart implemented based on G2

(1) Plugin icon

(2) Example image

(3) Description
The boxplot, also known as box-and-whisker plot, box plot, or box-and-line plot, is a statistical chart used to show data dispersion. It can be plotted with one or more dimensions and one measure.

• One dimension and one measure, for example: dimension [City], measure [Profit]
  • Generate a box plot representing the profit distribution of different cities. The visualization displays the maximum, minimum, median, and the data points for the upper and lower quartiles, allowing users to understand the statistical distribution of profit values for each corresponding city.
• Two dimensions and one indicator, for example: dimensions [Province] [City], indicator [Profit]
  • Generate multiple box plots with the coordinate axis representing provinces. Generate a box plot for each province to illustrate the statistical distribution of profits across different cities within that province.