@jcsoftdev/ui 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,514 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
+import { AxisBottom, AxisLeft, estimateTextWidth, GridLines } from "../core/axes.js";
+import { ChartBrush } from "../core/cartesian/brush.js";
+import { buildCategoryAxis, fullCategoryLabel } from "../core/category-axis.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 } 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 DEFAULT_TEXTS = {
+  open: "Open",
+  high: "High",
+  low: "Low",
+  close: "Close",
+  volume: "Volume",
+  change: "Change",
+  up: "Up",
+  down: "Down"
+};
+const MARGIN = { top: 12, bottom: 30 };
+const BRUSH_HEIGHT = 52;
+const VOLUME_GAP = 16;
+const CandleMark = memo(function CandleMark2({
+  x,
+  width,
+  wickTop,
+  wickBottom,
+  bodyTop,
+  bodyHeight,
+  color,
+  hollow,
+  active,
+  muted
+}) {
+  return /* @__PURE__ */ jsxs(
+    "g",
+    {
+      "data-bar": "",
+      style: {
+        opacity: muted ? 0.5 : 1,
+        transformBox: "fill-box",
+        transformOrigin: "center center"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: x,
+            x2: x,
+            y1: wickTop,
+            y2: wickBottom,
+            strokeWidth: 1.5,
+            strokeLinecap: "round",
+            style: { stroke: color }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: x - width / 2,
+            y: bodyTop,
+            width,
+            height: bodyHeight,
+            rx: Math.min(2.5, width / 3),
+            strokeWidth: hollow ? 1.5 : active ? 1.5 : 0,
+            style: {
+              fill: hollow ? "var(--surface)" : color,
+              stroke: active ? "var(--ink)" : color
+            }
+          }
+        )
+      ]
+    }
+  );
+});
+function CandlestickChart({
+  data,
+  title,
+  description,
+  height = 360,
+  aspectRatio,
+  volume,
+  candleStyle = "filled",
+  brush = false,
+  lastPrice = true,
+  valueFormat,
+  volumeFormat = "compact",
+  xFormat,
+  upColor = DIRECTION_COLORS.up,
+  downColor = DIRECTION_COLORS.down,
+  grid = true,
+  legend = true,
+  tooltip = true,
+  loading,
+  animate = true,
+  texts: textOverrides,
+  labels: labelOverrides,
+  className
+}) {
+  const labels = resolveLabels(labelOverrides);
+  const texts = { ...DEFAULT_TEXTS, ...textOverrides };
+  const fmt = useMemo(() => resolveFormat(valueFormat), [valueFormat]);
+  const vfmt = useMemo(() => resolveFormat(volumeFormat), [volumeFormat]);
+  const showVolume = volume ?? data.some((candle) => candle.volume != null);
+  const brushExtra = brush ? BRUSH_HEIGHT + 12 : 0;
+  const frameHeight = height === "fill" ? height : height + brushExtra;
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      height: frameHeight,
+      aspectRatio,
+      labels,
+      loading,
+      empty: data.length === 0,
+      skeleton: "bars",
+      legend: legend ? /* @__PURE__ */ jsx(
+        ChartLegend,
+        {
+          items: [
+            { id: "up", name: texts.up, color: upColor, shape: "square" },
+            { id: "down", name: texts.down, color: downColor, shape: "square" }
+          ]
+        }
+      ) : null,
+      className,
+      table: /* @__PURE__ */ jsx(
+        ChartDataTable,
+        {
+          caption: description ? `${title}. ${description}` : title,
+          categoryHeader: labels.category,
+          categories: data.map((candle) => fullCategoryLabel(candle.date)),
+          columns: [
+            { id: "open", name: texts.open, values: data.map((c) => fmt(c.open)) },
+            { id: "high", name: texts.high, values: data.map((c) => fmt(c.high)) },
+            { id: "low", name: texts.low, values: data.map((c) => fmt(c.low)) },
+            { id: "close", name: texts.close, values: data.map((c) => fmt(c.close)) },
+            ...showVolume ? [
+              {
+                id: "volume",
+                name: texts.volume,
+                values: data.map((c) => c.volume == null ? "" : vfmt(c.volume))
+              }
+            ] : []
+          ]
+        }
+      ),
+      children: (width, measuredHeight) => /* @__PURE__ */ jsx(
+        CandlePlot,
+        {
+          width,
+          height: measuredHeight - brushExtra,
+          data,
+          showVolume,
+          hollow: candleStyle === "hollow",
+          brush,
+          lastPrice,
+          fmt,
+          vfmt,
+          valueFormat,
+          xFormat,
+          upColor,
+          downColor,
+          grid,
+          tooltip,
+          animate,
+          texts,
+          labels,
+          title
+        }
+      )
+    }
+  );
+}
+function CandlePlot({
+  width,
+  height,
+  data,
+  showVolume,
+  hollow,
+  brush,
+  lastPrice,
+  fmt,
+  vfmt,
+  valueFormat,
+  xFormat,
+  upColor,
+  downColor,
+  grid,
+  tooltip,
+  animate,
+  texts,
+  labels,
+  title
+}) {
+  const svgRef = useRef(null);
+  const [active, setActive] = useState(null);
+  const [range, setRange] = useState([0, Math.max(0, data.length - 1)]);
+  useEffect(() => setRange([0, Math.max(0, data.length - 1)]), [data.length]);
+  const [from, to] = range;
+  const view = useMemo(() => data.slice(from, to + 1), [data, from, to]);
+  const zoomed = from > 0 || to < data.length - 1;
+  const narrow = width < 440;
+  const tagRoom = lastPrice && !narrow ? 56 : 12;
+  const innerHeight = height - MARGIN.top - MARGIN.bottom;
+  const priceHeight = showVolume ? Math.round((innerHeight - VOLUME_GAP) * 0.76) : innerHeight;
+  const volumeTop = priceHeight + VOLUME_GAP;
+  const volumeHeight = innerHeight - volumeTop;
+  const model = useMemo(() => {
+    const lows = view.map((c) => c.low);
+    const highs = view.map((c) => c.high);
+    const lo = Math.min(...lows);
+    const hi = Math.max(...highs);
+    const pad = (hi - lo || Math.abs(hi) || 1) * 0.06;
+    const y2 = linearScale({
+      domain: [lo - pad, hi + pad],
+      range: [priceHeight, 0],
+      tickCount: Math.max(3, Math.round(priceHeight / 54))
+    });
+    const axisFormat = resolveAxisFormat(valueFormat);
+    const yTicks2 = y2.ticks().map((tick) => ({ key: tick, position: y2.map(tick), label: axisFormat(tick) }));
+    const left2 = Math.max(...yTicks2.map((tick) => estimateTextWidth(tick.label)), 16) + 18;
+    const innerWidth2 = Math.max(60, width - left2 - tagRoom);
+    const axis2 = buildCategoryAxis(
+      view.map((c) => c.date),
+      innerWidth2,
+      { mode: "band", format: xFormat, paddingInner: 0.3 }
+    );
+    const maxVolume2 = Math.max(0, ...view.map((c) => c.volume ?? 0));
+    const vy2 = linearScale({ domain: [0, maxVolume2 || 1], range: [volumeHeight, 0], nice: false });
+    return { y: y2, yTicks: yTicks2, left: left2, innerWidth: innerWidth2, axis: axis2, vy: vy2, maxVolume: maxVolume2 };
+  }, [view, priceHeight, volumeHeight, valueFormat, width, tagRoom, xFormat]);
+  const { y, yTicks, left, innerWidth, axis, vy, maxVolume } = model;
+  const candleWidth = Math.max(2, Math.min(22, axis.bandwidth));
+  useEntryAnimation(
+    svgRef,
+    (root) => {
+      const list = root.querySelectorAll("[data-bar]");
+      const per = Math.min(14, 600 / Math.max(1, list.length));
+      list.forEach((bar, i) => {
+        bar.animate(
+          [
+            { transform: "scaleY(0.2)", opacity: 0 },
+            { transform: "scaleY(1)", opacity: 1 }
+          ],
+          {
+            duration: 480,
+            delay: i * per,
+            easing: EASE_OUT,
+            fill: "backwards"
+          }
+        );
+      });
+      for (const node of root.querySelectorAll("[data-fade]")) fadeIn(node, 360, 500);
+    },
+    { disabled: !animate, replayKey: data }
+  );
+  useEffect(
+    () => setActive((current2) => current2 != null && current2 >= view.length ? null : current2),
+    [view.length]
+  );
+  const colorOf = (c) => c.close >= c.open ? upColor : downColor;
+  const change = (c) => c.open ? (c.close - c.open) / Math.abs(c.open) : 0;
+  const signedPercent = (c) => `${c.close > c.open ? "+" : ""}${formatPercent(change(c))}`;
+  const current = active != null ? view[active] : void 0;
+  const last = view[view.length - 1];
+  const dateLabel = (c) => fullCategoryLabel(c.date);
+  const valueText = current ? `${dateLabel(current)}. ${texts.open} ${fmt(current.open)}, ${texts.high} ${fmt(current.high)}, ${texts.low} ${fmt(current.low)}, ${texts.close} ${fmt(current.close)}, ${texts.change} ${signedPercent(current)}${current.volume != null ? `, ${texts.volume} ${vfmt(current.volume)}` : ""}` : labels.explore;
+  const brushSeries = useMemo(
+    () => [{ id: "close", color: "var(--accent-word)", data: data.map((c) => c.close) }],
+    [data]
+  );
+  const lastTone = last ? colorOf(last) : upColor;
+  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},${MARGIN.top})`, children: [
+          grid ? /* @__PURE__ */ jsx(GridLines, { ticks: yTicks, direction: "horizontal", length: innerWidth }) : null,
+          /* @__PURE__ */ jsx(AxisLeft, { ticks: yTicks, offset: 0 }),
+          /* @__PURE__ */ jsx(AxisBottom, { ticks: axis.ticks, offset: innerHeight }),
+          showVolume ? /* @__PURE__ */ jsxs("g", { transform: `translate(0,${volumeTop})`, children: [
+            /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: 0,
+                x2: innerWidth,
+                y1: volumeHeight,
+                y2: volumeHeight,
+                shapeRendering: "crispEdges",
+                style: { stroke: "var(--line-strong)" }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: -10,
+                y: 4,
+                dy: "0.34em",
+                textAnchor: "end",
+                className: "fill-ink-3 font-medium text-[10.5px] tabular-nums",
+                children: vfmt(maxVolume)
+              }
+            ),
+            view.map((c, i) => {
+              if (c.volume == null) return null;
+              const h = Math.max(1, volumeHeight - vy.map(c.volume));
+              return /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  "data-bar": "",
+                  x: axis.positions[i] - candleWidth / 2,
+                  y: volumeHeight - h,
+                  width: candleWidth,
+                  height: h,
+                  rx: Math.min(2.5, candleWidth / 3),
+                  style: {
+                    fill: colorOf(c),
+                    fillOpacity: active === i ? 0.85 : 0.42,
+                    transformBox: "fill-box",
+                    transformOrigin: "center bottom"
+                  }
+                },
+                i
+              );
+            })
+          ] }) : null,
+          active != null ? /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: axis.positions[active] - axis.step / 2,
+              y: 0,
+              width: axis.step,
+              height: innerHeight,
+              style: { fill: "var(--chart-grid)" }
+            }
+          ) : null,
+          view.map((c, i) => {
+            const top = y.map(Math.max(c.open, c.close));
+            const bottom = y.map(Math.min(c.open, c.close));
+            return /* @__PURE__ */ jsx(
+              CandleMark,
+              {
+                x: axis.positions[i],
+                width: candleWidth,
+                wickTop: y.map(c.high),
+                wickBottom: y.map(c.low),
+                bodyTop: top,
+                bodyHeight: Math.max(1.5, bottom - top),
+                color: colorOf(c),
+                hollow: hollow && c.close >= c.open,
+                active: active === i,
+                muted: active != null && active !== i
+              },
+              i
+            );
+          }),
+          lastPrice && last ? /* @__PURE__ */ jsxs("g", { "data-fade": "", className: "pointer-events-none", children: [
+            /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: 0,
+                x2: innerWidth,
+                y1: y.map(last.close),
+                y2: y.map(last.close),
+                strokeDasharray: "4 4",
+                shapeRendering: "crispEdges",
+                style: { stroke: lastTone, strokeOpacity: 0.7 }
+              }
+            ),
+            !narrow ? /* @__PURE__ */ jsxs("g", { transform: `translate(${innerWidth + 4},${y.map(last.close)})`, children: [
+              /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  x: 0,
+                  y: -9,
+                  width: tagRoom - 6,
+                  height: 18,
+                  rx: 6,
+                  style: { fill: lastTone }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "text",
+                {
+                  x: (tagRoom - 6) / 2,
+                  y: 0,
+                  dy: "0.34em",
+                  textAnchor: "middle",
+                  className: "font-bold text-[10.5px] tabular-nums",
+                  style: { fill: "var(--surface)" },
+                  children: fmt(last.close)
+                }
+              )
+            ] }) : null
+          ] }) : null
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PlotOverlay,
+      {
+        left,
+        top: MARGIN.top,
+        width: innerWidth,
+        height: innerHeight,
+        label: labels.explore,
+        count: view.length,
+        active,
+        valueText,
+        onActiveChange: setActive,
+        indexAt: ({ x }) => view.length ? axis.indexAt(x) : null
+      }
+    ),
+    zoomed ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setRange([0, data.length - 1]),
+        className: "absolute top-0 right-0 z-10 cursor-pointer rounded-button border-divider bg-surface-control px-2.5 py-1 font-semibold text-[11px] text-ink-2 hover:bg-surface-2",
+        children: labels.resetZoom
+      }
+    ) : null,
+    tooltip && current && active != null ? /* @__PURE__ */ jsx(
+      ChartTooltip,
+      {
+        x: left + axis.positions[active],
+        y: MARGIN.top + y.map(current.high),
+        containerWidth: width,
+        title: dateLabel(current),
+        rows: [
+          {
+            id: "open",
+            name: texts.open,
+            value: fmt(current.open),
+            color: "var(--ink-3)",
+            shape: "dot"
+          },
+          {
+            id: "high",
+            name: texts.high,
+            value: fmt(current.high),
+            color: "var(--ink-3)",
+            shape: "dot"
+          },
+          {
+            id: "low",
+            name: texts.low,
+            value: fmt(current.low),
+            color: "var(--ink-3)",
+            shape: "dot"
+          },
+          {
+            id: "close",
+            name: texts.close,
+            value: fmt(current.close),
+            color: colorOf(current),
+            shape: "square"
+          },
+          {
+            id: "change",
+            name: texts.change,
+            value: signedPercent(current),
+            color: "transparent",
+            emphasis: true
+          },
+          ...current.volume != null ? [
+            {
+              id: "volume",
+              name: texts.volume,
+              value: vfmt(current.volume),
+              color: "var(--ink-3)",
+              shape: "dot"
+            }
+          ] : []
+        ]
+      }
+    ) : null,
+    brush && data.length > 3 ? /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(
+      ChartBrush,
+      {
+        count: data.length,
+        series: brushSeries,
+        range,
+        onChange: setRange,
+        width,
+        left,
+        right: tagRoom,
+        height: BRUSH_HEIGHT,
+        label: labels.brush,
+        valueText: `${fullCategoryLabel(data[from].date)} \u2013 ${fullCategoryLabel(data[to].date)}`
+      }
+    ) }) : null
+  ] });
+}
+export {
+  CandlestickChart
+};

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

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

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

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

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

@@ -0,0 +1,72 @@
+import { type ReactNode } from "react";
+import { type LegendItem } from "../core/legend.js";
+import { type Extent } from "./grid-math.js";
+export interface ChartGridPanel {
+    id: string;
+    /** Heading of the panel, e.g. the barber. */
+    title: string;
+    /** Short line under the title, e.g. a total. */
+    subtitle?: ReactNode;
+    /** Range of this panel on the value axis; feeds the shared value domain. */
+    extent?: Extent;
+    /** Range on the x axis; feeds the shared x domain. */
+    xExtent?: Extent;
+}
+export interface ChartGridContext {
+    index: number;
+    columns: number;
+    /** Panel is narrow: hide secondary decoration (titles, extra ticks). */
+    compact: boolean;
+    /** Pixel height the chart of the panel should use. */
+    height: number;
+    /** Ticks the value axis can afford at that height (3 to 6); also what the shared domain was rounded for. */
+    tickCount: number;
+    /** Pass to the charts' `syncId` when `syncHover` is on: they then share one real crosshair and tooltip. */
+    syncId?: string;
+    /** Shared value-axis domain, or undefined when `sharedValueDomain` is off. */
+    valueDomain?: readonly [number, number];
+    /** Shared x-axis domain, or undefined when `sharedXDomain` is off. */
+    xDomain?: readonly [number, number];
+    /** Series id hovered in the shared legend. */
+    highlight: string | null;
+}
+export interface ChartGridProps {
+    /** Accessible name of the whole grid. */
+    title: string;
+    panels: readonly ChartGridPanel[];
+    /** Renders the chart of one panel. Fill the panel: pass `ctx.height` and the shared domain on. */
+    children: (panel: ChartGridPanel, context: ChartGridContext) => ReactNode;
+    /** Narrowest a panel may get before the grid drops a column (container-based). */
+    minPanelWidth?: number;
+    maxColumns?: number;
+    gap?: number;
+    /** Height of every chart in pixels. Default: derived from the panel width (about 1.4:1), at least 180. */
+    panelHeight?: number;
+    /** Width / height ratio for the charts; wins over `panelHeight`. */
+    aspectRatio?: number;
+    /** One value domain for every panel (default true). */
+    sharedValueDomain?: boolean;
+    /** One x domain for every panel. */
+    sharedXDomain?: boolean;
+    /** Bars: keep zero inside the shared domain. */
+    includeZero?: boolean;
+    /** One legend for all panels (their own legends should be off). */
+    legend?: readonly LegendItem[];
+    /**
+     * Hovering a panel shows the real crosshair and tooltip in every other panel.
+     * The charts must receive `context.syncId` as their `syncId`; panels only
+     * react when the hovered category exists in them.
+     */
+    syncHover?: boolean;
+    /** Draw a border around every panel. */
+    bordered?: boolean;
+    /** Text when there are no panels. */
+    emptyLabel?: string;
+    className?: string;
+}
+/**
+ * Small multiples (trellis): the same chart repeated per category over shared
+ * scales, so panels compare at a glance. Columns follow the width of the
+ * container, never the viewport.
+ */
+export declare function ChartGrid({ title, panels, children, minPanelWidth, maxColumns, gap, panelHeight, aspectRatio, sharedValueDomain, sharedXDomain, includeZero, legend, syncHover, bordered, emptyLabel, className, }: ChartGridProps): import("react").JSX.Element;

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

@@ -0,0 +1,114 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useMemo, useState } from "react";
+import { cn } from "../../utils/cn.js";
+import { ChartSyncProvider } from "../core/cartesian/sync.js";
+import { ChartEmpty } from "../core/chart-states.js";
+import { ChartLegend } from "../core/legend.js";
+import { useChartWidth } from "../core/use-chart-size.js";
+import { gridColumns, panelWidth, sharedDomain } from "./grid-math.js";
+const COMPACT_BELOW = 260;
+function ChartGrid({
+  title,
+  panels,
+  children,
+  minPanelWidth = 220,
+  maxColumns = 6,
+  gap = 16,
+  panelHeight,
+  aspectRatio,
+  sharedValueDomain = true,
+  sharedXDomain = false,
+  includeZero = false,
+  legend,
+  syncHover = false,
+  bordered = false,
+  emptyLabel = "No data",
+  className
+}) {
+  const [ref, width] = useChartWidth();
+  const uid = useId();
+  const [highlight, setHighlight] = useState(null);
+  const columns = gridColumns(width, panels.length, { minPanelWidth, maxColumns, gap });
+  const eachWidth = panelWidth(width, columns, gap);
+  const chartHeight = Math.max(
+    90,
+    Math.round(
+      aspectRatio ? eachWidth / aspectRatio : panelHeight ?? Math.max(180, eachWidth / 1.4)
+    )
+  );
+  const tickCount = Math.min(6, Math.max(3, Math.round((chartHeight - 60) / 42)));
+  const valueDomain = useMemo(
+    () => sharedValueDomain ? sharedDomain(
+      panels.map((panel) => panel.extent),
+      { includeZero, tickCount }
+    ) ?? void 0 : void 0,
+    [panels, sharedValueDomain, includeZero, tickCount]
+  );
+  const xDomain = useMemo(
+    () => sharedXDomain ? sharedDomain(
+      panels.map((panel) => panel.xExtent),
+      { nice: false }
+    ) ?? void 0 : void 0,
+    [panels, sharedXDomain]
+  );
+  return /* @__PURE__ */ jsx(ChartSyncProvider, { children: /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ref,
+      "aria-label": title,
+      className: cn("@container/grid flex w-full min-w-0 flex-col gap-3", className),
+      children: [
+        legend && legend.length > 0 ? /* @__PURE__ */ jsx(ChartLegend, { items: legend, onHighlight: setHighlight, className: "px-1" }) : null,
+        panels.length === 0 ? /* @__PURE__ */ jsx(ChartEmpty, { height: chartHeight, label: emptyLabel }) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "grid",
+            style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`, gap },
+            children: panels.map((panel, index) => {
+              const headingId = `${uid}-${panel.id}`;
+              return /* @__PURE__ */ jsxs(
+                "article",
+                {
+                  "aria-labelledby": headingId,
+                  className: cn(
+                    "flex min-w-0 flex-col gap-1.5",
+                    bordered && "rounded-tile border-divider p-3"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxs("header", { className: "flex min-w-0 items-baseline justify-between gap-2", children: [
+                      /* @__PURE__ */ jsx(
+                        "h3",
+                        {
+                          id: headingId,
+                          className: "m-0 truncate font-bold text-[12.5px] text-ink-2 leading-tight",
+                          children: panel.title
+                        }
+                      ),
+                      panel.subtitle ? /* @__PURE__ */ jsx("span", { className: "shrink-0 font-semibold text-[11.5px] text-ink-3 tabular-nums", children: panel.subtitle }) : null
+                    ] }),
+                    /* @__PURE__ */ jsx("div", { className: "relative min-w-0", children: children(panel, {
+                      index,
+                      columns,
+                      compact: eachWidth < COMPACT_BELOW,
+                      height: chartHeight,
+                      tickCount,
+                      syncId: syncHover ? `${uid}-sync` : void 0,
+                      valueDomain,
+                      xDomain,
+                      highlight
+                    }) })
+                  ]
+                },
+                panel.id
+              );
+            })
+          }
+        )
+      ]
+    }
+  ) });
+}
+export {
+  ChartGrid
+};