@katlux/block-charts 0.1.1-alpha.87 → 0.1.1-alpha.89

package/dist/runtime/components/KBarChart/KBarChart.vue

@@ -1,7 +1,6 @@
 <template lang="pug">
 .k-chart-wrapper(
 	:class="{ 'k-chart--grabbing': isDragging, 'k-chart--pannable': canPan }"
-	:style="{ cursor: isDragging ? 'grabbing' : canPan ? 'grab' : 'default' }"
 	@wheel.prevent="onWheel"
 	@mousedown="onMouseDown"
 	@mousemove="onMouseMove"
@@ -25,7 +24,7 @@
 						:height="plotHeight.value"
 					)
 			g.k-chart-hits
-				// Hit detection is now handled by calculation in onMouseMove
+				// Hit detection is handled by calculation in onMouseMove
 			
 			// Dynamic Interaction Layer
 			g.k-chart-interaction(v-if="hoveredIndex !== -1 && hoveredBar" clip-path="url(#plot-clip)")
@@ -35,7 +34,6 @@
 					:width="hoveredBar.w"
 					:height="hoveredBar.h"
 					fill="transparent"
-					style="cursor: pointer"
 					@click="emit('click-point', hoveredBar.item, hoveredIndex)"
 				)
 				rect(
@@ -49,7 +47,7 @@
 					rx="2"
 					pointer-events="none"
 				)
-		.k-chart-tooltip(v-if="tooltipState.visible && !isLoading" :style="{ left: tooltipState.x + 'px', top: tooltipState.y + 'px' }")
+		.k-chart-tooltip(v-if="tooltipState.visible && !isLoading" :style="tooltipStyle")
 			slot(name="tooltip" :item="tooltipState.item" :index="tooltipState.index")
 				span {{ tooltipState.content }}
 </template>
@@ -62,6 +60,7 @@ import { useChartData } from "../../composables/useChartData";
 import { useChartViewport } from "../../composables/useChartViewport";
 import { useChartAnimation, easeOut } from "../../composables/useChartAnimation";
 import { useChartExport } from "../../composables/useChartExport";
