@entropix/data 0.0.0 → 1.0.1

package/dist/chunk-WOVSQALY.cjs

@@ -0,0 +1,137 @@
+'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 AreaChart({
+  data,
+  height = 300,
+  colors,
+  curved = false,
+  opacity = 0.3,
+  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 handlePointEnter = react.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 = 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 baselineY = yScale(bounds.min);
+      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
+          }
+        ),
+        visibleSeries.map((series) => {
+          const points = core.computeLinePoints(series, xScale, yScale);
+          const areaD = core.describeAreaPath(points, baselineY, curved);
+          const lineD = core.describeLinePath(points, curved);
+          return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                className: "entropix-chart__area",
+                d: areaD,
+                fill: series.color,
+                fillOpacity: opacity
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                className: "entropix-chart__line",
+                d: lineD,
+                stroke: series.color
+              }
+            ),
+            points.map((pt, i) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(chunk6YAOO76S_cjs.ChartTooltip, { data: tooltip, containerRef }),
+    showLegend && allSeries.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(chunk6YAOO76S_cjs.ChartLegend, { items: legendItems, onToggle: toggleSeries })
+  ] });
+}
+
+exports.AreaChart = AreaChart;
+//# sourceMappingURL=chunk-WOVSQALY.cjs.map
+//# sourceMappingURL=chunk-WOVSQALY.cjs.map

package/dist/chunk-X7GZD7KZ.js

@@ -0,0 +1,129 @@
+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, computeBarGeometry } from '@entropix/core';
+import { jsxs, jsx } from '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] = 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 })
+  ] });
+}
+
+export { BarChart };
+//# sourceMappingURL=chunk-X7GZD7KZ.js.map
+//# sourceMappingURL=chunk-X7GZD7KZ.js.map

package/dist/chunk-YINCJQN6.js

