@expcat/tigercat-react 1.0.7 → 1.1.0

package/dist/chunk-KPRUZCKN.js

@@ -0,0 +1,318 @@
+'use strict';
+
+var chunkXTV5JLLC_js = require('./chunk-XTV5JLLC.js');
+var chunk36ATCHP4_js = require('./chunk-36ATCHP4.js');
+var chunkUKLVOR4E_js = require('./chunk-UKLVOR4E.js');
+var React = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var HeatmapChart = ({
+  width = 400,
+  height = 300,
+  padding = 40,
+  data,
+  xLabels,
+  yLabels,
+  minColor = "#f0f9ff",
+  maxColor = "#2563eb",
+  colorSpace = "rgb",
+  cellRadius = 2,
+  cellGap = 1,
+  showValues = false,
+  valueFormatter,
+  renderMode = "auto",
+  canvasThreshold,
+  hoverable = false,
+  hoveredIndex: hoveredIndexProp,
+  activeOpacity = 1,
+  inactiveOpacity = 0.25,
+  selectable = false,
+  selectedIndex: selectedIndexProp,
+  showTooltip = true,
+  title,
+  desc,
+  className,
+  onHoveredIndexChange,
+  onSelectedIndexChange,
+  onCellClick,
+  onCellHover
+}) => {
+  const canvasRef = React.useRef(null);
+  const {
+    tooltipPosition,
+    resolvedHoveredIndex,
+    activeIndex,
+    handleMouseEnter,
+    handleMouseMove,
+    handleMouseLeave,
+    handleClick
+  } = chunkXTV5JLLC_js.useChartInteraction({
+    hoverable,
+    hoveredIndexProp,
+    selectable,
+    selectedIndexProp,
+    activeOpacity,
+    inactiveOpacity,
+    getData: (index) => data[index],
+    onHoveredIndexChange: (index) => {
+      onHoveredIndexChange?.(index);
+      onCellHover?.(index, index !== null ? data[index] : null);
+    },
+    onSelectedIndexChange,
+    callbacks: { onClick: onCellClick }
+  });
+  const innerRect = React.useMemo(
+    () => tigercatCore.getChartInnerRect(width, height, padding),
+    [width, height, padding]
+  );
+  const cells = React.useMemo(
+    () => tigercatCore.computeHeatmapCells(data, {
+      xLabels,
+      yLabels,
+      width: innerRect.width,
+      height: innerRect.height,
+      cellGap,
+      minColor,
+      maxColor,
+      colorSpace
+    }),
+    [
+      data,
+      xLabels,
+      yLabels,
+      innerRect.width,
+      innerRect.height,
+      cellGap,
+      minColor,
+      maxColor,
+      colorSpace
+    ]
+  );
+  const tooltipContent = React.useMemo(
+    () => tigercatCore.resolveChartTooltipContent(resolvedHoveredIndex, cells, void 0, (cell) => {
+      const val = valueFormatter ? valueFormatter(cell.value) : `${cell.value}`;
+      return `${cell.xLabel} \xD7 ${cell.yLabel}: ${val}`;
+    }),
+    [resolvedHoveredIndex, cells, valueFormatter]
+  );
+  const interactive = hoverable || selectable;
+  const rect = innerRect;
+  const cellW = (rect.width - cellGap * (xLabels.length - 1)) / xLabels.length;
+  const cellH = (rect.height - cellGap * (yLabels.length - 1)) / yLabels.length;
+  const resolvedRenderMode = tigercatCore.resolveHeatmapRenderMode(cells.length, {
+    renderMode,
+    canvasThreshold
+  });
+  const shouldRenderCanvas = resolvedRenderMode === "canvas";
+  React.useEffect(() => {
+    if (!shouldRenderCanvas) return;
+    const canvas = canvasRef.current;
+    const context = canvas?.getContext("2d");
+    if (!canvas || !context) return;
+    context.clearRect(0, 0, rect.width, rect.height);
+    context.textAlign = "center";
+    context.textBaseline = "middle";
+    context.font = "10px sans-serif";
+    cells.forEach((cell, idx) => {
+      context.globalAlpha = tigercatCore.getChartElementOpacity(idx, activeIndex, {
+        activeOpacity,
+        inactiveOpacity
+      }) ?? 1;
+      context.fillStyle = cell.fill;
+      const radius = Math.max(0, Math.min(cellRadius, cell.w / 2, cell.h / 2));
+      if (radius > 0) {
+        context.beginPath();
+        context.moveTo(cell.x + radius, cell.y);
+        context.lineTo(cell.x + cell.w - radius, cell.y);
+        context.quadraticCurveTo(cell.x + cell.w, cell.y, cell.x + cell.w, cell.y + radius);
+        context.lineTo(cell.x + cell.w, cell.y + cell.h - radius);
+        context.quadraticCurveTo(
+          cell.x + cell.w,
+          cell.y + cell.h,
+          cell.x + cell.w - radius,
+          cell.y + cell.h
+        );
+        context.lineTo(cell.x + radius, cell.y + cell.h);
+        context.quadraticCurveTo(cell.x, cell.y + cell.h, cell.x, cell.y + cell.h - radius);
+        context.lineTo(cell.x, cell.y + radius);
+        context.quadraticCurveTo(cell.x, cell.y, cell.x + radius, cell.y);
+        context.closePath();
+        context.fill();
+      } else {
+        context.fillRect(cell.x, cell.y, cell.w, cell.h);
+      }
+      if (showValues) {
+        context.globalAlpha = 1;
+        context.fillStyle = "var(--tiger-text,#374151)";
+        context.fillText(
+          valueFormatter ? valueFormatter(cell.value) : `${cell.value}`,
+          cell.x + cell.w / 2,
+          cell.y + cell.h / 2
+        );
+      }
+    });
+    context.globalAlpha = 1;
+  }, [
+    shouldRenderCanvas,
+    cells,
+    rect.width,
+    rect.height,
+    activeIndex,
+    activeOpacity,
+    inactiveOpacity,
+    cellRadius,
+    showValues,
+    valueFormatter
+  ]);
+  const getCanvasPoint = React.useCallback((event) => {
+    const canvas = event.currentTarget;
+    const bounds = canvas.getBoundingClientRect();
+    const nativeEvent = event.nativeEvent;
+    const offsetX = typeof nativeEvent.offsetX === "number" && Number.isFinite(nativeEvent.offsetX) ? nativeEvent.offsetX : event.clientX - bounds.left;
+    const offsetY = typeof nativeEvent.offsetY === "number" && Number.isFinite(nativeEvent.offsetY) ? nativeEvent.offsetY : event.clientY - bounds.top;
+    const scaleX = bounds.width > 0 ? canvas.width / bounds.width : 1;
+    const scaleY = bounds.height > 0 ? canvas.height / bounds.height : 1;
+    return { x: offsetX * scaleX, y: offsetY * scaleY };
+  }, []);
+  const handleCanvasMouseMove = React.useCallback(
+    (event) => {
+      const point = getCanvasPoint(event);
+      const index = tigercatCore.getHeatmapCellIndexAtPoint(cells, point.x, point.y);
+      if (index === null) {
+        handleMouseLeave();
+        return;
+      }
+      handleMouseEnter(index, event);
+      handleMouseMove(event);
+    },
+    [cells, getCanvasPoint, handleMouseEnter, handleMouseLeave, handleMouseMove]
+  );
+  const handleCanvasClick = React.useCallback(
+    (event) => {
+      const point = getCanvasPoint(event);
+      const index = tigercatCore.getHeatmapCellIndexAtPoint(cells, point.x, point.y);
+      if (index !== null) {
+        handleClick(index);
+      }
+    },
+    [cells, getCanvasPoint, handleClick]
+  );
+  const chart = /* @__PURE__ */ jsxRuntime.jsxs(
+    chunkUKLVOR4E_js.ChartCanvas,
+    {
+      width,
+      height,
+      padding,
+      title,
+      desc,
+      className: tigercatCore.classNames(className),
+      children: [
+        xLabels.map((lbl, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            x: i * (cellW + cellGap) + cellW / 2,
+            y: rect.height + 16,
+            className: tigercatCore.chartAxisTickTextClasses,
+            textAnchor: "middle",
+            children: lbl
+          },
+          `x-${i}`
+        )),
+        yLabels.map((lbl, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            x: -8,
+            y: i * (cellH + cellGap) + cellH / 2,
+            className: tigercatCore.chartAxisTickTextClasses,
+            textAnchor: "end",
+            dominantBaseline: "middle",
+            children: lbl
+          },
+          `y-${i}`
+        )),
+        !shouldRenderCanvas && cells.map((cell, idx) => {
+          const opacity = tigercatCore.getChartElementOpacity(idx, activeIndex, {
+            activeOpacity,
+            inactiveOpacity
+          });
+          return /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "rect",
+              {
+                x: cell.x,
+                y: cell.y,
+                width: cell.w,
+                height: cell.h,
+                rx: cellRadius,
+                fill: cell.fill,
+                opacity,
+                className: tigercatCore.classNames(interactive && "cursor-pointer"),
+                style: {
+                  transition: "opacity 0.2s ease-out",
+                  rx: `var(--tiger-chart-block-radius, ${cellRadius}px)`
+                },
+                onMouseEnter: (e) => handleMouseEnter(idx, e),
+                onMouseMove: handleMouseMove,
+                onMouseLeave: handleMouseLeave,
+                onClick: () => handleClick(idx)
+              }
+            ),
+            showValues && /* @__PURE__ */ jsxRuntime.jsx(
+              "text",
+              {
+                x: cell.x + cell.w / 2,
+                y: cell.y + cell.h / 2,
+                className: "fill-[color:var(--tiger-text,#374151)] text-[10px]",
+                textAnchor: "middle",
+                dominantBaseline: "middle",
+                children: valueFormatter ? valueFormatter(cell.value) : `${cell.value}`
+              }
+            )
+          ] }, `cell-${idx}`);
+        })
+      ]
+    }
+  );
+  const tooltip = showTooltip && hoverable ? /* @__PURE__ */ jsxRuntime.jsx(
+    chunk36ATCHP4_js.ChartTooltip,
+    {
+      content: tooltipContent,
+      visible: resolvedHoveredIndex !== null && tooltipContent !== "",
+      x: tooltipPosition.x,
+      y: tooltipPosition.y
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-block relative", children: [
+    chart,
+    shouldRenderCanvas && /* @__PURE__ */ jsxRuntime.jsx(
+      "canvas",
+      {
+        ref: canvasRef,
+        width: rect.width,
+        height: rect.height,
+        "data-heatmap-canvas": "true",
+        "data-heatmap-render-mode": resolvedRenderMode,
+        className: tigercatCore.classNames(interactive && "cursor-pointer"),
+        style: {
+          position: "absolute",
+          left: `${rect.x}px`,
+          top: `${rect.y}px`,
+          width: `${rect.width}px`,
+          height: `${rect.height}px`,
+          pointerEvents: interactive ? "auto" : "none"
+        },
+        onMouseMove: interactive ? handleCanvasMouseMove : void 0,
+        onMouseLeave: interactive ? handleMouseLeave : void 0,
+        onClick: interactive ? handleCanvasClick : void 0
+      }
+    ),
+    tooltip
+  ] });
+};
+
+exports.HeatmapChart = HeatmapChart;

