Blocks

These blocks when used together can help build a dashboard UI to visualise charts.

Dashboard

Instantiate the Dashboard object.

import { Dashboard } from 'dashboard-sdk';

const dashboard = new Dashboard(); // requires row or array of rows as [firstRow: Row]

dashboard.addRow(); // pass a row as an arguement to addRow method

Dashboardcontains one or multiple rows, to visualise the content we need to provide rows to the dashboard object. The dashboard class can take row or array of rows as arguement for constructors like new Dashboard([firstRow, secondRow]); or you can add a row by using addRow method in Dashboard class likedashboard.addRow(anotherRow). In the next step, we will see how we can create a row.

Row

Instantiate the Row object as follow

import { Row } from 'dashboard-sdk';

const row = new Row(); // requires a heading and a cell or array of cell as ("Heading", [firstCell: Cell])

row.addCell(); // pass a cell as an arguement to addCell method

EachRowcontains a heading and one or multiple cells. You can use row constructor to add a heading and one or more cells like
new Row("Heading", [firstCell, secondCell]);or you can add a cell by using addCell method in Row class likerow.addCell(anotherCell). In the next step, we will see how we can create a row.

Cell

Instantiate the Cell object as follows.

import { Cell } from 'dashboard-sdk';

const cell = new Cell(); // requires a chartView and colspan

const emptyCell = new Cell(undefined) // creates an empty cell with default colspan = 4

Celltakes two arguements, first arguement decides the Chart view to be rendered and the second arguement is colspan which grows or shrinks the cell view based on colspan value.new Cell(chartView, 6);or you can add an empty cell likenew Cell(undefined); with default colspan value to be 4.