@page "/components/chart"

<PageTitle>Chart — Lumeo</PageTitle>

<PageHeader Title="Charts" Description="Beautiful charts built on Apache ECharts. Lumeo includes 30 chart components for every visualization need, from basic bar charts to advanced geographic maps and word clouds." />

<Alert Variant="Alert.AlertVariant.Info" ShowIcon="true" Class="mt-6 mb-2">
    <ChildContent>
        <strong>Dependencies &amp; licensing — Apache 2.0, fully free for any use.</strong>
        Powered by <a href="https://echarts.apache.org/" class="underline hover:text-foreground">Apache ECharts</a>
        (Apache License 2.0), loaded once on demand. No commercial license, no attribution requirement beyond
        Apache 2.0's standard notice. ECharts is the same engine used by Alibaba, Baidu, and many enterprise
        BI products.
    </ChildContent>
</Alert>

<Stack Gap="10">

    <!-- Cartesian Charts -->
    <Stack>
        <Heading Level="2" Class="text-xl mb-1">Cartesian Charts</Heading>
        <Lumeo.Text Size="sm" Color="muted" Class="mb-4">Standard X/Y axis charts for comparing categories, tracking trends, and analyzing distributions.</Lumeo.Text>
        <Grid Columns="3" Gap="4" Class="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
            <Lumeo.Link Href="/components/charts/bar" Class="group rounded-lg border border-border/60 p-4 hover:border-primary/60 hover:bg-muted/30 transition-colors">
                <Heading Level="3" Class="font-medium text-foreground group-hover:text-primary">Bar Chart</Heading>
                <Lumeo.Text Class="text-sm text-muted-foreground mt-1">Compare discrete categories side-by-side.</Lumeo.Text>
            </Lumeo.Link>
            <Lumeo.Link Href="/components/charts/line" Class="group rounded-lg border border-border/60 p-4 hover:border-primary/60 hover:bg-muted/30 transition-colors">
                <Heading Level="3" Class="font-medium text-foreground group-hover:text-primary">Line Chart</Heading>
                <Lumeo.Text Class="text-sm text-muted-foreground mt-1">Show trends over time with continuous lines.</Lumeo.Text>
            </Lumeo.Link>
            <Lumeo.Link Href="/components/charts/area" Class="group rounded-lg border border-border/60 p-4 hover:border-primary/60 hover:bg-muted/30 transition-colors">
                <Heading Level="3" Class="font-medium text-foreground group-hover:text-primary">Area Chart</Heading>
                <Lumeo.Text Class="text-sm text-muted-foreground mt-1">Emphasize volume and magnitude of change.</Lumeo.Text>
            </Lumeo.Link>
            <Lumeo.Link Href="/components/charts/scatter" Class="group rounded-lg border border-border/60 p-4 hover:border-primary/60 hover:bg-muted/30 transition-colors">
                <Heading Level="3" Class="font-medium text-foreground group-hover:text-primary">Scatter Chart</Heading>
                <Lumeo.Text Class="text-sm text-muted-foreground mt-1">Reveal correlations between two variables.</Lumeo.Text>
            </Lumeo.Link>
            <Lumeo.Link Href="/components/charts/effect-scatter" Class="group rounded-lg border border-border/60 p-4 hover:border-primary/60 hover:bg-muted/30 transition-colors">
                <Heading Level="3" Class="font-medium text-foreground group-hover:text-primary">Effect Scatter</Heading>
                <Lumeo.Text Class="text-sm text-muted-foreground mt-1">Animated scatter with ripple effects.</Lumeo.Text>
            </Lumeo.Link>
            <Lumeo.Link Href="/components/charts/candlestick" Class="group rounded-lg border border-border/60 p-4 hover:border-primary/60 hover:bg-muted/30 transition-colors">
                <Heading Level="3" Class="font-medium text-foreground group-hover:text-primary">Candlestick Chart</Heading>
                <Lumeo.Text Class="text-sm text-muted-foreground mt-1">Financial OHLC data visualization.</Lumeo.Text>
            </Lumeo.Link>
            <Lumeo.Link Href="/components/charts/boxplot" Class="group rounded-lg border border-border/60 p-4 hover:border-primary/60 hover:bg-muted/30 transition-colors">
                <Heading Level="3" Class="font-medium text-foreground group-hover:text-primary">BoxPlot Chart</Heading>
                <Lumeo.Text Class="text-sm text-muted-foreground mt-1">Statistical distribution through quartiles.</Lumeo.Text>
            </Lumeo.Link>
            <Lumeo.Link Href="/components/charts/waterfall" Class="group rounded-lg border border-border/60 p-4 hover:border-primary/60 hover:bg-muted/30 transition-colors">
                <Heading Level="3" Class="font-medium text-foreground group-hover:text-primary">Waterfall Chart</Heading>
                <Lumeo.Text Class="text-sm text-muted-foreground mt-1">Sequential positive and negative changes.</Lumeo.Text>
            </Lumeo.Link>
            <Lumeo.Link Href="/components/charts/pictorial-bar" Class="group rounded-lg border border-border/60 p-4 hover:border-primary/60 hover:bg-muted/30 transition-colors">
                <Heading Level="3" Class="font-medium text-foreground group-hover:text-primary">Pictorial Bar</Heading>
                <Lumeo.Text Class="text-sm text-muted-foreground mt-1">Bar chart with custom symbol shapes.</Lumeo.Text>
            </Lumeo.Link>
            <Lumeo.Link Href="/components/charts/mixed" Class="group rounded-lg border border-border/60 p-4 hover:border-primary/60 hover:bg-muted/30 transition-colors">
                <Heading Level="3" Class="font-medium text-foreground group-hover:text-primary">Mixed Chart</Heading>
                <Lumeo.Text Class="text-sm text-muted-foreground mt-1">Combine bar and line in one view.</Lumeo.Text>
            </Lumeo.Link>
        </Grid>
    </Stack>

    <!-- Proportional / Distribution -->
    <Stack>
        <Heading Level="2" Class="text-xl mb-1">Proportional &amp; Distribution</Heading>
        <Lumeo.Text Size="sm" Color="muted" Class="mb-4">Charts for showing parts of a whole, proportions, and data distributions.</Lumeo.Text>
        <Grid Columns="3" Gap="4" Class="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
            <Lumeo.Link Href="/components/charts/pie" Class="group rounded-lg border border-border/60 p-4 hover:border-primary/60 hover:bg-muted/30 transition-colors">
                <Heading Level="3" Class="font-medium text-foreground group-hover:text-primary">Pie Chart</Heading>
                <Lumeo.Text Class="text-sm text-muted-foreground mt-1">Proportional distribution across categories.</Lumeo.Text>
            </Lumeo.Link>
            <Lumeo.Link Href="/components/charts/donut" Class="group rounded-lg border border-border/60 p-4 hover:border-primary/60 hover:bg-muted/30 transition-colors">
                <Heading Level="3" Class="font-medium text-foreground group-hover:text-primary">Donut Chart</Heading>
                <Lumeo.Text Class="text-sm text-muted-foreground mt-1">Pie chart with center cutout for labels.</Lumeo.Text>
            </Lumeo.Link>
            <Lumeo.Link Href="/components/charts/nightingale" Class="group rounded-lg border border-border/60 p-4 hover:border-primary/60 hover:bg-muted/30 transition-colors">
                <Heading Level="3" Class="font-medium text-foreground group-hover:text-primary">Nightingale Chart</Heading>
                <Lumeo.Text Class="text-sm text-muted-foreground mt-1">Rose-type pie with varying radii.</Lumeo.Text>
            </Lumeo.Link>
            <Lumeo.Link Href="/components/charts/funnel" Class="group rounded-lg border border-border/60 p-4 hover:border-primary/60 hover:bg-muted/30 transition-colors">
                <Heading Level="3" Class="font-medium text-foreground group-hover:text-primary">Funnel Chart</Heading>
                <Lumeo.Text Class="text-sm text-muted-foreground mt-1">Sequential stages with drop-off rates.</Lumeo.Text>
            </Lumeo.Link>
        </Grid>
    </Stack>

    <!-- Radial / Polar -->
    <Stack>
        <Heading Level="2" Class="text-xl mb-1">Radial &amp; Polar</Heading>
        <Lumeo.Text Size="sm" Color="muted" Class="mb-4">Charts using polar coordinate systems and circular layouts.</Lumeo.Text>
        <Grid Columns="3" Gap="4" Class="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
            <Lumeo.Link Href="/components/charts/radar" Class="group rounded-lg border border-border/60 p-4 hover:border-primary/60 hover:bg-muted/30 transition-colors">
                <Heading Level="3" Class="font-medium text-foreground group-hover:text-primary">Radar Chart</Heading>
                <Lumeo.Text Class="text-sm text-muted-foreground mt-1">Compare multiple variables on a common scale.</Lumeo.Text>
            </Lumeo.Link>
            <Lumeo.Link Href="/components/charts/radial" Class="group rounded-lg border border-border/60 p-4 hover:border-primary/60 hover:bg-muted/30 transition-colors">
                <Heading Level="3" Class="font-medium text-foreground group-hover:text-primary">Radial Chart</Heading>
                <Lumeo.Text Class="text-sm text-muted-foreground mt-1">Gauge arc for KPIs and progress.</Lumeo.Text>
            </Lumeo.Link>
            <Lumeo.Link Href="/components/charts/gauge" Class="group rounded-lg border border-border/60 p-4 hover:border-primary/60 hover:bg-muted/30 transition-colors">
                <Heading Level="3" Class="font-medium text-foreground group-hover:text-primary">Gauge Chart</Heading>
                <Lumeo.Text Class="text-sm text-muted-foreground mt-1">Speedometer with pointer and color zones.</Lumeo.Text>
            </Lumeo.Link>
            <Lumeo.Link Href="/components/charts/polar-bar" Class="group rounded-lg border border-border/60 p-4 hover:border-primary/60 hover:bg-muted/30 transition-colors">
                <Heading Level="3" Class="font-medium text-foreground group-hover:text-primary">Polar Bar Chart</Heading>
                <Lumeo.Text Class="text-sm text-muted-foreground mt-1">Bar data in polar coordinates.</Lumeo.Text>
            </Lumeo.Link>
            <Lumeo.Link Href="/components/charts/liquid-fill" Class="group rounded-lg border border-border/60 p-4 hover:border-primary/60 hover:bg-muted/30 transition-colors">
                <Heading Level="3" Class="font-medium text-foreground group-hover:text-primary">Liquid Fill</Heading>
                <Lumeo.Text Class="text-sm text-muted-foreground mt-1">Animated liquid fill percentage display.</Lumeo.Text>
            </Lumeo.Link>
        </Grid>
    </Stack>

    <!-- Hierarchical -->
    <Stack>
        <Heading Level="2" Class="text-xl mb-1">Hierarchical</Heading>
        <Lumeo.Text Size="sm" Color="muted" Class="mb-4">Visualize nested and tree-structured data.</Lumeo.Text>
        <Grid Columns="3" Gap="4" Class="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
            <Lumeo.Link Href="/components/charts/treemap" Class="group rounded-lg border border-border/60 p-4 hover:border-primary/60 hover:bg-muted/30 transition-colors">
                <Heading Level="3" Class="font-medium text-foreground group-hover:text-primary">Treemap Chart</Heading>
                <Lumeo.Text Class="text-sm text-muted-foreground mt-1">Nested rectangles proportional to values.</Lumeo.Text>
            </Lumeo.Link>
            <Lumeo.Link Href="/components/charts/sunburst" Class="group rounded-lg border border-border/60 p-4 hover:border-primary/60 hover:bg-muted/30 transition-colors">
                <Heading Level="3" Class="font-medium text-foreground group-hover:text-primary">Sunburst Chart</Heading>
                <Lumeo.Text Class="text-sm text-muted-foreground mt-1">Concentric rings for hierarchical data.</Lumeo.Text>
            </Lumeo.Link>
            <Lumeo.Link Href="/components/charts/tree" Class="group rounded-lg border border-border/60 p-4 hover:border-primary/60 hover:bg-muted/30 transition-colors">
                <Heading Level="3" Class="font-medium text-foreground group-hover:text-primary">Tree Chart</Heading>
                <Lumeo.Text Class="text-sm text-muted-foreground mt-1">Org charts and tree structures.</Lumeo.Text>
            </Lumeo.Link>
        </Grid>
    </Stack>

    <!-- Relationship / Flow -->
    <Stack>
        <Heading Level="2" Class="text-xl mb-1">Relationship &amp; Flow</Heading>
        <Lumeo.Text Size="sm" Color="muted" Class="mb-4">Visualize connections, networks, and flow between entities.</Lumeo.Text>
        <Grid Columns="3" Gap="4" Class="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
            <Lumeo.Link Href="/components/charts/graph" Class="group rounded-lg border border-border/60 p-4 hover:border-primary/60 hover:bg-muted/30 transition-colors">
                <Heading Level="3" Class="font-medium text-foreground group-hover:text-primary">Graph Chart</Heading>
                <Lumeo.Text Class="text-sm text-muted-foreground mt-1">Network and relationship visualization.</Lumeo.Text>
            </Lumeo.Link>
            <Lumeo.Link Href="/components/charts/sankey" Class="group rounded-lg border border-border/60 p-4 hover:border-primary/60 hover:bg-muted/30 transition-colors">
                <Heading Level="3" Class="font-medium text-foreground group-hover:text-primary">Sankey Chart</Heading>
                <Lumeo.Text Class="text-sm text-muted-foreground mt-1">Flow diagrams with proportional links.</Lumeo.Text>
            </Lumeo.Link>
            <Lumeo.Link Href="/components/charts/parallel" Class="group rounded-lg border border-border/60 p-4 hover:border-primary/60 hover:bg-muted/30 transition-colors">
                <Heading Level="3" Class="font-medium text-foreground group-hover:text-primary">Parallel Chart</Heading>
                <Lumeo.Text Class="text-sm text-muted-foreground mt-1">Multi-dimensional data across parallel axes.</Lumeo.Text>
            </Lumeo.Link>
        </Grid>
    </Stack>

    <!-- Specialized -->
    <Stack>
        <Heading Level="2" Class="text-xl mb-1">Specialized</Heading>
        <Lumeo.Text Size="sm" Color="muted" Class="mb-4">Purpose-built charts for specific use cases.</Lumeo.Text>
        <Grid Columns="3" Gap="4" Class="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
            <Lumeo.Link Href="/components/charts/heatmap" Class="group rounded-lg border border-border/60 p-4 hover:border-primary/60 hover:bg-muted/30 transition-colors">
                <Heading Level="3" Class="font-medium text-foreground group-hover:text-primary">Heatmap Chart</Heading>
                <Lumeo.Text Class="text-sm text-muted-foreground mt-1">Density and intensity across two dimensions.</Lumeo.Text>
            </Lumeo.Link>
            <Lumeo.Link Href="/components/charts/calendar-heatmap" Class="group rounded-lg border border-border/60 p-4 hover:border-primary/60 hover:bg-muted/30 transition-colors">
                <Heading Level="3" Class="font-medium text-foreground group-hover:text-primary">Calendar Heatmap</Heading>
                <Lumeo.Text Class="text-sm text-muted-foreground mt-1">GitHub-style contribution calendar.</Lumeo.Text>
            </Lumeo.Link>
            <Lumeo.Link Href="/components/charts/theme-river" Class="group rounded-lg border border-border/60 p-4 hover:border-primary/60 hover:bg-muted/30 transition-colors">
                <Heading Level="3" Class="font-medium text-foreground group-hover:text-primary">Theme River</Heading>
                <Lumeo.Text Class="text-sm text-muted-foreground mt-1">Flowing streams showing thematic changes.</Lumeo.Text>
            </Lumeo.Link>
            <Lumeo.Link Href="/components/charts/geo-map" Class="group rounded-lg border border-border/60 p-4 hover:border-primary/60 hover:bg-muted/30 transition-colors">
                <Heading Level="3" Class="font-medium text-foreground group-hover:text-primary">Geo Map Chart</Heading>
                <Lumeo.Text Class="text-sm text-muted-foreground mt-1">Data on geographic maps with GeoJSON.</Lumeo.Text>
            </Lumeo.Link>
            <Lumeo.Link Href="/components/charts/word-cloud" Class="group rounded-lg border border-border/60 p-4 hover:border-primary/60 hover:bg-muted/30 transition-colors">
                <Heading Level="3" Class="font-medium text-foreground group-hover:text-primary">Word Cloud</Heading>
                <Lumeo.Text Class="text-sm text-muted-foreground mt-1">Text weighted by frequency or importance.</Lumeo.Text>
            </Lumeo.Link>
        </Grid>
    </Stack>

</Stack>

