@page "/components/charts/line"

<PageTitle>Line Chart — Lumeo</PageTitle>

<PageHeader Title="Line Chart" Description="Show trends over time. Use when continuity between data points matters, such as revenue tracking or performance monitoring." />

<Stack Gap="8">
    <ComponentDemo Title="Smooth Line with Dots" Description="Bezier-smoothed curves with dot markers — a clean default for multi-series trend comparisons." Code="@_basicCode">
        <Container>
            <LineChart Categories="_categories" Series="_series" Smooth="true" ShowDots="true" />
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Straight Line, No Dots" Description="Precise straight-line segments without markers keep focus on broad trends rather than individual data points." Code="@_straightCode">
        <Container>
            <LineChart Categories="_categories" Series="_series" Smooth="false" ShowDots="false" />
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Three-Series Comparison" Description="Compare three key metrics simultaneously. Smooth curves reduce noise when datasets overlap frequently." Code="@_threeSeriesCode">
        <Container>
            <LineChart Categories="_categories" Series="_threeSeries" Smooth="true" />
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="With Data Labels" Description="Show the exact value at each data point — useful for executive summaries or printable reports." Code="@_labelsCode">
        <Container>
            <LineChart Categories="_shortCategories" Series="_labelSeries" Smooth="true" ShowDataLabels="true" LabelPosition="top" />
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Daily Time-Series with DataZoom" Description="A 60-day daily view with the DataZoom slider so users can zoom into any specific window." Code="@_zoomCode">
        <Container>
            <LineChart Categories="_days60" Series="_dailySeries" Smooth="true" ShowDots="false" DataZoom="true" />
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Custom Colors, No Legend" Description="Override the palette with brand colors and hide the legend for a minimal single-focus layout." Code="@_minimalCode">
        <Container>
            <LineChart Categories="_categories" Series="_minimalSeries" Smooth="true" ShowLegend="false" Colors="_brandColors" />
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Loading state" Description="Multi-series line skeleton draws itself across the path. IsLoading binds to your async fetch; ShowLoadingSkeleton=false opts out.">
        <Container>
            <Stack Gap="4">
                <Stack Direction="Stack.StackDirection.Horizontal" Gap="4" Align="center" Wrap="true">
                    <Button OnClick="SimulateLineLoadingAsync" Disabled="@_lineLoading">Simulate loading</Button>
                    <Stack Direction="Stack.StackDirection.Horizontal" Gap="2" Align="center">
                        <Switch @bind-Value="_keepLineLoading" Id="keep-line-loading" />
                        <label for="keep-line-loading" class="text-sm text-muted-foreground cursor-pointer">Hold skeleton open</label>
                    </Stack>
                    <Stack Direction="Stack.StackDirection.Horizontal" Gap="2" Align="center">
                        <label class="text-sm text-muted-foreground">Duration: @(_simulateLineDurationMs / 1000.0)s</label>
                        <input type="range" min="500" max="10000" step="500" @bind-value="_simulateLineDurationMs" @bind-value:event="oninput" class="w-32 accent-primary" />
                    </Stack>
                    <Stack Direction="Stack.StackDirection.Horizontal" Gap="2" Align="center">
                        <label class="text-sm text-muted-foreground">Cycle: @_phantomLineCycleMs ms</label>
                        <input type="range" min="300" max="3000" step="100" @bind-value="_phantomLineCycleMs" @bind-value:event="oninput" class="w-32 accent-primary" />
                    </Stack>
                </Stack>
                <LineChart Categories="_categories" Series="_minimalSeries" PhantomCycleMs="@_phantomLineCycleMs" IsLoading="@LineLoadingComputed" Height="320px" />
            </Stack>
        </Container>
    </ComponentDemo>
</Stack>

