# 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" %}
![](https://1325305415-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVCV06ERCVG4RcGoZmi%2F-LVE89wA-PHEQbct-C_H%2F-LVEBxUuuCKQHEDJnMJO%2Fimage.png?alt=media\&token=adbe2507-0e3c-49a5-aa9b-77e425a298d1)
{% endtab %}

{% tab title="Column (Bar)" %}
![Column Bar Chart](https://1325305415-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVCV06ERCVG4RcGoZmi%2F-LZIL5qInPr2JHJW2OTj%2F-LZIXAPIFewBp30UWlZ7%2Fimage.png?alt=media\&token=57532c35-daf5-419b-aae6-989e68f80ad7)
{% endtab %}

{% tab title="Column Timeseries" %}
![](https://1325305415-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVCV06ERCVG4RcGoZmi%2F-LVI9zVEH-vCcQeh67Mf%2F-LVIAODdbMH1k1raoii0%2Fimage.png?alt=media\&token=8049d9c6-22c0-414d-bf7a-d102bcff4dd3)
{% endtab %}

{% tab title="Map" %}
![](https://1325305415-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVCV06ERCVG4RcGoZmi%2F-LVI9zVEH-vCcQeh67Mf%2F-LVIAn8j0dcfL0xQ6JwI%2Fimage.png?alt=media\&token=9038fe59-a2ce-420b-9794-71ce458a84e7)
{% endtab %}

{% tab title="Pie" %}
![](https://1325305415-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVCV06ERCVG4RcGoZmi%2F-LVI9zVEH-vCcQeh67Mf%2F-LVIBWJF87V5d4zmcNXZ%2Fimage.png?alt=media\&token=2ba21ae5-3f66-4a39-8c46-32566b530c1f)
{% endtab %}

{% tab title="Table" %}
![](https://1325305415-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVCV06ERCVG4RcGoZmi%2F-LVI9zVEH-vCcQeh67Mf%2F-LVIC3psiJa0-2ucnnKW%2Fimage.png?alt=media\&token=4b409dd2-19d6-46b5-905b-2ce8034c226f)
{% 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 (
    <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"
    />
  )
}
```

{% 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 |