MultiChart

Multi Chart includes many sub charts inside a chart panel. You can feed data including all charts data to MultiChart or one by one to feed the chart data.

Props

Name	Type	Default Value	Required	Description
data	object		yes	The data to feed the visualization
name	string		yes	The title name of the chart
charts	IMultiCharts[]		yes	The sub charts config
width	number | string	'auto'	no	The width of the chart, default unit is px
height	number | string	300	no	The height of the chart, default unit is px
chartConfig	object		no	Additional Highcharts config to customize

Props of each chart

Name	Type	Default Value	Required	Description
data	string		no	The data to feed the visualization
dataKey	string		no	The data key for the upper data from MultiChart to get the specific data, this will not work if data is fed
name	string		yes	The label of the chart
type	string	'area'	no	The Highcharts' chart type for the chart
unit	string		no	The unit of the total value
range	[number, number		no	This will give the break point for data to be categorised in this case 0- 10, 10-100, 100+
inverse	boolean	true	no	This will tell if the range is good at being lower in this case 0-60 (good), 60-90 (warning), 90+ (dangerous)

Usage Example

Viz Props

import React from 'react'

import { Viz } from 'a10-gui-dgp-viz'

const { MultiChart } = Viz
export const MyDashboard = () => {
  return (
    <MultiChart
      name="CPU & MEMORY"
      data={{
        data_cpu: { series: [...], total: 100 },
        control_cpu: { series: [...], total: 100 },
        total_memory: { series: [...], total: 100 },
      }}
      charts={[
        // row 1
        [
          {
            name: 'Data CPU',
            dataKey: 'data_cpu',
            range: [60, 80],
            inverse: true,
            unit: '%',
            type: 'area',
          },
          {
            name: 'Control CPU',
            dataKey: 'control_cpu',
            range: [60, 80],
            inverse: true,
            unit: '%',
            type: 'area',
          },
        ],
        // row 2
        [
          {
            name: 'Total Memory',
            dataKey: 'total_memory',
            range: [60, 80],
            inverse: true,
            unit: '%',
            type: 'area',
          },
          {
            name: 'SSL Memory',
            data: { series: [...], total: 100 },
            range: [60, 80],
            inverse: true,
            unit: '%',
            type: 'column',
          },
        ],
      ]}
    />
  )
}

Props Interface

interface IMultiCharts extends Pick<IBasicVizChartProps, 'data' | 'dataKey'> {
  name: string
  type?: string
  unit?: string
  range?: [number, number]
  inverse?: boolean
}
export interface IMultiProps extends IBasicVizChartProps {
  charts: IMultiCharts[][]
}

UI JSON

{
  "vizName": "MultiChart", // The name of the visualization
  "dataSourceID": "ROT.ADC.CPU_MEMORY", // The data source ID to provide data to the visualization
  "name": "CPU & MEMORY", // The title name of the chart
  "charts": [
    // row 1
    [
      {
        "name": "Data CPU",
        "dataKey": "data_cpu",
        "range": [60, 80],
        "inverse": true,
        "unit": "%",
        "type": "area"
      },
      {
        "name": "Control CPU",
        "dataKey": "control_cpu",
        "range": [60, 80],
        "inverse": true,
        "unit": "%",
        "type": "area"
      }
    ],
    // row 2
    [
      {
        "name": "Total Memory",
        "dataKey": "total_memory",
        "range": [60, 80],
        "inverse": true,
        "unit": "%",
        "type": "area"
      },
      {
        "name": "SSL Memory",
        "dataSourceID": "ROT.ADC.CPU_MEMORY_SSL_MEMORY",
        "range": [60, 80],
        "inverse": true,
        "unit": "%",
        "type": "column"
      }
    ]
  ]
}

Data structure (Each chart)

Key	Type	Required	Description
series	HightCharts series data	yes	The chart series data
total	number | string	no	The total info

Example of data structure

{
  data_cpu: {
    series: [
      {
        data: [
          [1543437297968, 35],
          [1543537297968, 82],
          // ... more plot points
        ],
        name: 'DATA CPU',
      },
    ],
  },
  total_memory: {
    series: [
      {
        data: [
          [1543437297968, 35],
          [1543537297968, 82],
          // ... more plot points
        ],
        name: 'TOTAL MEMORY',
      },
    ],
  },
  // ... more charts data
}