<!-- API Reference -->
<Stack Gap="6" Class="mt-12">
    <Heading Level="2">API Reference</Heading>
    <Stack Gap="8">
        <Stack>
            <Heading Level="3" Class="mb-3">LineChart</Heading>
            <Stack Class="rounded-lg border border-border/40 overflow-x-auto">
                <table class="w-full min-w-[600px] text-sm">
                    <thead>
                        <tr class="border-b border-border/40 bg-muted/40">
                            <th class="text-left p-3 font-medium text-foreground">Property</th>
                            <th class="text-left p-3 font-medium text-foreground">Type</th>
                            <th class="text-left p-3 font-medium text-foreground">Default</th>
                            <th class="text-left p-3 font-medium text-foreground">Description</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-border/40">
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Categories</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">List&lt;string&gt;</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">[]</td>
                            <td class="p-3 text-muted-foreground">X-axis labels for each data point.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Series</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">List&lt;ChartSeriesData&gt;</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">[]</td>
                            <td class="p-3 text-muted-foreground">Data series to plot as lines.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Smooth</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">bool</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">false</td>
                            <td class="p-3 text-muted-foreground">Renders smooth bezier curves.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ShowDots</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">bool</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">true</td>
                            <td class="p-3 text-muted-foreground">Shows dot markers at each data point.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ShowLegend</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">bool</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">true</td>
                            <td class="p-3 text-muted-foreground">Shows or hides the chart legend.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ShowDataLabels</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">bool</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">false</td>
                            <td class="p-3 text-muted-foreground">Renders value labels at each data point.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">DataZoom</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">bool</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">false</td>
                            <td class="p-3 text-muted-foreground">Enables zoom slider for long time-series.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Colors</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">List&lt;string&gt;?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">Custom color palette.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">LabelStrategy</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">ChartLabelStrategy</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Smart</td>
                            <td class="p-3 text-muted-foreground">How category-axis labels are rendered. Smart auto-rotates at higher densities; ShowAll forces all horizontal; Auto thins overlapping labels.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">LabelRotate</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">int?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">Manual rotation override in degrees on top of LabelStrategy.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">IsLoading</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">bool</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">false</td>
                            <td class="p-3 text-muted-foreground">When true, renders a shape-matched loading skeleton in place of the chart. Bind to your async fetch state.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ShowLoadingSkeleton</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">bool</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">true</td>
                            <td class="p-3 text-muted-foreground">Set to false to opt out of the skeleton (chart area stays empty while IsLoading is true).</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">SkeletonKind</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">ChartSkeletonKind</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">(chart default)</td>
                            <td class="p-3 text-muted-foreground">Override the skeleton silhouette (Bars, Line, Area, Pie, Scatter, Grid, Generic).</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">SkeletonStyle</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">ChartSkeletonStyle</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Phantom</td>
                            <td class="p-3 text-muted-foreground">Phantom renders the real chart with placeholder data and morphs to real data via ECharts animation. Silhouette falls back to the legacy SVG skeleton overlay.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ShowLoadingLabel</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">bool</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">true</td>
                            <td class="p-3 text-muted-foreground">Shows a small "Loading&hellip;" pill in the top-right corner whenever <code class="rounded bg-muted px-1 py-0.5 text-xs font-mono">IsLoading</code> is true. Layered on top of any <code class="rounded bg-muted px-1 py-0.5 text-xs font-mono">SkeletonStyle</code>. Set to false for bare visuals. <strong>(rc.18)</strong></td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">LoadingText</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">string?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">"Loading&hellip;"</td>
                            <td class="p-3 text-muted-foreground">Label rendered next to the spinner inside the loading pill. Set to empty to show the spinner alone. <strong>(rc.18)</strong></td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">AnimationDuration</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">int?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">Override ECharts animation duration in milliseconds.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">AnimationEasing</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">string?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">ECharts easing function name for entry animation.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ColorPalette</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">List&lt;string&gt;?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">Alternate color palette applied when Colors is unset.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Height</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">string</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">"350px"</td>
                            <td class="p-3 text-muted-foreground">CSS height of the chart container.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">LabelFormat</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">string?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">ECharts formatter string applied to data labels.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">LabelPosition</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">string</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">"top"</td>
                            <td class="p-3 text-muted-foreground">Position of data labels relative to each point.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">MarkArea</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EChartMarkArea?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">Shaded regions highlighting value ranges on the chart.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">MarkLine</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EChartMarkLine?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">Reference lines (avg, max, custom) overlaid on the chart.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">MarkPoint</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EChartMarkPoint?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">Marker points highlighting extrema or annotations.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">PhantomCycleMs</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">int</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">1400</td>
                            <td class="p-3 text-muted-foreground">Phantom-mode refresh interval in milliseconds; lower cycles placeholder data faster.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ShowTooltip</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">bool</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">true</td>
                            <td class="p-3 text-muted-foreground">Enables the hover tooltip on the line series.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Theme</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">string?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">ECharts theme name override; null follows global Lumeo theme.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Toolbox</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">bool</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">false</td>
                            <td class="p-3 text-muted-foreground">Shows save/restore/zoom toolbox in the corner.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Width</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">string</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">"100%"</td>
                            <td class="p-3 text-muted-foreground">CSS width of the chart container.</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>
    </Stack>
