@katlux/block-charts 0.1.0-beta.8 → 0.1.1-alpha.101

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

@@ -1,8 +1,7 @@
 <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"
+	@wheel="onWheel"
 	@mousedown="onMouseDown"
 	@mousemove="onMouseMove"
 	@mouseup="onMouseUp"
@@ -17,7 +16,7 @@
 		canvas(ref="canvasRef" v-show="!isLoading")
 		svg.k-chart-svg(v-show="!isLoading" ref="svgRef" :width="width" :height="height")
 			defs
-				clipPath(id="plot-clip")
+				clipPath(:id="'plot-clip-' + clipId")
 					rect(
 						:x="plotLeft"
 						:y="plotTop"
@@ -25,17 +24,16 @@
 						: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)")
+			g.k-chart-interaction(v-if="hoveredIndex !== -1 && hoveredBar" :clip-path="'url(#plot-clip-' + clipId + ')'")
 				rect.k-chart-hit-proxy(
 					:x="hoveredBar.x"
 					:y="hoveredBar.y"
 					:width="hoveredBar.w"
 					:height="hoveredBar.h"
 					fill="transparent"
-					style="cursor: pointer"
 					@click="emit('click-point', hoveredBar.item, hoveredIndex)"
 				)
 				rect(
@@ -46,22 +44,24 @@
 					fill="transparent"
 					stroke="#fff"
 					stroke-width="2"
-					rx="2"
+					stroke-dasharray="4,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>
 
 <script setup>
-import { ref, watch, computed, onMounted, nextTick } from "vue";
+import { ref, watch, computed, onMounted, nextTick, useId, isRef } from "vue";
 import { useChartCanvas } from "../../composables/useChartCanvas";
 import { useChartSvg } from "../../composables/useChartSvg";
 import { useChartData } from "../../composables/useChartData";
 import { useChartViewport } from "../../composables/useChartViewport";
 import { useChartAnimation, easeOut } from "../../composables/useChartAnimation";
 import { useChartExport } from "../../composables/useChartExport";
+import { cleanNumber, safeMax, safeMin } from "../../composables/chartUtils";
+const clipId = useId();
 const props = defineProps({
   dataProvider: { type: null, required: false },
   categoryField: { type: String, required: false, default: "category" },
@@ -71,6 +71,7 @@ const props = defineProps({
   mode: { type: String, required: false, default: "clustered" },
   animated: { type: Boolean, required: false, default: true },
   zoomable: { type: Boolean, required: false, default: true },
+  wheelNavigation: { type: Boolean, required: false, default: true },
   maxZoom: { type: Number, required: false, default: 8 },
   colors: { type: Array, required: false, default: () => ["#6366f1", "#22d3ee", "#f59e0b", "#10b981", "#f43f5e", "#a855f7"] },
   backgroundColor: { type: String, required: false, default: "#ffffff" },
@@ -82,19 +83,35 @@ 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);
+const { items, loading: dataLoading } = useChartData(dataRef);
 const { progress, animate } = useChartAnimation();
 const { exportPng, exportSvg: exportSvgFile } = useChartExport();
 const isLoading = computed(() => {
-  return props.dataProvider?.loading?.value || props.dataProvider?.initialLoad?.value || false;
+  const dp = props.dataProvider;
+  if (!dp) return dataLoading.value;
+  const rawLoading = dp.loading !== void 0 ? isRef(dp.loading) ? dp.loading.value : dp.loading?.value ?? dp.loading : false;
+  const rawInitial = dp.initialLoad !== void 0 ? isRef(dp.initialLoad) ? dp.initialLoad.value : dp.initialLoad?.value ?? dp.initialLoad : false;
+  return Boolean(dataLoading.value || rawLoading || rawInitial);
 });
+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);
-const viewport = useChartViewport({ maxZoom: maxZoomRef, plotWidth: plotWidthRef, plotLeft: plotLeftRef });
+const zoomableRef = computed(() => props.zoomable);
+const wheelNavRef = computed(() => props.wheelNavigation);
+const viewport = useChartViewport({
+  maxZoom: maxZoomRef,
+  plotWidth: plotWidthRef,
+  plotLeft: plotLeftRef,
+  zoomable: zoomableRef,
+  wheelNavigation: wheelNavRef
+});
 const {
   scale,
   panOffset,
@@ -116,15 +133,46 @@ const plotWidth = computed(() => Math.max(0, width.value - PAD.left - PAD.right)
 const plotHeight = computed(() => Math.max(0, height.value - PAD.top - PAD.bottom));
 const categories = computed(() => [...new Set(items.value.map((r) => String(r[props.categoryField])))]);
 const groups = computed(() => [...new Set(items.value.map((r) => String(r[props.groupField] ?? "default")))]);
+const categoryMap = computed(() => {
+  const map = /* @__PURE__ */ new Map();
+  for (const item of items.value) {
+    const cat = String(item[props.categoryField]);
+    let list = map.get(cat);
+    if (!list) {
+      list = [];
+      map.set(cat, list);
+    }
+    list.push(item);
+  }
+  return map;
+});
+const minValue = computed(() => {
+  if (props.mode === "stacked") {
+    const negSums = categories.value.map((cat) => {
+      const catItems = categoryMap.value.get(cat) || [];
+      return catItems.reduce((acc, r) => acc + Math.min(0, cleanNumber(r[props.valueField])), 0);
+    });
+    const min2 = Math.min(0, safeMin(negSums, 0));
+    return isFinite(min2) ? min2 : 0;
+  }
+  const vals = items.value.map((r) => cleanNumber(r[props.valueField]));
+  const min = Math.min(0, safeMin(vals, 0));
+  return isFinite(min) ? min : 0;
+});
 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)
-    );
-    return Math.max(...sums, 10);
+    const sums = categories.value.map((cat) => {
+      const catItems = categoryMap.value.get(cat) || [];
+      return catItems.reduce((acc, r) => acc + Math.max(0, cleanNumber(r[props.valueField])), 0);
+    });
+    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 Math.max(0, safeMax(vals, 10));
+});
+const valueRange = computed(() => {
+  const span = maxValue.value - minValue.value;
+  return span > 0 ? span : 10;
 });
 const visibleCatCount = computed(() => Math.max(1, Math.ceil(categories.value.length / scale.value)));
 const panCatOffset = computed(() => {
@@ -144,117 +192,258 @@ 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;
+    }
+    const xZero = plotLeft + (0 - minValue.value) / valueRange.value * plotWidth.value;
+    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 = minValue.value + valueRange.value / 5 * i;
+      const x = plotLeft + (val - minValue.value) / valueRange.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);
+    }
+    if (minValue.value < 0) {
+      c.strokeStyle = "rgba(150,150,170,0.4)";
+      c.beginPath();
+      c.moveTo(xZero, plotTop);
+      c.lineTo(xZero, plotTop + plotHeight.value);
+      c.stroke();
+    }
+    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 = categoryMap.value.get(cat) || [];
+      const catY = plotTop + catIdx * catHeight;
+      if (props.mode === "stacked") {
+        let xOffsetPos = 0;
+        let xOffsetNeg = 0;
+        groups.value.forEach((group, gIdx) => {
+          const item = catItems.find((r) => String(r[props.groupField] ?? "default") === group);
+          if (!item) return;
+          const rawVal = cleanNumber(item[props.valueField]);
+          const bw = Math.abs(rawVal) * p / valueRange.value * plotWidth.value;
+          let bx = xZero;
+          if (rawVal >= 0) {
+            bx = xZero + xOffsetPos * p / valueRange.value * plotWidth.value;
+            xOffsetPos += rawVal;
+          } else {
+            xOffsetNeg += Math.abs(rawVal);
+            bx = xZero - xOffsetNeg * p / valueRange.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]}` });
+        });
+      } else if (props.mode === "simple") {
+        const item = catItems[0];
+        if (item) {
+          const isHovered = hoveredIndex.value === bars.length;
+          const rawVal = cleanNumber(item[props.valueField]);
+          const bw = Math.abs(rawVal) * p / valueRange.value * plotWidth.value;
+          const bx = rawVal >= 0 ? xZero : xZero - bw;
+          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 rawVal = cleanNumber(item[props.valueField]);
+          const bw = Math.abs(rawVal) * p / valueRange.value * plotWidth.value;
+          const bx = rawVal >= 0 ? xZero : xZero - bw;
+          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 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();
+    const yZero = plotTop + plotHeight.value - (0 - minValue.value) / valueRange.value * plotHeight.value;
+    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 = minValue.value + valueRange.value / 5 * i;
+      const y = plotTop + plotHeight.value - (val - minValue.value) / valueRange.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);
+    }
+    if (minValue.value < 0) {
+      c.strokeStyle = "rgba(150,150,170,0.4)";
+      c.beginPath();
+      c.moveTo(plotLeft, yZero);
+      c.lineTo(plotLeft + plotWidth.value, yZero);
+      c.stroke();
+    }
+    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 = categoryMap.value.get(cat) || [];
+      const catX = plotLeft + catIdx * catWidth;
+      if (props.mode === "stacked") {
+        let yOffsetPos = 0;
+        let yOffsetNeg = 0;
+        groups.value.forEach((group, gIdx) => {
+          const item = catItems.find((r) => String(r[props.groupField] ?? "default") === group);
+          if (!item) return;
+          const rawVal = cleanNumber(item[props.valueField]);
+          const bh = Math.abs(rawVal) * p / valueRange.value * plotHeight.value;
+          const bx = catX + (catWidth - barWidth) / 2;
+          let by = yZero;
+          if (rawVal >= 0) {
+            yOffsetPos += rawVal;
+            by = yZero - yOffsetPos * p / valueRange.value * plotHeight.value;
+          } else {
+            by = yZero + yOffsetNeg * p / valueRange.value * plotHeight.value;
+            yOffsetNeg += Math.abs(rawVal);
+          }
+          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]}` });
+        });
+      } else if (props.mode === "simple") {
+        const item = catItems[0];
+        if (item) {
+          const isHovered = hoveredIndex.value === bars.length;
+          const rawVal = cleanNumber(item[props.valueField]);
+          const bh = Math.abs(rawVal) * p / valueRange.value * plotHeight.value;
+          const bx = catX + (catWidth - barWidth) / 2;
+          const by = rawVal >= 0 ? yZero - bh : yZero;
+          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 rawVal = cleanNumber(item[props.valueField]);
+          const bh = Math.abs(rawVal) * p / valueRange.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 = rawVal >= 0 ? yZero - bh : yZero;
+          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,12 +480,14 @@ 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 });
+watch(() => [panOffset.value.x, panOffset.value.y], ([x, y]) => emit("pan-change", { x, y }));
 onMounted(async () => {
   await nextTick();
   if (containerRef.value && canvasRef.value) {
@@ -339,7 +530,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 +538,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/KBarChart/KBarChart.vue.d.ts

@@ -7,6 +7,7 @@ type __VLS_Props = {
     mode?: 'simple' | 'clustered' | 'stacked';
     animated?: boolean;
     zoomable?: boolean;
+    wheelNavigation?: boolean;
     maxZoom?: number;
     colors?: string[];
     backgroundColor?: string;
@@ -39,6 +40,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
 }>, {
     animated: boolean;
     zoomable: boolean;
+    wheelNavigation: boolean;
     maxZoom: number;
     colors: string[];
     backgroundColor: string;