kaze-design-system 0.6.1 → 0.7.0

package/dist/components/ChartLegend/ChartLegend.js

@@ -0,0 +1,43 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils.js";
+const ChartLegend = forwardRef(
+  ({ items, hidden = [], onToggle, className, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("chart-legend", className), ...rest, children: items.map((item) => {
+      const isHidden = hidden.includes(item.key);
+      const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "chart-legend__swatch",
+            style: { background: item.color },
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "chart-legend__label", children: item.label })
+      ] });
+      return onToggle ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: cn("chart-legend__item", isHidden && "chart-legend__item--hidden"),
+          "aria-pressed": !isHidden,
+          onClick: () => onToggle(item.key),
+          children: content
+        },
+        item.key
+      ) : /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn("chart-legend__item", isHidden && "chart-legend__item--hidden"),
+          children: content
+        },
+        item.key
+      );
+    }) });
+  }
+);
+ChartLegend.displayName = "ChartLegend";
+export {
+  ChartLegend
+};

package/dist/components/ColumnChart/ColumnChart.js

@@ -0,0 +1,290 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useState, useEffect, useCallback, useMemo } from "react";
+import { cn } from "../../lib/utils.js";
+import { CHART_COLORS } from "../../lib/chartColors.js";
+import { niceScale, linearScale, defaultFormat } from "../../lib/chartScale.js";
+import { ChartLegend } from "../ChartLegend/ChartLegend.js";
+const FALLBACK_WIDTH = 640;
+const PAD_TOP = 8;
+const PAD_RIGHT = 8;
+const BAR_GAP = 2;
+function toNumber(v) {
+  const n = typeof v === "number" ? v : Number(v);
+  return Number.isFinite(n) ? n : 0;
+}
+function barPath(x, y0, y1, w, radius, roundEnd) {
+  const h = Math.abs(y1 - y0);
+  if (h === 0 || w <= 0) return "";
+  const r = roundEnd ? Math.min(radius, w / 2, h) : 0;
+  const x1 = x + w;
+  if (y1 <= y0) {
+    return `M${x},${y0}V${y1 + r}${r ? `Q${x},${y1} ${x + r},${y1}` : ""}H${x1 - r}${r ? `Q${x1},${y1} ${x1},${y1 + r}` : ""}V${y0}Z`;
+  }
+  return `M${x},${y0}V${y1 - r}${r ? `Q${x},${y1} ${x + r},${y1}` : ""}H${x1 - r}${r ? `Q${x1},${y1} ${x1},${y1 - r}` : ""}V${y0}Z`;
+}
+const ColumnChart = forwardRef(
+  ({
+    data,
+    index,
+    series,
+    layout = "grouped",
+    height = 240,
+    showGrid = true,
+    showXAxis = true,
+    showYAxis = true,
+    showLegend = true,
+    yAxisWidth = 48,
+    formatValue = defaultFormat,
+    barRadius = 2,
+    "aria-label": ariaLabel,
+    className,
+    onKeyDown,
+    onBlur,
+    ...rest
+  }, ref) => {
+    const wrapRef = useRef(null);
+    const [width, setWidth] = useState(FALLBACK_WIDTH);
+    const [hidden, setHidden] = useState([]);
+    const [active, setActive] = useState(null);
+    useEffect(() => {
+      const el = wrapRef.current;
+      if (!el) return;
+      const measure = () => {
+        const w = el.clientWidth;
+        if (w > 0) setWidth(w);
+      };
+      measure();
+      if (typeof ResizeObserver === "undefined") return;
+      const ro = new ResizeObserver(measure);
+      ro.observe(el);
+      return () => ro.disconnect();
+    }, []);
+    const toggle = useCallback((key) => {
+      setHidden((prev) => prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key]);
+    }, []);
+    const colorOf = (s, i) => s.color ?? CHART_COLORS[i % CHART_COLORS.length] ?? "var(--chart-1)";
+    const visible = useMemo(() => series.filter((s) => !hidden.includes(s.key)), [series, hidden]);
+    const stacked = layout === "stacked";
+    const left = showYAxis ? yAxisWidth : 4;
+    const bottom = showXAxis ? 24 : 4;
+    const plotW = Math.max(width - left - PAD_RIGHT, 1);
+    const plotH = Math.max(height - PAD_TOP - bottom, 1);
+    const n = data.length;
+    const step = n > 0 ? plotW / n : plotW;
+    const scale = useMemo(() => {
+      let lo = 0;
+      let hi = 0;
+      for (const row of data) {
+        let pos = 0;
+        let neg = 0;
+        for (const s of visible) {
+          const v = toNumber(row[s.key]);
+          if (stacked) {
+            if (v >= 0) pos += v;
+            else neg += v;
+          } else {
+            lo = Math.min(lo, v);
+            hi = Math.max(hi, v);
+          }
+        }
+        if (stacked) {
+          lo = Math.min(lo, neg);
+          hi = Math.max(hi, pos);
+        }
+      }
+      return niceScale(lo, hi);
+    }, [data, visible, stacked]);
+    const y = linearScale([scale.min, scale.max], [PAD_TOP + plotH, PAD_TOP]);
+    const y0 = y(0);
+    const columns = useMemo(() => {
+      const groupW = step * 0.7;
+      return data.map((row, ci) => {
+        const gx = left + ci * step + (step - groupW) / 2;
+        const bars = [];
+        if (stacked) {
+          let pos = 0;
+          let neg = 0;
+          const lastPos = [...visible].reverse().find((s) => toNumber(row[s.key]) > 0)?.key;
+          const lastNeg = [...visible].reverse().find((s) => toNumber(row[s.key]) < 0)?.key;
+          for (const s of visible) {
+            const v = toNumber(row[s.key]);
+            if (v === 0) continue;
+            const from = v > 0 ? pos : neg;
+            const to = from + v;
+            if (v > 0) pos = to;
+            else neg = to;
+            bars.push({
+              key: s.key,
+              x: gx,
+              width: groupW,
+              from,
+              to,
+              roundEnd: s.key === (v > 0 ? lastPos : lastNeg)
+            });
+          }
+        } else {
+          const k = Math.max(visible.length, 1);
+          const bw = Math.max((groupW - BAR_GAP * (k - 1)) / k, 1);
+          visible.forEach((s, si) => {
+            bars.push({
+              key: s.key,
+              x: gx + si * (bw + BAR_GAP),
+              width: bw,
+              from: 0,
+              to: toNumber(row[s.key]),
+              roundEnd: true
+            });
+          });
+        }
+        return bars;
+      });
+    }, [data, visible, stacked, step, left]);
+    const labels = data.map((row) => String(row[index] ?? ""));
+    const longest = labels.reduce((m, l) => Math.max(m, l.length), 0);
+    const labelEvery = Math.max(1, Math.ceil((longest * 8 + 12) / step));
+    const onKey = (e) => {
+      onKeyDown?.(e);
+      if (e.defaultPrevented || n === 0) return;
+      let next;
+      if (e.key === "ArrowRight") next = active === null ? 0 : Math.min(active + 1, n - 1);
+      else if (e.key === "ArrowLeft") next = active === null ? n - 1 : Math.max(active - 1, 0);
+      else if (e.key === "Home") next = 0;
+      else if (e.key === "End") next = n - 1;
+      else if (e.key === "Escape") next = null;
+      else return;
+      e.preventDefault();
+      setActive(next ?? null);
+    };
+    const activeRow = active !== null ? data[active] : void 0;
+    const activeCenter = active !== null ? left + (active + 0.5) * step : 0;
+    const activeTotal = activeRow ? visible.reduce((sum, s) => sum + toNumber(activeRow[s.key]), 0) : 0;
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("chart", "column-chart", className), ...rest, children: [
+      /* @__PURE__ */ jsxs("div", { ref: wrapRef, className: "column-chart__plot", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "img",
+            "aria-label": ariaLabel,
+            tabIndex: 0,
+            className: "column-chart__figure",
+            onKeyDown: onKey,
+            onBlur: (e) => {
+              onBlur?.(e);
+              setActive(null);
+            },
+            children: /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                className: "chart__svg column-chart__svg",
+                width,
+                height,
+                viewBox: `0 0 ${width} ${height}`,
+                onPointerLeave: () => setActive(null),
+                "aria-hidden": "true",
+                children: [
+                  showGrid && /* @__PURE__ */ jsx("g", { className: "chart-grid", children: scale.ticks.map((t) => /* @__PURE__ */ jsx("line", { x1: left, x2: left + plotW, y1: y(t), y2: y(t) }, t)) }),
+                  showYAxis && /* @__PURE__ */ jsx("g", { className: "chart-axis column-chart__y-axis", children: scale.ticks.map((t) => /* @__PURE__ */ jsx("text", { x: left - 8, y: y(t), textAnchor: "end", dominantBaseline: "middle", children: formatValue(t) }, t)) }),
+                  active !== null && /* @__PURE__ */ jsx(
+                    "rect",
+                    {
+                      className: "column-chart__band",
+                      x: left + active * step,
+                      y: PAD_TOP,
+                      width: step,
+                      height: plotH
+                    }
+                  ),
+                  columns.map((bars, ci) => /* @__PURE__ */ jsx("g", { className: "column-chart__column", children: bars.map((b) => {
+                    const s = series.find((x) => x.key === b.key);
+                    if (!s) return null;
+                    return /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        className: "column-chart__bar",
+                        d: barPath(b.x, y(b.from), y(b.to), b.width, barRadius, b.roundEnd),
+                        fill: colorOf(s, series.indexOf(s))
+                      },
+                      b.key
+                    );
+                  }) }, labels[ci] + String(ci))),
+                  /* @__PURE__ */ jsxs("g", { className: "chart-axis", children: [
+                    /* @__PURE__ */ jsx("line", { x1: left, x2: left + plotW, y1: y0, y2: y0 }),
+                    showXAxis && labels.map(
+                      (l, ci) => ci % labelEvery === 0 ? /* @__PURE__ */ jsx(
+                        "text",
+                        {
+                          x: left + (ci + 0.5) * step,
+                          y: PAD_TOP + plotH + 16,
+                          textAnchor: "middle",
+                          children: l
+                        },
+                        ci
+                      ) : null
+                    )
+                  ] }),
+                  labels.map((l, ci) => /* @__PURE__ */ jsx(
+                    "rect",
+                    {
+                      className: "column-chart__hit",
+                      x: left + ci * step,
+                      y: PAD_TOP,
+                      width: step,
+                      height: plotH,
+                      onPointerEnter: () => setActive(ci),
+                      children: /* @__PURE__ */ jsx("title", { children: l })
+                    },
+                    ci
+                  ))
+                ]
+              }
+            )
+          }
+        ),
+        activeRow && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "chart-tooltip column-chart__tooltip",
+            role: "status",
+            style: {
+              left: activeCenter,
+              top: PAD_TOP,
+              transform: activeCenter > width / 2 ? "translateX(calc(-100% - 12px))" : "translateX(12px)"
+            },
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "chart-tooltip__title", children: labels[active ?? 0] }),
+              visible.map((s) => /* @__PURE__ */ jsxs("div", { className: "chart-tooltip__row", children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "chart-tooltip__swatch",
+                    style: { background: colorOf(s, series.indexOf(s)) }
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "chart-tooltip__label", children: s.label }),
+                /* @__PURE__ */ jsx("span", { className: "chart-tooltip__value", children: formatValue(toNumber(activeRow[s.key])) })
+              ] }, s.key)),
+              stacked && visible.length > 1 && /* @__PURE__ */ jsxs("div", { className: "chart-tooltip__row column-chart__total", children: [
+                /* @__PURE__ */ jsx("span", { className: "chart-tooltip__label", children: "合計" }),
+                /* @__PURE__ */ jsx("span", { className: "chart-tooltip__value", children: formatValue(activeTotal) })
+              ] })
+            ]
+          }
+        )
+      ] }),
+      showLegend && /* @__PURE__ */ jsx(
+        ChartLegend,
+        {
+          className: "column-chart__legend",
+          items: series.map((s, i) => ({ key: s.key, label: s.label, color: colorOf(s, i) })),
+          hidden,
+          onToggle: toggle
+        }
+      )
+    ] });
+  }
+);
+ColumnChart.displayName = "ColumnChart";
+export {
+  ColumnChart
+};

