@katlux/block-charts 0.1.0-beta.73 → 0.1.1-alpha.100

package/dist/runtime/components/KPieChart/KPieChart.vue

@@ -9,14 +9,13 @@
 		canvas(ref="canvasRef" v-show="!isLoading")
 		svg.k-chart-svg(v-show="!isLoading" ref="svgRef" :width="width" :height="height")
 			g.k-chart-hits
-				// Hit detection now handled via angle calculation in onMouseMove
+				// Hit detection handled via angle calculation in onMouseMove
 			
 			// Dynamic Interaction Layer
 			g.k-chart-interaction(v-if="hoveredIndex !== -1 && hoveredSeg")
 				path.k-chart-hit-proxy(
 					:d="hoveredSeg.d"
 					fill="transparent"
-					style="cursor: pointer"
 					@click="emit('click-point', hoveredSeg.item, hoveredIndex)"
 				)
 				path(
@@ -26,18 +25,19 @@
 					stroke-width="3"
 					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, isRef } from "vue";
 import { useChartCanvas } from "../../composables/useChartCanvas";
 import { useChartSvg } from "../../composables/useChartSvg";
 import { useChartData } from "../../composables/useChartData";
 import { useChartAnimation, easeOut } from "../../composables/useChartAnimation";
 import { useChartExport } from "../../composables/useChartExport";
