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

interface ISingleTreeMapData {
  series: {
    name: string
    value: any
  }[]
  total?: number | string
}
interface IMultiTreeMapData {
  total: number | string
  title?: string
  maps: Array<
    {
      name: string
    } & ISingleTreeMapData
  >
}
interface ITreeMapProps extends IBasicVizChartProps {
  data: ISingleTreeMapData | IMultiTreeMapData
  format?: string
  unit?: string
  multi?: boolean
  chartLabelFormat?: string
  unitLabel?: string
  groups?: string[]
  height?: number
}

JSON Config

TBD

Data structure

Single

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

Multiple

Key	Type	Required	Description
total	number | string	yes	The total info
title	string	no	The title of the data, will be shown upon the tree map chart
maps	Array< { name: string } & ISingleTreeMapData >	yes	The charts data, the name will be displayed on the tabs

Example of data structure

Single

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

Multiple

const 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,
        },
        // ...
      ],
    },
    // ...
  ],
}

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