Indicator

Props

Name	Type	Default Value	Required	Description
type	string	'number'	no	The value type. Valid types are: 'number', 'percent', 'file', 'time', 'datetime', 'epoch', 'location'
data	any | any[]		yes	The indicator's data source. Both single and multiple data(s) are valid
name	string		yes	The label name of the indicator
colors	string | string[]		no	The colors for the chart plots; you can use COLORS or an array of hex codes
divider	string	'/'	no	The divider displaying between two values
icon	string | string[]		no	An icon displaying on the left of each value, if the icon is an array of icons, each icon will correspond to each value from this.prop's data
range	[number, number]		no	This will set the breakpoints for data to be categorized. In this case: 0-60 (dangerous), 60-90 (good), and 90+ (dangerous) to display associated color
inverse	boolean	true	no	When set to 'true', lower values in the range are good and higher values in the range are dangerous. In our example, 0-60 is good, 60-90 is warning, and 90+ is dangerous when inverse is set to true. When set to false, the opposite is true, such that 0-60 is dangerous , 60-90 is warning, and 90+ is good.
unit	string		no	The unit for each value
prefix	string		no	The prefix label showing on the left side of the value
drillDown	string		no	If this parameter is specified then we will have a drill down with the id

Usage Example

Viz Props

import React from 'react'

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

const { Indicator } = Viz
export const MyDashboard = () => {
  return (
    <Indicator
      name="App Services"
      data={[0, 0]}
      prefix="Up"
      range={[200, 500]}
      inverse={true}
      divider="/"
    />
  )
}

Props Interface

interface IndicatorProps {
  name: string
  data: any | any[]
  type?: string
  divider?: string
  icon?: string | string[]
  range?: [number, number]
  inverse?: boolean
  unit?: string
  prefix?: string
}

UI JSON

{
  "vizName": "indicator",
  "vizType": "bytes", // number, bytes, percent, file, datetime, time, epoch, location
  "name": "Throughput",
  "dataSourceID": "RPT.ADC.ThunderDashboardTopIndicatorThroughPut",
  "description": "The total throughput of this app aggregated for last 3 mins.", // this text will show up on hover
  "range": [10, 100], // this will give the break point for data to be categorised in this case 0- 10, 10-100, 100+
  "inverse": true, // this will tell if the range is good at being lower in this case lower value is bad
  "drillDown": "RPT.ADC.ThunderDashBoardTopIndicatorThroughPut.drillDown", // If this parameter is specified then we will have  a drill down with the id "RPT.ADC.ThunderDashBoardTopIndicatorThroughPut.drillDown"
}

Data Structure

[number, string, ...]

Example of data structure

[0, 0, 0, 100, ...]