Faceted Distributions

import { type ChartPoint, binX, defineChart, facet, normalize, rect } from "@tanstack/charts";
import { motion } from "@tanstack/charts/motion";
import { tooltip } from "@tanstack/charts/tooltip";
import { Chart } from "@tanstack/react-charts/core";
import { useMemo } from "react";

import { scaleLinear } from "d3-scale";
import { LayoutGrid } from "lucide-react";

import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";

interface PenguinMass {
    species: "Adelie" | "Chinstrap" | "Gentoo";
    body_mass_g: number;
}

const motionRenderer = motion({
    initial: "always",
    transition: { type: "spring", stiffness: 170, damping: 18, mass: 1 },
});

const boundaries = [2500, 3000, 3500, 4000, 4500, 5000, 5500, 6000, 6500];

function generateDemoData(): PenguinMass[] {
    const results: PenguinMass[] = [];
    const speciesList: ("Adelie" | "Chinstrap" | "Gentoo")[] = ["Adelie", "Chinstrap", "Gentoo"];

    speciesList.forEach((sp) => {
        let mean = 3700;
        if (sp === "Chinstrap") mean = 3730;
        if (sp === "Gentoo") mean = 5000;

        for (let i = 0; i < 60; i++) {
            const mass = mean + (Math.random() - 0.5) * 1200;
            results.push({ species: sp, body_mass_g: mass });
        }
    });

    return results;
}

function shadcnTooltipContent<TDatum>(points: readonly ChartPoint<TDatum>[]) {
    if (points.length === 0) return { title: "", rows: [] };
    const d = points[0].datum as { species: string; x1: number; x2: number; proportion: number };
    if (!d) return { title: "", rows: [] };
    return {
        title: `${d.species} (${d.x1}–${d.x2} g)`,
        rows: [{ label: "Proportion", value: `${(d.proportion * 100).toFixed(1)}%`, color: "var(--chart-1)" }],
    };
}

export function FacetedDistributions() {
    const data = useMemo(() => generateDemoData(), []);

    const bins = useMemo(() => {
        return normalize(
            binX(data, {
                value: "body_mass_g",
                by: "species",
                thresholds: boundaries,
                outputs: { count: { reduce: "count" } },
            }),
            {
                value: "count",
                by: "species",
                basis: "sum",
                as: "proportion",
            },
        ).filter(({ count }) => count > 0);
    }, [data]);

    const definition = useMemo(
        () =>
            defineChart(
                {
                    renderer: motionRenderer,
                    scales: {
                        x: null,
                        y: null,
                    },
                    marks: [
                        facet(bins, {
                            by: "species",
                            columns: 1,
                            gap: 8,
                            label: (group) => String(group),
                            chart: (facetBins) => ({
                                marks: [
                                    rect(facetBins, {
                                        x1: "x1",
                                        x2: "x2",
                                        y1: () => 0,
                                        y2: "proportion",
                                        fill: "var(--chart-1)",
                                        inset: 0.75,
                                    }),
                                ],
                                scales: {
                                    x: {
                                        scale: scaleLinear().domain([2500, 6500]),
                                        grid: true,
                                        axis: { label: "Body Mass (g)" },
                                    },
                                    y: {
                                        scale: scaleLinear().domain([0, 0.5]),
                                        grid: true,
                                        axis: {
                                            ticks: { count: 3, format: (v: number) => `${Math.round(v * 100)}%` },
                                            label: "Proportion",
                                        },
                                    },
                                },
                            }),
                        }),
                    ],
                    margin: 8,
                    theme: {
                        foreground: "var(--muted-foreground)",
                        grid: "var(--border)",
                        background: "transparent",
                    },
                },
                {
                    keyboard: true,
                    tooltip: {
                        use: tooltip,
                        className:
                            "font-sans shadow-none rounded-md bg-popover text-popover-foreground border p-2 text-xs",
                        anchor: "pointer",
                        placement: "auto",
                        content: (points) => shadcnTooltipContent(points),
                    },
                },
            ),
        [bins],
    );

    return (
        <Card className="w-full max-w-xl">
            <CardHeader>
                <CardTitle>Faceted Body Mass Distribution</CardTitle>
                <CardDescription>Small multiples faceting histogram distributions across species</CardDescription>
            </CardHeader>
            <CardContent>
                <div className="h-[280px] w-full">
                    <Chart
                        definition={definition}
                        renderer={motionRenderer}
                        height={280}
                        ariaLabel="Faceted Body Mass Distribution Chart"
                    />
                </div>
            </CardContent>
            <CardFooter className="flex-col items-start gap-2 text-sm">
                <div className="flex items-center gap-2 leading-none font-medium">
                    Gentoo penguins show distinctly higher body mass distribution{" "}
                    <LayoutGrid className="h-4 w-4 text-emerald-500" />
                </div>
                <div className="text-muted-foreground leading-none">
                    Faceted rows enable direct multi-category distribution shape comparisons
                </div>
            </CardFooter>
        </Card>
    );
}

export default FacetedDistributions;