# 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.
{% tabs %}
{% tab title="Line" %}
{% endtab %}
{% tab title="Column (Bar)" %}
{% endtab %}
{% tab title="Column Timeseries" %}
{% endtab %}
{% tab title="Map" %}
{% endtab %}
{% tab title="Pie" %}
{% endtab %}
{% tab title="Table" %}
{% endtab %}
{% endtabs %}
## 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
{% tabs %}
{% tab title="Viz Props" %}
```typescript
import React from 'react'
import { Viz } from 'a10-gui-dgp-viz'
const { MainChart } = Viz
export const MyDashboard = () => {
return (
)
}
```
{% endtab %}
{% tab title="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
}
```
{% endtab %}
{% tab title="UI JSON" %}
```typescript
{
"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
}
}
}
}
```
{% endtab %}
{% endtabs %}
## 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
{% tabs %}
{% tab title="Line" %}
```typescript
{
series: [{
name: 'Sent',
data: [
[1546445142959000, 100],
[1546445143959000, 200],
[1546445144959000, 300],
]
},{
name: 'Received',
data: [
[1546445142959000, 800],
[1546445143959000, 900],
[1546445144959000, 1000],
]
}],
total: 3000,
}
```
{% endtab %}
{% tab title="Column (Bar)" %}
```
{
series: [
{
color: '#FA6174",
data: [67, 35, 24],
id: 'upstream',
name: 'upstream',
},
{
color: '#FF83D1",
data: [4, 56, 0],
id: 'downstream',
name: 'downstream',
}
]
}
```
{% endtab %}
{% tab title="Column (Timeseries)" %}
```
{
series: [
{
color: '#FA6174',
data: [
[ 1550806471102, 71],
[ 1550806471102, 36],
...
],
id: 'Server1',
name: 'Server1',
},
...
]
}
```
{% endtab %}
{% tab title="Bar" %}
```typescript
// 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,
}
```
{% endtab %}
{% tab title="Map" %}
```typescript
// 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},
]
}],
}
```
{% endtab %}
{% tab title="Pie" %}
```typescript
{
series: [{
name: 'Throughput',
data: [{
name: 'Sent',
y: 300,
]
},{
name: 'Received',
y: 300,
}]
}],
total: 600,
}
```
{% endtab %}
{% tab title="Scatter" %}
```
series: [{
color: "#FA6174",
data: [
[1550800284744, 34],
[1550800384744, 24],
...
],
id: "Server1",
name: "Server1"
},
...
]
```
{% endtab %}
{% tab title="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 },
],
}
},
}
]
```
{% endtab %}
{% endtabs %}
## 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 |
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://a10gui.gitbook.io/dgp/charts-vizs/mainchart.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.