@zuilib/charts 0.3.0

package/dist/chunk-G4FXJJ66.js

@@ -0,0 +1,169 @@
+import {
+  createFormatters
+} from "./chunk-7WABBHMT.js";
+import {
+  defaultChartLabels
+} from "./chunk-UN3XPBZ5.js";
+import {
+  ChartContext
+} from "./chunk-IPOBQIYU.js";
+import {
+  CHART_COLOR_COUNT,
+  seriesColorProperty
+} from "./chunk-7WJ26NHR.js";
+
+// src/chart-frame.tsx
+import {
+  Children,
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useId,
+  useMemo,
+  useState
+} from "react";
+import { ResponsiveContainer } from "recharts";
+import Alert from "@zuilib/components/alert";
+import { cn } from "@zuilib/components/lib/cn";
+
+// src/legend-toggle.ts
+function legendToggle(allFields, hidden, field, options) {
+  if (options?.additive) {
+    return hidden.includes(field) ? hidden.filter((f) => f !== field) : [...hidden, field];
+  }
+  const visible = allFields.filter((f) => !hidden.includes(f));
+  const isolated = visible.length === 1 && visible[0] === field;
+  return isolated ? [] : allFields.filter((f) => f !== field);
+}
+
+// src/chart-frame.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var ChartFrame = forwardRef(
+  ({
+    config,
+    children,
+    width,
+    height,
+    aspect = 16 / 9,
+    loading = false,
+    error,
+    emptyState,
+    empty = false,
+    ariaLabel,
+    labels: labelOverrides,
+    formats: customFormats,
+    locale,
+    hiddenSeries,
+    defaultHiddenSeries,
+    onHiddenSeriesChange,
+    categoryField,
+    categories,
+    className,
+    style,
+    ...props
+  }, ref) => {
+    const chartId = useId().replace(/:/g, "");
+    const labels = useMemo(() => ({ ...defaultChartLabels, ...labelOverrides }), [labelOverrides]);
+    const formats = useMemo(() => createFormatters(locale, customFormats), [locale, customFormats]);
+    const [innerHidden, setInnerHidden] = useState(defaultHiddenSeries ?? []);
+    const hidden = hiddenSeries ?? innerHidden;
+    const allFields = useMemo(() => Object.keys(config), [config]);
+    const onLegendClick = useCallback(
+      (field, options) => {
+        const next = legendToggle(allFields, hiddenSeries ?? innerHidden, field, options);
+        if (hiddenSeries === void 0) setInnerHidden(next);
+        onHiddenSeriesChange?.(next);
+      },
+      [allFields, hiddenSeries, innerHidden, onHiddenSeriesChange]
+    );
+    const context = useMemo(
+      () => ({ config, formats, labels, hiddenSeries: hidden, onLegendClick, categoryField, categories }),
+      [config, formats, labels, hidden, onLegendClick, categoryField, categories]
+    );
+    const colorStyle = useMemo(() => {
+      const vars = {};
+      Object.entries(config).forEach(([field, series], index) => {
+        const slot = Math.min(index + 1, CHART_COLOR_COUNT);
+        vars[seriesColorProperty(field)] = series.color ?? (series.theme ? series.theme.light : `var(--chart-${slot})`);
+      });
+      return vars;
+    }, [config]);
+    const themed = useMemo(
+      () => Object.entries(config).filter((entry) => !!entry[1].theme && !entry[1].color),
+      [config]
+    );
+    const fixedSize = typeof width === "number" && typeof height === "number";
+    let body;
+    if (loading) {
+      body = /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-slot": "chart-skeleton",
+          role: "status",
+          "aria-label": labels.loading,
+          className: "bg-muted h-full min-h-32 w-full animate-pulse rounded-md motion-reduce:animate-none"
+        }
+      );
+    } else if (error !== void 0 && error !== null && error !== false) {
+      body = /* @__PURE__ */ jsxs(Alert, { tone: "danger", "data-slot": "chart-error", children: [
+        /* @__PURE__ */ jsx(Alert.Title, { children: labels.chartError }),
+        typeof error === "boolean" ? null : /* @__PURE__ */ jsx(Alert.Description, { children: error })
+      ] });
+    } else if (empty) {
+      body = /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-slot": "chart-empty",
+          className: "text-muted-foreground flex h-full min-h-32 w-full items-center justify-center text-sm",
+          children: emptyState ?? labels.noData
+        }
+      );
+    } else {
+      const chart = Children.only(children);
+      if (fixedSize && isValidElement(chart)) {
+        body = cloneElement(chart, { width, height });
+      } else {
+        body = /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", ...height !== void 0 ? { height } : { aspect }, children: chart });
+      }
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-slot": "chart",
+        "data-chart": chartId,
+        role: "figure",
+        "aria-label": ariaLabel,
+        className: cn(
+          "text-foreground text-xs [&_.recharts-surface]:outline-none [&_.recharts-sector]:outline-none",
+          fixedSize ? "" : "w-full",
+          className
+        ),
+        style: { ...colorStyle, ...style },
+        ...props,
+        children: [
+          themed.length > 0 && /* @__PURE__ */ jsx(
+            "style",
+            {
+              dangerouslySetInnerHTML: {
+                __html: [
+                  `[data-chart="${chartId}"]{${themed.map(([field, s]) => `${seriesColorProperty(field)}:${s.theme.light};`).join("")}}`,
+                  `.dark [data-chart="${chartId}"]{${themed.map(([field, s]) => `${seriesColorProperty(field)}:${s.theme.dark};`).join("")}}`
+                ].join("\n")
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(ChartContext.Provider, { value: context, children: body })
+        ]
+      }
+    );
+  }
+);
+ChartFrame.displayName = "ChartFrame";
+var chart_frame_default = ChartFrame;
+
+export {
+  ChartFrame,
+  chart_frame_default
+};

