PieChart

A chart widget to display a pie chart.

Pie (dount) Chart

Semi-Dount Chart

Props

Name	Type	Default Value	Required	Description
vizType	string	'dount' ('pie')	no
data	Highcharts Data		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
counters	counterData[]		no	The counters data displayed on next to the pie chart
legend	boolean		no	if counters is configured, pie char will not shows legends
showTotal	boolean		no	if legend is true, pie chart will not show total data
width	number | string	'auto'	no	The width of the chart, default unit is px
height	number | string	300	no	The height of the chart, default unit is px
chartConfig	object		no	Additional Highcharts config to customize

Usage Example

Viz Props

import React from 'react'

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

const { PieChart } = Viz
const counters = [
  {
    name: 'INFECTED',
    counter: 203332,
    percent: 20,
  },
  {
    name: 'SUSPICIOUS',
    counter: 453332,
    percent: 30,
  },
  {
    name: 'GOOD',
    counter: 933332,
    percent: 50,
  },
]
export const MyDashboard = () => {
  return (
    <PieChart
      name="MY CHART"
      vizType="semi-donut"
      data={{ series: [] }}
      description="This is my chart"
      legend={true}
      counters={counters}
    />
  )
}

Props Interface

interface IPieProps extends IBasicVizChartProps {
  legend?: boolean  // if counters is configured, pie char will not shows legends
  showTotal?: boolean  //  if legend is true, pie chart will not show total data
  counters?: {
    name: string
    counter?: number
    percent?: number
    type?: string
    color?: string
  }[]
}

UI JSON

{
  "vizName": "ColumnChart", // The name of the visualization
  "dataSourceID": "ROT.ADC.L4SLB.THROUGHPUT", // The data source ID to provide data to the visualization
  "name": "THROUGHPUT", // The title name of the chart
  "description": "", // This text will show up on hover  
  "colors": "skin_to_blue", // The colors for the chart plots, it could be a COLOR_SET or an array of hex codes
  "legend": true, // if counters is configured, pie char will not shows legends
  "showTotal": true, // if legend is true, pie chart will not show total data""
}

Data structure

Key	Type	Required	Description
series	HightCharts series data	yes	The chart series data
total	number | string	no	The total info

Example of data structure

{
  series: [
    {
      name: 'ERRORS',
      data: [
        {
          name: 'Dropped',
          y: 100,
        },
        {
          name: 'Client conn failed',
          y: 200,
        },
        {
          name: 'Server conn failed',
          y: 300,
        },
      ],
    },
  ],
}