Destination Countries

Destination Countries visualization. Part of SSLi App. (https://zpl.io/V1BMKxE)

Destination Countries Chart

Pass in a few props and get the Destination Countries chart for SSLi app. The Destination Chart contains the map chart on left and BarCaption viz on the right. The BarCaption will contain only the top five countries at most. The Map chart can have as many countries as possible.

The BarCaption title will change between 'Top Country' and 'Top x Countries' depending on the amount of countries available in data passed in.

Props

Name	Type	Default Value	Required	Description
data	Highcharts Data		yes	The data to feed the visualization
colors	[string, string]	['#bfcbd0', '#f6f8fb']	no	The color gradient (start stop values) to color map and bar captions

Usage Example

Viz Props

import React from 'react'

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

const { DestinationCountries} = Viz
export const MyDashboard = () => {
  return (
    <DestinationCountries
      name="MY Destination Countries"
      data={{ series:  [{
              name: 'Destination Countries',
              data: [ // name is optional
                {code: 'us', value: 100},
                {code: 'in', value: 200},
                {code: 'cn', value: 300},    
              ]
            }] 
          }
        }
      color=['#bfcbd0', '#f6f8fb']
    />
  )
}

Example of data structure

// the country code use "World, Eckert III projection, high resolution"
// http://code.highcharts.com/mapdata
{
  series: [{
    name: 'Destination Countries',
    data: [ // name is optional
      {code: 'us', value: 100},
      {code: 'in', value: 200},
      {code: 'cn', value: 300},    
    ]
  }],
}