package/dist/chunk-HNJKYOPE.js

@@ -0,0 +1,45 @@
+import {
+  DIMMED_OPACITY
+} from "./chunk-7WJ26NHR.js";
+
+// src/charts/mark-interaction.ts
+function prefersReducedMotion() {
+  try {
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  } catch {
+    return false;
+  }
+}
+function reportMarkClick(interaction, value, seriesField, row, additive) {
+  interaction.onMarkClick?.({ field: interaction.field, value, seriesField, row, additive });
+  const { crossFilter, field } = interaction;
+  if (!crossFilter || interaction.interaction === "none") return;
+  if (interaction.interaction === "highlight") {
+    const current = crossFilter.state.highlight;
+    const active = current?.field === field && current.values.includes(value);
+    crossFilter.setHighlight(active ? null : { field, values: [value] });
+  } else {
+    crossFilter.toggleValue(field, value, { additive });
+  }
+}
+function activeCategoryValues(interaction) {
+  const highlight = interaction.crossFilter?.state.highlight;
+  if (highlight && highlight.field === interaction.field) return highlight.values;
+  return interaction.crossFilter?.valuesFor(interaction.field) ?? null;
+}
+function markDimOpacity(active, value) {
+  if (active === null) return void 0;
+  return typeof value !== "undefined" && active.includes(value) ? void 0 : DIMMED_OPACITY;
+}
+function categoryOf(row, field) {
+  const value = row?.[field];
+  return typeof value === "string" || typeof value === "number" ? value : null;
+}
+
+export {
+  prefersReducedMotion,
+  reportMarkClick,
+  activeCategoryValues,
+  markDimOpacity,
+  categoryOf
+};

package/dist/chunk-IPOBQIYU.js

@@ -0,0 +1,13 @@
+// src/chart-context.ts
+import { createContext, useContext } from "react";
+var ChartContext = createContext(null);
+function useChartContext() {
+  const context = useContext(ChartContext);
+  if (!context) throw new Error("Chart components must be used inside a <ChartFrame>");
+  return context;
+}
+
+export {
+  ChartContext,
+  useChartContext
+};

package/dist/chunk-MJDIQVJX.js

