BarCaption

Top 10 App Services by Throughput

Props

Name	Type	Default Value	Required	Description
data	{ title: string, value: number, color: string }[]	color: `#81d4fa'	yes	data for each bar row
max	number	-	yes	total that values will be divided by

Usage Example

Viz Props

import React from 'react'

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

const { BarCaption} = Viz
export const MyDashboard = () => {
  return (
    <BarCaption
        name='Top 10 App Services by Throughput'
        max={800}
        data={[
          {
            title: 'AppService001',
            value: 800,
          },
          {
            title: 'AppService001',
            value: 700,
          },
          {
            title: 'App02',
            value: 645,
            color: '#9fa8da',
          },
          {
            title: 'App03',
            value: 590,
            color: '#80cbc4',
          },
        ]}
    />
  )
}

Props Interface

export interface IBarCaptionRow {
  title: string
  value: number
  color: string
}
export interface IBarCaptionProps extends IBasicVizChartProps {
  data: IBarCaptionRow[]
  max: number
}

UI JSON

{    
    vizName: 'BarCaption',
    name: 'Top 10 App Services by Throughput',
    max: 800,
    data: [
          {
            title: 'AppService001',
            value: 800,
          },
          {
            title: 'AppService001',
            value: 700,
          },
          {
            title: 'App02',
            value: 645,
            color: '#9fa8da',
          },
          {
            title: 'App03',
            value: 590,
            color: '#80cbc4',
          },
        ],
}