package/dist/{chunk-UE234MW4.mjs → chunk-KR3EVG7G.mjs}

@@ -1,5 +1,5 @@
 import { useState, useRef, useEffect, useMemo } from 'react';
-import { parseTime, getTimePickerLabels, getTimePeriodLabels, formatTimeDisplayWithLocale, generateHours, generateMinutes, generateSeconds, getTimePickerInputClasses, getTimePickerIconButtonClasses, classNames, timePickerInputWrapperClasses, timePickerClearButtonClasses, TimePickerCloseIconPath, ClockIconPath, timePickerPanelClasses, timePickerRangeHeaderClasses, getTimePickerRangeTabButtonClasses, timePickerPanelContentClasses, timePickerColumnClasses, timePickerColumnHeaderClasses, timePickerColumnListClasses, to24HourFormat, getTimePickerOptionAriaLabel, getTimePickerItemClasses, getTimePickerPeriodButtonClasses, timePickerFooterClasses, timePickerFooterButtonClasses, timePickerBaseClasses, to12HourFormat, isTimeInRange, formatTime, getCurrentTime, icon20ViewBox } from '@expcat/tigercat-core';
+import { parseTime, getTimePickerLabels, getTimePeriodLabels, formatTimeDisplayWithLocale, generateHours, generateMinutes, generateSeconds, getTimePickerInputClasses, getTimePickerIconButtonClasses, classNames, timePickerInputWrapperClasses, timePickerClearButtonClasses, TimePickerCloseIconPath, ClockIconPath, timePickerPanelClasses, timePickerRangeHeaderClasses, getTimePickerRangeTabButtonClasses, timePickerPanelContentClasses, timePickerColumnClasses, timePickerColumnHeaderClasses, timePickerColumnListClasses, to24HourFormat, padTwo, getTimePickerOptionAriaLabel, getTimePickerItemClasses, getTimePickerPeriodButtonClasses, timePickerFooterClasses, timePickerFooterButtonClasses, timePickerBaseClasses, to12HourFormat, isTimeInRange, formatTime, getCurrentTime, icon20ViewBox } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/components/TimePicker.tsx
@@ -444,7 +444,7 @@ var TimePicker = (allProps) => {
                       labelsOverrides
                     ),
                     "aria-selected": isSelected,
-                    children: hour.toString().padStart(2, "0")
+                    children: padTwo(hour)
                   },
                   hour
                 );
@@ -470,7 +470,7 @@ var TimePicker = (allProps) => {
                       labelsOverrides
                     ),
                     "aria-selected": isSelected,
-                    children: minute.toString().padStart(2, "0")
+                    children: padTwo(minute)
                   },
                   minute
                 );
@@ -494,7 +494,7 @@ var TimePicker = (allProps) => {
                       labelsOverrides
                     ),
                     "aria-selected": isSelected,
-                    children: second.toString().padStart(2, "0")
+                    children: padTwo(second)
                   },
                   second
                 );