OverallChart

A chart widget to highlight a total of overall with multiple sub charts.

Props

Name	Type	Default Value	Required	Description
name	string	-	yes	The name of your chart.
totalTitle	string	-	yes	The total string for your chart. In the example above it is 'Total Subscribers'
summaryCounter	string	-	yes	The summary counter for your chart. In the example above it is '350'
summaryUnit	string	''	no	The unit (optional) to put on your chart. In the example above it is 'K'
itemInfo	[]	itemInfo: [] as { title: string, counter: string, data: [], color: string }[]	no	The information for your sub-charts. Contains the sub-chart title, count, and data for the chart. Is an array ob objects

Props Of Each Chart (2 sub-charts max)

Name	Type	Default Value	Required	Description
title	string	-	yes	Title of the sub-chart. In the example above, there are two titles: 'NEW', and 'REMOVED.'
counter	string	-	yes	The counters for each subchart. In the example above, the two counter values are: '750,089', and '150,293.'
data	[]	-	yes	The data for your charts, based off of A10Chart, which is in turn based on react-highcharts.
color	string	-	yes	The color for your chart.

Usage Example

Viz Props

import React from 'react'

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

const { MultiChart } = Viz
export const MyDashboard = () => {
  return (
    <Overall Chart
      name="Subscribers"
      summaryCounter="32,439"
      summaryUnit="k"
      totalTitle="Total Subscribers"
      item=[{
        color:"green",
        counter: "750,089",
        data: [
        [1548990980145, 20],
        [1548991080145, 24],
        ...
        ]
        title: "NEW"
        }, 
        {
        color: "red",
        counter: "150,293"
        data: [
        [1548990980145, 20],
        [1548991080145, 24],
        ...
        ]
        title: "REMOVED"
        }
      ]
    />
  )
}

Props Interface

export interface IOverallProps extends IBasicVizChartProps {
  name: string
  totalTitle: string
  summaryCounter: string
  summaryUnit?: string
  itemInfo: []
}

UI JSON

{
    vizName: 'OverallChart',
    name: 'Overall (Subscription)',
    totalTitle: 'Total Subscription',
    summaryCounter: '350',
    summaryUnit: 'K',
    itemInfo: [
      {
        title: 'NEW',
        counter: '750,089',
        data: dataMap['Overall Chart'](),
        color: 'green',
      },
      {
        title: 'REMOVED',
        counter: '150,293',
        data: dataMap['Overall Chart'](),
        color: 'red',
      },
    ],
  },
],

Data Structures

Key	Type	Required	Description
itemInfo	[] of {}	yes	Each object in array contains chart series data (highchart series data), color (string), counter (string) and title (string).

Example of Data Structure

itemInfo: [
  {
    title: 'NEW',
    counter: '750,089',
    data: dataMap['Overall Chart'](),
    color: 'green',
  },
  {
    title: 'REMOVED',
    counter: '150,293',
    data: dataMap['Overall Chart'](),
    color: 'red',
  },
],