@jcsoftdev/ui 0.0.0-stage → 0.1.1

package/dist/charts/dumbbell-chart/dumbbell-chart.d.ts

@@ -0,0 +1,68 @@
+import { type ValueFormat } from "../core/format.js";
+import { type ChartLabels, type ValueAxisOptions } from "../core/types.js";
+export interface DumbbellItem {
+    id?: string;
+    label: string;
+    /** First value (the left or bottom dot). Not needed with `values`. */
+    from?: number;
+    /** Last value (the right or top dot). Not needed with `values`. */
+    to?: number;
+    /** Any number of measures per row, in the order of `measures`; wins over `from` and `to`. */
+    values?: readonly number[];
+}
+export interface DumbbellMeasure {
+    name: string;
+    /** CSS color or token; defaults to the palette slot of the measure. */
+    color?: string;
+}
+export type DumbbellSort = "none" | "delta" | "abs-delta" | "to";
+export interface DumbbellChartProps {
+    items: readonly DumbbellItem[];
+    /** Accessible name of the chart. */
+    title: string;
+    description?: string;
+    /** Name of the first value (the left dot), e.g. "Mes pasado". */
+    fromLabel?: string;
+    /** Name of the second value (the right dot), e.g. "Este mes". */
+    toLabel?: string;
+    fromColor?: string;
+    toColor?: string;
+    /** Names and colors of the dots when rows have `values`; the first and last are compared by the change. */
+    measures?: readonly DumbbellMeasure[];
+    /** "vertical" draws a column per category with the dots stacked on the value axis. */
+    orientation?: "horizontal" | "vertical";
+    valueFormat?: ValueFormat;
+    /** Order of the rows; "delta" puts the biggest increase first. */
+    sort?: DumbbellSort;
+    /** Height of every row in pixels (default 38), horizontal only. */
+    rowHeight?: number;
+    /**
+     * Height of the drawing in pixels, or `"fill"` to take the height of the
+     * parent. Horizontal rows stretch to it; by default they size themselves.
+     */
+    height?: number | "fill";
+    /** Width / height ratio; stretches the rows to fit it. */
+    aspectRatio?: number;
+    /** Change (last minus first value) printed next to each row. `false` hides it. */
+    delta?: "absolute" | "percent" | false;
+    /** Writes the values next to the dots (default true). */
+    valueLabels?: boolean;
+    /** Colors the change green when it goes down (e.g. cancellations or waiting time). */
+    lowerIsBetter?: boolean;
+    /** Axis of the values (bottom axis, or left axis when vertical). */
+    xAxis?: ValueAxisOptions;
+    grid?: boolean;
+    legend?: boolean;
+    tooltip?: boolean;
+    loading?: boolean;
+    animate?: boolean;
+    deltaLabel?: string;
+    labels?: Partial<ChartLabels>;
+    className?: string;
+}
+/**
+ * Two or more values per category joined by a bar: the length of the line is
+ * the spread, the change is last minus first. Rows run top to bottom, or
+ * columns left to right with `orientation="vertical"`; use `sort` to rank by change.
+ */
+export declare function DumbbellChart({ items, title, description, fromLabel, toLabel, fromColor: fromOverride, toColor: toOverride, measures: measuresProp, orientation, valueFormat, sort, rowHeight, height: heightProp, aspectRatio, delta, valueLabels, lowerIsBetter, xAxis, grid, legend, tooltip, loading, animate, deltaLabel, labels: labelOverrides, className, }: DumbbellChartProps): import("react").JSX.Element;

package/dist/charts/dumbbell-chart/dumbbell-chart.js

