IndicatorsChart

A flexible indicator chart. (Note, there is another viz that is similarly called Indicator (singular). This viz is plural, Indicators.)

Allows for dividers, four types of value/unit alignment (bottom, top, left, right), and custom colors.

Props

Name	Type	Default Value	Required	Description
data	number[] | string[]	[]	no	Set the values of your indicators here.
units	number[] | string[]	[]	no	Set the units/accompanying phrases with each value here.
divider	boolean	false	no	True to have a divider in your indicator chart, false to have no divider in your chart.
unitPosition	'bottom' | 'right' | 'top' | 'left'	'bottom'	no	Set the alignment of the units to the values.
unitColor	string	'#00aa6c'	no	Set the color of the unit(s).
valueColor	string	'grey'	no	Set the color of the value(s).

Usage Example

Viz Props

import React from 'react'

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

const { IndicatorsChart } = Viz
export const MyDashboard = () => {
  return (
    <IndicatorsChart
      divider={true}
      name="Client SSL Conn. Bottom"
      unitColor="grey"
      unitPosition="top"
      units=['Max', 'Average', 'Rate']
      valueColor="green"
      vizName="IndicatorChart"
    />
  )
}

Props Interface

interface ChartIndicatorProps extends IBasicVizChartProps {
  units: (number | string)[]
  data: (number | string)[]
  divider: boolean
  unitPosition: 'bottom' | 'right' | 'top' | 'left'
  unitColor: string
  valueColor: string
}

UI JSON

{
    vizName: 'IndicatorChart',
    name: 'Client SSL Conn.',
    data: [4234, 1.2, 1.2],
    units: ['Max', 'Average', 'Rate'],
    unitPosition: 'left',
    unitColor: 'grey',
    valueColor: 'green',
    divider: true,
}

Data Structure

data: number[] or string[]

Data Structure Example

data: [4234, 1.2, 1.2]