MainChart

A powerful chart widget which is able to display diverse chart types such as line, area, column, bar, and table, including tabs and filters.

Line

Column (Bar)

Column Bar Chart

Column Timeseries

Map

Pie

Table

Props

Name	Type	Default Value	Required	Description
vizType	string[]		no	The type of the visualization. Chart types are line, pie, column, column_timeseries, map, scatter, and table
data	Highcharts Data		yes	The data to feed the visualization
name	string		yes	The title name of the chart
description	string		no	This text will show up on hover
groups	Array<{name: string, actived?: boolean}>[]		no	The data groups associating the charts data. The groups will be display as tabs on the chart widget
xAxis	string		no	The value unit of the x axis of the chart
yAxis	string		no	The value unit of the y axis of the chart
colors	string | string[]		no	The colors for the chart plots, it could be a COLORS or an array of hex codes
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 { MainChart } = Viz
export const MyDashboard = () => {
  return (
    <MainChart
      name="MY CHART"
      data={{ series: [] }}
      vizType={['line', 'column', 'column_timeseries', 'bar', 'table', 'pie', 'map']}
      description="This is my chart"
      groups={[
        { name: 'TOTAL CONN', actived: true },
        { name: 'CURR CONN' },
        { name: 'THROUGHPUT' },
      ]}
      colors="cyan_to_green"
    />
  )
}

Props Interface

interface IMainChartProps extends IBasicVizChartProps {
  vizType: string[]
  mode?: string
  tabs?: IObject[]
}

export interface IBasicVizChartProps extends IBasicVizProps, IChartVizHOCProps {
  name: string // The title name of the chart
  colors?: string | string[] // The colors for the chart plots, it could be a strinf of COLOR_SET or an array of hex codes
  collapsible?: boolean // If true, the chart panel is able to collapse or expand
  xAxis?: string // The value unit of the x axis of the chart
  yAxis?: string // The value unit of the y axis of the chart
  chartConfig?: IObject // The additional Highcharts config to customize
  interval?: string // interval prop for Chart to show date with "point.x + interval"
}

export interface IBasicVizProps {
  vizType?: any // The type of the viz
  data?: any // The data for this viz
  dataKey?: string // The data key for the data to get the specific data, defaults to undefined
  description?: string // This text will show up on hover
  width?: number | string // The static width of the chart, default unit is px
  height?: number | string // The static height of the chart, default unit is px
  className?: string // The additional css class for this widget
  style?: React.CSSProperties // The additional CSS style
  isLoading?: boolean // If true, the viz will show a loading diagram
  unit?: string
  dispatch?(action: IVizAction): void
}

UI JSON

{
  "vizName": "mainChart", // The name of the visualization
  "vizType": ["line", "column", "column_timeseries", "bar", "table", "pie", "map"], // The type of the visualization
  "dataSourceID": "ROT.ADC.ThunderDashboardSLBLoadDistribution", // The data source ID to provide data to the visualization
  "name": "LOAD DISTRIBUTION", // The title name of the chart
  "description": "", // This text will show up on hover
  // The data groups associating the charts data. The groups will be display as tabs on the chart widget
  "groups": [
    { "name": "TOTAL CONN", "actived": true },
    { "name": "CURR CONN" },
    { "name": "THROUGHPUT" },
    { "name": "BYTES RCVD & SENT" },
    { "name": "CONN RATE" },
    { "name": "PACKETS" },
    { "name": "PKT.RATE" }
  ],
  "xAxis": "timeline", // The value unit of the x axis of the chart
  "yAxis": "bytes", // The value unit of the y axis of the chart
  "colors": "cyan_to_green", // The colors for the chart plots, it could be a COLOR_SET or an array of hex codes
  // The additional Highcharts config to customize
  "chartConfig": {
    "plotOptions": {
      "series": {
        "marker": {
          "enabled": false
        },
        "lineWidth": 0
      }
    }
  }
}

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

Line

{
  series: [{
    name: 'Sent',
    data: [
      [1546445142959000, 100],
      [1546445143959000, 200],
      [1546445144959000, 300],
    ]
  },{
    name: 'Received',
    data: [
      [1546445142959000, 800],
      [1546445143959000, 900],
      [1546445144959000, 1000],
    ]
  }],
  total: 3000,
}

Column (Bar)

{
    series: [
        {
            color: '#FA6174",
            data: [67, 35, 24], 
            id: 'upstream',
            name: 'upstream',
        },
        {
            color: '#FF83D1",
            data: [4, 56, 0], 
            id: 'downstream',
            name: 'downstream',
        }
    ]
}

Column (Timeseries)

{
    series: [
        {
            color: '#FA6174',
            data: [
                [ 1550806471102, 71],
                [ 1550806471102, 36],
                ...
                ],
            id: 'Server1',
            name: 'Server1',
        },
        ...
    ]
}

Bar

// same as line chart
{
  series: [{
    name: 'Sent',
    data: [
      [1546445142959000, 100],
      [1546445143959000, 200],
      [1546445144959000, 300],
    ]
  },{
    name: 'Received',
    data: [
      [1546445142959000, 800],
      [1546445143959000, 900],
      [1546445144959000, 1000],
    ]
  }],
  total: 3000,
}

Map

// the country code use "World, Eckert III projection, high resolution"
// http://code.highcharts.com/mapdata
{
  series: [{
    name: 'Geo-Locations',
    data: [
      {code: 'us', name: 'USA', value: 100},
      {code: 'in', name: 'India', value: 200},
      {code: 'cn', name: 'China', value: 300},    
    ]
  }],
}

Pie

{
  series: [{
    name: 'Throughput',
    data: [{
      name: 'Sent',
      y: 300,
      ]
    },{
      name: 'Received',
      y: 300,
    }]    
  }],
  total: 600,
}

Scatter

series: [{
    color: "#FA6174",
    data: [
        [1550800284744, 34],
        [1550800384744, 24],
        ...
        ],
    id: "Server1",
    name: "Server1"
    }, 
    ...
]

Table

series:[{
      columns: [
        { title: 'Timeline', dataIndex: 'timeline' },
        { title: 'Value', dataIndex: 'value' },
      ],
      dataSource: [
        { timeline: '2019/1/11', value: 23 },
        { timeline: '2019/1/12', value: 24 },
        { timeline: '2019/1/13', value: 25 },
        { timeline: '2019/1/14', value: 26 },
      ],
    }
  },
  }
]

Actions

VIZ.CHART.MAIN.SWITCH_TYPE

Name	Type	Description
type	string	The action type
chartType	string	The chart type to switch to
callback	(data: any, chartType: string): void	To update the viz with new data