@gridui/chart 0.0.0-stage → 1.0.0

package/dist/index.js

@@ -0,0 +1,1276 @@
+// src/shared/context.ts
+import { createContext, useContext } from "react";
+var ChartContext = createContext(null);
+var useChart = () => {
+  const state = useContext(ChartContext);
+  if (!state) {
+    throw new Error("Chart parts require a LineChart or BarChart.");
+  }
+  return state;
+};
+var PlotContext = createContext(null);
+var usePlot = () => {
+  const state = useContext(PlotContext);
+  if (!state) {
+    throw new Error("Chart drawing parts require a ChartPlot.");
+  }
+  return state;
+};
+
+// src/shared/model.ts
+var numericX = (value, scale) => {
+  const parsed = scale === "time" && typeof value === "string" ? Date.parse(value) : value;
+  const number = value instanceof Date ? value.getTime() : parsed;
+  if (typeof number !== "number" || !Number.isFinite(number)) {
+    throw new RangeError("Continuous chart coordinates must be finite numbers or valid dates.");
+  }
+  return number;
+};
+var prepareData = (data, scale) => {
+  const ids = /* @__PURE__ */ new Set();
+  for (const datum of data) {
+    if (!datum.id || ids.has(datum.id)) {
+      throw new Error("Chart datum IDs must be nonempty and unique.");
+    }
+    ids.add(datum.id);
+    if (datum.y !== null && !Number.isFinite(datum.y)) {
+      throw new RangeError("Chart values must be finite numbers or null.");
+    }
+    if (scale !== "category") {
+      numericX(datum.x, scale);
+    }
+  }
+  return scale === "category" ? data : [...data].sort((a, b) => {
+    return numericX(a.x, scale) - numericX(b.x, scale);
+  });
+};
+var valueDomain = (data, explicit) => {
+  let min = 0;
+  let max = 0;
+  for (const datum of data) {
+    if (datum.y !== null) {
+      min = Math.min(min, datum.y);
+      max = Math.max(max, datum.y);
+    }
+  }
+  if (explicit) {
+    if (!explicit.every(Number.isFinite) || explicit[0] >= explicit[1] || explicit[0] > min || explicit[1] < max) {
+      throw new RangeError("Chart domains must be increasing, finite, and include zero and all values.");
+    }
+    return explicit;
+  }
+  return min === max ? [
+    0,
+    1
+  ] : [
+    min,
+    max
+  ];
+};
+var valueTicks = (domain) => {
+  return [
+    .../* @__PURE__ */ new Set([
+      0,
+      ...Array.from({ length: 5 }, (_, index) => {
+        return domain[0] + (domain[1] - domain[0]) * index / 4;
+      })
+    ])
+  ].sort((a, b) => {
+    return a - b;
+  });
+};
+var linePath = (data, x, y) => {
+  let connected = false;
+  return data.map((datum) => {
+    if (datum.y === null) {
+      connected = false;
+      return "";
+    }
+    const command = connected ? "L" : "M";
+    connected = true;
+    return `${command}${x(datum)},${y(datum.y)}`;
+  }).join(" ");
+};
+var datumLabel = (datum) => {
+  const x = datum.x instanceof Date ? datum.x.toISOString() : String(datum.x);
+  return `${x}: ${datum.y === null ? "\u2014" : String(datum.y)}`;
+};
+
+// src/shared/chart-root.tsx
+import { cn } from "@gridui/style-utils";
+import { useEffect, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var ChartRoot = (props) => {
+  const {
+    label,
+    data,
+    children,
+    height = 300,
+    yDomain,
+    selectedId,
+    defaultSelectedId,
+    onSelectionChange,
+    formatDatum = datumLabel,
+    kind,
+    horizontal,
+    scale,
+    className,
+    ...rest
+  } = props;
+  const [
+    localSelection,
+    setLocalSelection
+  ] = useState(defaultSelectedId ?? null);
+  const [
+    hoveredId,
+    setHoveredId
+  ] = useState(null);
+  const [
+    focusedId,
+    setFocusedId
+  ] = useState(null);
+  const { ordered, domain, availableIds } = useMemo(() => {
+    const prepared = prepareData(data, scale);
+    return {
+      ordered: prepared,
+      domain: valueDomain(prepared, yDomain),
+      availableIds: new Set(prepared.filter((datum) => {
+        return datum.y !== null;
+      }).map((datum) => {
+        return datum.id;
+      }))
+    };
+  }, [
+    data,
+    scale,
+    yDomain
+  ]);
+  useEffect(() => {
+    setHoveredId((current) => {
+      return current !== null && availableIds.has(current) ? current : null;
+    });
+    setFocusedId((current) => {
+      return current !== null && availableIds.has(current) ? current : null;
+    });
+  }, [availableIds]);
+  const activeId = [
+    hoveredId,
+    focusedId
+  ].find((id) => {
+    return id !== null && availableIds.has(id);
+  }) ?? null;
+  const activate = (id, source) => {
+    if (source === "pointer") {
+      setHoveredId(id);
+    } else {
+      setFocusedId(id);
+    }
+  };
+  const dismiss = () => {
+    setHoveredId(null);
+    setFocusedId(null);
+  };
+  if (!Number.isFinite(height) || height < 160) {
+    throw new RangeError("Chart height must be finite and at least 160 pixels.");
+  }
+  const candidate = selectedId === void 0 ? localSelection : selectedId;
+  const selection = candidate !== null && availableIds.has(candidate) ? candidate : null;
+  const select = (id) => {
+    if (selectedId === void 0) {
+      setLocalSelection(id);
+    }
+    onSelectionChange?.(id);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      role: "group",
+      "aria-label": label,
+      className: cn("gridui-chart", className),
+      children: /* @__PURE__ */ jsx(
+        ChartContext,
+        {
+          value: {
+            data: ordered,
+            kind,
+            horizontal,
+            scale,
+            domain,
+            label,
+            height,
+            selectedId: selection,
+            activeId,
+            interactive: onSelectionChange !== void 0 || defaultSelectedId !== void 0,
+            select,
+            activate,
+            dismiss,
+            formatDatum
+          },
+          children
+        }
+      )
+    }
+  );
+};
+
+// src/bar-chart/bar-chart.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var BarChart = (props) => {
+  const { orientation = "vertical", ...restProps } = props;
+  return /* @__PURE__ */ jsx2(
+    ChartRoot,
+    {
+      ...restProps,
+      kind: "bar",
+      horizontal: orientation === "horizontal",
+      scale: "category"
+    }
+  );
+};
+
+// src/shared/datum-mark.tsx
+import { isComposingKeyEvent } from "@gridui/interaction";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var DatumMark = (props) => {
+  const { datum, children } = props;
+  const chart = useChart();
+  const selected = chart.selectedId === datum.id;
+  return /* @__PURE__ */ jsx3(
+    "g",
+    {
+      className: "gridui-chart-mark",
+      "data-selected": selected || void 0,
+      role: chart.interactive ? "button" : void 0,
+      tabIndex: chart.interactive ? 0 : void 0,
+      "aria-label": chart.formatDatum(datum),
+      "aria-pressed": chart.interactive ? selected : void 0,
+      onPointerEnter: () => {
+        return void chart.activate(datum.id, "pointer");
+      },
+      onPointerLeave: () => {
+        return void chart.activate(null, "pointer");
+      },
+      onFocus: () => {
+        return void chart.activate(datum.id, "focus");
+      },
+      onBlur: () => {
+        return void chart.activate(null, "focus");
+      },
+      onClick: chart.interactive ? () => {
+        return void chart.select(selected ? null : datum.id);
+      } : void 0,
+      onKeyDown: chart.interactive ? (event) => {
+        if (isComposingKeyEvent(event.nativeEvent)) {
+          return;
+        }
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          if (!event.repeat) {
+            chart.select(selected ? null : datum.id);
+          }
+        } else if (event.key === "Escape") {
+          chart.dismiss();
+          chart.select(null);
+        }
+      } : void 0,
+      children
+    }
+  );
+};
+
+// src/bar-series/bar-series.tsx
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+var BarSeries = (props) => {
+  const { color = "var(--gridui-chart-series)", selectedColor = "var(--gridui-chart-selected)", width, widthRatio = 0.7, gap = 4, opacity = 1, inactiveOpacity = 0.45 } = props;
+  const chart = useChart();
+  const plot = usePlot();
+  if (chart.kind !== "bar") {
+    throw new Error("BarSeries requires BarChart.");
+  }
+  const invalidWidth = width !== void 0 && (!Number.isFinite(width) || width <= 0);
+  if (!Number.isFinite(widthRatio) || widthRatio <= 0 || widthRatio > 1 || !Number.isFinite(gap) || gap < 0 || invalidWidth) {
+    throw new RangeError("Bar width must be positive, its ratio at most one, and gap nonnegative.");
+  }
+  const thickness = Math.min(width ?? plot.band * widthRatio, Math.max(Math.min(1, plot.band), plot.band - gap));
+  const baseline = plot.value(0);
+  return /* @__PURE__ */ jsx4("g", { children: chart.data.map((datum) => {
+    if (datum.y === null) {
+      return null;
+    }
+    const at = plot.category(datum);
+    const end = plot.value(datum.y);
+    const selected = chart.selectedId === datum.id;
+    return /* @__PURE__ */ jsxs(
+      DatumMark,
+      {
+        datum,
+        children: [
+          /* @__PURE__ */ jsx4(
+            "rect",
+            {
+              className: "gridui-chart-hit",
+              x: chart.horizontal ? plot.left : at - plot.band / 2,
+              y: chart.horizontal ? at - plot.band / 2 : plot.top,
+              width: chart.horizontal ? plot.right - plot.left : plot.band,
+              height: chart.horizontal ? plot.band : plot.bottom - plot.top,
+              fill: "transparent"
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            "rect",
+            {
+              x: chart.horizontal ? Math.min(end, baseline) : at - thickness / 2,
+              y: chart.horizontal ? at - thickness / 2 : Math.min(end, baseline),
+              width: chart.horizontal ? Math.abs(end - baseline) : thickness,
+              height: chart.horizontal ? thickness : Math.abs(end - baseline),
+              fill: selected ? selectedColor : color,
+              opacity: chart.selectedId && !selected ? inactiveOpacity : opacity,
+              pointerEvents: "none"
+            }
+          )
+        ]
+      },
+      datum.id
+    );
+  }) });
+};
+
+// src/chart-cursor/chart-cursor.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var ChartCursor = (props) => {
+  const { color = "var(--gridui-chart-axis)", strokeWidth = 1, dashArray = "3 3" } = props;
+  const chart = useChart();
+  const plot = usePlot();
+  const datum = chart.data.find((item) => {
+    return item.id === (chart.activeId ?? chart.selectedId);
+  });
+  if (!datum || datum.y === null) {
+    return null;
+  }
+  const at = plot.category(datum);
+  return /* @__PURE__ */ jsx5(
+    "line",
+    {
+      "aria-hidden": "true",
+      pointerEvents: "none",
+      x1: chart.horizontal ? plot.left : at,
+      x2: chart.horizontal ? plot.right : at,
+      y1: chart.horizontal ? at : plot.top,
+      y2: chart.horizontal ? at : plot.bottom,
+      stroke: color,
+      strokeWidth,
+      strokeDasharray: dashArray
+    }
+  );
+};
+
+// src/shared/ticks.ts
+var axisTicks = (chart, plot, axis, options) => {
+  const { tickCount, tickValues } = options;
+  if (tickCount !== void 0 && (!Number.isSafeInteger(tickCount) || tickCount < 2)) {
+    throw new RangeError("Chart tickCount must be an integer of at least two.");
+  }
+  const dataAxis = axis === "x" !== chart.horizontal;
+  const first = chart.data[0];
+  const last = chart.data.at(-1);
+  if (dataAxis && (!first || !last)) {
+    return [];
+  }
+  if (dataAxis && chart.scale === "category") {
+    const requested = tickValues && new Set(tickValues.map((value) => {
+      return value instanceof Date ? value.getTime() : value;
+    }));
+    const candidates = chart.data.filter((datum) => {
+      return !requested || requested.has(datum.x instanceof Date ? datum.x.getTime() : datum.x);
+    });
+    const indices = tickCount !== void 0 && !requested && candidates.length > tickCount ? new Set(Array.from({ length: tickCount }, (_, index) => {
+      return Math.round(index * (candidates.length - 1) / (tickCount - 1));
+    })) : null;
+    return candidates.flatMap((datum, index) => {
+      return indices && !indices.has(index) ? [] : [
+        {
+          key: datum.id,
+          value: datum.x,
+          at: plot.category(datum)
+        }
+      ];
+    });
+  }
+  const low = dataAxis && first ? numericX(first.x, chart.scale) : chart.domain[0];
+  const high = dataAxis && last ? numericX(last.x, chart.scale) : chart.domain[1];
+  const count = tickCount ?? 5;
+  const generated = low === high ? [low] : Array.from({ length: count }, (_, index) => {
+    return low + (high - low) * index / (count - 1);
+  });
+  const defaults = dataAxis ? chart.data.map((datum) => {
+    return datum.x;
+  }) : valueTicks(chart.domain);
+  const values = tickValues ?? (tickCount !== void 0 ? generated : defaults);
+  const seen = /* @__PURE__ */ new Set();
+  return values.flatMap((value) => {
+    const number = numericX(value, dataAxis ? chart.scale : "linear");
+    if (number < low || number > high || seen.has(number)) {
+      return [];
+    }
+    seen.add(number);
+    const formattedValue = dataAxis && chart.scale === "time" ? new Date(number) : number;
+    return [
+      {
+        key: String(number),
+        value: formattedValue,
+        at: dataAxis ? plot.category({
+          id: "",
+          x: formattedValue,
+          y: null
+        }) : plot.value(number)
+      }
+    ];
+  }).sort((a, b) => {
+    return a.at - b.at;
+  });
+};
+
+// src/chart-grid/chart-grid.tsx
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+var ChartGrid = (props) => {
+  const { xTicks = {}, yTicks = {}, horizontal = true, vertical = false, color = "var(--gridui-chart-grid)", strokeWidth = 1, dashArray } = props;
+  const chart = useChart();
+  const plot = usePlot();
+  const x = axisTicks(chart, plot, "x", xTicks);
+  const y = axisTicks(chart, plot, "y", yTicks);
+  return /* @__PURE__ */ jsxs2(
+    "g",
+    {
+      className: "gridui-chart-grid",
+      "aria-hidden": "true",
+      pointerEvents: "none",
+      stroke: color,
+      strokeWidth,
+      strokeDasharray: dashArray,
+      children: [
+        horizontal && y.map(({ at }, index) => {
+          return /* @__PURE__ */ jsx6(
+            "line",
+            {
+              x1: plot.left,
+              x2: plot.right,
+              y1: at,
+              y2: at
+            },
+            `h-${index}`
+          );
+        }),
+        vertical && x.map(({ at }, index) => {
+          return /* @__PURE__ */ jsx6(
+            "line",
+            {
+              x1: at,
+              x2: at,
+              y1: plot.top,
+              y2: plot.bottom
+            },
+            `v-${index}`
+          );
+        })
+      ]
+    }
+  );
+};
+
+// src/chart-plot/chart-plot.tsx
+import { useEffect as useEffect2, useId, useMemo as useMemo2, useRef, useState as useState2 } from "react";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var ChartPlot = (props) => {
+  const { children, background = "var(--gridui-chart-background)", padding } = props;
+  const chart = useChart();
+  const ref = useRef(null);
+  const [
+    width,
+    setWidth
+  ] = useState2(640);
+  const descriptionId = useId();
+  useEffect2(() => {
+    const element = ref.current;
+    if (!element) {
+      return;
+    }
+    const observer = new ResizeObserver((entries) => {
+      const measured = entries[0]?.contentRect.width;
+      if (measured && measured > 0) {
+        setWidth(measured);
+      }
+    });
+    observer.observe(element);
+    return () => {
+      return void observer.disconnect();
+    };
+  }, []);
+  const inset = {
+    left: padding?.left ?? (chart.horizontal ? 88 : 56),
+    right: padding?.right ?? 24,
+    top: padding?.top ?? 28,
+    bottom: padding?.bottom ?? 48
+  };
+  if (Object.values(inset).some((value) => {
+    return !Number.isFinite(value) || value < 0;
+  })) {
+    throw new RangeError("Chart padding must be finite and nonnegative.");
+  }
+  const left = Math.min(width, inset.left);
+  const right = Math.max(left, width - inset.right);
+  const top = Math.min(chart.height, inset.top);
+  const bottom = Math.max(top, chart.height - inset.bottom);
+  const drawable = right > left && bottom > top;
+  const plot = useMemo2(() => {
+    const extent = Math.max(1, chart.horizontal ? bottom - top : right - left);
+    const start = chart.horizontal ? top : left;
+    const count = chart.data.length;
+    const band = extent / Math.max(1, count);
+    const first = chart.data[0];
+    const last = chart.data[count - 1];
+    const low = first && chart.scale !== "category" ? numericX(first.x, chart.scale) : 0;
+    const high = last && chart.scale !== "category" ? numericX(last.x, chart.scale) : 0;
+    const indices = new Map(chart.data.map((datum, index) => {
+      return [
+        datum.id,
+        index
+      ];
+    }));
+    const category = (datum) => {
+      const index = indices.get(datum.id) ?? 0;
+      if (chart.scale !== "category") {
+        return start + (high === low ? extent / 2 : (numericX(datum.x, chart.scale) - low) / (high - low) * extent);
+      }
+      const linePosition = count < 2 ? extent / 2 : index * extent / (count - 1);
+      return start + (chart.kind === "bar" ? (index + 0.5) * band : linePosition);
+    };
+    const value = (number) => {
+      const ratio = (number - chart.domain[0]) / (chart.domain[1] - chart.domain[0]);
+      return chart.horizontal ? left + ratio * Math.max(1, right - left) : bottom - ratio * Math.max(1, bottom - top);
+    };
+    return {
+      width,
+      height: chart.height,
+      left,
+      right,
+      top,
+      bottom,
+      band,
+      category,
+      value
+    };
+  }, [
+    chart.data,
+    chart.domain,
+    chart.height,
+    chart.horizontal,
+    chart.kind,
+    chart.scale,
+    bottom,
+    left,
+    right,
+    top,
+    width
+  ]);
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      ref,
+      className: "gridui-chart-plot",
+      children: /* @__PURE__ */ jsxs3(
+        "svg",
+        {
+          width: "100%",
+          height: chart.height,
+          viewBox: `0 0 ${width} ${chart.height}`,
+          role: chart.interactive ? "group" : "img",
+          "aria-label": chart.label,
+          "aria-describedby": descriptionId,
+          children: [
+            /* @__PURE__ */ jsx7(
+              "desc",
+              {
+                id: descriptionId,
+                children: chart.data.map(chart.formatDatum).join("; ")
+              }
+            ),
+            /* @__PURE__ */ jsx7(
+              "rect",
+              {
+                x: left,
+                y: top,
+                width: Math.max(0, right - left),
+                height: Math.max(0, bottom - top),
+                fill: background,
+                pointerEvents: "none"
+              }
+            ),
+            /* @__PURE__ */ jsx7(
+              PlotContext,
+              {
+                value: plot,
+                children: drawable ? children : null
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/shared/use-measured-layout.ts
+import { useLayoutEffect, useRef as useRef2, useState as useState3 } from "react";
+var useMeasuredLayout = (calculate) => {
+  const ref = useRef2(null);
+  const [
+    result,
+    setResult
+  ] = useState3(null);
+  useLayoutEffect(() => {
+    const node = ref.current;
+    if (!node) {
+      return;
+    }
+    let disposed = false;
+    const update = () => {
+      if (disposed) {
+        return;
+      }
+      const cache = /* @__PURE__ */ new Map();
+      const value = calculate((text) => {
+        const cached = cache.get(text);
+        if (cached) {
+          return cached;
+        }
+        node.textContent = text;
+        const box = node.getBBox();
+        const bounds = {
+          x: box.x,
+          y: box.y,
+          width: box.width,
+          height: box.height
+        };
+        cache.set(text, bounds);
+        return bounds;
+      });
+      node.textContent = "M";
+      setResult({
+        calculate,
+        value
+      });
+    };
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(node);
+    const fonts = node.ownerDocument.fonts;
+    void fonts.ready.then(update);
+    fonts.addEventListener("loadingdone", update);
+    return () => {
+      disposed = true;
+      observer.disconnect();
+      fonts.removeEventListener("loadingdone", update);
+    };
+  }, [calculate]);
+  return {
+    ref,
+    layout: result?.calculate === calculate ? result.value : void 0
+  };
+};
+
+// src/chart-tooltip/layout.ts
+var PLOT_INSET = 4;
+var POINT_GAP = 12;
+var PADDING_INLINE = 10;
+var PADDING_TOP = 8;
+var PADDING_BOTTOM = 4;
+var LINE_GAP = 4;
+var MIN_LINE_HEIGHT = 18;
+var fittingGraphemeCount = (segments, start, availableWidth, measure) => {
+  let low = 1;
+  let high = segments.length - start;
+  while (low < high) {
+    const count = Math.ceil((low + high) / 2);
+    if (measure(segments.slice(start, start + count).join("")).width <= availableWidth) {
+      low = count;
+    } else {
+      high = count - 1;
+    }
+  }
+  return low;
+};
+var wrapTooltipText = (text, availableWidth, measure) => {
+  const lines = [];
+  const segmenter = new Intl.Segmenter(void 0, { granularity: "grapheme" });
+  for (const paragraph of text.split("\n")) {
+    const segments = Array.from(segmenter.segment(paragraph), (part) => {
+      return part.segment;
+    });
+    if (!segments.length) {
+      lines.push("");
+    }
+    let start = 0;
+    while (start < segments.length) {
+      let count = fittingGraphemeCount(segments, start, availableWidth, measure);
+      if (start + count < segments.length) {
+        const wordBreak = segments.slice(start, start + count).reduce((last, segment, index) => {
+          return /\s/u.test(segment) ? index : last;
+        }, -1);
+        if (wordBreak > 0) {
+          count = wordBreak + 1;
+        }
+      }
+      lines.push(segments.slice(start, start + count).join(""));
+      start += count;
+    }
+  }
+  return lines;
+};
+var calculateTooltipLayout = (text, plotWidth, measure) => {
+  if (text === null) {
+    return null;
+  }
+  const availableWidth = Math.max(1, plotWidth - 2 * (PLOT_INSET + PADDING_INLINE));
+  const lines = wrapTooltipText(text, availableWidth, measure);
+  const bounds = lines.map(measure);
+  const lineHeight = Math.max(MIN_LINE_HEIGHT, ...bounds.map((box) => {
+    return box.height + LINE_GAP;
+  }));
+  return {
+    lines: lines.map((line, index) => {
+      const box = bounds[index];
+      return {
+        text: line,
+        x: PADDING_INLINE - (box?.x ?? 0),
+        y: PADDING_TOP + index * lineHeight - (box?.y ?? 0)
+      };
+    }),
+    width: Math.max(PADDING_INLINE * 2, ...bounds.map((box) => {
+      return box.width + PADDING_INLINE * 2;
+    })),
+    height: lines.length * lineHeight + PADDING_TOP + PADDING_BOTTOM
+  };
+};
+var calculateTooltipPosition = (options) => {
+  const { datum, horizontal, plot, width, height } = options;
+  let pointX = 0;
+  let pointY = 0;
+  if (datum && datum.y !== null) {
+    if (horizontal) {
+      pointX = plot.value(datum.y);
+      pointY = plot.category(datum);
+    } else {
+      pointX = plot.category(datum);
+      pointY = plot.value(datum.y);
+    }
+  }
+  return {
+    x: Math.max(PLOT_INSET, Math.min(plot.width - width - PLOT_INSET, pointX - width / 2)),
+    y: Math.max(PLOT_INSET, Math.min(plot.height - height - PLOT_INSET, pointY - height - POINT_GAP))
+  };
+};
+
+// src/chart-tooltip/chart-tooltip.tsx
+import { useCallback } from "react";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var ChartTooltip = (props) => {
+  const { format, background = "var(--gridui-background)", color = "var(--gridui-foreground)" } = props;
+  const chart = useChart();
+  const plot = usePlot();
+  const datum = chart.data.find((item) => {
+    return item.id === chart.activeId;
+  });
+  const text = datum && datum.y !== null ? (format ?? chart.formatDatum)(datum) : null;
+  const calculate = useCallback((measure) => {
+    return calculateTooltipLayout(text, plot.width, measure);
+  }, [
+    text,
+    plot.width
+  ]);
+  const { ref, layout } = useMeasuredLayout(calculate);
+  const { x, y } = calculateTooltipPosition({
+    datum,
+    horizontal: chart.horizontal,
+    plot,
+    width: layout?.width ?? 0,
+    height: layout?.height ?? 0
+  });
+  return /* @__PURE__ */ jsxs4(
+    "g",
+    {
+      className: text === null ? void 0 : "gridui-chart-tooltip",
+      "aria-hidden": "true",
+      pointerEvents: "none",
+      fontSize: 12,
+      children: [
+        /* @__PURE__ */ jsx8(
+          "text",
+          {
+            ref,
+            visibility: "hidden"
+          }
+        ),
+        layout && /* @__PURE__ */ jsxs4(
+          "g",
+          {
+            transform: `translate(${x} ${y})`,
+            children: [
+              /* @__PURE__ */ jsx8(
+                "rect",
+                {
+                  width: layout.width,
+                  height: layout.height,
+                  fill: background,
+                  stroke: "var(--gridui-border)"
+                }
+              ),
+              /* @__PURE__ */ jsx8(
+                "text",
+                {
+                  fill: color,
+                  children: layout.lines.map((line, index) => {
+                    return /* @__PURE__ */ jsx8(
+                      "tspan",
+                      {
+                        x: line.x,
+                        y: line.y,
+                        children: line.text
+                      },
+                      index
+                    );
+                  })
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/chart-value-labels/layout.ts
+var PLOT_INSET2 = 2;
+var LABEL_GAP = 4;
+var labelsOverlap = (left, right) => {
+  return left.x < right.x + right.width + LABEL_GAP && left.x + left.width + LABEL_GAP > right.x && left.y < right.y + right.height + LABEL_GAP && left.y + left.height + LABEL_GAP > right.y;
+};
+var calculateValueLabelLayout = (options) => {
+  const { data, selectedId, horizontal, plot, visibility, position, format, offset, measure } = options;
+  const occupied = [];
+  const labels = [];
+  for (const datum of data) {
+    if (visibility === "none" || datum.y === null || visibility === "selected" && datum.id !== selectedId) {
+      continue;
+    }
+    const text = format(datum.y, datum);
+    const box = measure(text);
+    if (box.width > plot.width - PLOT_INSET2 * 2 || box.height > plot.height - PLOT_INSET2 * 2) {
+      continue;
+    }
+    const categoryPosition = plot.category(datum);
+    let valuePosition = plot.value(datum.y);
+    if (position === "center") {
+      valuePosition = (valuePosition + plot.value(0)) / 2;
+    }
+    let centerX = categoryPosition;
+    let centerY = valuePosition;
+    if (horizontal) {
+      centerX = valuePosition;
+      centerY = categoryPosition;
+    }
+    if (position === "end") {
+      if (horizontal) {
+        const direction = datum.y < 0 ? -1 : 1;
+        centerX += direction * (offset + box.width / 2);
+      } else {
+        centerY -= Math.sign(datum.y || 1) * offset;
+      }
+    }
+    const bounds = {
+      x: Math.max(PLOT_INSET2, Math.min(plot.width - box.width - PLOT_INSET2, centerX - box.width / 2)),
+      y: Math.max(PLOT_INSET2, Math.min(plot.height - box.height - PLOT_INSET2, centerY - box.height / 2)),
+      width: box.width,
+      height: box.height
+    };
+    if (occupied.some((other) => {
+      return labelsOverlap(bounds, other);
+    })) {
+      continue;
+    }
+    occupied.push(bounds);
+    labels.push({
+      id: datum.id,
+      text,
+      x: bounds.x - box.x,
+      y: bounds.y - box.y
+    });
+  }
+  return labels;
+};
+
+// src/chart-value-labels/chart-value-labels.tsx
+import { useCallback as useCallback2 } from "react";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var ChartValueLabels = (props) => {
+  const { visibility = "selected", position = "end", format = String, color = "var(--gridui-chart-value)", fontSize = 12, offset = 12 } = props;
+  const chart = useChart();
+  const plot = usePlot();
+  const calculate = useCallback2((measure) => {
+    return calculateValueLabelLayout({
+      data: chart.data,
+      selectedId: chart.selectedId,
+      horizontal: chart.horizontal,
+      plot,
+      visibility,
+      position,
+      format,
+      offset,
+      measure
+    });
+  }, [
+    chart,
+    plot,
+    visibility,
+    position,
+    format,
+    offset
+  ]);
+  const { ref, layout } = useMeasuredLayout(calculate);
+  return /* @__PURE__ */ jsxs5(
+    "g",
+    {
+      className: "gridui-chart-values",
+      "aria-hidden": "true",
+      pointerEvents: "none",
+      fill: color,
+      fontSize,
+      children: [
+        /* @__PURE__ */ jsx9(
+          "text",
+          {
+            ref,
+            visibility: "hidden"
+          }
+        ),
+        layout?.map((label) => {
+          return /* @__PURE__ */ jsx9(
+            "text",
+            {
+              x: label.x,
+              y: label.y,
+              children: label.text
+            },
+            label.id
+          );
+        })
+      ]
+    }
+  );
+};
+
+// src/shared/axis.tsx
+import { useCallback as useCallback3, useMemo as useMemo3 } from "react";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var Axis = (props) => {
+  const { axis, position, line = true, ticks = true, labels = true, title, tickFormat, tickCount, tickValues, color = "var(--gridui-chart-axis)", strokeWidth = 1, labelColor = "var(--gridui-chart-label)", fontSize = 12 } = props;
+  const chart = useChart();
+  const plot = usePlot();
+  const { data, horizontal, scale, domain } = chart;
+  const isX = axis === "x";
+  const xEdge = position === "start" ? plot.top : plot.bottom;
+  const yEdge = position === "start" ? plot.left : plot.right;
+  const edge = isX ? xEdge : yEdge;
+  const titleX = position === "start" ? 12 : plot.width - 12;
+  const titleY = position === "start" ? 12 : plot.height - 2;
+  const sign = position === "start" ? -1 : 1;
+  const all = useMemo3(() => {
+    return axisTicks({
+      data,
+      horizontal,
+      scale,
+      domain
+    }, plot, axis, {
+      ...tickCount === void 0 ? {} : { tickCount },
+      ...tickValues === void 0 ? {} : { tickValues }
+    });
+  }, [
+    data,
+    horizontal,
+    scale,
+    domain,
+    plot,
+    axis,
+    tickCount,
+    tickValues
+  ]);
+  const calculate = useCallback3((measure) => {
+    const occupied = [];
+    const shown = /* @__PURE__ */ new Map();
+    const ordered = all.length > 1 ? [
+      all[0],
+      all.at(-1),
+      ...all.slice(1, -1)
+    ] : all;
+    for (const tick of ordered) {
+      const defaultText = tick.value instanceof Date ? tick.value.toISOString().slice(0, 10) : String(tick.value);
+      const text = tickFormat ? tickFormat(tick.value) : defaultText;
+      const box = measure(text);
+      if (box.width > plot.width - 4 || box.height > plot.height - 4) {
+        continue;
+      }
+      const outsideX = position === "start" ? edge - 9 - box.width : edge + 9;
+      const outsideY = position === "start" ? edge - 9 - box.height : edge + 9;
+      const originX = isX ? tick.at - box.width / 2 : outsideX;
+      const originY = isX ? outsideY : tick.at - box.height / 2;
+      const x = Math.max(2, Math.min(plot.width - box.width - 2, originX));
+      const y = Math.max(2, Math.min(plot.height - box.height - 2, originY));
+      if (occupied.some((other) => {
+        return x < other.x + other.width + 4 && x + box.width + 4 > other.x && y < other.y + other.height + 4 && y + box.height + 4 > other.y;
+      })) {
+        continue;
+      }
+      occupied.push({
+        x,
+        y,
+        width: box.width,
+        height: box.height
+      });
+      shown.set(tick.key, {
+        text,
+        x: x - box.x,
+        y: y - box.y
+      });
+    }
+    return shown;
+  }, [
+    all,
+    tickFormat,
+    plot.width,
+    plot.height,
+    isX,
+    position,
+    edge
+  ]);
+  const { ref, layout } = useMeasuredLayout(calculate);
+  return /* @__PURE__ */ jsxs6(
+    "g",
+    {
+      "aria-hidden": "true",
+      className: "gridui-chart-axis",
+      "data-axis": axis,
+      children: [
+        line && /* @__PURE__ */ jsx10(
+          "line",
+          {
+            x1: isX ? plot.left : edge,
+            y1: isX ? edge : plot.top,
+            x2: isX ? plot.right : edge,
+            y2: isX ? edge : plot.bottom,
+            stroke: color,
+            strokeWidth
+          }
+        ),
+        /* @__PURE__ */ jsx10(
+          "text",
+          {
+            ref,
+            visibility: "hidden",
+            pointerEvents: "none",
+            fontSize
+          }
+        ),
+        all.map((tick) => {
+          const label = layout?.get(tick.key);
+          return /* @__PURE__ */ jsxs6(
+            "g",
+            {
+              children: [
+                ticks && /* @__PURE__ */ jsx10(
+                  "line",
+                  {
+                    x1: isX ? tick.at : edge,
+                    y1: isX ? edge : tick.at,
+                    x2: isX ? tick.at : edge + sign * 4,
+                    y2: isX ? edge + sign * 4 : tick.at,
+                    stroke: color,
+                    strokeWidth
+                  }
+                ),
+                labels && label && /* @__PURE__ */ jsx10(
+                  "text",
+                  {
+                    x: label.x,
+                    y: label.y,
+                    fill: labelColor,
+                    fontSize,
+                    children: label.text
+                  }
+                )
+              ]
+            },
+            tick.key
+          );
+        }),
+        title && /* @__PURE__ */ jsx10(
+          "text",
+          {
+            x: isX ? (plot.left + plot.right) / 2 : titleX,
+            y: isX ? titleY : (plot.top + plot.bottom) / 2,
+            transform: isX ? void 0 : `rotate(-90 ${position === "start" ? 12 : plot.width - 12} ${(plot.top + plot.bottom) / 2})`,
+            textAnchor: "middle",
+            fill: labelColor,
+            fontSize,
+            children: title
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/chart-x-axis/chart-x-axis.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+var ChartXAxis = (props) => {
+  const { position = "bottom", ...restProps } = props;
+  return /* @__PURE__ */ jsx11(
+    Axis,
+    {
+      ...restProps,
+      axis: "x",
+      position: position === "top" ? "start" : "end"
+    }
+  );
+};
+
+// src/chart-y-axis/chart-y-axis.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+var ChartYAxis = (props) => {
+  const { position = "left", ...restProps } = props;
+  return /* @__PURE__ */ jsx12(
+    Axis,
+    {
+      ...restProps,
+      axis: "y",
+      position: position === "left" ? "start" : "end"
+    }
+  );
+};
+
+// src/line-chart/line-chart.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+var LineChart = (props) => {
+  const { xScale = "category", ...restProps } = props;
+  return /* @__PURE__ */ jsx13(
+    ChartRoot,
+    {
+      ...restProps,
+      kind: "line",
+      horizontal: false,
+      scale: xScale
+    }
+  );
+};
+
+// src/line-series/line-series.tsx
+import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+var LineSeries = (props) => {
+  const { color = "var(--gridui-chart-series)", strokeWidth = 2, dashArray, points, selectedColor = "var(--gridui-chart-selected)" } = props;
+  const chart = useChart();
+  const plot = usePlot();
+  if (chart.kind !== "line") {
+    throw new Error("LineSeries requires LineChart.");
+  }
+  const size = points?.size ?? 5;
+  const shape = points?.shape ?? "none";
+  return /* @__PURE__ */ jsxs7("g", { children: [
+    /* @__PURE__ */ jsx14(
+      "path",
+      {
+        d: linePath(chart.data, plot.category, plot.value),
+        fill: "none",
+        stroke: color,
+        strokeWidth,
+        strokeDasharray: dashArray,
+        strokeLinejoin: "miter",
+        pointerEvents: "none"
+      }
+    ),
+    chart.data.map((datum, index) => {
+      if (datum.y === null) {
+        return null;
+      }
+      const selected = chart.selectedId === datum.id;
+      const isolated = (chart.data[index - 1]?.y ?? null) === null && (chart.data[index + 1]?.y ?? null) === null;
+      const visible = shape !== "none" || selected || isolated;
+      const markSize = selected ? Math.max(8, size) : size;
+      const pointColor = selected ? selectedColor : points?.color ?? color;
+      const fill = points?.fill === "hollow" && !selected ? "var(--gridui-chart-point-background)" : pointColor;
+      const x = plot.category(datum);
+      const y = plot.value(datum.y);
+      const previous = chart.data[index - 1];
+      const next = chart.data[index + 1];
+      const start = previous ? (plot.category(previous) + x) / 2 : plot.left;
+      const end = next ? (plot.category(next) + x) / 2 : plot.right;
+      return /* @__PURE__ */ jsxs7(
+        DatumMark,
+        {
+          datum,
+          children: [
+            /* @__PURE__ */ jsx14(
+              "rect",
+              {
+                className: "gridui-chart-hit",
+                x: start,
+                y: plot.top,
+                width: Math.max(1, end - start),
+                height: plot.bottom - plot.top,
+                fill: "transparent"
+              }
+            ),
+            visible && (shape === "square" ? /* @__PURE__ */ jsx14(
+              "rect",
+              {
+                x: x - markSize / 2,
+                y: y - markSize / 2,
+                width: markSize,
+                height: markSize,
+                fill,
+                stroke: selected ? selectedColor : points?.color ?? color,
+                strokeWidth: points?.strokeWidth ?? 1.5,
+                pointerEvents: "none"
+              }
+            ) : /* @__PURE__ */ jsx14(
+              "circle",
+              {
+                cx: x,
+                cy: y,
+                r: markSize / 2,
+                fill,
+                stroke: selected ? selectedColor : points?.color ?? color,
+                strokeWidth: points?.strokeWidth ?? 1.5,
+                pointerEvents: "none"
+              }
+            ))
+          ]
+        },
+        datum.id
+      );
+    })
+  ] });
+};
+export {
+  BarChart,
+  BarSeries,
+  ChartCursor,
+  ChartGrid,
+  ChartPlot,
+  ChartTooltip,
+  ChartValueLabels,
+  ChartXAxis,
+  ChartYAxis,
+  LineChart,
+  LineSeries
+};
+//# sourceMappingURL=index.js.map