Sankey

Sankey Chart used in SSLi HC App

Source IPs vs Destination IPs: https://zpl.io/V1BMKxE

Props

Name	Type	Default Value	Required	Description
data	ISankeyData	[]	yes	data to populate nodes and link
colors	string[]	[ '#7cb5ec', '#8085e9', '#f15c80', '#f7a35c', '#2b908f', '#9e9ed7', '#90ed7d', '#e4d354', ]	no	to populate node colors, order by data order (above). See more below.
name	string			Name will be shown in tooltip.

Usage Example

Viz Props

import React from 'react'

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

const { Sankey } = Viz
export const MyDashboard = () => {
  return (
    <Sankey
      name="Sankey: Source IPs vs Destination IPs"
      data={[
        { from: '192.157.23.8', to: '101.110.00.1', weight: 4 },
        { from: '192.157.23.8', to: '101.010.10.3', weight: 2 },
        { from: '192.157.23.8', to: '101.011.11.7', weight: 5 },
        { from: '192.157.23.3', to: '101.110.00.1', weight: 4 },
        { from: '192.157.23.3', to: '101.010.10.3', weight: 2 }
        ] 
      }
    />
  )
}

Data

Props

interface ISankeyProps{
 vizName: 'Sankey'
 data: ISankeyData
 colors: string[]
}

Data Structure

const data: {
  from: string
  to: string
  weight: number
}[] = [
      { from: '192.157.23.8', to: '101.110.00.1', weight: 4 },
      { from: '192.157.23.8', to: '101.010.10.3', weight: 2 },
      { from: '192.157.23.8', to: '101.011.11.7', weight: 5 },
      { from: '192.157.23.3', to: '101.110.00.1', weight: 4 },
      { from: '192.157.23.3', to: '101.010.10.3', weight: 2 },
      { from: '192.157.23.3', to: '101.011.11.7', weight: 5 },
      { from: '226.158.23.6', to: '101.110.00.1', weight: 4 },
      { from: '226.158.23.6', to: '101.010.10.3', weight: 2 },
      { from: '226.158.23.6', to: '101.011.11.7', weight: 5 },
      { from: '126.158.23.5', to: '101.110.00.1', weight: 4 },
      { from: '126.158.23.5', to: '101.010.10.3', weight: 2 },
      { from: '126.158.23.5', to: '101.011.11.7', weight: 5 },
      { from: '103.158.23.3', to: '101.110.00.1', weight: 4 },
      { from: '103.158.23.3', to: '101.010.10.3', weight: 2 },
      { from: '103.158.23.3', to: '101.011.11.7', weight: 5 },
    ]

Color Order

Color Order For Sankey

The source node will always have a distinct color, and will color the first destination node it is linked to, unless it has already been colored. The destination will be color ordered by its first source --> destination link. The next time a source destination links to an already colored node, no new coloring will occur.