@@ -0,0 +1,585 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo, useId, useMemo, useRef, useState } from "react";
+import { AxisBottom, AxisLeft, estimateTextWidth, GridLines } from "../core/axes.js";
+import { ChartFrame } from "../core/chart-frame.js";
+import { ChartDataTable } from "../core/data-table.js";
+import {
+  formatPercent,
+  resolveAxisFormat,
+  resolveFormat
+} from "../core/format.js";
+import { ChartLegend } from "../core/legend.js";
+import { EASE_OUT, fadeIn, useEntryAnimation } from "../core/motion.js";
+import { DIRECTION_COLORS, directionOf, seriesColor } from "../core/palette.js";
+import { PlotOverlay } from "../core/plot-overlay.js";
+import { linearScale } from "../core/scales/linear.js";
+import { ChartTooltip } from "../core/tooltip.js";
+import { resolveLabels } from "../core/types.js";
+const MARGIN = { top: 8, bottom: 30 };
+const DELTA_COLUMN = 64;
+const DOT_PAD = 40;
+const NEUTRAL_LINE = "var(--line-strong)";
+const firstOf = (row) => row.values[0] ?? 0;
+const lastOf = (row) => row.values[row.values.length - 1] ?? 0;
+const diffOf = (row) => lastOf(row) - firstOf(row);
+function toRows(items) {
+  return items.map((item) => ({
+    id: item.id ?? item.label,
+    label: item.label,
+    values: item.values ?? [item.from ?? 0, item.to ?? 0]
+  }));
+}
+function sortRows(rows, sort) {
+  const list = [...rows];
+  if (sort === "delta") list.sort((a, b) => diffOf(b) - diffOf(a));
+  else if (sort === "abs-delta") list.sort((a, b) => Math.abs(diffOf(b)) - Math.abs(diffOf(a)));
+  else if (sort === "to") list.sort((a, b) => lastOf(b) - lastOf(a));
+  return list;
+}
+function changeText(row, mode, fmt) {
+  const diff = diffOf(row);
+  const sign = diff > 0 ? "+" : "";
+  if (mode === "percent") {
+    return firstOf(row) === 0 ? "\u2014" : `${sign}${formatPercent(diff / Math.abs(firstOf(row)), { decimals: 0 })}`;
+  }
+  return `${sign}${fmt(diff)}`;
+}
+function fitLabel(text, room) {
+  const max = Math.max(3, Math.floor(room / 7));
+  return text.length <= max ? text : `${text.slice(0, max - 1).trimEnd()}\u2026`;
+}
+const Link = memo(function Link2({ points, colors, gradientId, dimmed, active, band }) {
+  const first = points[0] ?? { x: 0, y: 0 };
+  const last = points[points.length - 1] ?? first;
+  const lo = {
+    x: Math.min(...points.map((point) => point.x)),
+    y: Math.min(...points.map((point) => point.y))
+  };
+  const hi = {
+    x: Math.max(...points.map((point) => point.x)),
+    y: Math.max(...points.map((point) => point.y))
+  };
+  const gradient = points.length === 2;
+  return /* @__PURE__ */ jsxs(
+    "g",
+    {
+      className: "motion-safe:transition-opacity motion-safe:duration-150",
+      style: { opacity: dimmed ? 0.4 : 1 },
+      children: [
+        active ? /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: band.x,
+            y: band.y,
+            width: band.width,
+            height: band.height,
+            rx: 8,
+            style: { fill: "var(--chart-grid)" }
+          }
+        ) : null,
+        gradient ? /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+          "linearGradient",
+          {
+            id: gradientId,
+            gradientUnits: "userSpaceOnUse",
+            x1: first.x,
+            y1: first.y,
+            x2: last.x === first.x && last.y === first.y ? last.x + 1 : last.x,
+            y2: last.y,
+            children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", style: { stopColor: colors[0] } }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", style: { stopColor: colors[colors.length - 1] } })
+            ]
+          }
+        ) }) : null,
+        /* @__PURE__ */ jsx(
+          "line",
+          {
+            "data-bar": "",
+            x1: lo.x,
+            x2: hi.x,
+            y1: lo.y,
+            y2: hi.y,
+            strokeWidth: 4,
+            strokeLinecap: "round",
+            style: {
+              stroke: gradient ? `url(#${gradientId})` : NEUTRAL_LINE,
+              transformBox: "fill-box",
+              transformOrigin: "center"
+            }
+          }
+        ),
+        points.map((point, index) => /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: point.x,
+            cy: point.y,
+            r: (active ? 7 : 6) + (index === points.length - 1 ? 0.5 : 0),
+            strokeWidth: 2,
+            style: { fill: colors[index], stroke: "var(--surface)" }
+          },
+          index
+        ))
+      ]
+    }
+  );
+});
+function DumbbellChart({
+  items,
+  title,
+  description,
+  fromLabel = "Before",
+  toLabel = "After",
+  fromColor: fromOverride,
+  toColor: toOverride,
+  measures: measuresProp,
+  orientation = "horizontal",
+  valueFormat,
+  sort = "none",
+  rowHeight = 38,
+  height: heightProp,
+  aspectRatio,
+  delta = "absolute",
+  valueLabels = true,
+  lowerIsBetter = false,
+  xAxis,
+  grid = true,
+  legend = true,
+  tooltip = true,
+  loading,
+  animate = true,
+  deltaLabel = "Change",
+  labels: labelOverrides,
+  className
+}) {
+  const labels = resolveLabels(labelOverrides);
+  const fmt = useMemo(() => resolveFormat(valueFormat), [valueFormat]);
+  const rows = useMemo(() => sortRows(toRows(items), sort), [items, sort]);
+  const vertical = orientation === "vertical";
+  const measures = useMemo(() => {
+    const widest = Math.max(2, ...rows.map((row) => row.values.length));
+    if (measuresProp && measuresProp.length > 0) {
+      return Array.from({ length: Math.max(widest, measuresProp.length) }, (_, index) => ({
+        name: measuresProp[index]?.name ?? `#${index + 1}`,
+        color: measuresProp[index]?.color ?? seriesColor(index)
+      }));
+    }
+    if (widest === 2) {
+      return [
+        { name: fromLabel, color: fromOverride ?? seriesColor(6) },
+        { name: toLabel, color: toOverride ?? seriesColor(0) }
+      ];
+    }
+    return Array.from({ length: widest }, (_, index) => ({
+      name: `#${index + 1}`,
+      color: seriesColor(index)
+    }));
+  }, [rows, measuresProp, fromLabel, toLabel, fromOverride, toOverride]);
+  const stretch = heightProp != null || aspectRatio != null;
+  const plotHeight = rows.length * rowHeight + MARGIN.top + MARGIN.bottom;
+  const frameHeight = heightProp === "fill" ? "fill" : typeof heightProp === "number" ? heightProp : vertical ? 320 : Math.max(plotHeight, 120);
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      height: frameHeight,
+      aspectRatio,
+      labels,
+      loading,
+      empty: rows.length === 0,
+      skeleton: "bars",
+      legend: legend ? /* @__PURE__ */ jsx(
+        ChartLegend,
+        {
+          items: measures.map((measure, index) => ({
+            id: String(index),
+            name: measure.name,
+            color: measure.color,
+            shape: "dot"
+          }))
+        }
+      ) : null,
+      className,
+      table: /* @__PURE__ */ jsx(
+        ChartDataTable,
+        {
+          caption: description ? `${title}. ${description}` : title,
+          categoryHeader: labels.category,
+          categories: rows.map((row) => row.label),
+          columns: [
+            ...measures.map((measure, index) => ({
+              id: `m${index}`,
+              name: measure.name,
+              values: rows.map((row) => row.values[index] == null ? "" : fmt(row.values[index]))
+            })),
+            {
+              id: "delta",
+              name: deltaLabel,
+              values: rows.map((row) => changeText(row, delta || "absolute", fmt))
+            }
+          ]
+        }
+      ),
+      children: (width, measuredHeight) => /* @__PURE__ */ jsx(
+        DumbbellPlot,
+        {
+          width,
+          height: vertical ? measuredHeight : stretch ? measuredHeight : plotHeight,
+          rows,
+          measures,
+          fmt,
+          valueFormat,
+          vertical,
+          rowHeight: stretch ? Math.max(20, (measuredHeight - MARGIN.top - MARGIN.bottom) / rows.length) : rowHeight,
+          delta,
+          valueLabels,
+          lowerIsBetter,
+          xAxis,
+          grid,
+          tooltip,
+          animate,
+          deltaLabel,
+          labels,
+          title
+        }
+      )
+    }
+  );
+}
+function DumbbellPlot({
+  width,
+  height,
+  rows,
+  measures,
+  fmt,
+  valueFormat,
+  vertical,
+  rowHeight,
+  delta,
+  valueLabels,
+  lowerIsBetter,
+  xAxis,
+  grid,
+  tooltip,
+  animate,
+  deltaLabel,
+  labels,
+  title
+}) {
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const svgRef = useRef(null);
+  const [active, setActive] = useState(null);
+  const narrow = width < 440;
+  const dotPad = narrow ? 14 : DOT_PAD;
+  const deltaColumn = narrow ? 50 : DELTA_COLUMN;
+  const colors = measures.map((measure) => measure.color);
+  const model = useMemo(() => {
+    const all = rows.flatMap((row) => row.values);
+    const lo = all.length ? Math.min(...all) : 0;
+    const hi = all.length ? Math.max(...all) : 1;
+    const domain = [
+      xAxis?.min ?? (lo > 0 && lo < hi * 0.4 ? 0 : lo),
+      xAxis?.max ?? hi
+    ];
+    const format = resolveAxisFormat(xAxis?.format ?? valueFormat);
+    if (vertical) {
+      const top2 = delta ? 26 : 12;
+      const innerHeight2 = Math.max(60, height - top2 - 30);
+      const pad = 14;
+      const y = linearScale({
+        domain,
+        range: [innerHeight2 - pad, pad],
+        tickCount: xAxis?.tickCount ?? Math.max(3, Math.round(innerHeight2 / 52))
+      });
+      const ticks3 = y.ticks().map((tick) => ({ key: tick, position: y.map(tick), label: format(tick) }));
+      const left3 = Math.max(...ticks3.map((tick) => estimateTextWidth(tick.label)), 16) + 18;
+      const innerWidth3 = Math.max(60, width - left3 - 8);
+      const column2 = innerWidth3 / Math.max(1, rows.length);
+      return {
+        vertical: true,
+        top: top2,
+        left: left3,
+        innerWidth: innerWidth3,
+        innerHeight: innerHeight2,
+        column: column2,
+        scale: y,
+        ticks: ticks3
+      };
+    }
+    const left2 = Math.min(
+      Math.max(72, width * (narrow ? 0.3 : 0.28)),
+      Math.max(...rows.map((row) => estimateTextWidth(row.label, 13)), 40) + 16
+    );
+    const rightPad = delta ? deltaColumn : 8;
+    const innerWidth2 = Math.max(60, width - left2 - rightPad);
+    const x = linearScale({
+      domain,
+      range: [dotPad, innerWidth2 - dotPad],
+      tickCount: xAxis?.tickCount ?? Math.max(3, Math.round(innerWidth2 / 90))
+    });
+    const ticks2 = x.ticks().map((tick) => ({ key: tick, position: x.map(tick), label: format(tick) }));
+    return {
+      vertical: false,
+      top: MARGIN.top,
+      left: left2,
+      innerWidth: innerWidth2,
+      innerHeight: rows.length * rowHeight,
+      column: 0,
+      scale: x,
+      ticks: ticks2
+    };
+  }, [
+    rows,
+    width,
+    height,
+    delta,
+    xAxis,
+    valueFormat,
+    narrow,
+    dotPad,
+    deltaColumn,
+    vertical,
+    rowHeight
+  ]);
+  const { top, left, innerWidth, innerHeight, column, scale, ticks } = model;
+  useEntryAnimation(
+    svgRef,
+    (root) => {
+      const lines = root.querySelectorAll("[data-bar]");
+      const per = Math.min(50, 400 / Math.max(1, lines.length));
+      const [from, to] = vertical ? ["scaleY(0)", "scaleY(1)"] : ["scaleX(0)", "scaleX(1)"];
+      lines.forEach((line, i) => {
+        line.animate([{ transform: from }, { transform: to }], {
+          duration: 560,
+          delay: i * per,
+          easing: EASE_OUT,
+          fill: "backwards"
+        });
+      });
+      for (const node of root.querySelectorAll("[data-fade]")) fadeIn(node, 360, 420);
+    },
+    { disabled: !animate }
+  );
+  const current = active != null ? rows[active] : null;
+  const goodUp = !lowerIsBetter;
+  const deltaColor = (row) => {
+    const direction = directionOf(diffOf(row));
+    if (direction === "flat") return DIRECTION_COLORS.flat;
+    return direction === "up" === goodUp ? DIRECTION_COLORS.up : DIRECTION_COLORS.down;
+  };
+  const measureText = (row) => measures.map((measure, index) => `${measure.name} ${fmt(row.values[index] ?? 0)}`).join(", ");
+  const valueText = current ? `${current.label}. ${measureText(current)}, ${deltaLabel} ${changeText(current, delta || "absolute", fmt)}` : labels.explore;
+  const showValues = valueLabels && (vertical ? column >= 64 : !narrow);
+  const tooltipRows = (row) => [
+    ...measures.map((measure, index) => ({
+      id: String(index),
+      name: measure.name,
+      value: fmt(row.values[index] ?? 0),
+      color: measure.color,
+      shape: "dot"
+    })),
+    {
+      id: "delta",
+      name: deltaLabel,
+      value: changeText(row, delta || "absolute", fmt),
+      color: "transparent",
+      emphasis: true
+    }
+  ];
+  const pixels = (row) => row.values.map((value) => scale.map(value));
+  const span = (row) => {
+    const px = pixels(row);
+    return px.reduce((sum, value) => sum + value, 0) / Math.max(1, px.length) || 0;
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "relative", style: { width }, children: [
+    /* @__PURE__ */ jsx(
+      "svg",
+      {
+        ref: svgRef,
+        role: "img",
+        "aria-label": title,
+        width,
+        height,
+        className: "block overflow-visible",
+        children: /* @__PURE__ */ jsxs("g", { transform: `translate(${left},${top})`, children: [
+          vertical ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            grid ? /* @__PURE__ */ jsx(GridLines, { ticks, direction: "horizontal", length: innerWidth }) : null,
+            /* @__PURE__ */ jsx(AxisLeft, { ticks, offset: 0 }),
+            /* @__PURE__ */ jsx(
+              AxisBottom,
+              {
+                ticks: rows.map((row, i) => ({
+                  key: row.id,
+                  position: i * column + column / 2,
+                  label: fitLabel(row.label, column - 6)
+                })),
+                offset: innerHeight
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            grid ? /* @__PURE__ */ jsx(GridLines, { ticks, direction: "vertical", length: innerHeight }) : null,
+            /* @__PURE__ */ jsx(AxisBottom, { ticks, offset: innerHeight })
+          ] }),
+          rows.map((row, i) => {
+            const dimmed = active != null && active !== i;
+            const px = pixels(row);
+            const lowPx = Math.min(...px);
+            const highPx = Math.max(...px);
+            if (vertical) {
+              const cx = i * column + column / 2;
+              return /* @__PURE__ */ jsxs("g", { children: [
+                /* @__PURE__ */ jsx(
+                  Link,
+                  {
+                    points: px.map((y) => ({ x: cx, y })),
+                    colors,
+                    gradientId: `${uid}-g${i}`,
+                    dimmed,
+                    active: active === i,
+                    band: { x: i * column + 2, y: 0, width: column - 4, height: innerHeight }
+                  }
+                ),
+                showValues ? /* @__PURE__ */ jsx(
+                  "g",
+                  {
+                    "data-fade": "",
+                    className: "font-bold text-[11px] tabular-nums",
+                    style: { fill: "var(--ink-2)", opacity: dimmed ? 0.4 : 1 },
+                    children: row.values.map((value, index) => /* @__PURE__ */ jsx(
+                      "text",
+                      {
+                        x: cx + 12,
+                        y: px[index],
+                        dy: "0.34em",
+                        textAnchor: "start",
+                        children: fmt(value)
+                      },
+                      index
+                    ))
+                  }
+                ) : null,
+                delta ? /* @__PURE__ */ jsx(
+                  "text",
+                  {
+                    "data-fade": "",
+                    x: cx,
+                    y: -10,
+                    textAnchor: "middle",
+                    className: "font-bold text-[12px] tabular-nums",
+                    style: { fill: deltaColor(row), opacity: dimmed ? 0.4 : 1 },
+                    children: changeText(row, delta, fmt)
+                  }
+                ) : null
+              ] }, row.id);
+            }
+            const cy = i * rowHeight + rowHeight / 2;
+            return /* @__PURE__ */ jsxs("g", { children: [
+              /* @__PURE__ */ jsx(
+                Link,
+                {
+                  points: px.map((x) => ({ x, y: cy })),
+                  colors,
+                  gradientId: `${uid}-g${i}`,
+                  dimmed,
+                  active: active === i,
+                  band: {
+                    x: 0,
+                    y: cy - (rowHeight - 4) / 2,
+                    width: innerWidth + (delta ? deltaColumn : 0),
+                    height: rowHeight - 4
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "text",
+                {
+                  x: -12,
+                  y: cy,
+                  dy: "0.34em",
+                  textAnchor: "end",
+                  className: "font-semibold text-[12px]",
+                  style: {
+                    fill: active === i ? "var(--ink)" : "var(--ink-2)",
+                    opacity: dimmed ? 0.5 : 1
+                  },
+                  children: fitLabel(row.label, left - 14)
+                }
+              ),
+              showValues ? /* @__PURE__ */ jsx(
+                "g",
+                {
+                  "data-fade": "",
+                  className: "font-bold text-[11px] tabular-nums",
+                  style: { fill: "var(--ink-2)", opacity: dimmed ? 0.4 : 1 },
+                  children: row.values.length === 2 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx("text", { x: lowPx - 12, y: cy, dy: "0.34em", textAnchor: "end", children: fmt(
+                      px[0] === lowPx ? row.values[0] : row.values[1]
+                    ) }),
+                    /* @__PURE__ */ jsx("text", { x: highPx + 12, y: cy, dy: "0.34em", textAnchor: "start", children: fmt(
+                      px[0] === lowPx ? row.values[1] : row.values[0]
+                    ) })
+                  ] }) : row.values.map((value, index) => /* @__PURE__ */ jsx(
+                    "text",
+                    {
+                      x: px[index],
+                      y: cy - 12,
+                      textAnchor: "middle",
+                      children: fmt(value)
+                    },
+                    index
+                  ))
+                }
+              ) : null,
+              delta ? /* @__PURE__ */ jsx(
+                "text",
+                {
+                  "data-fade": "",
+                  x: innerWidth + deltaColumn - 4,
+                  y: cy,
+                  dy: "0.34em",
+                  textAnchor: "end",
+                  className: "font-bold text-[12px] tabular-nums",
+                  style: { fill: deltaColor(row), opacity: dimmed ? 0.4 : 1 },
+                  children: changeText(row, delta, fmt)
+                }
+              ) : null
+            ] }, row.id);
+          })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PlotOverlay,
+      {
+        left: vertical ? left : 0,
+        top,
+        width: vertical ? innerWidth : width,
+        height: innerHeight,
+        label: labels.explore,
+        count: rows.length,
+        active,
+        valueText,
+        onActiveChange: setActive,
+        keys: vertical ? "horizontal" : "vertical",
+        indexAt: ({ x, y }) => {
+          if (!rows.length) return null;
+          const index = vertical ? Math.floor(x / column) : Math.floor(y / rowHeight);
+          return Math.min(rows.length - 1, Math.max(0, index));
+        }
+      }
+    ),
+    tooltip && current && active != null ? /* @__PURE__ */ jsx(
+      ChartTooltip,
+      {
+        x: vertical ? left + active * column + column / 2 : left + span(current),
+        y: vertical ? top + span(current) : top + active * rowHeight + rowHeight / 2,
+        containerWidth: width,
+        title: current.label,
+        rows: tooltipRows(current)
+      }
+    ) : null
+  ] });
+}
+export {
+  DumbbellChart
+};

package/dist/charts/dumbbell-chart/index.d.ts

@@ -0,0 +1 @@
+export * from "./dumbbell-chart.js";

package/dist/charts/dumbbell-chart/index.js

@@ -0,0 +1 @@
+export * from "./dumbbell-chart.js";

package/dist/charts/fill-gauge-chart/fill-gauge-chart.d.ts

@@ -0,0 +1,42 @@
+import { type ValueFormat } from "../core/format.js";
+import { type ChartLabels } from "../core/types.js";
+import { type UnitIcon } from "../core/unit-icons.js";
+export interface FillGaugeItem {
+    id: string;
+    name: string;
+    value: number;
+    /** Value of a full shape; the chart `max` by default. */
+    max?: number;
+    color?: string;
+    /** Shape of this gauge; the chart `shape` by default. */
+    shape?: UnitIcon;
+}
+export interface FillGaugeChartProps {
+    title: string;
+    description?: string;
+    data: readonly FillGaugeItem[];
+    /** Built-in shape ("battery", "droplet", "bottle", "person", "target", "shield", ...) or your own. */
+    shape?: UnitIcon;
+    /** Value of a full shape (1 for fractions, 100 for percentages, 24 for a box of 24 bottles). */
+    max?: number;
+    /** "wave": a moving liquid surface; "flat": a still level. Shapes that fill sideways are always flat. */
+    level?: "wave" | "flat";
+    /** Format of the label inside the shape. By default the fill share ("75%"). */
+    valueFormat?: ValueFormat;
+    /** Smallest width of one gauge; more gauges than fit wrap to new rows. */
+    minItemWidth?: number;
+    height?: number | "fill";
+    /** Width / height ratio; sizes the gauges from the container width. */
+    aspectRatio?: number;
+    animate?: boolean;
+    loading?: boolean;
+    labels?: Partial<ChartLabels>;
+    className?: string;
+}
+/**
+ * Silhouettes filled to a level: stock left in a bottle, a battery of
+ * capacity, a droplet of water, a target reached. Several gauges sit side by
+ * side for comparisons and wrap to new rows in narrow containers. The value
+ * inside switches color where the liquid crosses it, so it reads on both.
+ */
+export declare function FillGaugeChart({ title, description, data, shape, max, level, valueFormat, minItemWidth, height, aspectRatio, animate, loading, labels: labelsProp, className, }: FillGaugeChartProps): import("react").JSX.Element;