@namespace Lumeo.Docs.Shared

<!-- Chart pattern demos — intended for inclusion on the Patterns page -->

<!-- 1. Monthly Revenue — BarChart, 2 series, Jan–Dec -->
<Stack Class="border border-border rounded-[var(--radius-lg)] overflow-hidden">
    <Stack Gap="1" Class="px-4 pt-4 pb-2">
        <Heading Level="4" Size="sm">Monthly Revenue</Heading>
        <Lumeo.Text Size="xs" Color="muted">Year-over-year revenue comparison across all twelve months.</Lumeo.Text>
    </Stack>
    <div class="p-4">
        <BarChart Categories="_revenueCategories"
                  Series="_revenueSeries"
                  Width="100%"
                  Height="300px" />
    </div>
</Stack>

<!-- 2. Traffic Overview — LineChart, daily data for a week -->
<Stack Class="border border-border rounded-[var(--radius-lg)] overflow-hidden">
    <Stack Gap="1" Class="px-4 pt-4 pb-2">
        <Heading Level="4" Size="sm">Traffic Overview</Heading>
        <Lumeo.Text Size="xs" Color="muted">Daily sessions, unique visitors, and page views over the past seven days.</Lumeo.Text>
    </Stack>
    <div class="p-4">
        <LineChart Categories="_trafficCategories"
                   Series="_trafficSeries"
                   Smooth="true"
                   ShowDots="true"
                   Width="100%"
                   Height="300px" />
    </div>
</Stack>

<!-- 3. Revenue Breakdown — PieChart by category -->
<Stack Class="border border-border rounded-[var(--radius-lg)] overflow-hidden">
    <Stack Gap="1" Class="px-4 pt-4 pb-2">
        <Heading Level="4" Size="sm">Revenue Breakdown</Heading>
        <Lumeo.Text Size="xs" Color="muted">Distribution of revenue across product lines and service categories.</Lumeo.Text>
    </Stack>
    <div class="p-4">
        <PieChart Data="_revenueBreakdownData"
                  Width="100%"
                  Height="300px" />
    </div>
</Stack>

<!-- 4. Performance Metrics — RadarChart, actual vs target -->
<Stack Class="border border-border rounded-[var(--radius-lg)] overflow-hidden">
    <Stack Gap="1" Class="px-4 pt-4 pb-2">
        <Heading Level="4" Size="sm">Performance Metrics</Heading>
        <Lumeo.Text Size="xs" Color="muted">Q4 actual performance against quarterly targets across six key dimensions.</Lumeo.Text>
    </Stack>
    <div class="p-4">
        <RadarChart Indicators="_perfIndicators"
                    Series="_perfSeries"
                    FillArea="true"
                    Width="100%"
                    Height="300px" />
    </div>
</Stack>

<!-- 5. Growth Trend — AreaChart, user growth -->
<Stack Class="border border-border rounded-[var(--radius-lg)] overflow-hidden">
    <Stack Gap="1" Class="px-4 pt-4 pb-2">
        <Heading Level="4" Size="sm">Growth Trend</Heading>
        <Lumeo.Text Size="xs" Color="muted">Monthly active user growth and paid subscriber count over twelve months.</Lumeo.Text>
    </Stack>
    <div class="p-4">
        <AreaChart Categories="_growthCategories"
                   Series="_growthSeries"
                   Smooth="true"
                   Gradient="true"
                   Width="100%"
                   Height="300px" />
    </div>
</Stack>

<!-- 6. Sales Comparison — Stacked BarChart -->
<Stack Class="border border-border rounded-[var(--radius-lg)] overflow-hidden">
    <Stack Gap="1" Class="px-4 pt-4 pb-2">
        <Heading Level="4" Size="sm">Sales Comparison</Heading>
        <Lumeo.Text Size="xs" Color="muted">Stacked monthly sales by product category to show contribution mix.</Lumeo.Text>
    </Stack>
    <div class="p-4">
        <BarChart Categories="_salesCategories"
                  Series="_salesSeries"
                  Stacked="true"
                  Width="100%"
                  Height="300px" />
    </div>
</Stack>

<!-- 7. Activity Scatter — ScatterChart, time vs engagement -->
<Stack Class="border border-border rounded-[var(--radius-lg)] overflow-hidden">
    <Stack Gap="1" Class="px-4 pt-4 pb-2">
        <Heading Level="4" Size="sm">Activity Scatter</Heading>
        <Lumeo.Text Size="xs" Color="muted">Session duration (minutes) vs engagement score across two user cohorts.</Lumeo.Text>
    </Stack>
    <div class="p-4">
        <ScatterChart Series="_activityScatterSeries"
                      Width="100%"
                      Height="300px" />
    </div>
</Stack>

<!-- 8. Revenue Donut — DonutChart with center label -->
<Stack Class="border border-border rounded-[var(--radius-lg)] overflow-hidden">
    <Stack Gap="1" Class="px-4 pt-4 pb-2">
        <Heading Level="4" Size="sm">Revenue Donut</Heading>
        <Lumeo.Text Size="xs" Color="muted">Breakdown of total ARR by subscription tier with total displayed in the center.</Lumeo.Text>
    </Stack>
    <div class="p-4">
        <DonutChart Data="_revenueDonutData"
                    CenterLabel="$2.4M ARR"
                    InnerRadius="55%"
                    OuterRadius="75%"
                    Width="100%"
                    Height="300px" />
    </div>
