Charts Overview

<div class="w-full max-w-4xl grid grid-cols-1 md:grid-cols-2 gap-4">
    <BbCard>
        <BbCardHeader>
            <BbCardTitle>Website Traffic</BbCardTitle>
            <BbCardDescription>Monthly visitors over time</BbCardDescription>
        </BbCardHeader>
        <BbCardContent>
            <BbAreaChart Data="@trafficData" Config="@trafficConfig" Height="250px">
                <BbXAxis DataKey="month" />
                <BbYAxis />
                <BbChartTooltip />
                <BbArea DataKey="visitors" Curve="CurveType.Smooth" FillOpacity="0.3" />
            </BbAreaChart>
        </BbCardContent>
    </BbCard>

    <BbCard>
        <BbCardHeader>
            <BbCardTitle>Revenue by Channel</BbCardTitle>
            <BbCardDescription>Direct vs referral revenue</BbCardDescription>
        </BbCardHeader>
        <BbCardContent>
            <BbBarChart Data="@revenueData" Config="@revenueConfig" Height="250px">
                <BbXAxis DataKey="month" />
                <BbYAxis />
                <BbChartTooltip />
                <BbBar DataKey="direct" />
                <BbBar DataKey="referral" />
            </BbBarChart>
        </BbCardContent>
    </BbCard>

    <BbCard>
        <BbCardHeader>
            <BbCardTitle>User Growth</BbCardTitle>
            <BbCardDescription>Monthly active users</BbCardDescription>
        </BbCardHeader>
        <BbCardContent>
            <BbLineChart Data="@growthData" Config="@growthConfig" Height="250px">
                <BbXAxis DataKey="month" />
                <BbYAxis />
                <BbChartTooltip />
                <BbLine DataKey="users" Curve="CurveType.Smooth" />
            </BbLineChart>
        </BbCardContent>
    </BbCard>

    <BbCard>
        <BbCardHeader>
            <BbCardTitle>Traffic Sources</BbCardTitle>
            <BbCardDescription>Visitors by browser</BbCardDescription>
        </BbCardHeader>
        <BbCardContent>
            <BbPieChart Data="@sourceData" Config="@sourceConfig" Height="250px">
                <BbChartTooltip />
                <BbChartLegend />
                <BbPie DataKey="value" NameKey="name" InnerRadius="60" />
            </BbPieChart>
        </BbCardContent>
    </BbCard>
</div>

@code {
    private record TrafficData(string Month, int Visitors);
    private List<TrafficData> trafficData = new()
    {
        new("Jan", 4000), new("Feb", 3000), new("Mar", 5000),
        new("Apr", 4500), new("May", 6000), new("Jun", 5500)
    };
    private ChartConfig trafficConfig = ChartConfig.Create(
        ("visitors", new ChartSeriesConfig { Label = "Visitors", Color = "var(--chart-1)" })
    );

    private record RevenueData(string Month, int Direct, int Referral);
    private List<RevenueData> revenueData = new()
    {
        new("Jan", 4000, 2400), new("Feb", 3000, 1398), new("Mar", 2000, 9800),
        new("Apr", 2780, 3908), new("May", 1890, 4800), new("Jun", 2390, 3800)
    };
    private ChartConfig revenueConfig = ChartConfig.Create(
        ("direct", new ChartSeriesConfig { Label = "Direct", Color = "var(--chart-1)" }),
        ("referral", new ChartSeriesConfig { Label = "Referral", Color = "var(--chart-2)" })
    );

    private record GrowthData(string Month, int Users);
    private List<GrowthData> growthData = new()
    {
        new("Jan", 2400), new("Feb", 1398), new("Mar", 9800),
        new("Apr", 3908), new("May", 4800), new("Jun", 3800)
    };
    private ChartConfig growthConfig = ChartConfig.Create(
        ("users", new ChartSeriesConfig { Label = "Users", Color = "var(--chart-3)" })
    );

    private record SourceData(string Name, int Value, string Fill);
    private List<SourceData> sourceData = new()
    {
        new("Chrome", 275, "var(--chart-1)"),
        new("Safari", 200, "var(--chart-2)"),
        new("Firefox", 187, "var(--chart-3)"),
        new("Edge", 173, "var(--chart-4)"),
        new("Other", 90, "var(--chart-5)")
    };
    private ChartConfig sourceConfig = ChartConfig.Create(
        ("chrome", new ChartSeriesConfig { Label = "Chrome", Color = "var(--chart-1)" }),
        ("safari", new ChartSeriesConfig { Label = "Safari", Color = "var(--chart-2)" }),
        ("firefox", new ChartSeriesConfig { Label = "Firefox", Color = "var(--chart-3)" }),
        ("edge", new ChartSeriesConfig { Label = "Edge", Color = "var(--chart-4)" }),
        ("other", new ChartSeriesConfig { Label = "Other", Color = "var(--chart-5)" })
    );
}