@@ -0,0 +1,148 @@
+import {
+  defaultChartRegistry
+} from "./chunk-YMPZODMC.js";
+import {
+  prefersReducedMotion
+} from "./chunk-HNJKYOPE.js";
+import {
+  chart_frame_default
+} from "./chunk-6QTIAMA3.js";
+import {
+  createFormatters
+} from "./chunk-7WABBHMT.js";
+import {
+  warnOnce
+} from "./chunk-3VGLTPGL.js";
+import {
+  useOptionalCrossFilter
+} from "./chunk-WVWGHGZE.js";
+import {
+  chartColorVar
+} from "./chunk-7WJ26NHR.js";
+
+// src/chart.tsx
+import { useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+function configFromSpec(spec, registry = defaultChartRegistry) {
+  const fromDef = registry.types.get(spec.type)?.configFrom?.(spec);
+  if (fromDef) return fromDef;
+  if ("series" in spec && Array.isArray(spec.series)) {
+    return Object.fromEntries(
+      spec.series.map((series) => [
+        series.field,
+        {
+          label: series.label ?? series.field,
+          color: series.paletteSlot ? chartColorVar(series.paletteSlot) : void 0,
+          format: series.format
+        }
+      ])
+    );
+  }
+  return {};
+}
+function crossFilterFieldOf(spec, registry = defaultChartRegistry) {
+  const field = registry.types.get(spec.type)?.crossFilterField?.(spec);
+  if (field !== void 0) return field;
+  const xKey = spec.xKey;
+  return typeof xKey === "string" ? xKey : "";
+}
+function categoriesOf(spec, rows, registry) {
+  const field = categoryFieldOf(spec, registry);
+  if (!field) return void 0;
+  const values = [];
+  for (const row of rows) {
+    const value = row[field];
+    if ((typeof value === "string" || typeof value === "number") && !values.includes(value)) values.push(value);
+  }
+  return values.map((value, index) => ({ value, color: chartColorVar(index + 1) }));
+}
+function categoryFieldOf(spec, registry) {
+  return registry.types.get(spec.type)?.categoryField?.(spec);
+}
+function renderSpec(props, registry) {
+  const def = registry.types.get(props.spec.type);
+  if (!def) {
+    warnOnce(`type-${props.spec.type}`, `@zuilib/charts: unknown chart type "${props.spec.type}"`);
+    return null;
+  }
+  return /* @__PURE__ */ jsx(def.render, { ...props });
+}
+function Chart({
+  spec,
+  rows,
+  registry,
+  formats,
+  locale,
+  className,
+  width,
+  height,
+  aspect,
+  loading,
+  error,
+  emptyState,
+  ariaLabel,
+  hiddenSeries,
+  defaultHiddenSeries,
+  onHiddenSeriesChange,
+  onMarkClick,
+  labels,
+  animate
+}) {
+  const chartRegistry = registry ?? defaultChartRegistry;
+  const crossFilter = useOptionalCrossFilter();
+  const formatters = useMemo(() => createFormatters(locale, formats), [locale, formats]);
+  const config = useMemo(() => configFromSpec(spec, chartRegistry), [spec, chartRegistry]);
+  const [innerHidden, setInnerHidden] = useState(defaultHiddenSeries ?? []);
+  const hidden = hiddenSeries ?? innerHidden;
+  const onHiddenChange = (next) => {
+    if (hiddenSeries === void 0) setInnerHidden(next);
+    onHiddenSeriesChange?.(next);
+  };
+  const markInteraction = {
+    field: crossFilterFieldOf(spec, chartRegistry),
+    crossFilter,
+    interaction: spec.interaction ?? "filter",
+    onMarkClick
+  };
+  return /* @__PURE__ */ jsx(
+    chart_frame_default,
+    {
+      config,
+      className,
+      width,
+      height,
+      aspect,
+      loading,
+      error,
+      emptyState,
+      empty: rows.length === 0,
+      ariaLabel: ariaLabel ?? spec.title,
+      labels,
+      formats,
+      locale,
+      hiddenSeries: hidden,
+      onHiddenSeriesChange: onHiddenChange,
+      categoryField: categoryFieldOf(spec, chartRegistry),
+      categories: useMemo(() => categoriesOf(spec, rows, chartRegistry), [spec, rows, chartRegistry]),
+      children: renderSpec(
+        {
+          spec,
+          rows,
+          formats: formatters,
+          hiddenSeries: hidden,
+          markInteraction,
+          animate: animate ?? !prefersReducedMotion()
+        },
+        chartRegistry
+      )
+    }
+  );
+}
+var chart_default = Chart;
+
+export {
+  configFromSpec,
+  crossFilterFieldOf,
+  Chart,
+  chart_default
+};

package/dist/chunk-PV27RZSV.js

@@ -0,0 +1,61 @@
+import {
+  useChartContext
+} from "./chunk-IPOBQIYU.js";
+import {
+  seriesColorVar
+} from "./chunk-7WJ26NHR.js";
+
+// src/chart-tooltip.tsx
+import { cn } from "@zuilib/components/lib/cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ChartTooltipPanel({
+  active,
+  payload,
+  label,
+  labelFormat,
+  valueFormat = "number",
+  showLabel = true,
+  className
+}) {
+  const { config, formats } = useChartContext();
+  if (!active || !payload?.length) return null;
+  const labelText = formats.resolve(labelFormat, "none")(label);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "chart-tooltip",
+      className: cn(
+        "bg-popover text-popover-foreground border-border min-w-32 rounded-md border px-2.5 py-1.5 shadow-md",
+        className
+      ),
+      children: [
+        showLabel && labelText !== "" && /* @__PURE__ */ jsx("div", { "data-slot": "chart-tooltip-label", className: "mb-1 font-medium", children: labelText }),
+        /* @__PURE__ */ jsx("ul", { className: "grid gap-1", children: payload.map((entry, index) => {
+          const field = entry.dataKey != null ? String(entry.dataKey) : String(entry.name ?? index);
+          const series = config[field];
+          const name = series?.label ?? String(entry.name ?? field);
+          const format = formats.resolve(series?.format, valueFormat);
+          return /* @__PURE__ */ jsxs("li", { "data-slot": "chart-tooltip-row", className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "data-slot": "chart-tooltip-chip",
+                "aria-hidden": true,
+                className: "size-2.5 shrink-0 rounded-xs",
+                style: { backgroundColor: series ? seriesColorVar(field) : entry.color }
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: name }),
+            /* @__PURE__ */ jsx("span", { className: "text-foreground ms-auto font-mono font-medium tabular-nums", children: format(entry.value) })
+          ] }, `${field}-${index}`);
+        }) })
+      ]
+    }
+  );
+}
+var chart_tooltip_default = ChartTooltipPanel;
+
+export {
+  ChartTooltipPanel,
+  chart_tooltip_default
+};

