English | 简体中文

@antv/smart-board

A js/ts library that solves dashboarding calculation and drawing problems for charts.

✨ 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:

📦 Installation

$ npm install @antv/smart-board

🔨 Getting Started

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

const cars = 'https://cdn.jsdelivr.net/npm/vega-datasets@2/data/cars.json';

const InputChart = [
  {
    dataUrl: cars,
    subspace: [],
    dimensions: ['Origin'],
    measures: ['Horsepower'],
    fieldInfo: {
      Origin: {
        dataType: 'string',
      },
      Horsepower: {
        dataType: 'number',
      },
    },
    insightType: 'outlier',
    score: 0.5,
    chartType: 'column_chart',
  },
  {
    dataUrl: cars,
    subspace: [],
    dimensions: ['Year'],
    measures: ['Acceleration'],
    insightType: 'trend',
    score: 0.8,
    chartType: 'line_chart',
  },
];

const smartBoard = new SmartBoard(InputChart);

const dashboardContent = 
  (<SmartBoardDashboard
    chartList={InputChart}
    interactionMode={'defaultMode'}
    chartGraph={smartBoard?.chartGraph}
    chartOrder={smartBoard?.chartOrder('byCluster')}
    chartCluster={smartBoard?.chartCluster()}
  />);

📖 Documentation

For more usages, please check the API Reference

📄 License

MIT