Introduction to SmartBoard

2 min read

Generating Dashboard based on input charts and insights。

✨ Features

  • Auto-Dashboarding: Automatically compute dashboarding configurations based on input chart schemas.
  • Dashboard Drawing: Provides a React component SmartBoardDashboard for Dashboard drawing based on the above configurations.
  • Combine with Insight: Easily combined with LiteInsight for better visualize insights behind data.

The pipeline of SmartBoard:

SmartBoard pipeline

📦 Installation

$ npm install @antv/smart-board

🔨 Usage

SmartBoard is the class employed for constructing a SmartBoard instance. Through this instance, some Dashboard related methods can be employed by users.

import { SmartBoard } from '@antv/smart-board';

const smartBoard = new SmartBoard(InputChart);

The initialization method of the SmartBoard instance creation requires a series of input charts that matches InputChart array.

initChart(chart as InputChart);

interface InputChart {
  id?: string;
  data: string;
  subspace: Subspace[] | [];
  dimensions: string[];
  measures: string[];
  dataUrl?: string;
  fieldInfo?: any;
  insightType?: InsightType;
  score?: number;
  chartType?: ChartType;
  chartSchema?: any;
  description?: string | string[];

SmartBoard also provides a function insights2Board to generate InputChart array directly using the output of LiteInsight.

import { SmartBoard, insights2Board } from '@antv/smart-board';
import { getDataInsights } from '@antv/lite-insight';

const insightResult = getDataInsights(data, {
  limit: ...,
  measures: ...,
  visualization: true,

const insightCharts = insights2Board(insightResult.insights);

const smartBoard = new SmartBoard(insightCharts);

After initialization, the SmartBoard instance is ready to be used by calling the relevant methods.

To add a chart for constructing a Dashboard.

SmartBoard.addChart(newChart as InputChart);

To get the chart that constructs the Dashboard.


To get the ChartGraph that holds the association between charts, as defined by AntV-G6.


To get the ChartOrder that holds the order of the charts, the output order is determined by both the data insight score and the chart association relationship.

SmartBoard.chartOrder(type as OrderType): ;

To get ChartCluster that holds the chart clustering relationships, via using the Louvain algorithm.


Dashboard Component

To simplify the usage cost, SmartBoard also provides a React component <SmartBoardDashboard> for rendering dashboard based on the above SmartBoard instance.

import { SmartBoardDashboard } from '@antv/smart-board';


📖 Documentation

For more usages, please check the API Reference