@entropix/data 0.0.0 → 1.0.1

package/dist/chunk-6YAOO76S.cjs

@@ -0,0 +1,142 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/chart-primitives/chart-container.tsx
+function ChartContainer({
+  height = 300,
+  className,
+  children
+}) {
+  const containerRef = react.useRef(null);
+  const [width, setWidth] = react.useState(0);
+  const handleResize = react.useCallback(() => {
+    if (containerRef.current) {
+      setWidth(containerRef.current.clientWidth);
+    }
+  }, []);
+  react.useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    handleResize();
+    const observer = new ResizeObserver(() => {
+      handleResize();
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [handleResize]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: className ? `entropix-chart ${className}` : "entropix-chart",
+      style: { position: "relative", width: "100%" },
+      children: width > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          className: "entropix-chart__svg",
+          width,
+          height,
+          viewBox: `0 0 ${width} ${height}`,
+          children: children(width, height)
+        }
+      )
+    }
+  );
+}
+function ChartTooltip({ data, containerRef }) {
+  const tooltipRef = react.useRef(null);
+  const [position, setPosition] = react.useState({
+    left: 0,
+    top: 0
+  });
+  react.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__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: tooltipRef,
+      className: `entropix-chart__tooltip${data ? " entropix-chart__tooltip--visible" : ""}`,
+      style: {
+        left: position.left,
+        top: position.top
+      },
+      children: data && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "entropix-chart__tooltip-row", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "entropix-chart__tooltip-swatch",
+            style: { backgroundColor: data.color }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          data.series,
+          ": ",
+          data.label,
+          " \u2014 ",
+          data.value
+        ] })
+      ] })
+    }
+  );
+}
+function ChartLegend({ items, onToggle }) {
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "entropix-chart__legend", children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      className: `entropix-chart__legend-item${!item.active ? " entropix-chart__legend-item--inactive" : ""}`,
+      onClick: () => onToggle(item.name),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "entropix-chart__legend-swatch",
+            style: { backgroundColor: item.color }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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)"
+];
+
+exports.CSS_CHART_COLORS = CSS_CHART_COLORS;
+exports.ChartContainer = ChartContainer;
+exports.ChartLegend = ChartLegend;
+exports.ChartTooltip = ChartTooltip;
+//# sourceMappingURL=chunk-6YAOO76S.cjs.map
+//# sourceMappingURL=chunk-6YAOO76S.cjs.map

package/dist/chunk-CMAQ7DZD.js

@@ -0,0 +1,135 @@
+import { YAxis, XAxis } from './chunk-4WXLJDQU.js';
+import { CSS_CHART_COLORS, ChartContainer, ChartTooltip, ChartLegend } from './chunk-FQACLZYR.js';
+import { useState, useRef, useCallback } from 'react';
+import { normalizeChartData, getDataExtent, niceBounds, createLinearScale, createBandScale, computeLinePoints, describeAreaPath, describeLinePath } from '@entropix/core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var MARGINS = { 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 + MARGINS.left,
+        y: point.y + MARGINS.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 - 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 baselineY = yScale(bounds.min);
+      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
+          }
+        ),
+        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 })
+  ] });
+}
+
+export { AreaChart };
+//# sourceMappingURL=chunk-CMAQ7DZD.js.map
+//# sourceMappingURL=chunk-CMAQ7DZD.js.map

package/dist/chunk-FQACLZYR.js

@@ -0,0 +1,137 @@
+import { useRef, useState, useCallback, useEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/chart-primitives/chart-container.tsx
+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 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)"
+];
+
+export { CSS_CHART_COLORS, ChartContainer, ChartLegend, ChartTooltip };
+//# sourceMappingURL=chunk-FQACLZYR.js.map
+//# sourceMappingURL=chunk-FQACLZYR.js.map

package/dist/chunk-GCZSXJAA.cjs

