TreeMapChart

Single

Multiple

Props

Name	Type	Default Value	Required	Description
data	ISingleTreeMapData | IMultiTreeMapData	{}	yes	The chart data of TreeMap
format	string	'number'	no	The formate type of each value
unit	string		no	The unit of each value
multi	boolean	false	no	If true, TreeMap will render a tabs with multiple charts
chartLabelFormat	string	'{point.name}<br/>{point.value}'	no	The Highcharts label format of the TreeMap
unitLabel	boolean	''	no	The label to explain the unit of each value, only shows if multi is true
groups	string[]		no	To show group tabs
colors	string | string[]	'blue_to_lightBlue'	no	The colors for TreeMap
height	number	Multi = 450 Single = 400	no	The height of TreeMap

Usage Example

Viz Props

import React from 'react'

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

const { TreeMapChart } = Viz
export const MyDashboard = () => {
  return (
    <>
      // single chart
      <TreeMapChart
        name="Top 10 Pools utilize"
        unit="%"
        groups={['ALLOCATED PORTS', 'AVG. THROUGHPUT', 'PEAK THROUGHPUT']}
        data={{
          series: [
            {
              name: 'Pool-1',
              value: 100,
            },
            {
              name: 'Pool-2',
              value: 90,
            },
            // ...
          ],
          total: 90,
        }}
      />
      // multiple charts
      <TreeMapChart
        name="Top 10 Pools utilize"
        unit="%"
        unitLabel="Utilization"
        multi={true}
        groups={['ALLOCATED PORTS', 'AVG. THROUGHPUT', 'PEAK THROUGHPUT']}
        data={{
          title: 'TOP 10 IPs BY Port Utilization for {name}',
          total: 90,
          maps: [
            {
              name: 'Pool1',
              total: 87,
              series: [
                {
                  name: '1.1.1.1',
                  value: 100,
                },
                {
                  name: '1.1.1.2',
                  value: 90,
                },
                // ...
              ],
            },
            {
              name: 'Pool2',
              total: 78,
              series: [
                {
                  name: '5.5.5.5',
                  value: 80,
                },
                {
                  name: '5.5.6.6',
                  value: 60,
                },
                // ...
              ],
            },
            // ...
          ],
        }}
      />
    </>
  )
}

Props Interface

JSON Config

Data structure

Single

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

Multiple

Example of data structure

Single

const data = {
  series: [
    {
      name: 'Pool-1',
      value: 100,
    },
    {
      name: 'Pool-2',
      value: 90,
    },
    // ...
  ],
  total: 90,
}

Multiple

Actions

VIZ.CHART.TREEMAP.SELECT_GROUP

Name	Type	Description
type	string	The action type
group	string	The selected group name
callback	(data: any, group: string): void	To update the viz with new data