GridChart

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
colors	string | string[]		no	The colors for the chart plots, it could be a COLORS or an array of hex codes
range	[number, number]		no	This will give the break point for data to be categorised in this case 0-60 (dangerous), 60-90 (good), 90+ (dangerous) to display associated color
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)
unit	string		no	The unit of each value

Usage Example

Viz Props

import React from 'react'

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

const { GridChart } = Viz
export const MyDashboard = () => {
  return (
    <GridChart
      name="MY Grid"
      numOfColumns={3}
      unit="%"
      range={[60, 80]}
      data={[
        {
          name: 'load-balancer-1',
          value: 46,
        },
      ]}
    />
  )
}

UI JSON

Data structure (Each Item)

Key	Type	Required	Description
name	string	yes	The name of the item
value	any	yes	The value of the item

Example of data structure

const data = [
  {
    name: 'load-balancer-1',
    value: 46,
  },{
    name: 'load-balancer-2',
    value: 87,
  },
  {
    name: 'load-balancer-3',
    value: 88,
  },
  // ...
]