@@ -0,0 +1,77 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/chart-primitives/x-axis.tsx
+function XAxis({ scale, y, height: _height, formatter }) {
+  const domain = scale.domain();
+  const bandwidth = scale.bandwidth();
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+    domain.map((label) => {
+      const x = scale(label) + bandwidth / 2;
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x}, ${y})`, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("line", { y2: 6, stroke: "currentColor", strokeWidth: 1 }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            className: "entropix-chart__axis-text",
+            y: 18,
+            textAnchor: "middle",
+            dominantBaseline: "auto",
+            children: formatter ? formatter(label) : label
+          }
+        )
+      ] }, label);
+    }),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("g", { children: ticks.map((tick) => {
+    const y = scale(tick);
+    return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x}, ${y})`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "text",
+        {
+          className: "entropix-chart__axis-text",
+          x: -8,
+          textAnchor: "end",
+          dominantBaseline: "middle",
+          children: formatter ? formatter(tick) : String(tick)
+        }
+      ),
+      showGrid && /* @__PURE__ */ jsxRuntime.jsx(
+        "line",
+        {
+          className: "entropix-chart__grid-line",
+          x1: 0,
+          x2: width,
+          y1: 0,
+          y2: 0
+        }
+      )
+    ] }, tick);
+  }) });
+}
+
+exports.XAxis = XAxis;
+exports.YAxis = YAxis;
+//# sourceMappingURL=chunk-GCZSXJAA.cjs.map
+//# sourceMappingURL=chunk-GCZSXJAA.cjs.map

package/dist/chunk-K6ZRQYSZ.cjs

@@ -0,0 +1,131 @@
+'use strict';
+
+var chunkGCZSXJAA_cjs = require('./chunk-GCZSXJAA.cjs');
+var chunk6YAOO76S_cjs = require('./chunk-6YAOO76S.cjs');
+var react = require('react');
+var core = require('@entropix/core');
+var jsxRuntime = require('react/jsx-runtime');
+
+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] = react.useState(/* @__PURE__ */ new Set());
+  const [tooltip, setTooltip] = react.useState(null);
+  const containerRef = react.useRef(null);
+  const toggleSeries = react.useCallback((name) => {
+    setHiddenSeries((prev) => {
+      const next = new Set(prev);
+      if (next.has(name)) {
+        next.delete(name);
+      } else {
+        next.add(name);
+      }
+      return next;
+    });
+  }, []);
+  const allSeries = core.normalizeChartData(data, colors ?? chunk6YAOO76S_cjs.CSS_CHART_COLORS);
+  const visibleSeries = allSeries.filter((s) => !hiddenSeries.has(s.name));
+  const { categories, yMin, yMax } = core.getDataExtent(visibleSeries);
+  const legendItems = allSeries.map((s) => ({
+    name: s.name,
+    color: s.color,
+    active: !hiddenSeries.has(s.name)
+  }));
+  const handleBarEnter = react.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 = react.useCallback(() => {
+    setTooltip(null);
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: className ? `entropix-chart ${className}` : "entropix-chart", style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(chunk6YAOO76S_cjs.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 = core.niceBounds(yMin, yMax, yAxis?.tickCount ?? 5);
+      const yScale = core.createLinearScale(
+        [bounds.min, bounds.max],
+        [innerHeight, 0]
+      );
+      const xScale = core.createBandScale(categories, [0, innerWidth]);
+      const bars = core.computeBarGeometry(
+        visibleSeries,
+        xScale,
+        yScale,
+        innerHeight,
+        stacked
+      );
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${MARGINS.left}, ${MARGINS.top})`, children: [
+        yAxis?.show !== false && /* @__PURE__ */ jsxRuntime.jsx(
+          chunkGCZSXJAA_cjs.YAxis,
+          {
+            scale: yScale,
+            x: 0,
+            width: innerWidth,
+            showGrid,
+            formatter: yAxis?.formatter
+          }
+        ),
+        xAxis?.show !== false && /* @__PURE__ */ jsxRuntime.jsx(
+          chunkGCZSXJAA_cjs.XAxis,
+          {
+            scale: xScale,
+            y: innerHeight,
+            height: innerHeight,
+            formatter: xAxis?.formatter
+          }
+        ),
+        bars.map((rect, i) => {
+          const series = visibleSeries[rect.seriesIndex];
+          return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(chunk6YAOO76S_cjs.ChartTooltip, { data: tooltip, containerRef }),
+    showLegend && allSeries.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(chunk6YAOO76S_cjs.ChartLegend, { items: legendItems, onToggle: toggleSeries })
+  ] });
+}
+
+exports.BarChart = BarChart;
+//# sourceMappingURL=chunk-K6ZRQYSZ.cjs.map
+//# sourceMappingURL=chunk-K6ZRQYSZ.cjs.map