</Stack>

@code {
    private bool _lineLoading;
    private bool _keepLineLoading;
    private bool LineLoadingComputed => _lineLoading || _keepLineLoading;
    private int _simulateLineDurationMs = 2000;
    private int _phantomLineCycleMs = 1400;

    private async Task SimulateLineLoadingAsync()
    {
        _lineLoading = true;
        await Task.Delay(_simulateLineDurationMs);
        _lineLoading = false;
    }

    private List<string> _categories = new() { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" };
    private List<string> _shortCategories = new() { "Q1", "Q2", "Q3", "Q4" };

    private List<LineChart.ChartSeriesData> _series = new()
    {
        new() { Name = "Revenue",  Values = new() { 18200, 21500, 19800, 27300, 31600, 44800, 40100, 37700, 42600, 48400, 51900, 60200 } },
        new() { Name = "Expenses", Values = new() { 12100, 13800, 13200, 15900, 17600, 20800, 19400, 16900, 19700, 21500, 23800, 26400 } }
    };

    private List<LineChart.ChartSeriesData> _threeSeries = new()
    {
        new() { Name = "Gross Revenue",   Values = new() { 84200, 79400, 96700, 112300, 108600, 131400, 124800, 138700, 151200, 164900, 149300, 178600 } },
        new() { Name = "Net Revenue",     Values = new() { 61300, 57800, 70400, 81600, 78900, 95500, 90700, 100900, 109900, 119800, 108600, 129700 } },
        new() { Name = "Operating Costs", Values = new() { 22900, 21600, 26300, 30700, 29700, 35900, 34100, 37800, 41300, 45100, 40700, 48900 } }
    };

    private List<LineChart.ChartSeriesData> _labelSeries = new()
    {
        new() { Name = "ARR ($K)", Values = new() { 2840, 3170, 3490, 3820 } }
    };

    private List<string> _days60 = Enumerable.Range(1, 60)
        .Select(i => new DateTime(2025, 1, 1).AddDays(i - 1).ToString("MMM d"))
        .ToList();

    private List<LineChart.ChartSeriesData> _dailySeries = new()
    {
        new() { Name = "Active Sessions", Values = new()
        {
            4821, 5103, 4967, 5312, 5874, 6201, 5943, 6418, 6782, 7034,
            6891, 7213, 7548, 7892, 7634, 8012, 8347, 8691, 8423, 8978,
            9213, 9547, 9389, 9812, 10134, 10478, 10221, 10689, 11012, 11356,
            11098, 11534, 11867, 12201, 11943, 12478, 12813, 13157, 12899, 13434,
            13769, 14113, 13855, 14390, 14725, 15069, 14811, 15346, 15681, 16025,
            15767, 16302, 16637, 16981, 16723, 17258, 17593, 17937, 17679, 18214
        }}
    };

    private List<LineChart.ChartSeriesData> _minimalSeries = new()
    {
        new() { Name = "Monthly Recurring Revenue",
            Values = new() { 48300, 51200, 53800, 57400, 61900, 67200, 64800, 69300, 74100, 79600, 76200, 83900 } }
    };

    private List<string> _brandColors = new() { "#10b981" };

    private string _basicCode = @"<LineChart Categories=""_categories"" Series=""_series"" Smooth=""true"" ShowDots=""true"" />";
    private string _straightCode = @"<LineChart Categories=""_categories"" Series=""_series"" Smooth=""false"" ShowDots=""false"" />";
    private string _threeSeriesCode = @"<LineChart Categories=""_categories"" Series=""_threeSeries"" Smooth=""true"" />";
    private string _labelsCode = @"<LineChart Categories=""_shortCategories"" Series=""_labelSeries"" Smooth=""true"" ShowDataLabels=""true"" LabelPosition=""top"" />";
    private string _zoomCode = @"<LineChart Categories=""_days60"" Series=""_dailySeries"" Smooth=""true"" ShowDots=""false"" DataZoom=""true"" />";
    private string _minimalCode = @"<LineChart Categories=""_categories"" Series=""_minimalSeries"" Smooth=""true"" ShowLegend=""false"" Colors=""_brandColors"" />";
}