package/dist/components/Heatmap/Heatmap.js

@@ -0,0 +1,255 @@
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { forwardRef, useRef, useState } from "react";
+import { cn } from "../../lib/utils.js";
+import { defaultFormat } from "../../lib/chartScale.js";
+const DAY_MS = 864e5;
+const DATE_RE = /^(\d{4})-(\d{2})-(\d{2})$/;
+const WEEKDAY_LABELS = ["日", "月", "火", "水", "木", "金", "土"];
+const LABELLED_WEEKDAYS = /* @__PURE__ */ new Set([1, 3, 5]);
+function parseDay(date) {
+  const m = DATE_RE.exec(date);
+  if (!m) return null;
+  const ms = Date.UTC(Number(m[1]), Number(m[2]) - 1, Number(m[3]));
+  const d = new Date(ms);
+  if (d.getUTCMonth() !== Number(m[2]) - 1) return null;
+  return ms / DAY_MS;
+}
+function formatDay(day) {
+  return new Date(day * DAY_MS).toISOString().slice(0, 10);
+}
+function levelOf(value, max, levels) {
+  if (value === null || value <= 0 || max <= 0) return 0;
+  return Math.min(levels, Math.max(1, Math.ceil(value / max * levels)));
+}
+function levelColor(level, levels) {
+  if (level === 0) return void 0;
+  const pct = levels === 1 ? 100 : Math.round(25 + 75 * (level - 1) / (levels - 1));
+  return `color-mix(in srgb, var(--heatmap-color) ${pct}%, var(--color-bg-tertiary))`;
+}
+const Heatmap = forwardRef(
+  ({
+    variant = "matrix",
+    rows = [],
+    columns = [],
+    values = [],
+    data = [],
+    startDate,
+    endDate,
+    weekStartsOn = 1,
+    color = "var(--chart-1)",
+    levels = 5,
+    max,
+    cellSize = 16,
+    gap = 3,
+    showLegend = true,
+    formatValue = defaultFormat,
+    formatTooltip,
+    "aria-label": ariaLabel,
+    className,
+    style,
+    ...rest
+  }, ref) => {
+    const rootRef = useRef(null);
+    const [tip, setTip] = useState(null);
+    const stepCount = Math.max(1, Math.floor(levels));
+    const cells = [];
+    let gridColumns = 0;
+    const monthLabels = [];
+    let maxValue = max;
+    if (variant === "matrix") {
+      gridColumns = columns.length;
+      rows.forEach((row, r) => {
+        columns.forEach((column, c) => {
+          const raw = values[r]?.[c];
+          cells.push({
+            key: `${r}:${c}`,
+            row,
+            column,
+            value: typeof raw === "number" && Number.isFinite(raw) ? raw : null,
+            gridRow: r + 2,
+            gridColumn: c + 2
+          });
+        });
+      });
+    } else {
+      const byDay = /* @__PURE__ */ new Map();
+      for (const d of data) {
+        const day = parseDay(d.date);
+        if (day === null || !Number.isFinite(d.value)) continue;
+        byDay.set(day, (byDay.get(day) ?? 0) + d.value);
+      }
+      const days = [...byDay.keys()];
+      const start = startDate ? parseDay(startDate) : days.length ? Math.min(...days) : null;
+      const end = endDate ? parseDay(endDate) : days.length ? Math.max(...days) : null;
+      if (start !== null && end !== null && end >= start) {
+        const rowOf = (day) => (new Date(day * DAY_MS).getUTCDay() - weekStartsOn + 7) % 7;
+        const gridStart = start - rowOf(start);
+        gridColumns = Math.floor((end - gridStart) / 7) + 1;
+        let lastLabelWeek = -Infinity;
+        let lastMonth = -1;
+        for (let day = start; day <= end; day++) {
+          const week = Math.floor((day - gridStart) / 7);
+          const month = new Date(day * DAY_MS).getUTCMonth();
+          if (month !== lastMonth) {
+            if (week - lastLabelWeek >= 3) {
+              monthLabels.push({ label: `${month + 1}月`, gridColumn: week + 2 });
+              lastLabelWeek = week;
+            }
+            lastMonth = month;
+          }
+          cells.push({
+            key: formatDay(day),
+            date: formatDay(day),
+            value: byDay.get(day) ?? null,
+            gridRow: rowOf(day) + 2,
+            gridColumn: week + 2
+          });
+        }
+      }
+    }
+    if (maxValue === void 0) {
+      maxValue = cells.reduce((acc, c) => c.value !== null && c.value > acc ? c.value : acc, 0);
+    }
+    const scaleMax = maxValue;
+    const show = (cell, el) => {
+      const root = rootRef.current;
+      if (!root) return;
+      const a = el.getBoundingClientRect();
+      const b = root.getBoundingClientRect();
+      const { row, column, date, value } = cell;
+      setTip({
+        x: a.left - b.left + a.width / 2,
+        y: a.top - b.top,
+        cell: { row, column, date, value }
+      });
+    };
+    const tooltipBody = (cell) => {
+      if (formatTooltip) return /* @__PURE__ */ jsx("div", { className: "chart-tooltip__title", children: formatTooltip(cell) });
+      const title = cell.date ?? `${cell.row} ${cell.column}`;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "chart-tooltip__title", children: title }),
+        /* @__PURE__ */ jsxs("div", { className: "chart-tooltip__row", children: [
+          /* @__PURE__ */ jsx("span", { className: "chart-tooltip__label", children: "値" }),
+          /* @__PURE__ */ jsx("span", { className: "chart-tooltip__value", children: cell.value === null ? "データなし" : formatValue(cell.value) })
+        ] })
+      ] });
+    };
+    const rootStyle = {
+      "--heatmap-color": color,
+      "--heatmap-cell": `${cellSize}px`,
+      "--heatmap-gap": `${gap}px`,
+      ...style
+    };
+    const longestColumnLabel = columns.reduce((m, c) => Math.max(m, String(c).length), 0);
+    const columnLabelStep = Math.max(1, Math.ceil((longestColumnLabel * 8 + 6) / (cellSize + gap)));
+    const gridStyle = {
+      gridTemplateColumns: `auto repeat(${gridColumns}, var(--heatmap-cell))`,
+      gridTemplateRows: `auto repeat(${variant === "matrix" ? rows.length : 7}, var(--heatmap-cell))`
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: (node) => {
+          rootRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        role: "img",
+        "aria-label": ariaLabel,
+        className: cn("chart", "heatmap", `heatmap--${variant}`, className),
+        style: rootStyle,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "heatmap__scroll", children: /* @__PURE__ */ jsxs("div", { className: "heatmap__grid", style: gridStyle, onMouseLeave: () => setTip(null), children: [
+            variant === "matrix" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              columns.map((c, i) => /* @__PURE__ */ jsx(
+                "span",
+                {
+                  hidden: i % columnLabelStep !== 0,
+                  className: "heatmap__label heatmap__label--column",
+                  style: { gridRow: 1, gridColumn: i + 2 },
+                  children: c
+                },
+                `c${i}`
+              )),
+              rows.map((r, i) => /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "heatmap__label heatmap__label--row",
+                  style: { gridRow: i + 2, gridColumn: 1 },
+                  children: r
+                },
+                `r${i}`
+              ))
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              monthLabels.map((m) => /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "heatmap__label heatmap__label--month",
+                  style: { gridRow: 1, gridColumn: `${m.gridColumn} / span 3` },
+                  children: m.label
+                },
+                m.gridColumn
+              )),
+              Array.from({ length: 7 }, (_, row) => {
+                const dow = (row + weekStartsOn) % 7;
+                return LABELLED_WEEKDAYS.has(dow) ? /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "heatmap__label heatmap__label--row",
+                    style: { gridRow: row + 2, gridColumn: 1 },
+                    children: WEEKDAY_LABELS[dow]
+                  },
+                  dow
+                ) : null;
+              })
+            ] }),
+            cells.map((cell) => {
+              const level = levelOf(cell.value, scaleMax, stepCount);
+              const { key, gridRow, gridColumn } = cell;
+              return (
+                // biome-ignore lint/a11y/noStaticElementInteractions: pointer-only tooltip; the chart is exposed as role=img
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn("heatmap__cell", level === 0 && "heatmap__cell--empty"),
+                    "data-level": level,
+                    style: { gridRow, gridColumn, background: levelColor(level, stepCount) },
+                    onMouseEnter: (e) => show(cell, e.currentTarget)
+                  },
+                  key
+                )
+              );
+            })
+          ] }) }),
+          showLegend && /* @__PURE__ */ jsxs("div", { className: "heatmap__legend", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx("span", { children: "少" }),
+            Array.from({ length: stepCount }, (_, i) => i + 1).map((level) => /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "heatmap__swatch",
+                style: { background: levelColor(level, stepCount) }
+              },
+              level
+            )),
+            /* @__PURE__ */ jsx("span", { children: "多" })
+          ] }),
+          tip && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "chart-tooltip heatmap__tooltip",
+              style: { left: tip.x, top: tip.y },
+              "aria-hidden": "true",
+              children: tooltipBody(tip.cell)
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Heatmap.displayName = "Heatmap";
+export {
+  Heatmap
+};