@katlux/block-charts 0.1.1-alpha.93 → 0.1.1-alpha.95

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.1.1-alpha.93",
+  "version": "0.1.1-alpha.95",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/KAreaChart/KAreaChart.d.vue.ts

@@ -5,6 +5,7 @@ type __VLS_Props = {
     seriesField?: string;
     animated?: boolean;
     zoomable?: boolean;
+    wheelNavigation?: boolean;
     maxZoom?: number;
     stacked?: boolean;
     colors?: string[];
@@ -41,6 +42,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     seriesField: string;
     animated: boolean;
     zoomable: boolean;
+    wheelNavigation: boolean;
     maxZoom: number;
     stacked: boolean;
     colors: string[];

package/dist/runtime/components/KAreaChart/KAreaChart.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
 .k-chart-wrapper(
 	:class="{ 'k-chart--grabbing': isDragging, 'k-chart--pannable': canPan }"
-	@wheel.prevent="onWheel"
+	@wheel="onWheel"
 	@mousedown="onMouseDown"
 	@mousemove="onMouseMove"
 	@mouseup="onMouseUp"
@@ -21,7 +21,7 @@
 			:height="height"
 		)
 			defs
-				clipPath(id="plot-clip")
+				clipPath(:id="'plot-clip-' + clipId")
 					rect(
 						:x="axes.plotLeft"
 						:y="axes.plotTop"
@@ -31,7 +31,7 @@
 			g.k-chart-hits
 			
 			// Dynamic Interaction Layer
-			g.k-chart-interaction(v-if="hoveredIndex !== -1" clip-path="url(#plot-clip)")
+			g.k-chart-interaction(v-if="hoveredIndex !== -1" :clip-path="'url(#plot-clip-' + clipId + ')'")
 				circle.k-chart-hit-proxy(
 					v-for="(pt, i) in hoveredPoints"
 					:key="i"
@@ -61,7 +61,7 @@
 </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";
@@ -71,6 +71,7 @@ import { useChartAnimation, easeOut } from "../../composables/useChartAnimation"
 import { useChartExport } from "../../composables/useChartExport";
 import { useChartHitTest } from "../../composables/useChartHitTest";
 import { cleanNumber, safeMax } from "../../composables/chartUtils";
+const clipId = useId();
 const props = defineProps({
   dataProvider: { type: null, required: false },
   xField: { type: String, required: false, default: "x" },
@@ -78,6 +79,7 @@ const props = defineProps({
   seriesField: { type: String, required: false, default: "series" },
   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: 10 },
   stacked: { type: Boolean, required: false, default: false },
   colors: { type: Array, required: false, default: () => ["#6366f1", "#22d3ee", "#f59e0b", "#10b981", "#f43f5e", "#a855f7"] },
@@ -93,11 +95,15 @@ const svgRef = ref(null);
 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`,
@@ -106,7 +112,15 @@ const tooltipStyle = computed(() => ({
 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 { findNearestX } = useChartHitTest();
 const {
   scale,
@@ -129,14 +143,24 @@ const xAxisType = computed(() => {
   const firstVal = items.value[0]?.[props.xField];
   if (typeof firstVal === "number") return "linear";
   if (typeof firstVal === "string") {
+    const cleaned = cleanNumber(firstVal, NaN);
+    if (Number.isFinite(cleaned)) return "linear";
     const parsed = Date.parse(firstVal);
-    if (!isNaN(parsed) && !/^\d+$/.test(firstVal.trim())) return "datetime";
-    const num = Number(firstVal);
-    if (!isNaN(num)) return "linear";
+    if (!isNaN(parsed) && !/^\d+$/.test(firstVal.trim()) && /[-/T:]|[A-Za-z]/.test(firstVal)) return "datetime";
     return "category";
   }
   return "linear";
 });
+const isAllMidnight = computed(() => {
+  if (xAxisType.value !== "datetime" || !items.value.length) return false;
+  const checkCount = Math.min(items.value.length, 100);
+  for (let i = 0; i < checkCount; i++) {
+    const ts = parseValue(items.value[i][props.xField]);
+    const d = new Date(ts);
+    if (d.getHours() !== 0 || d.getMinutes() !== 0) return false;
+  }
+  return true;
+});
 const categoryList = computed(() => {
   if (xAxisType.value !== "category") return [];
   const seen = /* @__PURE__ */ new Set();
@@ -215,7 +239,7 @@ const effectiveYMax = computed(() => {
   return props.stacked ? Math.max(stackedMaxY.value, axes.yMax.value) : axes.yMax.value;
 });
 const toStackedY = (val) => {
-  const yMin = axes.yMin.value;
+  const yMin = props.stacked ? 0 : axes.yMin.value;
   const yMax = effectiveYMax.value;
   const range = yMax - yMin;
   if (range === 0) return axes.plotTop + axes.plotHeight.value;
@@ -271,12 +295,7 @@ const draw = () => {
       const x = axes.toX(val);
       let label;
       if (xAxisType.value === "datetime") {
-        const allMidnight = items.value.every((r) => {
-          const ts = parseValue(r[props.xField]);
-          const d = new Date(ts);
-          return d.getHours() === 0 && d.getMinutes() === 0;
-        });
-        label = allMidnight ? new Date(val).toLocaleDateString([], { month: "short", day: "numeric" }) : new Date(val).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+        label = isAllMidnight.value ? new Date(val).toLocaleDateString([], { month: "short", day: "numeric" }) : new Date(val).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
       } else {
         label = val.toFixed(1);
       }
@@ -325,7 +344,8 @@ const draw = () => {
       for (const pt of pts) {
         const x = axes.toX(pt.xVal);
         const base = currentBaseline.get(pt.xVal) || 0;
-        const top = base + pt.yVal;
+        const safeVal = Math.max(0, pt.yVal);
+        const top = base + safeVal;
         const yTop = toStackedY(top);
         const yBottom = toStackedY(base);
         topPoints.push({ x, y: yTop });
@@ -413,28 +433,36 @@ watch(items, () => {
   else draw();
 });
 watch(scale, (v) => emit("zoom-change", v));
-watch(panOffset, (v) => emit("pan-change", v), { deep: true });
-const hoveredPoints = computed(() => {
-  if (hoveredIndex.value === -1) return [];
-  if (hoveredIndex.value >= items.value.length) {
+watch(() => [panOffset.value.x, panOffset.value.y], ([x, y]) => emit("pan-change", { x, y }));
+watch(() => items.value.length, (newLen) => {
+  if (hoveredIndex.value >= newLen) {
     setHovered(-1);
-    return [];
   }
+});
+const hoveredPoints = computed(() => {
+  if (hoveredIndex.value === -1 || hoveredIndex.value >= items.value.length) return [];
   const item = items.value[hoveredIndex.value];
+  if (!item) return [];
   const xVal = resolveX(item);
   const xPx = axes.toX(xVal);
   const pts = [];
   let seriesIdx = 0;
+  let cumulativeBase = 0;
   for (const [, seriesList] of sortedSeriesMap.value) {
     const found = seriesList.find((pt) => pt.xVal === xVal);
     if (found) {
+      const safeVal = Math.max(0, found.yVal);
+      const top = props.stacked ? cumulativeBase + safeVal : found.yVal;
       pts.push({
         x: xPx,
-        y: toStackedY(found.yVal),
+        y: toStackedY(top),
         color: props.colors[seriesIdx % props.colors.length],
         item: found.item,
         index: found.index
       });
+      if (props.stacked) {
+        cumulativeBase += safeVal;
+      }
     }
     seriesIdx++;
   }
@@ -464,7 +492,7 @@ const onMouseMove = (e) => {
     hideTooltip();
     return;
   }
-  const nearest = findNearestX(mouseX, items.value, axes.toX, (r, i) => resolveX(r, i));
+  const nearest = findNearestX(items.value, mouseX, props.xField, axes, (r, i) => resolveX(r, i));
   if (nearest) {
     setHovered(nearest.index);
     emit("hover-point", nearest.item, nearest.index);

package/dist/runtime/components/KAreaChart/KAreaChart.vue.d.ts

@@ -5,6 +5,7 @@ type __VLS_Props = {
     seriesField?: string;
     animated?: boolean;
     zoomable?: boolean;
+    wheelNavigation?: boolean;
     maxZoom?: number;
     stacked?: boolean;
     colors?: string[];
@@ -41,6 +42,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     seriesField: string;
     animated: boolean;
     zoomable: boolean;
+    wheelNavigation: boolean;
     maxZoom: number;
     stacked: boolean;
     colors: string[];

package/dist/runtime/components/KBarChart/KBarChart.d.vue.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;

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

@@ -1,7 +1,7 @@
 <template lang="pug">
 .k-chart-wrapper(
 	:class="{ 'k-chart--grabbing': isDragging, 'k-chart--pannable': canPan }"
-	@wheel.prevent="onWheel"
+	@wheel="onWheel"
 	@mousedown="onMouseDown"
 	@mousemove="onMouseMove"
 	@mouseup="onMouseUp"
@@ -16,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"
@@ -27,7 +27,7 @@
 				// 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"
@@ -44,7 +44,7 @@
 					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="tooltipStyle")
@@ -53,7 +53,7 @@
 </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";
@@ -61,6 +61,7 @@ import { useChartViewport } from "../../composables/useChartViewport";
 import { useChartAnimation, easeOut } from "../../composables/useChartAnimation";
 import { useChartExport } from "../../composables/useChartExport";
 import { cleanNumber, safeMax } from "../../composables/chartUtils";
+const clipId = useId();
 const props = defineProps({
   dataProvider: { type: null, required: false },
   categoryField: { type: String, required: false, default: "category" },
@@ -70,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" },
@@ -84,11 +86,15 @@ const svgRef = ref(null);
 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`,
@@ -97,7 +103,15 @@ const tooltipStyle = computed(() => ({
 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,
@@ -119,6 +133,11 @@ 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 minValue = computed(() => {
+  const vals = items.value.map((r) => cleanNumber(r[props.valueField]));
+  const min = Math.min(0, ...vals);
+  return isFinite(min) ? min : 0;
+});
 const maxValue = computed(() => {
   if (props.mode === "stacked") {
     const sums = categories.value.map(
@@ -127,7 +146,11 @@ const maxValue = computed(() => {
     return safeMax(sums, 10);
   }
   const vals = items.value.map((r) => cleanNumber(r[props.valueField]));
-  return safeMax(vals, 10);
+  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(() => {
@@ -158,6 +181,7 @@ const draw = () => {
     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;
@@ -165,14 +189,21 @@ const draw = () => {
     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;
+      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;
@@ -199,13 +230,21 @@ const draw = () => {
       const catItems = items.value.filter((r) => String(r[props.categoryField]) === cat);
       const catY = plotTop + catIdx * catHeight;
       if (props.mode === "stacked") {
-        let xOffset = 0;
+        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 val = cleanNumber(item[props.valueField]) * p;
-          const bw = val / maxValue.value * plotWidth.value;
-          const bx = plotLeft + xOffset / maxValue.value * plotWidth.value;
+          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];
@@ -215,15 +254,14 @@ const draw = () => {
           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 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";
@@ -235,13 +273,13 @@ const draw = () => {
           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 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 bx = plotLeft;
           const color = props.colors[gIdx % props.colors.length];
           c.fillStyle = isHovered ? color : color + "dd";
           c.fillRect(bx, by, bw, barHeight);
@@ -266,6 +304,7 @@ const draw = () => {
     if (props.mode === "clustered" && gCount > 1) {
       barWidth = catWidth * 0.8 / gCount;
     }
+    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;
@@ -273,14 +312,21 @@ const draw = () => {
     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;
+      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;
@@ -307,14 +353,22 @@ const draw = () => {
       const catItems = items.value.filter((r) => String(r[props.categoryField]) === cat);
       const catX = plotLeft + catIdx * catWidth;
       if (props.mode === "stacked") {
-        let yOffset = 0;
+        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 val = cleanNumber(item[props.valueField]) * p;
-          const bh = val / maxValue.value * plotHeight.value;
+          const rawVal = cleanNumber(item[props.valueField]);
+          const bh = Math.abs(rawVal) * p / valueRange.value * plotHeight.value;
           const bx = catX + (catWidth - barWidth) / 2;
-          const by = plotTop + plotHeight.value - (yOffset + val) / maxValue.value * plotHeight.value;
+          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";
@@ -323,16 +377,15 @@ const draw = () => {
           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 rawVal = cleanNumber(item[props.valueField]);
+          const bh = Math.abs(rawVal) * p / valueRange.value * plotHeight.value;
           const bx = catX + (catWidth - barWidth) / 2;
-          const by = plotTop + plotHeight.value - bh;
+          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);
@@ -343,13 +396,13 @@ const draw = () => {
           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 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 = plotTop + plotHeight.value - bh;
+          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);
@@ -412,7 +465,7 @@ watch(items, () => {
   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) {

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;

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

@@ -42,7 +42,7 @@
 </template>
 
 <script setup>
-import { ref, watch, computed, onMounted, nextTick } from "vue";
+import { ref, watch, computed, onMounted, nextTick, isRef } from "vue";
 import { useChartSvg } from "../../composables/useChartSvg";
 import { useChartData } from "../../composables/useChartData";
 import { useChartCanvas } from "../../composables/useChartCanvas";
@@ -68,10 +68,14 @@ const svgRef = ref(null);
 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 { 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`,

package/dist/runtime/components/KLineChart/KLineChart.d.vue.ts

@@ -5,6 +5,7 @@ type __VLS_Props = {
     seriesField?: string;
     animated?: boolean;
     zoomable?: boolean;
+    wheelNavigation?: boolean;
     maxZoom?: number;
     colors?: string[];
     backgroundColor?: string;
@@ -40,6 +41,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     seriesField: string;
     animated: boolean;
     zoomable: boolean;
+    wheelNavigation: boolean;
     maxZoom: number;
     colors: string[];
     backgroundColor: string;