@expcat/tigercat-vue 2.1.2 → 2.1.4

package/dist/chunk-TOK2QAHM.mjs

@@ -0,0 +1,405 @@
+import {
+  useChartInteraction
+} from "./chunk-AI6X2WFK.mjs";
+import {
+  useResponsiveChartSize
+} from "./chunk-W2FOU4XH.mjs";
+import {
+  ChartTooltip
+} from "./chunk-JRDQVGMH.mjs";
+import {
+  ChartCanvas
+} from "./chunk-6K5BLE4Q.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/HeatmapChart.ts
+import { defineComponent, computed, h, nextTick, ref, watchEffect } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  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";
+var HeatmapChart = defineComponent({
+  name: "TigerHeatmapChart",
+  inheritAttrs: false,
+  props: {
+    width: { type: Number, default: DEFAULT_HEATMAP_WIDTH },
+    height: { type: Number, default: DEFAULT_HEATMAP_HEIGHT },
+    padding: { type: [Number, Object], default: DEFAULT_HEATMAP_PADDING },
+    responsive: { type: Boolean, default: false },
+    data: { type: Array, required: true },
+    xLabels: { type: Array, required: true },
+    yLabels: { type: Array, required: true },
+    minColor: { type: String, default: DEFAULT_HEATMAP_MIN_COLOR },
+    maxColor: { type: String, default: DEFAULT_HEATMAP_MAX_COLOR },
+    min: { type: Number },
+    max: { type: Number },
+    colorSpace: { type: String, default: "rgb" },
+    cellRadius: { type: Number, default: DEFAULT_HEATMAP_CELL_RADIUS },
+    cellGap: { type: Number, default: DEFAULT_HEATMAP_CELL_GAP },
+    showValues: { type: Boolean, default: false },
+    renderMode: { type: String, default: "auto" },
+    canvasThreshold: { type: Number },
+    valueFormatter: { type: Function },
+    hoverable: { type: Boolean, default: false },
+    hoveredIndex: { type: Number, default: void 0 },
+    activeOpacity: { type: Number, default: 1 },
+    inactiveOpacity: { type: Number, default: 0.25 },
+    selectable: { type: Boolean, default: false },
+    selectedIndex: { type: Number, default: void 0 },
+    showTooltip: { type: Boolean, default: true },
+    tooltipFormatter: {
+      type: Function
+    },
+    title: { type: String },
+    desc: { type: String },
+    className: { type: String },
+    onCellClick: {
+      type: Function
+    }
+  },
+  emits: ["update:hoveredIndex", "update:selectedIndex", "cell-click", "cell-hover"],
+  setup(props, { emit, attrs }) {
+    const config = useTigerConfig();
+    const labels = computed(() => getChartLabels(mergeTigerLocale(config.value.locale)));
+    const interactive = computed(
+      () => props.hoverable || props.selectable || typeof props.onCellClick === "function"
+    );
+    const canvasRef = ref(null);
+    const { innerRect, onResolvedSizeChange } = useResponsiveChartSize(
+      () => props.width,
+      () => props.height,
+      () => props.padding,
+      () => props.responsive
+    );
+    const layout = computed(
+      () => layoutHeatmap(props.data, {
+        xLabels: props.xLabels,
+        yLabels: props.yLabels,
+        width: innerRect.value.width,
+        height: innerRect.value.height,
+        cellGap: props.cellGap,
+        minColor: props.minColor,
+        maxColor: props.maxColor,
+        colorSpace: props.colorSpace,
+        min: props.min,
+        max: props.max
+      })
+    );
+    const cells = computed(() => layout.value.cells);
+    const {
+      tooltipPosition,
+      resolvedHoveredIndex,
+      activeIndex,
+      handleMouseEnter,
+      handleMouseMove,
+      handleMouseLeave,
+      handleClick,
+      handleKeyDown
+    } = useChartInteraction({
+      hoverable: computed(() => props.hoverable),
+      showTooltip: computed(() => props.showTooltip),
+      hoveredIndexProp: () => props.hoveredIndex,
+      selectable: computed(() => props.selectable),
+      selectedIndexProp: () => props.selectedIndex,
+      activeOpacity: computed(() => props.activeOpacity),
+      inactiveOpacity: computed(() => props.inactiveOpacity),
+      getData: (index) => cells.value[index]?.datum ?? null,
+      onHoveredIndexChange: (index) => emit("update:hoveredIndex", index),
+      onSelectedIndexChange: (index) => emit("update:selectedIndex", index),
+      onHover: (index, datum) => emit("cell-hover", index, datum ?? null),
+      onClick: (index, datum) => {
+        const resolved = datum ?? null;
+        props.onCellClick?.(index, resolved);
+        emit("cell-click", index, resolved);
+      }
+    });
+    const formatValue = (value) => {
+      if (value === null) return "";
+      return props.valueFormatter ? props.valueFormatter(value) : `${value}`;
+    };
+    const tooltipContent = computed(() => {
+      if (resolvedHoveredIndex.value === null) return "";
+      const cell = cells.value[resolvedHoveredIndex.value];
+      if (!cell) return "";
+      if (props.tooltipFormatter) return props.tooltipFormatter(cell.datum, cell.index);
+      return formatHeatmapTooltip(labels.value.heatmapTooltip, cell, formatValue(cell.value));
+    });
+    const resolvedRenderMode = computed(
+      () => resolveHeatmapRenderMode(cells.value.length, {
+        renderMode: props.renderMode,
+        canvasThreshold: props.canvasThreshold
+      })
+    );
+    const shouldRenderCanvas = computed(() => resolvedRenderMode.value === "canvas");
+    watchEffect(() => {
+      if (!shouldRenderCanvas.value) return;
+      const rect = innerRect.value;
+      const cellList = cells.value;
+      const currentActiveIndex = activeIndex.value;
+      const currentActiveOpacity = props.activeOpacity;
+      const currentInactiveOpacity = props.inactiveOpacity;
+      const currentCellRadius = props.cellRadius;
+      const currentShowValues = props.showValues;
+      const formatter = props.valueFormatter;
+      nextTick(() => {
+        const canvas = canvasRef.value;
+        const context = canvas?.getContext("2d");
+        if (!canvas || !context) return;
+        const dpr = getHeatmapDevicePixelRatio();
+        canvas.width = Math.max(0, Math.round(rect.width * dpr));
+        canvas.height = Math.max(0, Math.round(rect.height * dpr));
+        paintHeatmapCanvas(context, cellList, {
+          width: rect.width,
+          height: rect.height,
+          dpr,
+          cellRadius: currentCellRadius,
+          showValues: currentShowValues,
+          valueFormatter: formatter,
+          activeIndex: currentActiveIndex,
+          activeOpacity: currentActiveOpacity,
+          inactiveOpacity: currentInactiveOpacity
+        });
+      });
+    });
+    const getCanvasPoint = (event) => {
+      const canvas = event.currentTarget;
+      const bounds = canvas.getBoundingClientRect();
+      const cssWidth = innerRect.value.width;
+      const cssHeight = innerRect.value.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 };
+    };
+    const handleCanvasMouseMove = (event) => {
+      const point = getCanvasPoint(event);
+      const index = getHeatmapCellIndexAtPoint(cells.value, point.x, point.y);
+      if (index === null) {
+        handleMouseLeave();
+        return;
+      }
+      handleMouseEnter(index, event);
+      handleMouseMove(event);
+    };
+    const handleCanvasClick = (event) => {
+      const point = getCanvasPoint(event);
+      const index = getHeatmapCellIndexAtPoint(cells.value, point.x, point.y);
+      if (index !== null) handleClick(index);
+    };
+    const handleCellKeyDown = (event, index) => {
+      if (isChartNavigationKey(event.key)) {
+        event.preventDefault();
+        const next = nextHeatmapCellIndex(index, event.key, layout.value.cols, layout.value.rows);
+        if (!shouldRenderCanvas.value) {
+          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);
+    };
+    return () => {
+      const pointerInteractive = interactive.value || props.showTooltip;
+      const rect = innerRect.value;
+      const currentLayout = layout.value;
+      const currentCells = currentLayout.cells;
+      const visualActive = currentCells.findIndex(
+        (cell) => cell.index === (activeIndex.value ?? resolvedHoveredIndex.value)
+      );
+      const hiddenTable = h("table", { class: "sr-only", "data-heatmap-table": "" }, [
+        h("thead", [
+          h("tr", [
+            h("td"),
+            ...props.xLabels.map((label) => h("th", { key: `hx-${label}`, scope: "col" }, label))
+          ])
+        ]),
+        h("tbody", [
+          ...props.yLabels.map(
+            (yLabel, row) => h("tr", { key: `hy-${yLabel}` }, [
+              h("th", { scope: "row" }, yLabel),
+              ...props.xLabels.map((xLabel, col) => {
+                const cell = currentCells[row * currentLayout.cols + col];
+                return h("td", { key: `hv-${xLabel}-${yLabel}` }, formatValue(cell?.value ?? null));
+              })
+            ])
+          )
+        ])
+      ]);
+      const chart = h(
+        ChartCanvas,
+        {
+          width: props.width,
+          height: props.height,
+          padding: props.padding,
+          responsive: props.responsive,
+          title: props.title,
+          desc: props.desc,
+          onResolvedSizeChange
+        },
+        {
+          default: () => {
+            const xAxisLabels = currentLayout.xAxisLabels.map(
+              (label, i) => h(
+                "text",
+                {
+                  key: `x-${i}`,
+                  x: label.x,
+                  y: label.y,
+                  class: chartAxisTickTextClasses,
+                  "text-anchor": "middle"
+                },
+                label.text
+              )
+            );
+            const yAxisLabels = currentLayout.yAxisLabels.map(
+              (label, i) => h(
+                "text",
+                {
+                  key: `y-${i}`,
+                  x: label.x,
+                  y: label.y,
+                  class: chartAxisTickTextClasses,
+                  "text-anchor": "end",
+                  "dominant-baseline": "middle"
+                },
+                label.text
+              )
+            );
+            const cellElems = shouldRenderCanvas.value ? [] : currentCells.flatMap((cell, visualIndex) => {
+              const opacity = getChartElementOpacity(cell.index, activeIndex.value, {
+                activeOpacity: props.activeOpacity,
+                inactiveOpacity: props.inactiveOpacity
+              });
+              const ariaLabel = formatHeatmapTooltip(
+                labels.value.heatmapTooltip,
+                cell,
+                formatValue(cell.value)
+              );
+              const elems = [
+                h("rect", {
+                  key: `cell-${cell.index}`,
+                  x: cell.x,
+                  y: cell.y,
+                  width: cell.w,
+                  height: cell.h,
+                  rx: props.cellRadius,
+                  fill: cell.fill,
+                  opacity,
+                  "data-heatmap-cell": "",
+                  "data-index": cell.index,
+                  class: classNames(
+                    interactive.value && "cursor-pointer",
+                    heatmapCellTransitionClasses
+                  ),
+                  tabindex: interactive.value ? chartMarkTabIndex(visualIndex, visualActive < 0 ? null : visualActive) : void 0,
+                  role: interactive.value ? "button" : void 0,
+                  "aria-hidden": interactive.value ? void 0 : true,
+                  "aria-label": interactive.value ? 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)
+                })
+              ];
+              if (props.showValues && cell.value !== null) {
+                elems.push(
+                  h(
+                    "text",
+                    {
+                      key: `val-${cell.index}`,
+                      x: cell.x + cell.w / 2,
+                      y: cell.y + cell.h / 2,
+                      fill: heatmapLabelFill(cell.fill, cell.heat),
+                      class: "text-[10px] pointer-events-none",
+                      "text-anchor": "middle",
+                      "dominant-baseline": "middle",
+                      "aria-hidden": "true"
+                    },
+                    formatValue(cell.value)
+                  )
+                );
+              }
+              return elems;
+            });
+            return [...xAxisLabels, ...yAxisLabels, ...cellElems];
+          }
+        }
+      );
+      const tooltip = props.showTooltip ? h(ChartTooltip, {
+        content: tooltipContent.value,
+        open: resolvedHoveredIndex.value !== null && tooltipContent.value !== "",
+        x: tooltipPosition.value.x,
+        y: tooltipPosition.value.y
+      }) : null;
+      const canvas = shouldRenderCanvas.value ? h("canvas", {
+        ref: canvasRef,
+        class: classNames(interactive.value && "cursor-pointer"),
+        style: {
+          position: "absolute",
+          left: `${rect.x}px`,
+          top: `${rect.y}px`,
+          width: `${rect.width}px`,
+          height: `${rect.height}px`,
+          pointerEvents: pointerInteractive ? "auto" : "none"
+        },
+        tabindex: interactive.value ? 0 : void 0,
+        "aria-hidden": interactive.value ? void 0 : true,
+        "data-heatmap-canvas": "true",
+        "data-heatmap-render-mode": resolvedRenderMode.value,
+        onMousemove: pointerInteractive ? handleCanvasMouseMove : void 0,
+        onMouseleave: pointerInteractive ? handleMouseLeave : void 0,
+        onClick: interactive.value ? handleCanvasClick : void 0,
+        onKeydown: interactive.value ? (event) => handleCellKeyDown(
+          event,
+          visualActive < 0 ? 0 : currentCells[visualActive]?.index ?? 0
+        ) : void 0
+      }) : null;
+      return h(
+        "div",
+        {
+          class: getCartesianChartShellClasses({
+            showLegend: false,
+            responsive: props.responsive,
+            className: classNames(coerceClassValue(attrs.class), props.className)
+          })
+        },
+        [chart, canvas, hiddenTable, tooltip]
+      );
+    };
+  }
+});
+var HeatmapChart_default = HeatmapChart;
+
+export {
+  HeatmapChart,
+  HeatmapChart_default
+};