@techsio/ui-kit 0.37.1 → 0.39.0

package/dist/molecules/chart.js

@@ -0,0 +1,393 @@
+import { jsx } from "react/jsx-runtime";
+import { areaY, barX, barY, colorLegend, d3Curve, defineChart, dot, group, lineY, stack } from "@tanstack/charts";
+import { polar, radialArc } from "@tanstack/charts/polar";
+import { tooltip as tooltip_tooltip } from "@tanstack/charts/tooltip";
+import { scaleBand } from "@tanstack/charts-scales/band";
+import { scaleLinear } from "@tanstack/charts-scales/linear";
+import { scalePoint } from "@tanstack/charts-scales/point";
+import { Chart } from "@tanstack/react-charts";
+import { scaleUtc } from "d3-scale";
+import { curveMonotoneX, pie } from "d3-shape";
+import { useMemo } from "react";
+import { tv } from "../utils.js";
+const chartVariants = tv({
+    slots: {
+        root: "chart-base block w-full text-chart-fg",
+        tooltip: "chart-tooltip"
+    }
+});
+const SERIES_1_PAINT = "var(--color-chart-series-1)";
+const SERIES_STROKE_FROM_COLOR = null;
+const DONUT_INNER_RADIUS_RATIO = 0.6;
+const POLAR_INSET = 8;
+function toAccessor(accessor) {
+    if ("function" == typeof accessor) return accessor;
+    return (datum)=>datum[accessor];
+}
+const defineChartSpec = defineChart;
+const MAX_SERIES = 6;
+function resolveXAxis(data, getX, xLabel) {
+    const values = data.map(getX);
+    if (values.length > 0 && values.every((value)=>value instanceof Date)) return {
+        scale: ()=>scaleUtc(),
+        nice: true,
+        axis: {
+            label: xLabel
+        }
+    };
+    if (values.length > 0 && values.every((value)=>"number" == typeof value)) return {
+        scale: scaleLinear,
+        nice: true,
+        axis: {
+            label: xLabel
+        }
+    };
+    return {
+        scale: ()=>scalePoint().padding(0.1),
+        axis: {
+            label: xLabel
+        }
+    };
+}
+function resolveBuild(config) {
+    const getX = toAccessor(config.x);
+    const getY = toAccessor(config.y);
+    const getSeries = null == config.series ? void 0 : toAccessor(config.series);
+    const isPolar = "pie" === config.type || "donut" === config.type;
+    const showLegend = config.legend ?? (null != config.series || isPolar);
+    const { formatValue } = config;
+    const valueTicks = formatValue ? {
+        format: formatValue
+    } : void 0;
+    warnOnSeriesOverflow(config.data, isPolar ? getX : getSeries);
+    const tooltipBase = {
+        use: tooltip_tooltip,
+        className: config.tooltipClassName
+    };
+    const channelName = (accessor, label)=>label ?? ("string" == typeof accessor ? accessor : void 0);
+    const xName = channelName(config.x, config.xLabel);
+    const yName = channelName(config.y, config.yLabel);
+    const formatChannel = (point, channel)=>{
+        const value = "x" === channel ? point.xValue : point.yValue;
+        if ("number" == typeof value && formatValue) return formatValue(value);
+        return String(value ?? "");
+    };
+    const tooltipFor = (valueChannel, swapped = false)=>{
+        if (!config.showTooltip) return false;
+        const dataValueChannel = swapped ? "y" : valueChannel;
+        const valueName = "x" === dataValueChannel ? xName : yName;
+        const categoryName = "x" === dataValueChannel ? yName : xName;
+        const valueItem = {
+            channel: valueChannel,
+            label: valueName,
+            text: formatValue ? (point)=>formatChannel(point, valueChannel) : void 0
+        };
+        const categoryChannel = "x" === valueChannel ? "y" : "x";
+        const categoryItem = {
+            channel: categoryChannel,
+            label: categoryName
+        };
+        return {
+            ...tooltipBase,
+            items: "x" === valueChannel ? [
+                valueItem,
+                categoryItem
+            ] : [
+                categoryItem,
+                valueItem
+            ]
+        };
+    };
+    const polarTooltip = ()=>{
+        if (!config.showTooltip) return false;
+        return {
+            ...tooltipBase,
+            items: [
+                {
+                    id: "value",
+                    label: yName,
+                    text: (point)=>{
+                        const row = point.datum.data;
+                        const value = getY(row);
+                        return formatValue ? formatValue(value) : String(value);
+                    }
+                }
+            ]
+        };
+    };
+    const valueAxis = {
+        scale: scaleLinear,
+        nice: true,
+        grid: config.grid,
+        axis: {
+            label: config.yLabel,
+            ticks: valueTicks
+        }
+    };
+    const xAxis = resolveXAxis(config.data, getX, config.xLabel);
+    return {
+        data: config.data,
+        getX,
+        getY,
+        getSeries,
+        stacked: config.stacked,
+        points: config.points,
+        curve: config.smooth ? d3Curve(curveMonotoneX) : void 0,
+        grid: config.grid,
+        xLabel: config.xLabel,
+        yLabel: config.yLabel,
+        valueTicks,
+        valueAxis,
+        xAxis,
+        bandAxis: {
+            scale: ()=>scaleBand().padding(0.3),
+            axis: {
+                label: config.xLabel
+            }
+        },
+        tooltipFor,
+        polarTooltip,
+        shared: {
+            color: showLegend ? {
+                legend: colorLegend({
+                    label: config.legendLabel
+                })
+            } : void 0,
+            animate: config.animate
+        }
+    };
+}
+function warnOnSeriesOverflow(data, getColorIdentity) {
+    const isProduction = "undefined" != typeof process && process.env?.NODE_ENV === "production";
+    if (null == getColorIdentity || isProduction) return;
+    const distinct = new Set(data.map((datum)=>String(getColorIdentity(datum))));
+    if (distinct.size > MAX_SERIES) console.warn(`Chart: ${distinct.size} distinct colors exceeds the ${MAX_SERIES}-color palette; everything beyond the sixth reuses an earlier color and cannot be told apart. Group the long tail into an “Other” bucket, or split into small multiples.`);
+}
+function buildLine(build) {
+    const { data, getX, getY, getSeries } = build;
+    return defineChartSpec({
+        marks: [
+            lineY(data, {
+                x: getX,
+                y: getY,
+                z: getSeries,
+                color: getSeries,
+                points: build.points,
+                curve: build.curve,
+                stroke: null == getSeries ? SERIES_1_PAINT : void 0
+            })
+        ],
+        x: build.xAxis,
+        y: build.valueAxis,
+        ...build.shared,
+        tooltip: build.tooltipFor("y")
+    });
+}
+function buildArea(build) {
+    const { data, getX, getY, getSeries } = build;
+    const isStacked = build.stacked ?? true;
+    return defineChartSpec({
+        marks: [
+            areaY(data, {
+                x: getX,
+                ...null != getSeries && isStacked ? {
+                    y: getY
+                } : {
+                    y1: 0,
+                    y2: getY
+                },
+                z: getSeries,
+                color: getSeries,
+                curve: build.curve,
+                fill: null == getSeries ? SERIES_1_PAINT : void 0,
+                fillOpacity: null != getSeries && isStacked ? 0.85 : 0.25,
+                stroke: null == getSeries ? SERIES_1_PAINT : SERIES_STROKE_FROM_COLOR,
+                strokeWidth: 2
+            })
+        ],
+        x: build.xAxis,
+        y: build.valueAxis,
+        ...build.shared,
+        tooltip: build.tooltipFor("y")
+    });
+}
+function barLayout(hasSeries, isStacked) {
+    if (!hasSeries) return;
+    return isStacked ? stack() : group({
+        padding: 0.15
+    });
+}
+function buildBars(build, horizontal) {
+    const { data, getX, getY, getSeries } = build;
+    const isStacked = build.stacked ?? false;
+    const barOptions = {
+        z: getSeries,
+        color: getSeries,
+        fill: null == getSeries ? SERIES_1_PAINT : void 0,
+        layout: barLayout(null != getSeries, isStacked),
+        radius: null != getSeries && isStacked ? 0 : 4
+    };
+    if (horizontal) return defineChartSpec({
+        marks: [
+            barX(data, {
+                x: getY,
+                y: getX,
+                ...barOptions
+            })
+        ],
+        x: {
+            scale: scaleLinear,
+            nice: true,
+            grid: build.grid,
+            axis: {
+                label: build.yLabel,
+                ticks: build.valueTicks
+            }
+        },
+        y: build.bandAxis,
+        ...build.shared,
+        tooltip: build.tooltipFor("x", true)
+    });
+    return defineChartSpec({
+        marks: [
+            barY(data, {
+                x: getX,
+                y: getY,
+                ...barOptions
+            })
+        ],
+        x: build.bandAxis,
+        y: build.valueAxis,
+        ...build.shared,
+        tooltip: build.tooltipFor("y")
+    });
+}
+function buildScatter(build) {
+    const { data, getX, getY, getSeries } = build;
+    return defineChartSpec({
+        marks: [
+            dot(data, {
+                x: getX,
+                y: getY,
+                z: getSeries,
+                color: getSeries,
+                r: 4,
+                fill: null == getSeries ? SERIES_1_PAINT : void 0
+            })
+        ],
+        x: {
+            ...build.xAxis,
+            grid: build.grid
+        },
+        y: build.valueAxis,
+        ...build.shared,
+        tooltip: build.tooltipFor("y")
+    });
+}
+function buildPolar(build, donut) {
+    const { data, getX, getY } = build;
+    const sliceLabel = (slice)=>String(getX(slice.data));
+    const slices = pie().sort(null).padAngle(0.02).value((datum)=>getY(datum))([
+        ...data
+    ]);
+    return defineChartSpec({
+        x: null,
+        y: null,
+        marks: [
+            polar({
+                inset: POLAR_INSET,
+                marks: [
+                    radialArc(slices, {
+                        startAngle: "startAngle",
+                        endAngle: "endAngle",
+                        padAngle: "padAngle",
+                        innerRadius: donut ? ({ radius })=>radius * DONUT_INNER_RADIUS_RATIO : 0,
+                        cornerRadius: 2,
+                        z: sliceLabel,
+                        color: sliceLabel
+                    })
+                ]
+            })
+        ],
+        ...build.shared,
+        tooltip: build.polarTooltip()
+    });
+}
+function buildChartDefinition(config) {
+    const build = resolveBuild(config);
+    switch(config.type){
+        case "area":
+            return buildArea(build);
+        case "bar":
+            return buildBars(build, false);
+        case "bar-horizontal":
+            return buildBars(build, true);
+        case "scatter":
+            return buildScatter(build);
+        case "pie":
+            return buildPolar(build, false);
+        case "donut":
+            return buildPolar(build, true);
+        default:
+            return buildLine(build);
+    }
+}
+function chart_Chart({ type = "line", data, x, y, series, stacked, points = false, smooth = false, grid = true, legend, legendLabel, xLabel, yLabel, formatValue, height, aspectRatio, initialWidth = 640, animate = true, tooltip = true, ariaLabel, ariaDescription, className, onSelect }) {
+    const { root, tooltip: tooltipSlot } = chartVariants();
+    const tooltipClassName = tooltipSlot();
+    const definition = useMemo(()=>buildChartDefinition({
+            type,
+            data,
+            x,
+            y,
+            series,
+            stacked,
+            points,
+            smooth,
+            grid,
+            legend,
+            legendLabel,
+            xLabel,
+            yLabel,
+            formatValue,
+            animate,
+            showTooltip: tooltip,
+            tooltipClassName
+        }), [
+        type,
+        data,
+        x,
+        y,
+        series,
+        stacked,
+        points,
+        smooth,
+        grid,
+        legend,
+        legendLabel,
+        xLabel,
+        yLabel,
+        formatValue,
+        animate,
+        tooltip,
+        tooltipClassName
+    ]);
+    const isPolar = "pie" === type || "donut" === type;
+    const handleSelect = onSelect ? (point)=>{
+        if (null == point) return void onSelect(null);
+        onSelect(isPolar ? point.datum.data : point.datum);
+    } : void 0;
+    return /*#__PURE__*/ jsx(Chart, {
+        ariaDescription: ariaDescription,
+        ariaLabel: ariaLabel,
+        aspectRatio: null == height ? aspectRatio ?? 16 / 9 : void 0,
+        className: root({
+            className
+        }),
+        definition: definition,
+        height: height,
+        initialWidth: initialWidth,
+        onSelect: handleSelect
+    });
+}
+export { chart_Chart as Chart };