@expcat/tigercat-react 2.1.2 → 2.1.4

package/dist/chunk-KEFHL7CJ.mjs

@@ -0,0 +1,403 @@
+import {
+  useChartInteraction
+} from "./chunk-7H7EKANG.mjs";
+import {
+  useResponsiveChartSize
+} from "./chunk-7P4R3NVO.mjs";
+import {
+  ChartTooltip
+} from "./chunk-JX2WKSVM.mjs";
+import {
+  ChartCanvas
+} from "./chunk-OP77MPGN.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/HeatmapChart.tsx
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import {
+  classNames,
+  layoutHeatmap,
+  getHeatmapCellIndexAtPoint,
+  getHeatmapDevicePixelRatio,
+  paintHeatmapCanvas,
+  resolveHeatmapRenderMode,
+  formatHeatmapTooltip,
+  heatmapLabelFill,
+  heatmapCellTransitionClasses,
+  getChartElementOpacity,
+  getCartesianChartShellClasses,
+  chartAxisTickTextClasses,
+  chartMarkTabIndex,
+  isChartNavigationKey,
+  nextHeatmapCellIndex,
+  getChartLabels,
+  mergeTigerLocale,
+  DEFAULT_HEATMAP_WIDTH,
+  DEFAULT_HEATMAP_HEIGHT,
+  DEFAULT_HEATMAP_PADDING,
+  DEFAULT_HEATMAP_MIN_COLOR,
+  DEFAULT_HEATMAP_MAX_COLOR,
+  DEFAULT_HEATMAP_CELL_RADIUS,
+  DEFAULT_HEATMAP_CELL_GAP
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var HeatmapChart = ({
+  width = DEFAULT_HEATMAP_WIDTH,
+  height = DEFAULT_HEATMAP_HEIGHT,
+  padding = DEFAULT_HEATMAP_PADDING,
+  responsive = false,
+  data,
+  xLabels,
+  yLabels,
+  minColor = DEFAULT_HEATMAP_MIN_COLOR,
+  maxColor = DEFAULT_HEATMAP_MAX_COLOR,
+  min,
+  max,
+  colorSpace = "rgb",
+  cellRadius = DEFAULT_HEATMAP_CELL_RADIUS,
+  cellGap = DEFAULT_HEATMAP_CELL_GAP,
+  showValues = false,
+  valueFormatter,
+  renderMode = "auto",
+  canvasThreshold,
+  hoverable = false,
+  hoveredIndex: hoveredIndexProp,
+  activeOpacity = 1,
+  inactiveOpacity = 0.25,
+  selectable = false,
+  selectedIndex: selectedIndexProp,
+  showTooltip = true,
+  tooltipFormatter,
+  title,
+  desc,
+  className,
+  onHoveredIndexChange,
+  onSelectedIndexChange,
+  onCellClick,
+  onCellHover
+}) => {
+  const config = useTigerConfig();
+  const labels = useMemo(() => getChartLabels(mergeTigerLocale(config.locale)), [config.locale]);
+  const interactive = hoverable || selectable || Boolean(onCellClick);
+  const canvasRef = useRef(null);
+  const { innerRect, onResolvedSizeChange } = useResponsiveChartSize(
+    width,
+    height,
+    padding,
+    responsive
+  );
+  const layout = useMemo(
+    () => layoutHeatmap(data, {
+      xLabels,
+      yLabels,
+      width: innerRect.width,
+      height: innerRect.height,
+      cellGap,
+      minColor,
+      maxColor,
+      colorSpace,
+      min,
+      max
+    }),
+    [
+      data,
+      xLabels,
+      yLabels,
+      innerRect.width,
+      innerRect.height,
+      cellGap,
+      minColor,
+      maxColor,
+      colorSpace,
+      min,
+      max
+    ]
+  );
+  const cells = layout.cells;
+  const {
+    tooltipPosition,
+    resolvedHoveredIndex,
+    activeIndex,
+    handleMouseEnter,
+    handleMouseMove,
+    handleMouseLeave,
+    handleClick,
+    handleKeyDown
+  } = useChartInteraction({
+    hoverable,
+    showTooltip,
+    hoveredIndexProp,
+    selectable,
+    selectedIndexProp,
+    activeOpacity,
+    inactiveOpacity,
+    getData: (index) => cells[index]?.datum ?? null,
+    onHoveredIndexChange: (index) => {
+      onHoveredIndexChange?.(index);
+      onCellHover?.(index, index !== null ? cells[index]?.datum ?? null : null);
+    },
+    onSelectedIndexChange,
+    onClick: (index, datum) => onCellClick?.(index, datum ?? null)
+  });
+  const formatValue = useCallback(
+    (value) => {
+      if (value === null) return "";
+      return valueFormatter ? valueFormatter(value) : `${value}`;
+    },
+    [valueFormatter]
+  );
+  const tooltipContent = useMemo(() => {
+    if (resolvedHoveredIndex === null) return "";
+    const cell = cells[resolvedHoveredIndex];
+    if (!cell) return "";
+    if (tooltipFormatter) return tooltipFormatter(cell.datum, cell.index);
+    return formatHeatmapTooltip(labels.heatmapTooltip, cell, formatValue(cell.value));
+  }, [resolvedHoveredIndex, cells, tooltipFormatter, labels.heatmapTooltip, formatValue]);
+  const pointerInteractive = interactive || showTooltip;
+  const resolvedRenderMode = resolveHeatmapRenderMode(cells.length, {
+    renderMode,
+    canvasThreshold
+  });
+  const shouldRenderCanvas = resolvedRenderMode === "canvas";
+  const visualActive = cells.findIndex(
+    (cell) => cell.index === (activeIndex ?? resolvedHoveredIndex)
+  );
+  useEffect(() => {
+    if (!shouldRenderCanvas) return;
+    const canvas = canvasRef.current;
+    const context = canvas?.getContext("2d");
+    if (!canvas || !context) return;
+    const dpr = getHeatmapDevicePixelRatio();
+    canvas.width = Math.max(0, Math.round(innerRect.width * dpr));
+    canvas.height = Math.max(0, Math.round(innerRect.height * dpr));
+    paintHeatmapCanvas(context, cells, {
+      width: innerRect.width,
+      height: innerRect.height,
+      dpr,
+      cellRadius,
+      showValues,
+      valueFormatter,
+      activeIndex,
+      activeOpacity,
+      inactiveOpacity
+    });
+  }, [
+    shouldRenderCanvas,
+    cells,
+    innerRect.width,
+    innerRect.height,
+    activeIndex,
+    activeOpacity,
+    inactiveOpacity,
+    cellRadius,
+    showValues,
+    valueFormatter
+  ]);
+  const getCanvasPoint = useCallback(
+    (event) => {
+      const canvas = event.currentTarget;
+      const bounds = canvas.getBoundingClientRect();
+      const cssWidth = innerRect.width;
+      const cssHeight = innerRect.height;
+      const x = bounds.width > 0 ? (event.clientX - bounds.left) / bounds.width * cssWidth : 0;
+      const y = bounds.height > 0 ? (event.clientY - bounds.top) / bounds.height * cssHeight : 0;
+      return { x, y };
+    },
+    [innerRect.width, innerRect.height]
+  );
+  const handleCanvasMouseMove = useCallback(
+    (event) => {
+      const point = getCanvasPoint(event);
+      const index = getHeatmapCellIndexAtPoint(cells, point.x, point.y);
+      if (index === null) {
+        handleMouseLeave();
+        return;
+      }
+      handleMouseEnter(index, event);
+      handleMouseMove(event);
+    },
+    [cells, getCanvasPoint, handleMouseEnter, handleMouseLeave, handleMouseMove]
+  );
+  const handleCanvasClick = useCallback(
+    (event) => {
+      const point = getCanvasPoint(event);
+      const index = getHeatmapCellIndexAtPoint(cells, point.x, point.y);
+      if (index !== null) handleClick(index);
+    },
+    [cells, getCanvasPoint, handleClick]
+  );
+  const handleCellKeyDown = (event, index) => {
+    if (isChartNavigationKey(event.key)) {
+      event.preventDefault();
+      const next = nextHeatmapCellIndex(index, event.key, layout.cols, layout.rows);
+      if (!shouldRenderCanvas) {
+        const node = event.currentTarget.parentElement?.querySelector(
+          `[data-heatmap-cell][data-index="${next}"]`
+        );
+        if (node instanceof SVGElement) node.focus();
+      }
+      handleMouseEnter(next, event);
+      return;
+    }
+    handleKeyDown(event, index);
+  };
+  const hiddenTable = /* @__PURE__ */ jsxs("table", { className: "sr-only", "data-heatmap-table": "", children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("td", {}),
+      xLabels.map((label) => /* @__PURE__ */ jsx("th", { scope: "col", children: label }, `hx-${label}`))
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { children: yLabels.map((yLabel, row) => /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("th", { scope: "row", children: yLabel }),
+      xLabels.map((xLabel, col) => {
+        const cell = cells[row * layout.cols + col];
+        return /* @__PURE__ */ jsx("td", { children: formatValue(cell?.value ?? null) }, `hv-${xLabel}-${yLabel}`);
+      })
+    ] }, `hy-${yLabel}`)) })
+  ] });
+  const chart = /* @__PURE__ */ jsxs(
+    ChartCanvas,
+    {
+      width,
+      height,
+      padding,
+      responsive,
+      title,
+      desc,
+      onResolvedSizeChange,
+      children: [
+        layout.xAxisLabels.map((label, i) => /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: label.x,
+            y: label.y,
+            className: chartAxisTickTextClasses,
+            textAnchor: "middle",
+            children: label.text
+          },
+          `x-${i}`
+        )),
+        layout.yAxisLabels.map((label, i) => /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: label.x,
+            y: label.y,
+            className: chartAxisTickTextClasses,
+            textAnchor: "end",
+            dominantBaseline: "middle",
+            children: label.text
+          },
+          `y-${i}`
+        )),
+        !shouldRenderCanvas && cells.map((cell, visualIndex) => {
+          const opacity = getChartElementOpacity(cell.index, activeIndex, {
+            activeOpacity,
+            inactiveOpacity
+          });
+          const ariaLabel = formatHeatmapTooltip(
+            labels.heatmapTooltip,
+            cell,
+            formatValue(cell.value)
+          );
+          return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: cell.x,
+                y: cell.y,
+                width: cell.w,
+                height: cell.h,
+                rx: cellRadius,
+                fill: cell.fill,
+                opacity,
+                "data-heatmap-cell": "",
+                "data-index": cell.index,
+                className: classNames(
+                  interactive && "cursor-pointer",
+                  heatmapCellTransitionClasses
+                ),
+                tabIndex: interactive ? chartMarkTabIndex(visualIndex, visualActive < 0 ? null : visualActive) : void 0,
+                role: interactive ? "button" : void 0,
+                "aria-hidden": interactive ? void 0 : true,
+                "aria-label": interactive ? ariaLabel : void 0,
+                onMouseEnter: (e) => handleMouseEnter(cell.index, e),
+                onMouseMove: handleMouseMove,
+                onMouseLeave: handleMouseLeave,
+                onFocus: (e) => handleMouseEnter(cell.index, e),
+                onClick: () => handleClick(cell.index),
+                onKeyDown: (e) => handleCellKeyDown(e, cell.index)
+              }
+            ),
+            showValues && cell.value !== null && /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: cell.x + cell.w / 2,
+                y: cell.y + cell.h / 2,
+                fill: heatmapLabelFill(cell.fill, cell.heat),
+                className: "text-[10px] pointer-events-none",
+                textAnchor: "middle",
+                dominantBaseline: "middle",
+                "aria-hidden": "true",
+                children: formatValue(cell.value)
+              }
+            )
+          ] }, `cell-${cell.index}`);
+        })
+      ]
+    }
+  );
+  const tooltip = showTooltip ? /* @__PURE__ */ jsx(
+    ChartTooltip,
+    {
+      content: tooltipContent,
+      open: resolvedHoveredIndex !== null && tooltipContent !== "",
+      x: tooltipPosition.x,
+      y: tooltipPosition.y
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: getCartesianChartShellClasses({
+        showLegend: false,
+        responsive,
+        className
+      }),
+      children: [
+        chart,
+        shouldRenderCanvas && /* @__PURE__ */ jsx(
+          "canvas",
+          {
+            ref: canvasRef,
+            "data-heatmap-canvas": "true",
+            "data-heatmap-render-mode": resolvedRenderMode,
+            className: classNames(interactive && "cursor-pointer"),
+            tabIndex: interactive ? 0 : void 0,
+            "aria-hidden": interactive ? void 0 : true,
+            style: {
+              position: "absolute",
+              left: `${innerRect.x}px`,
+              top: `${innerRect.y}px`,
+              width: `${innerRect.width}px`,
+              height: `${innerRect.height}px`,
+              pointerEvents: pointerInteractive ? "auto" : "none"
+            },
+            onMouseMove: pointerInteractive ? handleCanvasMouseMove : void 0,
+            onMouseLeave: pointerInteractive ? handleMouseLeave : void 0,
+            onClick: interactive ? handleCanvasClick : void 0,
+            onKeyDown: interactive ? (event) => handleCellKeyDown(event, visualActive < 0 ? 0 : cells[visualActive]?.index ?? 0) : void 0
+          }
+        ),
+        hiddenTable,
+        tooltip
+      ]
+    }
+  );
+};
+var HeatmapChart_default = HeatmapChart;
+
+export {
+  HeatmapChart,
+  HeatmapChart_default
+};