@@ -0,0 +1,271 @@
+import { createContext, useContext, useMemo } from 'react';
+import { useTable } from '@entropix/core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/data-table/data-table.tsx
+var DataTableContext = createContext(
+  null
+);
+function useDataTableContext() {
+  const ctx = useContext(DataTableContext);
+  if (!ctx) {
+    throw new Error(
+      "useDataTableContext must be used within a <DataTable /> component."
+    );
+  }
+  return ctx;
+}
+function mapA11yToAria(a) {
+  const result = {};
+  if (a.role) result.role = a.role;
+  if (a.label) result["aria-label"] = a.label;
+  if (a.labelledBy) result["aria-labelledby"] = a.labelledBy;
+  if (a.describedBy) result["aria-describedby"] = a.describedBy;
+  if (a.disabled != null) result["aria-disabled"] = a.disabled;
+  if (a.expanded != null) result["aria-expanded"] = a.expanded;
+  if (a.selected != null) result["aria-selected"] = a.selected;
+  if (a.checked != null) result["aria-checked"] = a.checked;
+  if (a.busy != null) result["aria-busy"] = a.busy;
+  if (a.hidden != null) result["aria-hidden"] = a.hidden;
+  if (a.tabIndex != null) result.tabIndex = a.tabIndex;
+  if (a.controls) result["aria-controls"] = a.controls;
+  if (a.orientation) result["aria-orientation"] = a.orientation;
+  if (a.required != null) result["aria-required"] = a.required;
+  if (a.invalid != null) result["aria-invalid"] = a.invalid;
+  return result;
+}
+function DataTable(props) {
+  const {
+    className,
+    emptyMessage = "No data",
+    renderCell,
+    stickyHeader = false,
+    ...tableOptions
+  } = props;
+  const table = useTable(tableOptions);
+  const {
+    columns,
+    getRowKey = (_, i) => String(i),
+    selectionMode = "none"
+  } = tableOptions;
+  const contextValue = useMemo(
+    () => ({
+      ...table,
+      columns,
+      getRowKey
+    }),
+    [table, columns, getRowKey]
+  );
+  const tableAriaProps = mapA11yToAria(table.getTableProps().accessibility);
+  const getSortDir = (colKey) => {
+    const s = table.sortState.find((st) => st.columnKey === colKey);
+    return s ? s.direction : "none";
+  };
+  const hasFilters = columns.some((c) => c.filterable);
+  return /* @__PURE__ */ jsx(DataTableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { className: `entropix-datatable ${className ?? ""}`.trim(), children: [
+    /* @__PURE__ */ jsxs("table", { className: "entropix-datatable__table", ...tableAriaProps, children: [
+      /* @__PURE__ */ jsxs(
+        "thead",
+        {
+          className: "entropix-datatable__thead",
+          "data-sticky": stickyHeader ? "true" : void 0,
+          ...mapA11yToAria(table.getHeaderRowProps().accessibility),
+          children: [
+            hasFilters && /* @__PURE__ */ jsxs("tr", { className: "entropix-datatable__filter-row", children: [
+              selectionMode !== "none" && /* @__PURE__ */ jsx("th", { className: "entropix-datatable__th entropix-datatable__th--checkbox" }),
+              columns.map((col) => /* @__PURE__ */ jsx(
+                "th",
+                {
+                  className: "entropix-datatable__th entropix-datatable__th--filter",
+                  children: col.filterable ? /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "text",
+                      className: "entropix-datatable__filter",
+                      placeholder: `Filter ${col.header}...`,
+                      value: table.columnFilters[col.key] ?? "",
+                      onChange: (e) => table.setColumnFilter(col.key, e.target.value),
+                      "aria-label": `Filter by ${col.header}`
+                    }
+                  ) : null
+                },
+                `filter-${col.key}`
+              ))
+            ] }),
+            /* @__PURE__ */ jsxs("tr", { className: "entropix-datatable__tr entropix-datatable__tr--header", children: [
+              selectionMode !== "none" && /* @__PURE__ */ jsx("th", { className: "entropix-datatable__th entropix-datatable__th--checkbox", children: selectionMode === "multi" && /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  className: "entropix-datatable__checkbox",
+                  checked: table.isAllSelected,
+                  ref: (el) => {
+                    if (el) el.indeterminate = table.isIndeterminate;
+                  },
+                  onChange: table.toggleAllSelection,
+                  "aria-label": "Select all rows"
+                }
+              ) }),
+              columns.map((col) => {
+                const headerProps = table.getHeaderCellProps(col.key);
+                const ariaProps = mapA11yToAria(headerProps.accessibility);
+                const sortDir = getSortDir(col.key);
+                return /* @__PURE__ */ jsx(
+                  "th",
+                  {
+                    className: `entropix-datatable__th${col.sortable ? " entropix-datatable__th--sortable" : ""}`,
+                    "data-sort": col.sortable ? sortDir : void 0,
+                    onClick: headerProps.onAction,
+                    onKeyDown: col.sortable ? (e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        headerProps.onAction?.();
+                      }
+                    } : void 0,
+                    style: col.width ? {
+                      width: typeof col.width === "number" ? `${col.width}px` : col.width
+                    } : void 0,
+                    ...ariaProps,
+                    children: /* @__PURE__ */ jsxs("span", { className: "entropix-datatable__th-content", children: [
+                      col.header,
+                      col.sortable && sortDir !== "none" && /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "entropix-datatable__sort-icon",
+                          "aria-hidden": "true",
+                          children: sortDir === "asc" ? " \u25B2" : " \u25BC"
+                        }
+                      )
+                    ] })
+                  },
+                  col.key
+                );
+              })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "tbody",
+        {
+          className: "entropix-datatable__tbody",
+          ...mapA11yToAria(table.getBodyProps().accessibility),
+          children: table.isLoading ? /* @__PURE__ */ jsx("tr", { className: "entropix-datatable__tr entropix-datatable__tr--loading", children: /* @__PURE__ */ jsx(
+            "td",
+            {
+              className: "entropix-datatable__td entropix-datatable__td--loading",
+              colSpan: columns.length + (selectionMode !== "none" ? 1 : 0),
+              children: /* @__PURE__ */ jsx("div", { className: "entropix-datatable__loading", children: "Loading..." })
+            }
+          ) }) : table.rows.length === 0 ? /* @__PURE__ */ jsx("tr", { className: "entropix-datatable__tr entropix-datatable__tr--empty", children: /* @__PURE__ */ jsx(
+            "td",
+            {
+              className: "entropix-datatable__td entropix-datatable__td--empty",
+              colSpan: columns.length + (selectionMode !== "none" ? 1 : 0),
+              children: /* @__PURE__ */ jsx("div", { className: "entropix-datatable__empty", children: emptyMessage })
+            }
+          ) }) : table.rows.map((row, i) => {
+            const globalIndex = table.page * table.pageSize + i;
+            const rowKey = getRowKey(row, globalIndex);
+            const rowProps = table.getRowProps(rowKey, i);
+            const isSelected = table.selectedKeys.has(rowKey);
+            return /* @__PURE__ */ jsxs(
+              "tr",
+              {
+                className: "entropix-datatable__tr",
+                "data-selected": isSelected ? "true" : void 0,
+                ...mapA11yToAria(rowProps.accessibility),
+                children: [
+                  selectionMode !== "none" && /* @__PURE__ */ jsx("td", { className: "entropix-datatable__td entropix-datatable__td--checkbox", children: /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "checkbox",
+                      className: "entropix-datatable__checkbox",
+                      checked: isSelected,
+                      onChange: () => table.toggleRowSelection(rowKey),
+                      "aria-label": `Select row ${rowKey}`
+                    }
+                  ) }),
+                  columns.map((col) => {
+                    const cellValue = col.accessor ? col.accessor(row) : row[col.key];
+                    return /* @__PURE__ */ jsx(
+                      "td",
+                      {
+                        className: "entropix-datatable__td",
+                        ...mapA11yToAria(
+                          table.getCellProps(col.key, rowKey).accessibility
+                        ),
+                        children: renderCell ? renderCell(cellValue, row, col) : String(cellValue ?? "")
+                      },
+                      col.key
+                    );
+                  })
+                ]
+              },
+              rowKey
+            );
+          })
+        }
+      )
+    ] }),
+    table.pageCount > 1 && /* @__PURE__ */ jsxs(
+      "nav",
+      {
+        className: "entropix-datatable__pagination",
+        "aria-label": "Table pagination",
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "entropix-datatable__pagination-btn",
+              onClick: table.firstPage,
+              disabled: !table.canPreviousPage,
+              "aria-label": "First page",
+              children: "\u27E8\u27E8"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "entropix-datatable__pagination-btn",
+              onClick: table.previousPage,
+              disabled: !table.canPreviousPage,
+              "aria-label": "Previous page",
+              children: "\u27E8"
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "entropix-datatable__pagination-info", children: [
+            "Page ",
+            table.page + 1,
+            " of ",
+            table.pageCount
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "entropix-datatable__pagination-btn",
+              onClick: table.nextPage,
+              disabled: !table.canNextPage,
+              "aria-label": "Next page",
+              children: "\u27E9"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "entropix-datatable__pagination-btn",
+              onClick: table.lastPage,
+              disabled: !table.canNextPage,
+              "aria-label": "Last page",
+              children: "\u27E9\u27E9"
+            }
+          )
+        ]
+      }
+    )
+  ] }) });
+}
+
+export { DataTable, DataTableContext, useDataTableContext };
+//# sourceMappingURL=chunk-YINCJQN6.js.map
+//# sourceMappingURL=chunk-YINCJQN6.js.map

package/dist/data-table.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+var chunkSDCNTA7E_cjs = require('./chunk-SDCNTA7E.cjs');
+
+
+
+Object.defineProperty(exports, "DataTable", {
+  enumerable: true,
+  get: function () { return chunkSDCNTA7E_cjs.DataTable; }
+});
+Object.defineProperty(exports, "DataTableContext", {
+  enumerable: true,
+  get: function () { return chunkSDCNTA7E_cjs.DataTableContext; }
+});
+Object.defineProperty(exports, "useDataTableContext", {
+  enumerable: true,
+  get: function () { return chunkSDCNTA7E_cjs.useDataTableContext; }
+});
+//# sourceMappingURL=data-table.cjs.map
+//# sourceMappingURL=data-table.cjs.map