VisActor VBI
  • 한국어

      • HierarchySankey

      지역별 매출 계층 Sankey

      지역에서 국가, 다시 도시로 매출이 흐르는 계층 Sankey 차트를 보여줍니다.

      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} />
}

      다중 계층 차원 + 단일 지표

      대권역에서 국가, 다시 채널로 이어지는 계층 흐름을 보여주며, 단일 지표로 흐름의 크기를 제어합니다.

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "hierarchySankey",
  "dataset": [
    {
      "region": "화북",
      "country": "중국",
      "channel": "직영",
      "revenue": 42
    },
    {
      "region": "화북",
      "country": "중국",
      "channel": "대리",
      "revenue": 18
    },
    {
      "region": "화동",
      "country": "중국",
      "channel": "직영",
      "revenue": 36
    },
    {
      "region": "화동",
      "country": "중국",
      "channel": "전자상거래",
      "revenue": 22
    },
    {
      "region": "동남아시아",
      "country": "싱가포르",
      "channel": "직영",
      "revenue": 15
    },
    {
      "region": "동남아시아",
      "country": "말레이시아",
      "channel": "대리",
      "revenue": 12
    }
  ],
  "dimensions": [
    {
      "id": "region",
      "alias": "대권역"
    },
    {
      "id": "country",
      "alias": "국가"
    },
    {
      "id": "channel",
      "alias": "채널"
    }
  ],
  "measures": [
    {
      "id": "revenue",
      "alias": "매출"
    }
  ],
  "legend": {
    "enable": true,
    "position": "top"
  },
  "label": {
    "enable": true,
    "showDimension": true,
    "showValue": true
  },
  "tooltip": {
    "enable": true
  }
}

  return <VSeedRender vseed={vseedConfig} />
}

      피벗 계층 Sankey

      지역과 연도 기준으로 피벗한 계층 Sankey 차트입니다. 지역은 행에, 연도는 열에 매핑되며, 각 피벗 셀에는 독립적인 계층 흐름 트리가 표시됩니다.

      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} />
}

      지표 이름을 계층 차원으로 사용 + 단일 지표

      “지표 이름” 자체를 계층 경로에 넣어 각 대권역 아래의 서로 다른 비즈니스 지표 흐름을 보여주고, 단일 수치 지표로 크기를 제어합니다.

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "hierarchySankey",
  "dataset": [
    {
      "region": "화북",
      "metricName": "매출",
      "value": 42
    },
    {
      "region": "화북",
      "metricName": "이익",
      "value": 12
    },
    {
      "region": "화동",
      "metricName": "매출",
      "value": 36
    },
    {
      "region": "화동",
      "metricName": "이익",
      "value": 10
    },
    {
      "region": "화남",
      "metricName": "매출",
      "value": 28
    },
    {
      "region": "화남",
      "metricName": "이익",
      "value": 8
    }
  ],
  "dimensions": [
    {
      "id": "region",
      "alias": "대권역"
    },
    {
      "id": "metricName",
      "alias": "지표 이름"
    }
  ],
  "measures": [
    {
      "id": "value",
      "alias": "지표 값"
    }
  ],
  "legend": {
    "enable": true,
    "position": "top"
  },
  "label": {
    "enable": true,
    "showDimension": true,
    "showValue": true
  },
  "tooltip": {
    "enable": true
  }
}

  return <VSeedRender vseed={vseedConfig} />
}