package/dist/chunk-KJHPPPB2.mjs

@@ -0,0 +1,21 @@
+import {
+  PieChart
+} from "./chunk-OZ4WH3GE.mjs";
+
+// src/components/DonutChart.tsx
+import {
+  DEFAULT_DONUT_INNER_RADIUS_RATIO
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+var DonutChart = ({
+  innerRadiusRatio = DEFAULT_DONUT_INNER_RADIUS_RATIO,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(PieChart, { innerRadiusRatio, ...props });
+};
+var DonutChart_default = DonutChart;
+
+export {
+  DonutChart,
+  DonutChart_default
+};

package/dist/chunk-KJSNUS45.mjs

@@ -0,0 +1,23 @@
+// src/components/Col.tsx
+import { forwardRef, useMemo } from "react";
+import {
+  getColClasses,
+  getColMergedStyleVars
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+var Col = forwardRef(function Col2({ span = 24, offset = 0, order, flex, children, className, style, ...divProps }, ref) {
+  const colClasses = useMemo(() => getColClasses({ flex, className }), [flex, className]);
+  const mergedStyle = useMemo(
+    () => ({
+      ...getColMergedStyleVars(span, offset, order, flex),
+      ...style
+    }),
+    [span, offset, order, flex, style]
+  );
+  return /* @__PURE__ */ jsx("div", { ref, className: colClasses, style: mergedStyle, ...divProps, children });
+});
+Col.displayName = "TigerCol";
+
+export {
+  Col
+};