#HierarchySankey
#Sankey Hierarki Penjualan Regional
Menampilkan diagram sankey hierarki yang menunjukkan penjualan mengalir dari wilayah ke negara lalu ke kota.
import { VSeedRender } from '@components'
export default () => {
const vseedConfig = {
"chartType": "hierarchySankey",
"dataset": [
{
"region": "Asia",
"country": "China",
"city": "Beijing",
"sales": 30
},
{
"region": "Asia",
"country": "China",
"city": "Shanghai",
"sales": 20
},
{
"region": "Asia",
"country": "Japan",
"city": "Tokyo",
"sales": 10
},
{
"region": "Europe",
"country": "Germany",
"city": "Berlin",
"sales": 18
},
{
"region": "Europe",
"country": "Germany",
"city": "Munich",
"sales": 12
},
{
"region": "Europe",
"country": "France",
"city": "Paris",
"sales": 16
}
],
"dimensions": [
{
"id": "region",
"alias": "Region"
},
{
"id": "country",
"alias": "Country"
},
{
"id": "city",
"alias": "City"
}
],
"measures": [
{
"id": "sales",
"alias": "Sales"
}
],
"legend": {
"enable": true,
"position": "top"
},
"label": {
"enable": true,
"showDimension": true,
"showValue": true
},
"tooltip": {
"enable": true
}
}
return <VSeedRender vseed={vseedConfig} />
}#Dimensi Hierarki Bertingkat + Satu Metrik
Menampilkan aliran hierarki dari wilayah besar ke negara lalu ke kanal, dengan satu metrik yang mengontrol ukuran aliran.
import { VSeedRender } from '@components'
export default () => {
const vseedConfig = {
"chartType": "hierarchySankey",
"dataset": [
{
"region": "Cina Utara",
"country": "Tiongkok",
"channel": "Langsung",
"revenue": 42
},
{
"region": "Cina Utara",
"country": "Tiongkok",
"channel": "Mitra",
"revenue": 18
},
{
"region": "Cina Timur",
"country": "Tiongkok",
"channel": "Langsung",
"revenue": 36
},
{
"region": "Cina Timur",
"country": "Tiongkok",
"channel": "E-commerce",
"revenue": 22
},
{
"region": "Asia Tenggara",
"country": "Singapura",
"channel": "Langsung",
"revenue": 15
},
{
"region": "Asia Tenggara",
"country": "Malaysia",
"channel": "Mitra",
"revenue": 12
}
],
"dimensions": [
{
"id": "region",
"alias": "Wilayah Besar"
},
{
"id": "country",
"alias": "Negara"
},
{
"id": "channel",
"alias": "Kanal"
}
],
"measures": [
{
"id": "revenue",
"alias": "Pendapatan"
}
],
"legend": {
"enable": true,
"position": "top"
},
"label": {
"enable": true,
"showDimension": true,
"showValue": true
},
"tooltip": {
"enable": true
}
}
return <VSeedRender vseed={vseedConfig} />
}#Sankey Hierarki Pivot
Diagram Sankey hierarki yang dipivot berdasarkan wilayah dan tahun. Wilayah dipetakan ke baris, tahun ke kolom, dan setiap sel pivot menampilkan pohon aliran hierarki tersendiri.
import { VSeedRender } from '@components'
export default () => {
const vseedConfig = {
"chartType": "hierarchySankey",
"dataset": [
{
"region": "East",
"year": "2023",
"country": "China",
"city": "Shanghai",
"channel": "Direct",
"sales": 35
},
{
"region": "East",
"year": "2023",
"country": "China",
"city": "Hangzhou",
"channel": "Partner",
"sales": 20
},
{
"region": "East",
"year": "2023",
"country": "Japan",
"city": "Tokyo",
"channel": "Direct",
"sales": 18
},
{
"region": "East",
"year": "2024",
"country": "China",
"city": "Shanghai",
"channel": "Direct",
"sales": 42
},
{
"region": "East",
"year": "2024",
"country": "China",
"city": "Nanjing",
"channel": "E-commerce",
"sales": 16
},
{
"region": "East",
"year": "2024",
"country": "Japan",
"city": "Osaka",
"channel": "Partner",
"sales": 14
},
{
"region": "West",
"year": "2023",
"country": "Germany",
"city": "Berlin",
"channel": "Direct",
"sales": 22
},
{
"region": "West",
"year": "2023",
"country": "France",
"city": "Paris",
"channel": "Partner",
"sales": 19
},
{
"region": "West",
"year": "2023",
"country": "France",
"city": "Lyon",
"channel": "Direct",
"sales": 11
},
{
"region": "West",
"year": "2024",
"country": "Germany",
"city": "Munich",
"channel": "Direct",
"sales": 26
},
{
"region": "West",
"year": "2024",
"country": "France",
"city": "Paris",
"channel": "E-commerce",
"sales": 17
},
{
"region": "West",
"year": "2024",
"country": "Spain",
"city": "Madrid",
"channel": "Partner",
"sales": 13
}
],
"dimensions": [
{
"id": "country",
"alias": "Country",
"encoding": "hierarchy"
},
{
"id": "city",
"alias": "City",
"encoding": "hierarchy"
},
{
"id": "channel",
"alias": "Channel",
"encoding": "hierarchy"
},
{
"id": "region",
"alias": "Region",
"encoding": "row"
},
{
"id": "year",
"alias": "Year",
"encoding": "column"
}
],
"measures": [
{
"id": "sales",
"alias": "Sales"
}
],
"color": {
"colorScheme": [
"#0B6CFF",
"#3B8BFF",
"#00A6A6",
"#4DC3B2",
"#FF8A00",
"#FFB347",
"#7B61FF",
"#B39DFF"
]
},
"legend": {
"enable": true,
"position": "top"
},
"label": {
"enable": true,
"showDimension": true,
"showValue": true
},
"tooltip": {
"enable": true
}
}
return <VSeedRender vseed={vseedConfig} />
}#Nama Metrik sebagai Dimensi Hierarki + Satu Metrik
Menempatkan “nama metrik” itu sendiri ke dalam jalur hierarki untuk menampilkan aliran berbagai metrik bisnis di setiap wilayah besar, dengan satu metrik numerik yang mengontrol ukurannya.
import { VSeedRender } from '@components'
export default () => {
const vseedConfig = {
"chartType": "hierarchySankey",
"dataset": [
{
"region": "Cina Utara",
"metricName": "Penjualan",
"value": 42
},
{
"region": "Cina Utara",
"metricName": "Laba",
"value": 12
},
{
"region": "Cina Timur",
"metricName": "Penjualan",
"value": 36
},
{
"region": "Cina Timur",
"metricName": "Laba",
"value": 10
},
{
"region": "Cina Selatan",
"metricName": "Penjualan",
"value": 28
},
{
"region": "Cina Selatan",
"metricName": "Laba",
"value": 8
}
],
"dimensions": [
{
"id": "region",
"alias": "Wilayah Besar"
},
{
"id": "metricName",
"alias": "Nama Metrik"
}
],
"measures": [
{
"id": "value",
"alias": "Nilai Metrik"
}
],
"legend": {
"enable": true,
"position": "top"
},
"label": {
"enable": true,
"showDimension": true,
"showValue": true
},
"tooltip": {
"enable": true
}
}
return <VSeedRender vseed={vseedConfig} />
}