kaleido-ui 0.2.1 → 0.2.4

package/dist/web/chunk-XDSOOOYL.js

@@ -0,0 +1,35 @@
+"use client";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/list-summary.tsx
+import { jsxs } from "react/jsx-runtime";
+var count = (n, noun) => `${n} ${n === 1 ? noun.replace(/s$/, "") : noun}`;
+function ListSummary({
+  noun,
+  shown,
+  offset,
+  total,
+  filtersActive = false,
+  noTotalNote = ", narrowed by the filters above. The API does not report how many exist in all.",
+  className,
+  ...rest
+}) {
+  let text;
+  if (total !== void 0) {
+    text = filtersActive ? `Showing ${shown} of ${count(total, noun)}` : count(total, noun);
+  } else if (offset !== void 0 && shown > 0) {
+    text = `Showing ${noun} ${offset + 1}\u2013${offset + shown}`;
+  } else {
+    text = `Showing ${count(shown, noun)}`;
+  }
+  return /* @__PURE__ */ jsxs("p", { "data-slot": "list-summary", className: cn("m-0 text-caption tabular-nums text-muted-foreground", className), ...rest, children: [
+    text,
+    filtersActive && total === void 0 ? noTotalNote : ""
+  ] });
+}
+
+export {
+  ListSummary
+};

package/dist/web/chunk-XPHFJPUQ.js