+import { cleanNumber } from "../../composables/chartUtils";
 const props = defineProps({
   dataProvider: { type: null, required: false },
   labelField: { type: String, required: false, default: "label" },
@@ -53,17 +53,25 @@ const emit = defineEmits(["click-point", "hover-point"]);
 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 hitSegments = ref([]);
-const total = computed(() => items.value.reduce((s, r) => s + Number(r[props.valueField]), 0));
+const total = computed(() => items.value.reduce((s, r) => s + Math.max(0, cleanNumber(r[props.valueField])), 0));
 const hoveredSeg = computed(() => {
   if (hoveredIndex.value === -1) return null;
   return hitSegments.value[hoveredIndex.value];
@@ -88,7 +96,7 @@ 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 segs = [];
   const cx = width.value / 2;
   const cy = props.showLegend ? (height.value - 50) / 2 : height.value / 2;
@@ -96,7 +104,8 @@ const draw = () => {
   let startAngle = -Math.PI / 2;
   const tot = total.value || 1;
   items.value.forEach((item, i) => {
-    const slice = Number(item[props.valueField]) / tot * Math.PI * 2 * p;
+    const val = Math.max(0, cleanNumber(item[props.valueField]));
+    const slice = val / tot * Math.PI * 2 * p;
     const endAngle = startAngle + slice;
     const color = props.colors[i % props.colors.length];
     const isHovered = hoveredIndex.value === i;
@@ -113,13 +122,13 @@ const draw = () => {
     const lr = r * 0.7;
     const lx = cx + lr * Math.cos(midAngle);
     const ly = cy + lr * Math.sin(midAngle);
-    if (p > 0.5) {
+    if (p > 0.5 && val > 0) {
       c.save();
       c.fillStyle = "#fff";
       c.font = "bold 11px system-ui, sans-serif";
       c.textAlign = "center";
       c.textBaseline = "middle";
-      const pct = (Number(item[props.valueField]) / tot * 100).toFixed(0) + "%";
+      const pct = (val / tot * 100).toFixed(0) + "%";
       c.fillText(pct, lx, ly);
       c.restore();
     }
@@ -128,41 +137,32 @@ const draw = () => {
       cx: cx + r * 0.75 * Math.cos(startAngle + slice / 2),
       cy: cy + r * 0.75 * Math.sin(startAngle + slice / 2),
       item,
-      label: `${item[props.labelField]}: ${item[props.valueField]}`,
+      label: `${item[props.labelField]}: ${val}`,
       startAngle,
       endAngle
     });
     startAngle = endAngle;
   });
   if (props.donut) {
+    const ri = r * 0.5;
     c.save();
     c.beginPath();
-    c.arc(cx, cy, r * 0.5, 0, Math.PI * 2);
-    c.fillStyle = "#000";
-    c.globalCompositeOperation = "destination-out";
+    c.arc(cx, cy, ri, 0, Math.PI * 2);
+    c.fillStyle = props.backgroundColor || "#ffffff";
     c.fill();
-    c.globalCompositeOperation = "source-over";
     c.restore();
   }
   hitSegments.value = segs;
   if (props.showLegend) {
     drawLegend(c);
   }
-  if (props.title) {
-    c.save();
-    c.fillStyle = "rgba(120,120,140,0.9)";
-    c.font = "bold 16px system-ui, sans-serif";
-    c.textAlign = "center";
-    c.fillText(props.title, width.value / 2, 30);
-    c.restore();
-  }
 };
 const drawLegend = (c) => {
   c.save();
   c.font = "11px system-ui, sans-serif";
   c.textAlign = "left";
   c.textBaseline = "middle";
-  const keys = items.value.map((it) => String(it[props.labelField]));
+  const keys = items.value.map((r) => String(r[props.labelField]));
   let xOffset = 20;
   let yOffset = height.value - 25;
   keys.forEach((key, i) => {
@@ -180,10 +180,12 @@ const drawLegend = (c) => {
   });
   c.restore();
 };
-watch([items, hoveredIndex, progress, () => props.donut], draw, { deep: true });
+watch(progress, draw);
+watch([hoveredIndex, resizeTick, width, height, () => props.donut], draw);
 watch(items, () => {
   if (props.animated) animate();
-}, { deep: true });
+  else draw();
+});
 onMounted(async () => {
   await nextTick();
   if (containerRef.value && canvasRef.value) {
@@ -225,7 +227,7 @@ const onMouseLeave = () => {
 };
 defineExpose({
   exportPng: () => canvasRef.value && exportPng(canvasRef.value, "pie-chart.png"),
-  exportSvg: () => svgRef.value && exportSvgFile(svgRef.value, "pie-chart.svg")
+  exportSvg: () => svgRef.value && exportSvgFile(svgRef.value, "pie-chart.svg", canvasRef.value)
 });
 </script>
 
@@ -233,6 +235,7 @@ defineExpose({
 .k-chart-wrapper {
   position: relative;
   user-select: none;
+  cursor: default;
 }
 .k-chart-wrapper .k-chart-inner {
   width: 100%;

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

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

package/dist/runtime/components/KScatterChart/KScatterChart.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="axes.plotLeft"
 						:y="axes.plotTop"
@@ -25,16 +24,14 @@
 						:height="axes.plotHeight.value"
 					)
 			g.k-chart-hits
-				// No circles here! Distance-based hit testing now.
 			
 			// Dynamic Interaction Layer
-			g.k-chart-interaction(v-if="hoveredIndex !== -1 && !isLoading" clip-path="url(#plot-clip)")
+			g.k-chart-interaction(v-if="hoveredIndex !== -1 && !isLoading && hoveredPoint" :clip-path="'url(#plot-clip-' + clipId + ')'")
 				circle.k-chart-hit-proxy(
 					:cx="hoveredPoint.x"
 					:cy="hoveredPoint.y"
 					:r="20"
 					fill="transparent"
-					style="cursor: pointer"
 					@click="emit('click-point', hoveredPoint.item, hoveredPoint.index)"
 				)
 				circle(
@@ -46,21 +43,23 @@
 					stroke-width="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 { useChartAxes } from "../../composables/useChartAxes";
+import { useChartAxes, parseValue } from "../../composables/useChartAxes";
 import { useChartViewport } from "../../composables/useChartViewport";
 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" },
@@ -70,6 +69,7 @@ const props = defineProps({
   labelField: { type: String, required: false, default: "label" },
   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: 20 },
   colors: { type: Array, required: false, default: () => ["#6366f1", "#22d3ee", "#f59e0b", "#10b981", "#f43f5e", "#a855f7", "#14b8a6", "#fb923c"] },
   backgroundColor: { type: String, required: false, default: "#ffffff" },
@@ -81,19 +81,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 { findNearestEuclidean } = useChartHitTest();
 const {
   scale,
@@ -111,29 +127,95 @@ const {
 } = viewport;
 const xFieldRef = computed(() => props.xField);
 const yFieldRef = computed(() => props.yField);
-const axes = useChartAxes({ items, xField: xFieldRef, yField: yFieldRef, width, height, scale, panOffset, padding: { top: 20, right: 20, bottom: 40, left: 55 } });
-const maxSize = computed(() => Math.max(...items.value.map((r) => Number(r[props.sizeField] ?? 1)), 1));
+const xAxisType = computed(() => {
+  if (!items.value.length) return "numeric";
+  const sample = items.value.find((r) => r?.[props.xField] !== void 0 && r?.[props.xField] !== null)?.[props.xField];
+  if (sample === void 0 || sample === null) return "numeric";
+  if (typeof sample === "number") return "numeric";
+  if (typeof sample === "string") {
+    const cleaned = cleanNumber(sample, NaN);
+    if (Number.isFinite(cleaned)) return "numeric";
+    const ts = Date.parse(sample);
+    if (!isNaN(ts) && !/^\d+$/.test(sample.trim()) && /[-/T:]|[A-Za-z]/.test(sample)) return "datetime";
+    return "category";
+  }
+  return "numeric";
+});
+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 [];
+  return [...new Set(items.value.map((r) => String(r[props.xField])))];
+});
+const categoryIndexMap = computed(() => {
+  const map = {};
+  categoryList.value.forEach((cat, i) => {
+    map[cat] = i;
+  });
+  return map;
+});
+const resolveX = (item, index = 0) => {
+  if (!item) return index;
+  const raw = item[props.xField];
+  if (xAxisType.value === "category") return categoryIndexMap.value[String(raw)] ?? index;
+  return parseValue(raw, index);
+};
+const axes = useChartAxes({
+  items,
+  xField: xFieldRef,
+  yField: yFieldRef,
+  width,
+  height,
+  scale,
+  panOffset,
+  padding: { top: 20, right: 20, bottom: 40, left: 55 },
+  xValueGetter: (r, i) => resolveX(r, i)
+});
+const maxSize = computed(() => safeMax(items.value.map((r) => cleanNumber(r[props.sizeField] ?? 1, 1)), 1));
 const seriesMap = computed(() => {
   const map = /* @__PURE__ */ new Map();
-  for (const item of items.value) {
+  const maxS = maxSize.value || 1;
+  items.value.forEach((item, idx) => {
     const key = String(item[props.seriesField] ?? "default");
-    if (!map.has(key)) map.set(key, []);
-    map.get(key).push(item);
-  }
+    let list = map.get(key);
+    if (!list) {
+      list = [];
+      map.set(key, list);
+    }
+    const sizeRaw = cleanNumber(item[props.sizeField] ?? 1, 1);
+    const r = 4 + sizeRaw / maxS * 16;
+    list.push({
+      item,
+      index: idx,
+      xVal: resolveX(item, idx),
+      yVal: parseValue(item[props.yField]),
+      sizeRaw,
+      r
+    });
+  });
   return map;
 });
 const hoveredPoint = computed(() => {
   if (hoveredIndex.value === -1) return null;
   const item = items.value[hoveredIndex.value];
-  const sizeRaw = Number(item[props.sizeField] ?? 1);
-  const r = 4 + sizeRaw / maxSize.value * 16;
+  if (!item) return null;
+  const sizeRaw = cleanNumber(item[props.sizeField] ?? 1, 1);
+  const r = 4 + sizeRaw / (maxSize.value || 1) * 16;
   const seriesKey = String(item[props.seriesField] ?? "default");
   const seriesKeys = Array.from(seriesMap.value.keys());
   const seriesIdx = seriesKeys.indexOf(seriesKey);
   const color = props.colors[seriesIdx % props.colors.length];
   return {
-    x: axes.toX(Number(item[props.xField])),
-    y: axes.toY(Number(item[props.yField])),
+    x: axes.toX(resolveX(item, hoveredIndex.value)),
+    y: axes.toY(parseValue(item[props.yField])),
     r,
     color,
     item,
@@ -144,7 +226,7 @@ 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;
   c.save();
   c.strokeStyle = "rgba(100,100,120,0.1)";
   c.lineWidth = 1;
@@ -162,15 +244,8 @@ const draw = () => {
     c.lineTo(x, axes.plotTop + axes.plotHeight.value);
     c.stroke();
   }
-  c.strokeStyle = "rgba(150,150,170,0.5)";
-  c.beginPath();
-  c.moveTo(axes.plotLeft, axes.plotTop + axes.plotHeight.value);
-  c.lineTo(axes.plotLeft + axes.plotWidth.value, axes.plotTop + axes.plotHeight.value);
-  c.stroke();
-  c.beginPath();
-  c.moveTo(axes.plotLeft, axes.plotTop);
-  c.lineTo(axes.plotLeft, axes.plotTop + axes.plotHeight.value);
-  c.stroke();
+  c.restore();
+  c.save();
   c.fillStyle = "rgba(150,150,170,0.8)";
   c.font = "11px system-ui, sans-serif";
   c.textAlign = "right";
@@ -179,12 +254,42 @@ const draw = () => {
     c.fillText(val.toFixed(1), axes.plotLeft - 8, axes.toY(val) + 4);
   }
   c.textAlign = "center";
-  for (let i = 0; i <= 5; i++) {
-    const val = axes.xMin.value + (axes.xMax.value - axes.xMin.value) * (i / 5);
-    c.fillText(val.toFixed(1), axes.toX(val), axes.plotTop + axes.plotHeight.value + 16);
+  if (xAxisType.value === "category") {
+    const count = categoryList.value.length;
+    if (count > 0) {
+      const xSteps = Math.min(10, count - 1);
+      const stepSize = xSteps > 0 ? (count - 1) / xSteps : 1;
+      for (let i = 0; i <= xSteps; i++) {
+        const idx = Math.round(i * stepSize);
+        const x = axes.toX(idx);
+        const label = categoryList.value[idx] ?? "";
+        c.fillText(label, x, axes.plotTop + axes.plotHeight.value + 16);
+      }
+    }
+  } else {
+    for (let i = 0; i <= 5; i++) {
+      const val = axes.xMin.value + (axes.xMax.value - axes.xMin.value) * (i / 5);
+      let label;
+      if (xAxisType.value === "datetime") {
+        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);
+      }
+      c.fillText(label, axes.toX(val), axes.plotTop + axes.plotHeight.value + 16);
+    }
   }
+  c.strokeStyle = "rgba(150,150,170,0.5)";
+  c.beginPath();
+  c.moveTo(axes.plotLeft, axes.plotTop + axes.plotHeight.value);
+  c.lineTo(axes.plotLeft + axes.plotWidth.value, axes.plotTop + axes.plotHeight.value);
+  c.stroke();
+  c.beginPath();
+  c.moveTo(axes.plotLeft, axes.plotTop);
+  c.lineTo(axes.plotLeft, axes.plotTop + axes.plotHeight.value);
+  c.stroke();
   c.fillStyle = "rgba(120,120,140,0.8)";
   if (props.xAxisTitle) {
+    c.textAlign = "center";
     c.fillText(props.xAxisTitle, axes.plotLeft + axes.plotWidth.value / 2, axes.plotTop + axes.plotHeight.value + 34);
   }
   if (props.yAxisTitle) {
@@ -201,14 +306,13 @@ const draw = () => {
   c.rect(axes.plotLeft, axes.plotTop, axes.plotWidth.value, axes.plotHeight.value);
   c.clip();
   let seriesIdx = 0;
-  for (const [, seriesItems] of seriesMap.value) {
+  for (const [, points] of seriesMap.value) {
     const color = props.colors[seriesIdx % props.colors.length];
-    seriesItems.forEach((item) => {
-      const x = axes.toX(Number(item[props.xField]));
-      const y = axes.toY(Number(item[props.yField]));
-      const sizeRaw = Number(item[props.sizeField] ?? 1);
-      const r = 4 + sizeRaw / maxSize.value * 16;
-      const isHovered = items.value[hoveredIndex.value] === item;
+    points.forEach((pt) => {
+      const x = axes.toX(pt.xVal);
+      const y = axes.toY(pt.yVal);
+      const r = pt.r;
+      const isHovered = items.value[hoveredIndex.value] === pt.item;
       const alpha = p;
       c.save();
       c.globalAlpha = alpha * (isHovered ? 1 : 0.75);
@@ -251,16 +355,17 @@ const drawLegend = (c) => {
   }
   c.restore();
 };
-watch([items, scale, panOffset, hoveredIndex, progress], draw, { deep: true });
+watch(progress, draw);
+watch([scale, panOffset, hoveredIndex, resizeTick, width, height], 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) {
-    containerRef.value.style.position = "relative";
     setupCanvas(canvasRef.value);
     if (props.animated) animate();
     else draw();
@@ -277,7 +382,7 @@ const onMouseMove = (e) => {
   if (!rect) return;
   const mx = e.clientX - rect.left;
   const my = e.clientY - rect.top;
-  const nearest = findNearestEuclidean(items.value, mx, my, axes, props.xField, props.yField, 20);
+  const nearest = findNearestEuclidean(items.value, mx, my, axes, props.xField, props.yField, 20, (item, i) => resolveX(item, i));
   if (nearest) {
     setHovered(nearest.index);
     showTooltip(mx + 10, my - 10, `${nearest.item[props.xField]}: ${nearest.item[props.yField]}`, nearest.item, nearest.index);
@@ -297,7 +402,7 @@ defineExpose({
   zoomOut: viewport.zoomOut,
   resetZoom: viewport.resetZoom,
   exportPng: () => canvasRef.value && exportPng(canvasRef.value, "scatter-chart.png"),
-  exportSvg: () => svgRef.value && exportSvgFile(svgRef.value, "scatter-chart.svg")
+  exportSvg: () => svgRef.value && exportSvgFile(svgRef.value, "scatter-chart.svg", canvasRef.value)
 });
 </script>
 
@@ -305,6 +410,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/KScatterChart/KScatterChart.vue.d.ts

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

package/dist/runtime/composables/chartUtils.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Robust numerical utilities for Katlux chart engine.
+ * Prevents call stack overflow on large datasets (100k+ points)
+ * and safely normalizes unparsed or localized number strings.
+ */
+export declare function cleanNumber(val: any, fallback?: number): number;
+export declare function safeMax(arr: number[], fallback?: number): number;
+export declare function safeMin(arr: number[], fallback?: number): number;

package/dist/runtime/composables/chartUtils.js

@@ -0,0 +1,58 @@
+export function cleanNumber(val, fallback = 0) {
+  if (val === null || val === void 0) return fallback;
+  if (typeof val === "number") {
+    return Number.isFinite(val) ? val : fallback;
+  }
+  if (typeof val === "string") {
+    let s = val.trim();
+    if (!s) return fallback;
+    s = s.replace(/\s+/g, "");
+    if (s.includes(".") && s.includes(",")) {
+      if (s.lastIndexOf(",") > s.lastIndexOf(".")) {
+        s = s.replace(/\./g, "").replace(",", ".");
+      } else {
+        s = s.replace(/,/g, "");
+      }
+    } else if (s.includes(",")) {
+      const parts = s.split(",");
+      if (parts.length > 2 || parts.length === 2 && parts[1].length === 3) {
+        s = s.replace(/,/g, "");
+      } else {
+        s = s.replace(",", ".");
+      }
+    }
+    const num = Number(s);
+    return Number.isFinite(num) ? num : fallback;
+  }
+  return fallback;
+}
+export function safeMax(arr, fallback = 0) {
+  if (!arr || arr.length === 0) return fallback;
+  let max = -Infinity;
+  let found = false;
+  for (let i = 0; i < arr.length; i++) {
+    const v = arr[i];
+    if (typeof v === "number" && Number.isFinite(v)) {
+      if (!found || v > max) {
+        max = v;
+        found = true;
+      }
+    }
+  }
+  return found ? max : fallback;
+}
+export function safeMin(arr, fallback = 0) {
+  if (!arr || arr.length === 0) return fallback;
+  let min = Infinity;
+  let found = false;
+  for (let i = 0; i < arr.length; i++) {
+    const v = arr[i];
+    if (typeof v === "number" && Number.isFinite(v)) {
+      if (!found || v < min) {
+        min = v;
+        found = true;
+      }
+    }
+  }
+  return found ? min : fallback;
+}

package/dist/runtime/composables/useChartAnimation.js

@@ -1,4 +1,4 @@
-import { ref } from "vue";
+import { ref, onScopeDispose } from "vue";
 export function useChartAnimation(duration = 600) {
   const progress = ref(0);
   let rafId = null;
@@ -25,6 +25,12 @@ export function useChartAnimation(duration = 600) {
       rafId = null;
     }
   };
+  try {
+    onScopeDispose(() => {
+      stop();
+    });
+  } catch {
+  }
   return { progress, animate, stop };
 }
 export function easeOut(t) {