ProgressBarChart

A chart to illustrate progress made.

You can set the title and color schemes for each progress bar. A progress bar on hover will show a tool-tip with the amount and percentage completed so far.

Percentage of Load Distribution For Each Server

Props

Name	Type	Default Value	Required	Description
data	object	{series: {data: number; name: string; units: string}[], total: number}	no	Data source maps each series object to a progress bar, with each series object containing
units	string	""	no	Set the units that show up on the tooltip when hovering over the progress bar.
progressColor	string	'#59c5f0'	no	Progress color
progressBGColor	string	'#f5f5f5'	no	Progress color background

Usage Example

Viz Props

import React from 'react'

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

const { ProgressBarChart} = Viz
export const MyDashboard = () => {
  return (
    <ProgressBar
      vizName="ProgressBarChart"
      name="LOAD DISTRIBUTION 2"
      data={
        "series": {
          "0": {
            "name": "Server 1",
            "data": 1803,
            "total": 2000
          },
          "1": {
            "name": "Server 2",
            "data": 307,
            "total": 2000
          },
          "2": {
            "name": "Server 3",
            "data": 967,
            "total": 2000
          }
        }
      }
      units=''
      progressColor="#ff7676",
      progressBGColor="#6fc38c"
    />
  )
}

Props Interface

interface ProgressBarProps extends IBasicVizChartProps{
  vizName: string
  name: string
  data: {}
  progressColor: string
  progressBGColor: string
}

UI JSON

{
  "vizName": "ProgressBarChart",
  "name": "LOAD DISTRIBUTION 2",
  "data": {
    "series": [{
            "name": "Server 1",
            "data": 1803,
            "total": 2000
          },
          "1": {
            "name": "Server 2",
            "data": 307,
            "total": 2000
          },
          "2": {
            "name": "Server 3",
            "data": 967,
            "total": 2000
          }]
  },
  "progressColor": "#ff7676",
  "progressBGColor": "#6fc38c",
  "units": ""
}

Data Structure

data={
  "series": [
    {
      "name": string,
      "data": number,
      "total": number
    }, 
    ...
  ]
}

Data Structure Example

data: [{
  "name": "Server 1",
  "data": 1803,
  "total": 2000
},
"1": {
  "name": "Server 2",
  "data": 307,
  "total": 2000
},
"2": {
  "name": "Server 3",
  "data": 967,
  "total": 2000
},
...]