@entropix/data 0.0.0 → 1.0.0

package/dist/index.js

@@ -1,5 +1,5 @@
-import { createContext, useContext, useMemo } from 'react';
-import { useTable } from '@entropix/core';
+import { createContext, useContext, useMemo, useState, useRef, useCallback, useEffect } from 'react';
+import { useTable, normalizeChartData, getDataExtent, niceBounds, createLinearScale, createBandScale, computeBarGeometry, computeLinePoints, describeLinePath, describeAreaPath, getSeriesColor, computeArcGeometry } from '@entropix/core';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/components/data-table/data-table.tsx
@@ -265,7 +265,648 @@ function DataTable(props) {
     )
   ] }) });
 }
+function ChartContainer({
+  height = 300,
+  className,
+  children
+}) {
+  const containerRef = useRef(null);
+  const [width, setWidth] = useState(0);
+  const handleResize = useCallback(() => {
+    if (containerRef.current) {
+      setWidth(containerRef.current.clientWidth);
+    }
+  }, []);
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    handleResize();
+    const observer = new ResizeObserver(() => {
+      handleResize();
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [handleResize]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: className ? `entropix-chart ${className}` : "entropix-chart",
+      style: { position: "relative", width: "100%" },
+      children: width > 0 && /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "entropix-chart__svg",
+          width,
+          height,
+          viewBox: `0 0 ${width} ${height}`,
+          children: children(width, height)
+        }
+      )
+    }
+  );
+}
+function XAxis({ scale, y, height: _height, formatter }) {
+  const domain = scale.domain();
+  const bandwidth = scale.bandwidth();
+  return /* @__PURE__ */ jsxs("g", { children: [
+    domain.map((label) => {
+      const x = scale(label) + bandwidth / 2;
+      return /* @__PURE__ */ jsxs("g", { transform: `translate(${x}, ${y})`, children: [
+        /* @__PURE__ */ jsx("line", { y2: 6, stroke: "currentColor", strokeWidth: 1 }),
+        /* @__PURE__ */ jsx(
+          "text",
+          {
+            className: "entropix-chart__axis-text",
+            y: 18,
+            textAnchor: "middle",
+            dominantBaseline: "auto",
+            children: formatter ? formatter(label) : label
+          }
+        )
+      ] }, label);
+    }),
+    /* @__PURE__ */ jsx(
+      "line",
+      {
+        x1: scale.range()[0],
+        x2: scale.range()[1],
+        y1: y,
+        y2: y,
+        stroke: "currentColor",
+        strokeWidth: 1
+      }
+    )
+  ] });
+}
+function YAxis({
+  scale,
+  x,
+  width,
+  formatter,
+  showGrid = true
+}) {
+  const ticks = scale.ticks();
+  return /* @__PURE__ */ jsx("g", { children: ticks.map((tick) => {
+    const y = scale(tick);
+    return /* @__PURE__ */ jsxs("g", { transform: `translate(${x}, ${y})`, children: [
+      /* @__PURE__ */ jsx(
+        "text",
+        {
+          className: "entropix-chart__axis-text",
+          x: -8,
+          textAnchor: "end",
+          dominantBaseline: "middle",
+          children: formatter ? formatter(tick) : String(tick)
+        }
+      ),
+      showGrid && /* @__PURE__ */ jsx(
+        "line",
+        {
+          className: "entropix-chart__grid-line",
+          x1: 0,
+          x2: width,
+          y1: 0,
+          y2: 0
+        }
+      )
+    ] }, tick);
+  }) });
+}
+function ChartTooltip({ data, containerRef }) {
+  const tooltipRef = useRef(null);
+  const [position, setPosition] = useState({
+    left: 0,
+    top: 0
+  });
+  useEffect(() => {
+    if (!data || !tooltipRef.current || !containerRef.current) return;
+    const container = containerRef.current;
+    const tooltip = tooltipRef.current;
+    const containerRect = container.getBoundingClientRect();
+    const tooltipWidth = tooltip.offsetWidth;
+    const tooltipHeight = tooltip.offsetHeight;
+    let left = data.x + 12;
+    let top = data.y - tooltipHeight / 2;
+    if (left + tooltipWidth > containerRect.width) {
+      left = data.x - tooltipWidth - 12;
+    }
+    if (top < 0) {
+      top = 0;
+    }
+    if (top + tooltipHeight > containerRect.height) {
+      top = containerRect.height - tooltipHeight;
+    }
+    setPosition({ left, top });
+  }, [data, containerRef]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: tooltipRef,
+      className: `entropix-chart__tooltip${data ? " entropix-chart__tooltip--visible" : ""}`,
+      style: {
+        left: position.left,
+        top: position.top
+      },
+      children: data && /* @__PURE__ */ jsxs("div", { className: "entropix-chart__tooltip-row", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "entropix-chart__tooltip-swatch",
+            style: { backgroundColor: data.color }
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { children: [
+          data.series,
+          ": ",
+          data.label,
+          " \u2014 ",
+          data.value
+        ] })
+      ] })
+    }
+  );
+}
+function ChartLegend({ items, onToggle }) {
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: "entropix-chart__legend", children: items.map((item) => /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: `entropix-chart__legend-item${!item.active ? " entropix-chart__legend-item--inactive" : ""}`,
+      onClick: () => onToggle(item.name),
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "entropix-chart__legend-swatch",
+            style: { backgroundColor: item.color }
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { children: item.name })
+      ]
+    },
+    item.name
+  )) });
+}
+
+// src/utils/chart-colors.ts
+var CSS_CHART_COLORS = [
+  "var(--chart-series-1)",
+  "var(--chart-series-2)",
+  "var(--chart-series-3)",
+  "var(--chart-series-4)",
+  "var(--chart-series-5)",
+  "var(--chart-series-6)",
+  "var(--chart-series-7)",
+  "var(--chart-series-8)"
+];
+var MARGINS = { top: 20, right: 20, bottom: 40, left: 50 };
+function BarChart({
+  data,
+  height = 300,
+  colors,
+  stacked = false,
+  showGrid = true,
+  showTooltip = true,
+  showLegend = true,
+  xAxis,
+  yAxis,
+  className
+}) {
+  const [hiddenSeries, setHiddenSeries] = useState(/* @__PURE__ */ new Set());
+  const [tooltip, setTooltip] = useState(null);
+  const containerRef = useRef(null);
+  const toggleSeries = useCallback((name) => {
+    setHiddenSeries((prev) => {
+      const next = new Set(prev);
+      if (next.has(name)) {
+        next.delete(name);
+      } else {
+        next.add(name);
+      }
+      return next;
+    });
+  }, []);
+  const allSeries = normalizeChartData(data, colors ?? CSS_CHART_COLORS);
+  const visibleSeries = allSeries.filter((s) => !hiddenSeries.has(s.name));
+  const { categories, yMin, yMax } = getDataExtent(visibleSeries);
+  const legendItems = allSeries.map((s) => ({
+    name: s.name,
+    color: s.color,
+    active: !hiddenSeries.has(s.name)
+  }));
+  const handleBarEnter = useCallback(
+    (rect, seriesName, event) => {
+      if (!showTooltip) return;
+      const svg = event.target.closest("svg");
+      if (!svg) return;
+      svg.getBoundingClientRect();
+      const container = containerRef.current;
+      if (!container) return;
+      container.getBoundingClientRect();
+      setTooltip({
+        x: rect.x + rect.width / 2 + MARGINS.left,
+        y: rect.y + MARGINS.top,
+        series: seriesName,
+        label: rect.label,
+        value: rect.value,
+        color: rect.color
+      });
+    },
+    [showTooltip]
+  );
+  const handleBarLeave = useCallback(() => {
+    setTooltip(null);
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: className ? `entropix-chart ${className}` : "entropix-chart", style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx(ChartContainer, { height, children: (width, h) => {
+      const innerWidth = width - MARGINS.left - MARGINS.right;
+      const innerHeight = h - MARGINS.top - MARGINS.bottom;
+      if (innerWidth <= 0 || innerHeight <= 0) return null;
+      const bounds = niceBounds(yMin, yMax, yAxis?.tickCount ?? 5);
+      const yScale = createLinearScale(
+        [bounds.min, bounds.max],
+        [innerHeight, 0]
+      );
+      const xScale = createBandScale(categories, [0, innerWidth]);
+      const bars = computeBarGeometry(
+        visibleSeries,
+        xScale,
+        yScale,
+        innerHeight,
+        stacked
+      );
+      return /* @__PURE__ */ jsxs("g", { transform: `translate(${MARGINS.left}, ${MARGINS.top})`, children: [
+        yAxis?.show !== false && /* @__PURE__ */ jsx(
+          YAxis,
+          {
+            scale: yScale,
+            x: 0,
+            width: innerWidth,
+            showGrid,
+            formatter: yAxis?.formatter
+          }
+        ),
+        xAxis?.show !== false && /* @__PURE__ */ jsx(
+          XAxis,
+          {
+            scale: xScale,
+            y: innerHeight,
+            height: innerHeight,
+            formatter: xAxis?.formatter
+          }
+        ),
+        bars.map((rect, i) => {
+          const series = visibleSeries[rect.seriesIndex];
+          return /* @__PURE__ */ jsx(
+            "rect",
+            {
+              className: "entropix-chart__bar",
+              x: rect.x,
+              y: rect.y,
+              width: rect.width,
+              height: rect.height,
+              fill: rect.color,
+              onMouseEnter: (e) => handleBarEnter(rect, series?.name ?? "", e),
+              onMouseLeave: handleBarLeave
+            },
+            i
+          );
+        })
+      ] });
+    } }),
+    showTooltip && /* @__PURE__ */ jsx(ChartTooltip, { data: tooltip, containerRef }),
+    showLegend && allSeries.length > 1 && /* @__PURE__ */ jsx(ChartLegend, { items: legendItems, onToggle: toggleSeries })
+  ] });
+}
+var MARGINS2 = { top: 20, right: 20, bottom: 40, left: 50 };
+function LineChart({
+  data,
+  height = 300,
+  colors,
+  curved = false,
+  showPoints = true,
+  showGrid = true,
+  showTooltip = true,
+  showLegend = true,
+  xAxis,
+  yAxis,
+  className
+}) {
+  const [hiddenSeries, setHiddenSeries] = useState(/* @__PURE__ */ new Set());
+  const [tooltip, setTooltip] = useState(null);
+  const containerRef = useRef(null);
+  const toggleSeries = useCallback((name) => {
+    setHiddenSeries((prev) => {
+      const next = new Set(prev);
+      if (next.has(name)) next.delete(name);
+      else next.add(name);
+      return next;
+    });
+  }, []);
+  const allSeries = normalizeChartData(data, colors ?? CSS_CHART_COLORS);
+  const visibleSeries = allSeries.filter((s) => !hiddenSeries.has(s.name));
+  const { categories, yMin, yMax } = getDataExtent(visibleSeries);
+  const legendItems = allSeries.map((s) => ({
+    name: s.name,
+    color: s.color,
+    active: !hiddenSeries.has(s.name)
+  }));
+  const handlePointEnter = useCallback(
+    (point, seriesName, color) => {
+      if (!showTooltip) return;
+      setTooltip({
+        x: point.x + MARGINS2.left,
+        y: point.y + MARGINS2.top,
+        series: seriesName,
+        label: point.label,
+        value: point.value,
+        color
+      });
+    },
+    [showTooltip]
+  );
+  const handlePointLeave = useCallback(() => {
+    setTooltip(null);
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: className ? `entropix-chart ${className}` : "entropix-chart", style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx(ChartContainer, { height, children: (width, h) => {
+      const innerWidth = width - MARGINS2.left - MARGINS2.right;
+      const innerHeight = h - MARGINS2.top - MARGINS2.bottom;
+      if (innerWidth <= 0 || innerHeight <= 0) return null;
+      const bounds = niceBounds(yMin, yMax, yAxis?.tickCount ?? 5);
+      const yScale = createLinearScale(
+        [bounds.min, bounds.max],
+        [innerHeight, 0]
+      );
+      const xScale = createBandScale(categories, [0, innerWidth]);
+      return /* @__PURE__ */ jsxs("g", { transform: `translate(${MARGINS2.left}, ${MARGINS2.top})`, children: [
+        yAxis?.show !== false && /* @__PURE__ */ jsx(
+          YAxis,
+          {
+            scale: yScale,
+            x: 0,
+            width: innerWidth,
+            showGrid,
+            formatter: yAxis?.formatter
+          }
+        ),
+        xAxis?.show !== false && /* @__PURE__ */ jsx(
+          XAxis,
+          {
+            scale: xScale,
+            y: innerHeight,
+            height: innerHeight,
+            formatter: xAxis?.formatter
+          }
+        ),
+        visibleSeries.map((series) => {
+          const points = computeLinePoints(series, xScale, yScale);
+          const pathD = describeLinePath(points, curved);
+          return /* @__PURE__ */ jsxs("g", { children: [
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                className: "entropix-chart__line",
+                d: pathD,
+                stroke: series.color
+              }
+            ),
+            showPoints && points.map((pt, i) => /* @__PURE__ */ jsx(
+              "circle",
+              {
+                className: "entropix-chart__point",
+                cx: pt.x,
+                cy: pt.y,
+                r: 3.5,
+                fill: series.color,
+                onMouseEnter: () => handlePointEnter(pt, series.name, series.color),
+                onMouseLeave: handlePointLeave
+              },
+              i
+            ))
+          ] }, series.name);
+        })
+      ] });
+    } }),
+    showTooltip && /* @__PURE__ */ jsx(ChartTooltip, { data: tooltip, containerRef }),
+    showLegend && allSeries.length > 1 && /* @__PURE__ */ jsx(ChartLegend, { items: legendItems, onToggle: toggleSeries })
+  ] });
+}
+var MARGINS3 = { top: 20, right: 20, bottom: 40, left: 50 };
+function AreaChart({
+  data,
+  height = 300,
+  colors,
+  curved = false,
+  opacity = 0.3,
+  showGrid = true,
+  showTooltip = true,
+  showLegend = true,
+  xAxis,
+  yAxis,
+  className
+}) {
+  const [hiddenSeries, setHiddenSeries] = useState(/* @__PURE__ */ new Set());
+  const [tooltip, setTooltip] = useState(null);
+  const containerRef = useRef(null);
+  const toggleSeries = useCallback((name) => {
+    setHiddenSeries((prev) => {
+      const next = new Set(prev);
+      if (next.has(name)) next.delete(name);
+      else next.add(name);
+      return next;
+    });
+  }, []);
+  const allSeries = normalizeChartData(data, colors ?? CSS_CHART_COLORS);
+  const visibleSeries = allSeries.filter((s) => !hiddenSeries.has(s.name));
+  const { categories, yMin, yMax } = getDataExtent(visibleSeries);
+  const legendItems = allSeries.map((s) => ({
+    name: s.name,
+    color: s.color,
+    active: !hiddenSeries.has(s.name)
+  }));
+  const handlePointEnter = useCallback(
+    (point, seriesName, color) => {
+      if (!showTooltip) return;
+      setTooltip({
+        x: point.x + MARGINS3.left,
+        y: point.y + MARGINS3.top,
+        series: seriesName,
+        label: point.label,
+        value: point.value,
+        color
+      });
+    },
+    [showTooltip]
+  );
+  const handlePointLeave = useCallback(() => {
+    setTooltip(null);
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: className ? `entropix-chart ${className}` : "entropix-chart", style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx(ChartContainer, { height, children: (width, h) => {
+      const innerWidth = width - MARGINS3.left - MARGINS3.right;
+      const innerHeight = h - MARGINS3.top - MARGINS3.bottom;
+      if (innerWidth <= 0 || innerHeight <= 0) return null;
+      const bounds = niceBounds(yMin, yMax, yAxis?.tickCount ?? 5);
+      const yScale = createLinearScale(
+        [bounds.min, bounds.max],
+        [innerHeight, 0]
+      );
+      const xScale = createBandScale(categories, [0, innerWidth]);
+      const baselineY = yScale(bounds.min);
+      return /* @__PURE__ */ jsxs("g", { transform: `translate(${MARGINS3.left}, ${MARGINS3.top})`, children: [
+        yAxis?.show !== false && /* @__PURE__ */ jsx(
+          YAxis,
+          {
+            scale: yScale,
+            x: 0,
+            width: innerWidth,
+            showGrid,
+            formatter: yAxis?.formatter
+          }
+        ),
+        xAxis?.show !== false && /* @__PURE__ */ jsx(
+          XAxis,
+          {
+            scale: xScale,
+            y: innerHeight,
+            height: innerHeight,
+            formatter: xAxis?.formatter
+          }
+        ),
+        visibleSeries.map((series) => {
+          const points = computeLinePoints(series, xScale, yScale);
+          const areaD = describeAreaPath(points, baselineY, curved);
+          const lineD = describeLinePath(points, curved);
+          return /* @__PURE__ */ jsxs("g", { children: [
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                className: "entropix-chart__area",
+                d: areaD,
+                fill: series.color,
+                fillOpacity: opacity
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                className: "entropix-chart__line",
+                d: lineD,
+                stroke: series.color
+              }
+            ),
+            points.map((pt, i) => /* @__PURE__ */ jsx(
+              "circle",
+              {
+                className: "entropix-chart__point",
+                cx: pt.x,
+                cy: pt.y,
+                r: 3,
+                fill: series.color,
+                onMouseEnter: () => handlePointEnter(pt, series.name, series.color),
+                onMouseLeave: handlePointLeave
+              },
+              i
+            ))
+          ] }, series.name);
+        })
+      ] });
+    } }),
+    showTooltip && /* @__PURE__ */ jsx(ChartTooltip, { data: tooltip, containerRef }),
+    showLegend && allSeries.length > 1 && /* @__PURE__ */ jsx(ChartLegend, { items: legendItems, onToggle: toggleSeries })
+  ] });
+}
+function PieChart({
+  data,
+  height = 300,
+  colors,
+  innerRadius = 0,
+  showTooltip = true,
+  showLegend = true,
+  className
+}) {
+  const [hiddenSlices, setHiddenSlices] = useState(/* @__PURE__ */ new Set());
+  const [tooltip, setTooltip] = useState(null);
+  const containerRef = useRef(null);
+  const toggleSlice = useCallback((name) => {
+    setHiddenSlices((prev) => {
+      const next = new Set(prev);
+      if (next.has(name)) next.delete(name);
+      else next.add(name);
+      return next;
+    });
+  }, []);
+  const palette = colors ?? CSS_CHART_COLORS;
+  const coloredData = data.map((d, i) => ({
+    ...d,
+    color: getSeriesColor(i, palette)
+  }));
+  const visibleData = coloredData.filter((d) => !hiddenSlices.has(d.label));
+  const legendItems = coloredData.map((d) => ({
+    name: d.label,
+    color: d.color,
+    active: !hiddenSlices.has(d.label)
+  }));
+  const handleArcEnter = useCallback(
+    (label, value, percentage, color, cx, cy) => {
+      if (!showTooltip) return;
+      setTooltip({
+        x: cx,
+        y: cy,
+        series: `${(percentage * 100).toFixed(1)}%`,
+        label,
+        value,
+        color
+      });
+    },
+    [showTooltip]
+  );
+  const handleArcLeave = useCallback(() => {
+    setTooltip(null);
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: className ? `entropix-chart ${className}` : "entropix-chart", style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx(ChartContainer, { height, children: (width, h) => {
+      const cx = width / 2;
+      const cy = h / 2;
+      const outerRadius = Math.min(cx, cy) - 10;
+      if (outerRadius <= 0) return null;
+      const slices = computeArcGeometry(
+        visibleData,
+        outerRadius,
+        innerRadius
+      );
+      return /* @__PURE__ */ jsx("g", { transform: `translate(${cx}, ${cy})`, children: slices.map((slice, i) => {
+        const midAngle = (slice.startAngle + slice.endAngle) / 2;
+        const tooltipX = cx + outerRadius * 0.6 * Math.cos(midAngle);
+        const tooltipY = cy + outerRadius * 0.6 * Math.sin(midAngle);
+        return /* @__PURE__ */ jsx(
+          "path",
+          {
+            className: "entropix-chart__arc",
+            d: slice.path,
+            fill: slice.color,
+            onMouseEnter: () => handleArcEnter(
+              slice.label,
+              slice.value,
+              slice.percentage,
+              slice.color,
+              tooltipX,
+              tooltipY
+            ),
+            onMouseLeave: handleArcLeave
+          },
+          i
+        );
+      }) });
+    } }),
+    showTooltip && /* @__PURE__ */ jsx(ChartTooltip, { data: tooltip, containerRef }),
+    showLegend && /* @__PURE__ */ jsx(ChartLegend, { items: legendItems, onToggle: toggleSlice })
+  ] });
+}
 
-export { DataTable, DataTableContext, useDataTableContext };
+export { AreaChart, BarChart, DataTable, DataTableContext, LineChart, PieChart, useDataTableContext };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map