ListChart

A chart widget to display a list of charts including diverse types.

Area

Progress

Props

Name	Type	Default Value	Required	Description
name	string	-	yes	Name of chart
headers	{ name: string; span: number }[]	-	yes	Sets the header, or left side, of the chart.
data	{ type: string; value: string | IObject; styles: IObject }[]	[]	no	Data of your charts, aka an array to render on the right side of the chart.

Usage Example

Viz Props

import React from 'react'

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

const { List } = Viz
export const MyDashboard = () => {
  return (
    <List
      vizName: 'ListChart',
      name: 'Rules',
      headers: [
      { name: 'Rules', span: 4}, 
      { name: 'Hits', span: 8}, 
      { name: 'Hits Over Time', span: 12}
      ]
      data: [
      [{value: 'Rule 1'}, {value: 15}, {type: 'chart', value: [HighchartSeriesData]}],
      [{value: 'Rule 2'}, {value: 8}, {type: 'chart', value: [HighchartSeriesData]}],
      ...
      ],
      description: 'List Chart Description',
      unit: 'bps',
    />
  )
}

Props Interface

interface IListData {
  value: string | IObject[]
  type?: string
  format?: string
  unit?: string
}
interface IListProps extends IBasicVizChartProps {
  name: string
  headers: { name: string; span: number }[]
  data: IListData[][]
}

UI JSON

{
    vizName: 'ListChart',
    name: 'Rules',
    headers: dataMap['RPT.ADC.L4SLB.RULELIST.HEADERS'](),
    data: dataMap['RPT.ADC.L4SLB.RULELIST.DATA'](),
    description: 'List Chart Description',
    unit: 'bps',
},

Data Structure

Data

[
      [
            {value: 'string'}, 
            {value: number}, 
            {type: 'chart', 
              value: [
                [
                  yAxisValue: number, 
                  xAxisValue: number
                ], 
                ... // more plot points
              ]
            }
      ]
]

Header

headers: [
      { name: string, span: number}, 
      ...
      ]