+import { cleanNumber, safeMax } from "../../composables/chartUtils";
 const props = defineProps({
   dataProvider: { type: null, required: false },
   categoryField: { type: String, required: false, default: "category" },
@@ -82,7 +81,7 @@ const emit = defineEmits(["click-point", "hover-point", "zoom-change", "pan-chan
 const containerRef = ref(null);
 const canvasRef = ref(null);
 const svgRef = ref(null);
-const { ctx, width, height, clear, setupCanvas } = useChartCanvas();
+const { ctx, width, height, resizeTick, clear, setupCanvas } = useChartCanvas();
 const { hoveredIndex, tooltipState, showTooltip, hideTooltip, setHovered } = useChartSvg();
 const dataRef = computed(() => props.dataProvider);
 const { items } = useChartData(dataRef);
@@ -91,6 +90,10 @@ const { exportPng, exportSvg: exportSvgFile } = useChartExport();
 const isLoading = computed(() => {
   return props.dataProvider?.loading?.value || props.dataProvider?.initialLoad?.value || false;
 });
+const tooltipStyle = computed(() => ({
+  left: `${tooltipState.value.x}px`,
+  top: `${tooltipState.value.y}px`
+}));
 const maxZoomRef = computed(() => props.maxZoom);
 const plotWidthRef = computed(() => Math.max(0, width.value - 75));
 const plotLeftRef = computed(() => 55);
@@ -119,12 +122,12 @@ const groups = computed(() => [...new Set(items.value.map((r) => String(r[props.
 const maxValue = computed(() => {
   if (props.mode === "stacked") {
     const sums = categories.value.map(
-      (cat) => items.value.filter((r) => String(r[props.categoryField]) === cat).reduce((acc, r) => acc + Math.max(0, Number(r[props.valueField])), 0)
+      (cat) => items.value.filter((r) => String(r[props.categoryField]) === cat).reduce((acc, r) => acc + Math.max(0, cleanNumber(r[props.valueField])), 0)
     );
-    return Math.max(...sums, 10);
+    return safeMax(sums, 10);
   }
-  const vals = items.value.map((r) => Number(r[props.valueField]));
-  return vals.length ? Math.max(...vals, 10) : 10;
+  const vals = items.value.map((r) => cleanNumber(r[props.valueField]));
+  return safeMax(vals, 10);
 });
 const visibleCatCount = computed(() => Math.max(1, Math.ceil(categories.value.length / scale.value)));
 const panCatOffset = computed(() => {
@@ -144,117 +147,228 @@ const draw = () => {
   if (!ctx.value) return;
   clear(props.backgroundColor);
   const c = ctx.value;
-  const p = easeOut(progress.value);
+  const p = props.animated ? easeOut(progress.value) : 1;
   const bars = [];
+  const isHorizontal = props.orientation === "horizontal";
   const catCount = visibleCategories.value.length;
   const gCount = groups.value.length || 1;
-  const catWidth = plotWidth.value / (catCount || 1);
-  let barWidth = catWidth * 0.7;
-  if (props.mode === "clustered" && gCount > 1) {
-    barWidth = catWidth * 0.8 / gCount;
-  }
-  c.save();
-  c.strokeStyle = "rgba(100,100,120,0.1)";
-  c.lineWidth = 1;
-  c.fillStyle = "rgba(150,150,170,0.8)";
-  c.font = "11px system-ui, sans-serif";
-  c.textAlign = "right";
-  for (let i = 0; i <= 5; i++) {
-    const val = maxValue.value / 5 * i;
-    const y = plotTop + plotHeight.value - val / maxValue.value * plotHeight.value;
+  if (isHorizontal) {
+    const catHeight = plotHeight.value / (catCount || 1);
+    let barHeight = catHeight * 0.7;
+    if (props.mode === "clustered" && gCount > 1) {
+      barHeight = catHeight * 0.8 / gCount;
+    }
+    c.save();
+    c.strokeStyle = "rgba(100,100,120,0.1)";
+    c.lineWidth = 1;
+    c.fillStyle = "rgba(150,150,170,0.8)";
+    c.font = "11px system-ui, sans-serif";
+    c.textAlign = "center";
+    for (let i = 0; i <= 5; i++) {
+      const val = maxValue.value / 5 * i;
+      const x = plotLeft + val / maxValue.value * plotWidth.value;
+      c.beginPath();
+      c.moveTo(x, plotTop);
+      c.lineTo(x, plotTop + plotHeight.value);
+      c.stroke();
+      c.fillText(val.toFixed(0), x, plotTop + plotHeight.value + 16);
+    }
+    c.strokeStyle = "rgba(100,100,120,0.05)";
+    for (let i = 0; i <= catCount; i++) {
+      const y = plotTop + i * catHeight;
+      c.beginPath();
+      c.moveTo(plotLeft, y);
+      c.lineTo(plotLeft + plotWidth.value, y);
+      c.stroke();
+    }
+    c.strokeStyle = "rgba(150,150,170,0.5)";
     c.beginPath();
-    c.moveTo(plotLeft, y);
-    c.lineTo(plotLeft + plotWidth.value, y);
+    c.moveTo(plotLeft, plotTop + plotHeight.value);
+    c.lineTo(plotLeft + plotWidth.value, plotTop + plotHeight.value);
     c.stroke();
-    c.fillText(val.toFixed(0), plotLeft - 8, y + 4);
-  }
-  c.strokeStyle = "rgba(100,100,120,0.05)";
-  for (let i = 0; i <= catCount; i++) {
-    const x = plotLeft + i * catWidth;
     c.beginPath();
-    c.moveTo(x, plotTop);
-    c.lineTo(x, plotTop + plotHeight.value);
+    c.moveTo(plotLeft, plotTop);
+    c.lineTo(plotLeft, plotTop + plotHeight.value);
     c.stroke();
-  }
-  c.strokeStyle = "rgba(150,150,170,0.5)";
-  c.beginPath();
-  c.moveTo(plotLeft, plotTop + plotHeight.value);
-  c.lineTo(plotLeft + plotWidth.value, plotTop + plotHeight.value);
-  c.stroke();
-  c.beginPath();
-  c.moveTo(plotLeft, plotTop);
-  c.lineTo(plotLeft, plotTop + plotHeight.value);
-  c.stroke();
-  c.restore();
-  c.save();
-  c.beginPath();
-  c.rect(plotLeft, plotTop, plotWidth.value, plotHeight.value);
-  c.clip();
-  visibleCategories.value.forEach((cat, catIdx) => {
-    const catItems = items.value.filter((r) => String(r[props.categoryField]) === cat);
-    const catX = plotLeft + catIdx * catWidth;
-    if (props.mode === "stacked") {
-      let yOffset = 0;
-      groups.value.forEach((group, gIdx) => {
-        const item = catItems.find((r) => String(r[props.groupField] ?? "default") === group);
-        if (!item) return;
-        const val = Number(item[props.valueField]) * p;
-        const bh = val / maxValue.value * plotHeight.value;
-        const bx = catX + (catWidth - barWidth) / 2;
-        const by = plotTop + plotHeight.value - (yOffset + val) / maxValue.value * plotHeight.value;
-        const isHovered = hoveredIndex.value === bars.length;
-        const color = props.colors[gIdx % props.colors.length];
-        c.fillStyle = isHovered ? color : color + "dd";
-        c.fillRect(bx, by, barWidth, bh);
-        c.strokeStyle = "rgba(255,255,255,0.3)";
-        c.lineWidth = 1;
-        c.strokeRect(bx, by, barWidth, bh);
-        bars.push({ x: bx, y: by, w: barWidth, h: bh, item, label: `${cat} (${group}): ${item[props.valueField]}` });
-        yOffset += Number(item[props.valueField]);
-      });
-    } else if (props.mode === "simple") {
-      const item = catItems[0];
-      if (item) {
-        const isHovered = hoveredIndex.value === bars.length;
-        const val = Number(item[props.valueField]) * p;
-        const bh = val / maxValue.value * plotHeight.value;
-        const bx = catX + (catWidth - barWidth) / 2;
-        const by = plotTop + plotHeight.value - bh;
-        const color = props.colors[0] || "#6366f1";
-        c.fillStyle = isHovered ? color : color + "dd";
-        c.fillRect(bx, by, barWidth, bh);
-        bars.push({ x: bx, y: by, w: barWidth, h: bh, item, label: `${cat}: ${item[props.valueField]}` });
+    c.restore();
+    c.save();
+    c.beginPath();
+    c.rect(plotLeft, plotTop, plotWidth.value, plotHeight.value);
+    c.clip();
+    visibleCategories.value.forEach((cat, catIdx) => {
+      const catItems = items.value.filter((r) => String(r[props.categoryField]) === cat);
+      const catY = plotTop + catIdx * catHeight;
+      if (props.mode === "stacked") {
+        let xOffset = 0;
+        groups.value.forEach((group, gIdx) => {
+          const item = catItems.find((r) => String(r[props.groupField] ?? "default") === group);
+          if (!item) return;
+          const val = cleanNumber(item[props.valueField]) * p;
+          const bw = val / maxValue.value * plotWidth.value;
+          const bx = plotLeft + xOffset / maxValue.value * plotWidth.value;
+          const by = catY + (catHeight - barHeight) / 2;
+          const isHovered = hoveredIndex.value === bars.length;
+          const color = props.colors[gIdx % props.colors.length];
+          c.fillStyle = isHovered ? color : color + "dd";
+          c.fillRect(bx, by, bw, barHeight);
+          c.strokeStyle = "rgba(255,255,255,0.3)";
+          c.lineWidth = 1;
+          c.strokeRect(bx, by, bw, barHeight);
+          bars.push({ x: bx, y: by, w: bw, h: barHeight, item, label: `${cat} (${group}): ${item[props.valueField]}` });
+          xOffset += cleanNumber(item[props.valueField]);
+        });
+      } else if (props.mode === "simple") {
+        const item = catItems[0];
+        if (item) {
+          const isHovered = hoveredIndex.value === bars.length;
+          const val = cleanNumber(item[props.valueField]) * p;
+          const bw = val / maxValue.value * plotWidth.value;
+          const bx = plotLeft;
+          const by = catY + (catHeight - barHeight) / 2;
+          const color = props.colors[0] || "#6366f1";
+          c.fillStyle = isHovered ? color : color + "dd";
+          c.fillRect(bx, by, bw, barHeight);
+          bars.push({ x: bx, y: by, w: bw, h: barHeight, item, label: `${cat}: ${item[props.valueField]}` });
+        }
+      } else {
+        groups.value.forEach((group, gIdx) => {
+          const item = catItems.find((r) => String(r[props.groupField] ?? "default") === group);
+          if (!item) return;
+          const isHovered = hoveredIndex.value === bars.length;
+          const val = cleanNumber(item[props.valueField]) * p;
+          const bw = val / maxValue.value * plotWidth.value;
+          const gCountTotal = groups.value.length;
+          const totalBarsH = gCountTotal * barHeight + (gCountTotal - 1) * 2;
+          const startY = catY + (catHeight - totalBarsH) / 2;
+          const by = startY + gIdx * (barHeight + 2);
+          const bx = plotLeft;
+          const color = props.colors[gIdx % props.colors.length];
+          c.fillStyle = isHovered ? color : color + "dd";
+          c.fillRect(bx, by, bw, barHeight);
+          bars.push({ x: bx, y: by, w: bw, h: barHeight, item, label: `${cat} (${group}): ${item[props.valueField]}` });
+        });
       }
-    } else {
-      groups.value.forEach((group, gIdx) => {
-        const item = catItems.find((r) => String(r[props.groupField] ?? "default") === group);
-        if (!item) return;
-        const isHovered = hoveredIndex.value === bars.length;
-        const val = Number(item[props.valueField]) * p;
-        const bh = val / maxValue.value * plotHeight.value;
-        const gCountTotal = groups.value.length;
-        const totalBarsW = gCountTotal * barWidth + (gCountTotal - 1) * 2;
-        const startX = catX + (catWidth - totalBarsW) / 2;
-        const bx = startX + gIdx * (barWidth + 2);
-        const by = plotTop + plotHeight.value - bh;
-        const color = props.colors[gIdx % props.colors.length];
-        c.fillStyle = isHovered ? color : color + "dd";
-        c.fillRect(bx, by, barWidth, bh);
-        bars.push({ x: bx, y: by, w: barWidth, h: bh, item, label: `${cat} (${group}): ${item[props.valueField]}` });
-      });
+    });
+    c.restore();
+    c.save();
+    c.fillStyle = "rgba(150,150,170,0.9)";
+    c.font = "11px system-ui, sans-serif";
+    c.textAlign = "right";
+    visibleCategories.value.forEach((cat, catIdx) => {
+      const catY = plotTop + catIdx * catHeight;
+      const label = cat.length > 10 ? cat.slice(0, 10) + "\u2026" : cat;
+      c.fillText(label, plotLeft - 8, catY + catHeight / 2 + 4);
+    });
+    c.restore();
+  } else {
+    const catWidth = plotWidth.value / (catCount || 1);
+    let barWidth = catWidth * 0.7;
+    if (props.mode === "clustered" && gCount > 1) {
+      barWidth = catWidth * 0.8 / gCount;
     }
-  });
-  c.restore();
-  c.save();
-  c.fillStyle = "rgba(150,150,170,0.9)";
-  c.font = "11px system-ui, sans-serif";
-  c.textAlign = "center";
-  visibleCategories.value.forEach((cat, catIdx) => {
-    const catX = plotLeft + catIdx * catWidth;
-    const label = cat.length > 10 ? cat.slice(0, 10) + "\u2026" : cat;
-    c.fillText(label, catX + catWidth / 2, plotTop + plotHeight.value + 18);
-  });
-  c.restore();
+    c.save();
+    c.strokeStyle = "rgba(100,100,120,0.1)";
+    c.lineWidth = 1;
+    c.fillStyle = "rgba(150,150,170,0.8)";
+    c.font = "11px system-ui, sans-serif";
+    c.textAlign = "right";
+    for (let i = 0; i <= 5; i++) {
+      const val = maxValue.value / 5 * i;
+      const y = plotTop + plotHeight.value - val / maxValue.value * plotHeight.value;
+      c.beginPath();
+      c.moveTo(plotLeft, y);
+      c.lineTo(plotLeft + plotWidth.value, y);
+      c.stroke();
+      c.fillText(val.toFixed(0), plotLeft - 8, y + 4);
+    }
+    c.strokeStyle = "rgba(100,100,120,0.05)";
+    for (let i = 0; i <= catCount; i++) {
+      const x = plotLeft + i * catWidth;
+      c.beginPath();
+      c.moveTo(x, plotTop);
+      c.lineTo(x, plotTop + plotHeight.value);
+      c.stroke();
+    }
+    c.strokeStyle = "rgba(150,150,170,0.5)";
+    c.beginPath();
+    c.moveTo(plotLeft, plotTop + plotHeight.value);
+    c.lineTo(plotLeft + plotWidth.value, plotTop + plotHeight.value);
+    c.stroke();
+    c.beginPath();
+    c.moveTo(plotLeft, plotTop);
+    c.lineTo(plotLeft, plotTop + plotHeight.value);
+    c.stroke();
+    c.restore();
+    c.save();
+    c.beginPath();
+    c.rect(plotLeft, plotTop, plotWidth.value, plotHeight.value);
+    c.clip();
+    visibleCategories.value.forEach((cat, catIdx) => {
+      const catItems = items.value.filter((r) => String(r[props.categoryField]) === cat);
+      const catX = plotLeft + catIdx * catWidth;
+      if (props.mode === "stacked") {
+        let yOffset = 0;
+        groups.value.forEach((group, gIdx) => {
+          const item = catItems.find((r) => String(r[props.groupField] ?? "default") === group);
+          if (!item) return;
+          const val = cleanNumber(item[props.valueField]) * p;
+          const bh = val / maxValue.value * plotHeight.value;
+          const bx = catX + (catWidth - barWidth) / 2;
+          const by = plotTop + plotHeight.value - (yOffset + val) / maxValue.value * plotHeight.value;
+          const isHovered = hoveredIndex.value === bars.length;
+          const color = props.colors[gIdx % props.colors.length];
+          c.fillStyle = isHovered ? color : color + "dd";
+          c.fillRect(bx, by, barWidth, bh);
+          c.strokeStyle = "rgba(255,255,255,0.3)";
+          c.lineWidth = 1;
+          c.strokeRect(bx, by, barWidth, bh);
+          bars.push({ x: bx, y: by, w: barWidth, h: bh, item, label: `${cat} (${group}): ${item[props.valueField]}` });
+          yOffset += cleanNumber(item[props.valueField]);
+        });
+      } else if (props.mode === "simple") {
+        const item = catItems[0];
+        if (item) {
+          const isHovered = hoveredIndex.value === bars.length;
+          const val = cleanNumber(item[props.valueField]) * p;
+          const bh = val / maxValue.value * plotHeight.value;
+          const bx = catX + (catWidth - barWidth) / 2;
+          const by = plotTop + plotHeight.value - bh;
+          const color = props.colors[0] || "#6366f1";
+          c.fillStyle = isHovered ? color : color + "dd";
+          c.fillRect(bx, by, barWidth, bh);
+          bars.push({ x: bx, y: by, w: barWidth, h: bh, item, label: `${cat}: ${item[props.valueField]}` });
+        }
+      } else {
+        groups.value.forEach((group, gIdx) => {
+          const item = catItems.find((r) => String(r[props.groupField] ?? "default") === group);
+          if (!item) return;
+          const isHovered = hoveredIndex.value === bars.length;
+          const val = cleanNumber(item[props.valueField]) * p;
+          const bh = val / maxValue.value * plotHeight.value;
+          const gCountTotal = groups.value.length;
+          const totalBarsW = gCountTotal * barWidth + (gCountTotal - 1) * 2;
+          const startX = catX + (catWidth - totalBarsW) / 2;
+          const bx = startX + gIdx * (barWidth + 2);
+          const by = plotTop + plotHeight.value - bh;
+          const color = props.colors[gIdx % props.colors.length];
+          c.fillStyle = isHovered ? color : color + "dd";
+          c.fillRect(bx, by, barWidth, bh);
+          bars.push({ x: bx, y: by, w: barWidth, h: bh, item, label: `${cat} (${group}): ${item[props.valueField]}` });
+        });
+      }
+    });
+    c.restore();
+    c.save();
+    c.fillStyle = "rgba(150,150,170,0.9)";
+    c.font = "11px system-ui, sans-serif";
+    c.textAlign = "center";
+    visibleCategories.value.forEach((cat, catIdx) => {
+      const catX = plotLeft + catIdx * catWidth;
+      const label = cat.length > 10 ? cat.slice(0, 10) + "\u2026" : cat;
+      c.fillText(label, catX + catWidth / 2, plotTop + plotHeight.value + 18);
+    });
+    c.restore();
+  }
   c.save();
   c.fillStyle = "rgba(120,120,140,0.8)";
   if (props.xAxisTitle) {
@@ -291,10 +405,12 @@ const drawLegend = (c) => {
   });
   c.restore();
 };
-watch([items, scale, panOffset, hoveredIndex, progress, () => props.mode, () => props.orientation], draw, { deep: true });
+watch(progress, draw);
+watch([scale, panOffset, hoveredIndex, resizeTick, width, height, () => props.mode, () => props.orientation], draw);
 watch(items, () => {
   if (props.animated) animate();
-}, { deep: true });
+  else draw();
+});
 watch(scale, (v) => emit("zoom-change", v));
 watch(panOffset, (v) => emit("pan-change", v), { deep: true });
 onMounted(async () => {
@@ -339,7 +455,7 @@ defineExpose({
   zoomOut: viewport.zoomOut,
   resetZoom: viewport.resetZoom,
   exportPng: () => canvasRef.value && exportPng(canvasRef.value, "bar-chart.png"),
-  exportSvg: () => svgRef.value && exportSvgFile(svgRef.value, "bar-chart.svg")
+  exportSvg: () => svgRef.value && exportSvgFile(svgRef.value, "bar-chart.svg", canvasRef.value)
 });
 </script>
 
@@ -347,6 +463,13 @@ defineExpose({
 .k-chart-wrapper {
   position: relative;
   user-select: none;
+  cursor: default;
+}
+.k-chart-wrapper.k-chart--pannable {
+  cursor: grab;
+}
+.k-chart-wrapper.k-chart--grabbing {
+  cursor: grabbing;
 }
 .k-chart-wrapper .k-chart-controls {
   position: absolute;

package/dist/runtime/components/KHeatMap/KHeatMap.vue

@@ -21,7 +21,6 @@
 					:width="hoveredCell.w"
 					:height="hoveredCell.h"
 					fill="transparent"
-					style="cursor: pointer"
 					@click="emit('click-point', hoveredCell.item, hoveredIndex)"
 				)
 				rect(
@@ -37,7 +36,7 @@
 				)
 			
 			// Labels remain in SVG for sharpness and easy styling
-		.k-chart-tooltip(v-if="tooltipState.visible && !isLoading" :style="{ left: tooltipState.x + 'px', top: tooltipState.y + 'px' }")
+		.k-chart-tooltip(v-if="tooltipState.visible && !isLoading" :style="tooltipStyle")
 			slot(name="tooltip" :item="tooltipState.item" :index="tooltipState.index")
 				span {{ tooltipState.content }}
 </template>
@@ -48,6 +47,7 @@ import { useChartSvg } from "../../composables/useChartSvg";
 import { useChartData } from "../../composables/useChartData";
 import { useChartCanvas } from "../../composables/useChartCanvas";
 import { useChartExport } from "../../composables/useChartExport";
+import { cleanNumber, safeMax, safeMin } from "../../composables/chartUtils";
 const props = defineProps({
   dataProvider: { type: null, required: false },
   rowField: { type: String, required: false, default: "row" },
@@ -73,20 +73,34 @@ const { exportPng, exportSvg: exportSvgFile } = useChartExport();
 const isLoading = computed(() => {
   return props.dataProvider?.loading?.value || props.dataProvider?.initialLoad?.value || false;
 });
+const tooltipStyle = computed(() => ({
+  left: `${tooltipState.value.x}px`,
+  top: `${tooltipState.value.y}px`
+}));
 const padLeft = 80;
 const padTop = 30;
 const padRight = 20;
 const padBottom = 20;
 const rows = computed(() => [...new Set(items.value.map((r) => String(r[props.rowField])))]);
 const cols = computed(() => [...new Set(items.value.map((r) => String(r[props.columnField])))]);
+const rowIndexMap = computed(() => {
+  const map = /* @__PURE__ */ new Map();
+  rows.value.forEach((r, i) => map.set(r, i));
+  return map;
+});
+const colIndexMap = computed(() => {
+  const map = /* @__PURE__ */ new Map();
+  cols.value.forEach((c, i) => map.set(c, i));
+  return map;
+});
 const cellW = computed(() => Math.max(8, (width.value - padLeft - padRight) / (cols.value.length || 1)));
 const cellH = computed(() => Math.max(8, (height.value - padTop - padBottom) / (rows.value.length || 1)));
-const maxVal = computed(() => Math.max(...items.value.map((r) => Number(r[props.valueField])), 1));
+const maxVal = computed(() => safeMax(items.value.map((r) => cleanNumber(r[props.valueField])), 1));
+const minVal = computed(() => safeMin(items.value.map((r) => cleanNumber(r[props.valueField])), 0));
 const hoveredCell = computed(() => {
   if (hoveredIndex.value === -1) return null;
   return renderedCells.value[hoveredIndex.value];
 });
-const minVal = computed(() => Math.min(...items.value.map((r) => Number(r[props.valueField])), 0));
 const lerp = (t) => {
   const low = parseInt((props.colorLow || "#1e1e2e").replace("#", ""), 16);
   const high = parseInt((props.colorHigh || "#6366f1").replace("#", ""), 16);
@@ -104,9 +118,10 @@ const lerp = (t) => {
 const renderedCells = computed(() => {
   const range = maxVal.value - minVal.value || 1;
   return items.value.map((item) => {
-    const ri = rows.value.indexOf(String(item[props.rowField]));
-    const ci = cols.value.indexOf(String(item[props.columnField]));
-    const t = (Number(item[props.valueField]) - minVal.value) / range;
+    const ri = rowIndexMap.value.get(String(item[props.rowField])) ?? 0;
+    const ci = colIndexMap.value.get(String(item[props.columnField])) ?? 0;
+    const val = cleanNumber(item[props.valueField]);
+    const t = Math.max(0, Math.min(1, (val - minVal.value) / range));
     return {
       x: padLeft + ci * cellW.value,
       y: padTop + ri * cellH.value,
@@ -114,7 +129,7 @@ const renderedCells = computed(() => {
       h: cellH.value - 1,
       color: lerp(t),
       item,
-      label: `${item[props.rowField]} \xD7 ${item[props.columnField]}: ${item[props.valueField]}`
+      label: `${item[props.rowField]} \xD7 ${item[props.columnField]}: ${val}`
     };
   });
 });
@@ -124,12 +139,9 @@ const draw = () => {
   const c = ctx.value;
   drawAxes(c);
   renderedCells.value.forEach((cell, i) => {
-    const isHovered = hoveredIndex.value === i;
     c.fillStyle = cell.color;
-    c.beginPath();
-    c.rect(cell.x, cell.y, cell.w, cell.h);
-    c.fill();
-    if (isHovered) {
+    c.fillRect(cell.x, cell.y, cell.w, cell.h);
+    if (hoveredIndex.value === i) {
       c.strokeStyle = "#fff";
       c.lineWidth = 2;
       c.strokeRect(cell.x + 1, cell.y + 1, cell.w - 2, cell.h - 2);
@@ -137,7 +149,6 @@ const draw = () => {
   });
   if (props.showLegend) drawLegend(c);
 };
-watch([items, renderedCells, hoveredIndex, width, height, resizeTick], draw, { deep: true });
 const drawAxes = (c) => {
   c.save();
   c.fillStyle = "rgba(120,120,140,0.8)";
@@ -186,6 +197,8 @@ const drawLegend = (c) => {
   c.fillText(maxVal.value.toString(), x + gradW, y + gradH + 10);
   c.restore();
 };
+watch([renderedCells, hoveredIndex, width, height, resizeTick], draw);
+watch(items, draw);
 watch(isLoading, (val) => {
   if (!val) {
     nextTick(() => {
@@ -227,7 +240,7 @@ const onMouseLeave = () => {
 };
 defineExpose({
   exportPng: () => canvasRef.value && exportPng(canvasRef.value, "heatmap.png"),
-  exportSvg: () => svgRef.value && exportSvgFile(svgRef.value, "heatmap.svg")
+  exportSvg: () => svgRef.value && exportSvgFile(svgRef.value, "heatmap.svg", canvasRef.value)
 });
 </script>