</Stack>

@code {
    // 1. Monthly Revenue
    private List<string> _revenueCategories = new()
        { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" };

    private List<BarChart.ChartSeriesData> _revenueSeries = new()
    {
        new() { Name = "This Year",
                Values = new() { 41200, 38400, 52100, 61800, 57300, 74200, 68900, 72500, 81300, 88700, 79400, 95600 } },
        new() { Name = "Last Year",
                Values = new() { 35000, 31200, 44800, 53100, 48900, 62400, 58700, 61200, 69800, 74300, 65100, 82200 } }
    };

    // 2. Traffic Overview
    private List<string> _trafficCategories = new() { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" };

    private List<LineChart.ChartSeriesData> _trafficSeries = new()
    {
        new() { Name = "Sessions",        Values = new() { 12400, 14800, 13200, 17600, 19800, 15300, 11200 } },
        new() { Name = "Unique Visitors", Values = new() { 8900,  10600, 9700,  12400, 14200, 10800, 7900  } },
        new() { Name = "Page Views",      Values = new() { 38200, 45100, 40800, 53700, 61400, 46200, 33800 } }
    };

    // 3. Revenue Breakdown
    private List<PieChart.PieChartData> _revenueBreakdownData = new()
    {
        new() { Name = "SaaS Products",   Value = 48 },
        new() { Name = "Professional Svcs", Value = 23 },
        new() { Name = "Subscriptions",   Value = 17 },
        new() { Name = "Consulting",      Value = 8  },
        new() { Name = "Other",           Value = 4  }
    };

    // 4. Performance Metrics
    private List<RadarChart.RadarIndicator> _perfIndicators = new()
    {
        new() { Name = "Acquisition",  Max = 100 },
        new() { Name = "Activation",   Max = 100 },
        new() { Name = "Retention",    Max = 100 },
        new() { Name = "Referral",     Max = 100 },
        new() { Name = "Revenue",      Max = 100 },
        new() { Name = "Engagement",   Max = 100 }
    };

    private List<RadarChart.RadarSeriesData> _perfSeries = new()
    {
        new() { Name = "Actual", Values = new() { 74, 68, 83, 52, 91, 76 } },
        new() { Name = "Target", Values = new() { 80, 75, 80, 65, 90, 80 } }
    };

    // 5. Growth Trend
    private List<string> _growthCategories = new()
        { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" };

    private List<AreaChart.ChartSeriesData> _growthSeries = new()
    {
        new() { Name = "Monthly Active Users",
                Values = new() { 18200, 21400, 24100, 27800, 32500, 38700, 44200, 51600, 58900, 64300, 71800, 82400 } },
        new() { Name = "Paid Subscribers",
                Values = new() { 3400,  4100,  4800,  5600,  6900,  8400,  9700,  11300, 13100, 14800, 16900, 19600 } }
    };

    // 6. Sales Comparison (Stacked)
    private List<string> _salesCategories = new() { "Jan", "Feb", "Mar", "Apr", "May", "Jun" };

    private List<BarChart.ChartSeriesData> _salesSeries = new()
    {
        new() { Name = "Hardware",  Values = new() { 12400, 10800, 14200, 16100, 13700, 18400 } },
        new() { Name = "Software",  Values = new() { 18600, 21200, 19400, 24800, 27300, 31200 } },
        new() { Name = "Services",  Values = new() { 8200,  9400,  10100, 11600, 12800, 14700 } },
        new() { Name = "Support",   Values = new() { 3100,  3600,  3800,  4200,  4700,  5100  } }
    };

    // 7. Activity Scatter
    private List<ScatterChart.ScatterSeriesData> _activityScatterSeries = new()
    {
        new()
        {
            Name = "Power Users",
            Points = new()
            {
                new[] { 24.0, 94.0 }, new[] { 31.0, 87.0 }, new[] { 18.0, 91.0 },
                new[] { 42.0, 83.0 }, new[] { 28.0, 96.0 }, new[] { 36.0, 89.0 },
                new[] { 21.0, 88.0 }, new[] { 45.0, 79.0 }
            }
        },
        new()
        {
            Name = "Casual Users",
            Points = new()
            {
                new[] { 8.0,  54.0 }, new[] { 12.0, 61.0 }, new[] { 6.0,  47.0 },
                new[] { 15.0, 58.0 }, new[] { 9.0,  52.0 }, new[] { 11.0, 63.0 },
                new[] { 7.0,  49.0 }, new[] { 14.0, 57.0 }
            }
        }
    };

    // 8. Revenue Donut
    private List<DonutChart.DonutChartData> _revenueDonutData = new()
    {
        new() { Name = "Enterprise", Value = 1180000 },
        new() { Name = "Pro",        Value = 720000  },
        new() { Name = "Starter",    Value = 340000  },
        new() { Name = "Free",       Value = 160000  }
    };
}
