@page "/sankey-diagram"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Radzen Blazor Sankey Diagram
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" class="rz-pb-4">
    A Sankey diagram shows flow between stages as bands whose width is proportional to the amount - ideal for tracing where quantities move and split, like budgets, energy, or user journeys.
</RadzenText>

<RadzenText Anchor="sankey-diagram#basic-usage" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Basic Usage
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    RadzenSankeyDiagram requires <code>Data</code>, <code>SourceProperty</code>, <code>TargetProperty</code>, and <code>ValueProperty</code> to display flow data.
</RadzenText>
<RadzenExample ComponentName="SankeyDiagram" Example="SankeyDiagramBasic">
    <SankeyDiagramBasic />
</RadzenExample>

<RadzenText Anchor="sankey-diagram#color-scheme" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Color Scheme
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>ColorScheme</code> property to choose from built-in color palettes that automatically style nodes and links.
</RadzenText>
<RadzenExample ComponentName="SankeyDiagram" Example="SankeyDiagramColorScheme">
    <SankeyDiagramColorScheme />
</RadzenExample>

<RadzenText Anchor="sankey-diagram#node-properties" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Node Properties
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Control node layout with <code>NodeAlignment</code> (Justify, Left, Right, Center), <code>NodeWidth</code>, and <code>NodePadding</code>.
</RadzenText>
<RadzenExample ComponentName="SankeyDiagram" Example="SankeyDiagramNodeProperties">
    <SankeyDiagramNodeProperties />
</RadzenExample>

<RadzenText Anchor="sankey-diagram#custom-colors" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Custom Colors
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Define custom colors for individual nodes and links using the <code>NodeFills</code> and <code>LinkFills</code> properties.
</RadzenText>
<RadzenExample ComponentName="SankeyDiagram" Example="SankeyDiagramCustomColors">
    <SankeyDiagramCustomColors />
</RadzenExample>

<RadzenText Anchor="sankey-diagram#custom-tooltips" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Custom Tooltips
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Customize tooltip appearance and content with <code>ValueFormatter</code>, <code>ValueText</code>, <code>IncomingText</code>, <code>OutgoingText</code>, <code>FlowText</code>, and <code>TooltipStyle</code>.
</RadzenText>
<RadzenExample ComponentName="SankeyDiagram" Example="SankeyDiagramCustomTooltips">
    <SankeyDiagramCustomTooltips />
</RadzenExample>

<RadzenText Anchor="sankey-diagram#animation" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Animation
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Toggle flow animations with the <code>Animated</code> property to visualize data movement through the diagram.
</RadzenText>
<RadzenExample ComponentName="SankeyDiagram" Example="SankeyDiagramAnimation">
    <SankeyDiagramAnimation />
</RadzenExample>