package/dist/chunk-SHQZRND7.js

@@ -0,0 +1,83 @@
+import {
+  useOptionalCrossFilter
+} from "./chunk-WVWGHGZE.js";
+import {
+  fillLabel
+} from "./chunk-UN3XPBZ5.js";
+import {
+  useChartContext
+} from "./chunk-IPOBQIYU.js";
+import {
+  seriesColorVar
+} from "./chunk-7WJ26NHR.js";
+
+// src/chart-legend.tsx
+import { cn } from "@zuilib/components/lib/cn";
+import { focusRingClasses } from "@zuilib/components/lib/focus";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ChartLegendList({ payload, className }) {
+  const { config, labels, hiddenSeries, onLegendClick, categoryField, categories } = useChartContext();
+  const crossFilter = useOptionalCrossFilter();
+  const categoryEntries = categories?.map((c) => ({ key: String(c.value), name: String(c.value), color: c.color, series: false })) ?? (payload ?? []).map((entry) => {
+    const value = String(entry.value ?? "");
+    return { key: value, name: value, color: entry.color, series: false };
+  });
+  const entries = categoryField ? categoryEntries : Object.keys(config).map((field) => ({
+    key: field,
+    name: config[field].label,
+    color: seriesColorVar(field),
+    series: true
+  }));
+  if (!entries.length) return null;
+  const active = categoryField && crossFilter ? crossFilter.valuesFor(categoryField) : null;
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      "data-slot": "chart-legend",
+      "aria-label": labels.legend,
+      className: cn("flex flex-wrap items-center justify-center gap-x-3 gap-y-1 pt-2", className),
+      children: entries.map((entry) => {
+        const off = entry.series ? hiddenSeries.includes(entry.key) : active !== null && !active.includes(entry.key);
+        return /* @__PURE__ */ jsx("li", { "data-slot": "chart-legend-item", className: "flex", children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": !off,
+            "aria-label": fillLabel(labels.toggleSeries, { series: entry.name }),
+            "data-slot": "chart-legend-button",
+            className: cn(
+              "text-muted-foreground flex cursor-pointer items-center gap-1.5 rounded-sm px-1 py-0.5 text-xs transition-opacity",
+              focusRingClasses,
+              off && "opacity-45"
+            ),
+            onClick: (event) => {
+              if (entry.series) {
+                onLegendClick(entry.key, { additive: event.shiftKey });
+              } else if (categoryField) {
+                crossFilter?.toggleValue(categoryField, entry.key, { additive: event.shiftKey });
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "data-slot": "chart-legend-chip",
+                  "aria-hidden": true,
+                  className: "size-2.5 shrink-0 rounded-xs",
+                  style: { backgroundColor: entry.color }
+                }
+              ),
+              entry.name
+            ]
+          }
+        ) }, entry.key);
+      })
+    }
+  );
+}
+var chart_legend_default = ChartLegendList;
+
+export {
+  ChartLegendList,
+  chart_legend_default
+};