@@ -0,0 +1,291 @@
+"use client";
+import {
+  ChartFrame,
+  ChartLegend,
+  ChartTooltip,
+  LegendSwatch,
+  TICK_FONT,
+  axisTextWidth,
+  chartLabelIndices,
+  chartValueTicks,
+  defaultChartFormat,
+  nextActiveIndex,
+  plotClass,
+  seriesColor,
+  tooltipText,
+  useChartWidth,
+  useSeriesVisibility
+} from "./chunk-EK5N3ZPW.js";
+
+// src/web/components/charts/mixed-chart.tsx
+import { useId, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var MARK_VIEWS = {
+  bar: { value: "bar", label: "Bars", icon: "bar_chart" },
+  stacked: { value: "stacked", label: "Stacked bars", icon: "stacked_bar_chart" },
+  line: { value: "line", label: "Lines", icon: "show_chart" },
+  area: { value: "area", label: "Areas", icon: "area_chart" },
+  dots: { value: "dots", label: "Dots", icon: "scatter_plot" }
+};
+var MARGIN = { top: 12, right: 16, bottom: 26, left: 8 };
+var MAX_BAR_GROUP = 56;
+var ALL_MARKS = ["bar", "stacked", "line", "area", "dots"];
+function MarkSwatch({ mark, color }) {
+  if (mark === "area") {
+    return /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", "aria-hidden": "true", className: "shrink-0", children: [
+      /* @__PURE__ */ jsx("rect", { width: "12", height: "12", rx: "3", fill: color, fillOpacity: "0.25" }),
+      /* @__PURE__ */ jsx("line", { x1: "1", x2: "11", y1: "3", y2: "3", stroke: color, strokeWidth: "2", strokeLinecap: "round" })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(LegendSwatch, { color, shape: mark === "line" ? "line" : mark === "dots" ? "dot" : "rect" });
+}
+function MixedChart({
+  data,
+  series: allSeries,
+  label,
+  scaleLabel,
+  marks = ALL_MARKS,
+  integer = false,
+  formatValue = defaultChartFormat,
+  height = 280,
+  empty,
+  className,
+  ...head
+}) {
+  const [containerRef, width] = useChartWidth();
+  const [active, setActive] = useState(null);
+  const [chosen, setChosen] = useState(marks[0] ?? "bar");
+  const mark = marks.includes(chosen) ? chosen : marks[0] ?? "bar";
+  const idBase = `mixed-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+  const visibility = useSeriesVisibility(allSeries.map((s) => s.id));
+  const series = allSeries.filter((s) => visibility.isVisible(s.id));
+  const colorOf = (id) => seriesColor(allSeries.findIndex((s) => s.id === id));
+  const count = data.length;
+  if (count === 0 || allSeries.length === 0) return /* @__PURE__ */ jsx(Fragment, { children: empty ?? null });
+  const totals = data.map((d) => series.reduce((sum, s) => sum + Math.max(0, d.values[s.id] ?? 0), 0));
+  const max = mark === "stacked" ? Math.max(0, ...totals) : Math.max(0, ...data.flatMap((d) => series.map((s) => d.values[s.id] ?? 0)));
+  const ticks = chartValueTicks(max, { integer });
+  const tickLabels = ticks.map(formatValue);
+  const plotLeft = MARGIN.left + axisTextWidth(tickLabels) + 8;
+  const plotRight = width - MARGIN.right;
+  const plotTop = MARGIN.top;
+  const plotBottom = height - MARGIN.bottom;
+  const plotWidth = Math.max(1, plotRight - plotLeft);
+  const plotHeight = Math.max(1, plotBottom - plotTop);
+  const top = max > 0 ? max : 1;
+  const band = plotWidth / count;
+  const x = (index) => plotLeft + band * (index + 0.5);
+  const y = (value) => plotBottom - Math.max(0, value) / top * plotHeight;
+  const labelIndices = chartLabelIndices(count, plotWidth / 72);
+  const groupWidth = Math.min(band * 0.7, MAX_BAR_GROUP);
+  const barWidth = mark === "stacked" ? groupWidth : Math.max(1, (groupWidth - (series.length - 1) * 2) / Math.max(1, series.length));
+  const pathFor = (id) => data.map((d, index) => `${index === 0 ? "M" : "L"}${x(index).toFixed(2)},${y(d.values[id] ?? 0).toFixed(2)}`).join("");
+  const rowsAt = (index) => series.map((s) => ({
+    id: s.id,
+    label: s.label,
+    value: formatValue(data[index].values[s.id] ?? 0),
+    color: colorOf(s.id)
+  }));
+  const onPointerMove = (event) => {
+    const box = event.currentTarget.getBoundingClientRect();
+    const px = (event.clientX - box.left) / box.width * width;
+    setActive(Math.max(0, Math.min(count - 1, Math.floor((px - plotLeft) / band))));
+  };
+  const onKeyDown = (event) => {
+    if (nextActiveIndex(event.key, active, count) === void 0) return;
+    event.preventDefault();
+    setActive((current) => {
+      const next = nextActiveIndex(event.key, current, count);
+      return next === void 0 ? current : next;
+    });
+  };
+  const activeDatum = active === null ? null : data[active];
+  const strokeFor = (s) => /* @__PURE__ */ jsx(
+    "path",
+    {
+      "data-series": s.id,
+      "data-mark": mark,
+      d: pathFor(s.id),
+      fill: "none",
+      stroke: colorOf(s.id),
+      strokeWidth: mark === "area" ? 1.5 : 2,
+      strokeLinejoin: "round",
+      strokeLinecap: "round"
+    },
+    s.id
+  );
+  const marksLayer = () => {
+    if (mark === "bar" || mark === "stacked") {
+      return data.map((d, index) => {
+        let stackTop = 0;
+        return series.map((s, position) => {
+          const value = Math.max(0, d.values[s.id] ?? 0);
+          const left = mark === "stacked" ? x(index) - groupWidth / 2 : x(index) - groupWidth / 2 + position * (barWidth + 2);
+          const bottom = mark === "stacked" ? y(stackTop) : plotBottom;
+          if (mark === "stacked") stackTop += value;
+          const barTop = mark === "stacked" ? y(stackTop) : y(value);
+          return /* @__PURE__ */ jsx(
+            "rect",
+            {
+              "data-series": s.id,
+              "data-mark": mark,
+              x: left,
+              y: barTop,
+              width: barWidth,
+              height: Math.max(0, bottom - barTop - (mark === "stacked" && position > 0 ? 1 : 0)),
+              rx: mark === "stacked" ? 0 : Math.min(3, barWidth / 2),
+              fill: colorOf(s.id)
+            },
+            `${s.id}-${d.key}`
+          );
+        });
+      });
+    }
+    if (mark === "dots") {
+      return series.map((s) => /* @__PURE__ */ jsx("g", { "data-series": s.id, "data-mark": "dots", children: data.map((d, index) => /* @__PURE__ */ jsx("circle", { cx: x(index), cy: y(d.values[s.id] ?? 0), r: 4, fill: colorOf(s.id), stroke: "var(--card)", strokeWidth: 1.5 }, d.key)) }, s.id));
+    }
+    if (mark === "area") {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        series.map((s) => /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: `${pathFor(s.id)}L${x(count - 1)},${plotBottom}L${x(0)},${plotBottom}Z`,
+            fill: `url(#${idBase}-wash-${s.id})`
+          },
+          `${s.id}-wash`
+        )),
+        series.map(strokeFor)
+      ] });
+    }
+    return series.map(strokeFor);
+  };
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      ...head,
+      views: marks.map((m) => MARK_VIEWS[m]),
+      chartView: mark,
+      onChartViewChange: (next) => setChosen(next),
+      label,
+      className,
+      scale: `${scaleLabel} \xB7 linear, from 0`,
+      legend: /* @__PURE__ */ jsx(
+        ChartLegend,
+        {
+          items: allSeries.map((s) => ({
+            id: s.id,
+            label: s.label,
+            color: colorOf(s.id),
+            swatch: /* @__PURE__ */ jsx(MarkSwatch, { mark, color: colorOf(s.id) })
+          })),
+          ...visibility.legend
+        }
+      ),
+      table: {
+        columns: ["Period", ...allSeries.map((s) => s.label)],
+        rows: data.map((d) => [d.detail ?? d.label, ...allSeries.map((s) => formatValue(d.values[s.id] ?? 0))])
+      },
+      announcement: activeDatum ? tooltipText(activeDatum.detail ?? activeDatum.label, rowsAt(active)) : void 0,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: containerRef,
+          role: "group",
+          "aria-roledescription": "chart",
+          "aria-label": `${label}: ${count} periods. Arrow keys move between them.`,
+          tabIndex: 0,
+          onKeyDown,
+          onBlur: () => setActive(null),
+          className: plotClass,
+          children: [
+            /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                width: "100%",
+                height,
+                viewBox: `0 0 ${width} ${height}`,
+                className: "block overflow-visible",
+                "aria-hidden": "true",
+                onPointerMove,
+                onPointerLeave: () => setActive(null),
+                children: [
+                  /* @__PURE__ */ jsx("defs", { children: mark === "area" && series.map((s) => /* @__PURE__ */ jsxs("linearGradient", { id: `${idBase}-wash-${s.id}`, x1: "0", x2: "0", y1: "0", y2: "1", children: [
+                    /* @__PURE__ */ jsx("stop", { offset: "0", stopColor: colorOf(s.id), stopOpacity: "0.22" }),
+                    /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: colorOf(s.id), stopOpacity: "0.03" })
+                  ] }, s.id)) }),
+                  /* @__PURE__ */ jsx("g", { "data-slot": "chart-y-axis", children: ticks.map((tick, index) => /* @__PURE__ */ jsxs("g", { children: [
+                    /* @__PURE__ */ jsx("line", { x1: plotLeft, x2: plotRight, y1: y(tick), y2: y(tick), stroke: "var(--border)" }),
+                    /* @__PURE__ */ jsx(
+                      "text",
+                      {
+                        x: plotLeft - 8,
+                        y: y(tick),
+                        dy: "0.32em",
+                        textAnchor: "end",
+                        fontSize: TICK_FONT,
+                        fill: "var(--muted-foreground)",
+                        style: { fontVariantNumeric: "tabular-nums" },
+                        children: tickLabels[index]
+                      }
+                    )
+                  ] }, tick)) }),
+                  active !== null && /* @__PURE__ */ jsx(
+                    "rect",
+                    {
+                      "data-slot": "chart-active-band",
+                      x: plotLeft + band * active,
+                      y: plotTop,
+                      width: band,
+                      height: plotBottom - plotTop,
+                      fill: "var(--muted-foreground)",
+                      fillOpacity: 0.08
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("g", { "data-slot": "chart-marks", "data-view": mark, children: marksLayer() }),
+                  active !== null && /* @__PURE__ */ jsx("g", { "data-slot": "chart-crosshair", children: (mark === "bar" || mark === "stacked" ? [] : series).map((s) => /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      cx: x(active),
+                      cy: y(data[active].values[s.id] ?? 0),
+                      r: 4.5,
+                      fill: colorOf(s.id),
+                      stroke: "var(--card)",
+                      strokeWidth: 2
+                    },
+                    s.id
+                  )) }),
+                  /* @__PURE__ */ jsx("g", { "data-slot": "chart-x-axis", children: labelIndices.map((index) => /* @__PURE__ */ jsx(
+                    "text",
+                    {
+                      x: x(index),
+                      y: plotBottom + 18,
+                      textAnchor: "middle",
+                      fontSize: TICK_FONT,
+                      fill: "var(--muted-foreground)",
+                      children: data[index].label
+                    },
+                    data[index].key
+                  )) })
+                ]
+              }
+            ),
+            activeDatum && /* @__PURE__ */ jsx(
+              ChartTooltip,
+              {
+                title: activeDatum.detail ?? activeDatum.label,
+                rows: rowsAt(active),
+                x: x(active) * (containerRef.current ? containerRef.current.clientWidth / width : 1),
+                y: plotTop,
+                width: containerRef.current?.clientWidth ?? width
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
+export {
+  MixedChart
+};