InfoGraphics (deprecated)

JSON Example

{
  "vizName": "infoGraphics",
  "dataSourceID": "RPT.ADC.ThunderDashBoardInfoGraphics",
  "itemsOfEachRow": 3,
  "info": [
    {
      "name": "Client",
      "data": "client", // the data key of the data source for this info
      "icon": "client"
    },
    {
      "name": "ADC Services",
      "data": "adc_services",
      "icon": "thunder"
    },
    {
      "name": "Application",
      "data": "application",
      "icon": "app"
    },
    {
      "name": "Internet",
      "data": "ineternet",
      "icon": "ineternet"
    },
    {
      "name": "Thunder Cluster",
      "data": "cluster",
      "icon": "clusters"
    },
    {
      "name": "App Servers",
      "data": "app_servers",
      "icon": "servers"
    }
  ],
  "stats": [
    {
      "name": "CRTT",
      "data": "crtt", // the data key of the data source for this stats
      "type": "number",
      "unit": "ms",
      "description": "", // this text will show up on hover
      "range": [10, 100] // this will give the break point for data to be categorised in this case 0- 10, 10-100, 100+
    },
    {
      "name": "End To End Latency",
      "data": "end_to_end_latency", // the data key of the data source for this stats
      "type": "number",
      "unit": "ms",
      "description": "", // this text will show up on hover
      "range": [10, 100] // this will give the break point for data to be categorised in this case 0- 10, 10-100, 100+
    },
    {
      "name": "SRTT",
      "data": "SRTT", // the data key of the data source for this stats
      "type": "number",
      "unit": "ms",
      "description": "", // this text will show up on hover
      "range": [10, 100] // this will give the break point for data to be categorised in this case 0- 10, 10-100, 100+
    }
  ]
}

Props

Name	Type	Default Value	Required	Description
data	{ name: string }[]	[]	no	Render menus
selectedMenu	string	''	no	Default Selected Menus

Usage Example

Viz Props

import React from 'react'

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

const { InfoGraphics } = Viz
export const MyDashboard = () => {
  return (
    <InfoGraphics
      selectedMenu="ADC Services"
      data={[
        { name: 'Client' },
        { name: 'ADC Services' },
        { name: 'Application' },
        { name: 'Internet' },
        { name: 'Thunder Cluster' },
        { name: 'App Services' },
      ]}
    />
  )
}

Props Interface

interface IMenuProps extends IBasicVizProps {
  data: { name: string; description?: string; icon?: string }[]
  selectedMenu?: string
}

UI JSON

{
    vizName: 'InfoGraphics',
    selectedMenu="ADC Services"
    data={[
      { name: 'Client' },
      { name: 'ADC Services' },
      { name: 'Application' },
      { name: 'Internet' },
      { name: 'Thunder Cluster', description: 'Not App Specific' },
      { name: 'App Services', description: '2' },
    ]}
}

Data Structure

data={[
      { name: string, description?: string },
    ]}

Example

data={[
      { name: 'Client' },
      { name: 'ADC Services' },
      { name: 'Application' },
      { name: 'Internet' },
      { name: 'Thunder Cluster', description: 'Not App Specific' },
      { name: 'App Services', description: '2' },
    ]}