package/dist/chunk-UN3XPBZ5.js

@@ -0,0 +1,17 @@
+// src/labels.ts
+var defaultChartLabels = {
+  noData: "No data",
+  loading: "Loading chart\u2026",
+  chartError: "Chart failed to load",
+  toggleSeries: "Toggle {series}",
+  legend: "Chart legend",
+  filterBy: "Filter by {value}"
+};
+function fillLabel(template, values) {
+  return template.replace(/\{(\w+)\}/g, (match, name) => name in values ? String(values[name]) : match);
+}
+
+export {
+  defaultChartLabels,
+  fillLabel
+};

package/dist/chunk-WVWGHGZE.js

@@ -0,0 +1,90 @@
+// src/cross-filter.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+
+// src/cross-filter-state.ts
+function toggleValueIn(state, field, value, options) {
+  const entry = state.filters.find((f) => f.field === field);
+  const others = state.filters.filter((f) => f.field !== field);
+  const has = entry?.values.includes(value) ?? false;
+  let values;
+  if (options?.additive) {
+    values = has ? (entry?.values ?? []).filter((v) => v !== value) : [...entry?.values ?? [], value];
+  } else {
+    values = has && entry?.values.length === 1 ? [] : [value];
+  }
+  return {
+    ...state,
+    filters: values.length ? [...others, { field, values }] : others
+  };
+}
+
+// src/cross-filter.tsx
+import { jsx } from "react/jsx-runtime";
+var defaultCrossFilterState = { filters: [], highlight: null };
+var CrossFilterContext = createContext(null);
+function CrossFilterProvider({ state, defaultState, onStateChange, children }) {
+  const [inner, setInner] = useState(defaultState ?? defaultCrossFilterState);
+  const controlled = state !== void 0;
+  const current = controlled ? state : inner;
+  const currentRef = useRef(current);
+  currentRef.current = current;
+  const emitRef = useRef(onStateChange);
+  emitRef.current = onStateChange;
+  const emit = useCallback(
+    (next) => {
+      currentRef.current = next;
+      if (!controlled) setInner(next);
+      emitRef.current?.(next);
+    },
+    [controlled]
+  );
+  const toggleValue = useCallback(
+    (field, value, options) => emit(toggleValueIn(currentRef.current, field, value, options)),
+    [emit]
+  );
+  const clearField = useCallback(
+    (field) => emit({ ...currentRef.current, filters: currentRef.current.filters.filter((f) => f.field !== field) }),
+    [emit]
+  );
+  const clearAll = useCallback(() => emit(defaultCrossFilterState), [emit]);
+  const setHighlight = useCallback(
+    (highlight) => emit({ ...currentRef.current, highlight }),
+    [emit]
+  );
+  const result = useMemo(
+    () => ({
+      state: current,
+      filtered: current.filters.some((f) => f.values.length > 0),
+      toggleValue,
+      clearField,
+      clearAll,
+      setHighlight,
+      valuesFor: (field) => current.filters.find((f) => f.field === field)?.values ?? null
+    }),
+    [current, toggleValue, clearField, clearAll, setHighlight]
+  );
+  return /* @__PURE__ */ jsx(CrossFilterContext.Provider, { value: result, children });
+}
+function useCrossFilter() {
+  const context = useContext(CrossFilterContext);
+  if (!context) throw new Error("useCrossFilter must be used inside a <CrossFilterProvider>");
+  return context;
+}
+function useOptionalCrossFilter() {
+  return useContext(CrossFilterContext);
+}
+var cross_filter_default = CrossFilterProvider;
+
+export {
+  defaultCrossFilterState,
+  useCrossFilter,
+  useOptionalCrossFilter,
+  cross_filter_default
+};