SankeyChart
Implemented Data VisualizationServer-built flow charts with weighted links and themed labels.
Kumo reference: kumo-ui.com/charts/sankey/
Presentation commands show demo feedback. Read the interaction guide to connect real actions.
Basic
Show template
{% load wdj %}
<div class="w-full">{% include "wdj/components/chart.html" with option=sankey_basic_option label="Basic flow" height=350 only %}</div>Traffic flow
Show template
{% load wdj %}
<div class="w-full">{% include "wdj/components/chart.html" with option=sankey_traffic_option label="Traffic flow flow" height=350 only %}</div>Vertical
Show template
{% load wdj %}
<div class="w-full">{% include "wdj/components/chart.html" with option=sankey_vertical_option label="Vertical flow" height=350 only %}</div>Wide nodes
Show template
{% load wdj %}
<div class="w-full">{% include "wdj/components/chart.html" with option=sankey_wide_option label="Wide nodes flow" height=350 only %}</div>Spaced nodes
Show template
{% load wdj %}
<div class="w-full">{% include "wdj/components/chart.html" with option=sankey_spaced_option label="Spaced nodes flow" height=350 only %}</div>Subtle links
Show template
{% load wdj %}
<div class="w-full">{% include "wdj/components/chart.html" with option=sankey_subtle_option label="Subtle links flow" height=350 only %}</div>Colored nodes
Show template
{% load wdj %}
<div class="w-full">{% include "wdj/components/chart.html" with option=sankey_colored_option label="Colored nodes flow" height=350 only %}</div>Without labels
Show template
{% load wdj %}
<div class="w-full">{% include "wdj/components/chart.html" with option=sankey_no_labels_option label="Without labels flow" height=350 only %}</div>Loading
Show template
{% load wdj %}
<div class="w-full">{% include "wdj/components/chart.html" with loading=True label="Loading flow" height=350 only %}</div>Empty
No chart data
Data will appear when observations are available.
Show template
{% load wdj %}
<div class="w-full">{% include "wdj/components/chart.html" with option=sankey_empty_option label="No flow data" height=350 empty=True only %}</div>Rich tooltip
Show template
{% load wdj %}
{% include "wdj/components/chart.html" with option=audit_sankey_tooltip label="Traffic flow with formatted tooltips" only %}Interactive node selection
Show template
{% load wdj %}
<div x-data="{ selected: '' }" @wdj:chart-click="selected = $event.detail.name">{% include "wdj/components/chart.html" with option=sankey_traffic_option label="Select a traffic node" only %}<p class="text-base" aria-live="polite" x-text="selected ? 'Selected: ' + selected : 'Select a node or connection'"></p></div>Drilldown
Origin breakdown: 32 successful requests and 6 errors.
Show template
{% load wdj %}
<div x-data="{ detail: false }" @wdj:chart-click="detail = true"><div x-show="!detail">{% include "wdj/components/chart.html" with option=sankey_traffic_option label="Select traffic to inspect details" only %}</div><div x-cloak x-show="detail"><p class="text-base">Origin breakdown: 32 successful requests and 6 errors.</p>{% include "wdj/components/chart.html" with option=audit_sankey_detail label="Origin request details" only %}<button type="button" class="h-9 rounded-lg bg-kumo-fill px-3 text-base" @click="detail = false">Back to overview</button></div></div>Inline labels
Show template
{% load wdj %}
{% include "wdj/components/chart.html" with option=audit_sankey_inline label="Traffic flow with inline labels" only %}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| option | dict | unset | Option; pass the documented value shown in the examples. |
| height | number | 288 (Chart) | Height; pass the documented value shown in the examples. |
| label | string | unset | Visible accessible label. Supply an explicit aria-label via attrs when the control is bare. |
| loading | bool | False | Loading; pass the documented value shown in the examples. |
| empty | bool | False | Empty; pass the documented value shown in the examples. |
| id | string | unset | Stable unique DOM ID; important for HTMX targets and focus restoration. |
| attrs | dict | {} | Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only. |
| class | string | "" | Class; pass the documented value shown in the examples. |