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

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,17 +36,18 @@
 				)
 			
 			// 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>
 
 <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";
 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" },
@@ -65,31 +65,57 @@ 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 { 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 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 parseHexColor = (colorStr, fallback) => {
+  let hex = (colorStr || fallback).replace("#", "").trim();
+  if (hex.length === 3) {
+    hex = hex.split("").map((c) => c + c).join("");
+  }
+  const num = parseInt(hex.padEnd(6, "0").slice(0, 6), 16);
+  return isNaN(num) ? parseInt(fallback.replace("#", ""), 16) : num;
+};
 const lerp = (t) => {
-  const low = parseInt((props.colorLow || "#1e1e2e").replace("#", ""), 16);
-  const high = parseInt((props.colorHigh || "#6366f1").replace("#", ""), 16);
+  const low = parseHexColor(props.colorLow, "1e1e2e");
+  const high = parseHexColor(props.colorHigh, "6366f1");
   const lr = low >> 16 & 255;
   const lg = low >> 8 & 255;
   const lb = low & 255;
@@ -104,9 +130,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 +141,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 +151,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);
@@ -185,7 +209,18 @@ const drawLegend = (c) => {
   c.fillText(maxVal.value.toString(), x + gradW, y + gradH + 10);
   c.restore();
 };
-watch([renderedCells, hoveredIndex, width, height], draw);
+watch([renderedCells, hoveredIndex, width, height, resizeTick], draw);
+watch(items, draw);
+watch(isLoading, (val) => {
+  if (!val) {
+    nextTick(() => {
+      if (canvasRef.value) {
+        setupCanvas(canvasRef.value);
+        draw();
+      }
+    });
+  }
+});
 onMounted(async () => {
   await nextTick();
   if (containerRef.value && canvasRef.value) {
@@ -217,7 +252,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>
 

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;

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

@@ -2,8 +2,7 @@
 .k-chart-wrapper(
 	ref="wrapperRef"
 	: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"
@@ -23,7 +22,7 @@
 			:height="height"
 		)
 			defs
-				clipPath(id="plot-clip")
+				clipPath(:id="'plot-clip-' + clipId")
 					rect(
 						:x="axes.plotLeft"
 						:y="axes.plotTop"
@@ -31,7 +30,7 @@
 						:height="axes.plotHeight.value"
 					)
 			// Dynamic Interaction Layer: Repositions one set of circles to the nearest point
-			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"
@@ -39,7 +38,6 @@
 					:cy="pt.y"
 					:r="10"
 					fill="transparent"
-					style="cursor: pointer"
 					@click="emit('click-point', pt.item, pt.index)"
 				)
 				// Visible indicators
@@ -57,14 +55,14 @@
 		// Tooltip
 		.k-chart-tooltip(
 			v-if="tooltipState.visible && !isLoading"
-			:style="{ left: tooltipState.x + 'px', top: tooltipState.y + 'px' }"
+			:style="tooltipStyle"
 		)
 			slot(name="tooltip" :item="tooltipState.item" :index="tooltipState.index")
 				span {{ tooltipState.content }}
 </template>
 
 <script setup>
-import { ref, watch, computed, onMounted, onUnmounted, nextTick } from "vue";
+import { ref, watch, computed, onMounted, onUnmounted, nextTick, useId, isRef } from "vue";
 import { useChartCanvas } from "../../composables/useChartCanvas";
 import { useChartSvg } from "../../composables/useChartSvg";
 import { useChartData } from "../../composables/useChartData";
@@ -73,6 +71,8 @@ import { useChartViewport } from "../../composables/useChartViewport";
 import { useChartAnimation, easeOut } from "../../composables/useChartAnimation";
 import { useChartExport } from "../../composables/useChartExport";
 import { useChartHitTest } from "../../composables/useChartHitTest";
+import { cleanNumber } from "../../composables/chartUtils";
+const clipId = useId();
 const props = defineProps({
   dataProvider: { type: null, required: false },
   xField: { type: String, required: false, default: "x" },
@@ -80,6 +80,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 },
   colors: { type: Array, required: false, default: () => ["#6366f1", "#22d3ee", "#f59e0b", "#10b981", "#f43f5e", "#a855f7", "#14b8a6", "#fb923c"] },
   backgroundColor: { type: String, required: false, default: "#ffffff" },
@@ -92,19 +93,35 @@ const wrapperRef = ref(null);
 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, loading } = 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 { findNearestX } = useChartHitTest();
 const {
   scale,
@@ -120,8 +137,56 @@ const {
   onMouseUp,
   onMouseLeave: onViewportMouseLeave
 } = viewport;
-const xFieldRef = computed(() => props.xField);
-const yFieldRef = computed(() => props.yField);
+const xAxisType = computed(() => {
+  if (!items.value.length) return "linear";
+  const sample = items.value.find((r) => r?.[props.xField] !== void 0 && r?.[props.xField] !== null)?.[props.xField];
+  if (sample === void 0 || sample === null) return "linear";
+  if (typeof sample === "number") return "linear";
+  if (typeof sample === "string") {
+    const cleaned = cleanNumber(sample, NaN);
+    if (Number.isFinite(cleaned)) return "linear";
+    const parsed = Date.parse(sample);
+    if (!isNaN(parsed) && !/^\d+$/.test(sample.trim()) && /[-/T:]|[A-Za-z]/.test(sample)) 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();
+  const list = [];
+  for (const item of items.value) {
+    const val = String(item[props.xField] ?? "");
+    if (!seen.has(val)) {
+      seen.add(val);
+      list.push(val);
+    }
+  }
+  return list;
+});
+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 seriesMap = computed(() => {
   const map = /* @__PURE__ */ new Map();
   for (const item of items.value) {
@@ -131,6 +196,24 @@ const seriesMap = computed(() => {
   }
   return map;
 });
+const sortedSeriesMap = computed(() => {
+  const map = /* @__PURE__ */ new Map();
+  const itemIndexMap = /* @__PURE__ */ new Map();
+  for (let i = 0; i < items.value.length; i++) {
+    itemIndexMap.set(items.value[i], i);
+  }
+  for (const [key, seriesItems] of seriesMap.value) {
+    const enriched = seriesItems.map((item, idx) => ({
+      item,
+      index: itemIndexMap.get(item) ?? idx,
+      xVal: resolveX(item, idx)
+    })).sort((a, b) => a.xVal - b.xVal);
+    map.set(key, enriched);
+  }
+  return map;
+});
+const xFieldRef = computed(() => props.xField);
+const yFieldRef = computed(() => props.yField);
 const axes = useChartAxes({
   items,
   xField: xFieldRef,
@@ -139,13 +222,14 @@ const axes = useChartAxes({
   height,
   scale,
   panOffset,
-  padding: { top: 20, right: 20, bottom: 40, left: 55 }
+  padding: { top: 20, right: 20, bottom: 40, left: 55 },
+  xValueGetter: (r, i) => resolveX(r, i)
 });
 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;
   drawGrid(c);
   drawAxes(c);
   c.save();
@@ -153,9 +237,9 @@ 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 [, seriesData] of sortedSeriesMap.value) {
     const color = props.colors[seriesIdx % props.colors.length];
-    drawLine(c, seriesItems, color, p);
+    drawLine(c, seriesData, color, p);
     seriesIdx++;
   }
   c.restore();
@@ -220,13 +304,31 @@ const drawAxes = (c) => {
     c.fillText(val.toFixed(1), axes.plotLeft - 8, y + 4);
   }
   c.textAlign = "center";
-  const xSteps = 5;
-  for (let i = 0; i <= xSteps; i++) {
-    const val = axes.xMin.value + (axes.xMax.value - axes.xMin.value) * (i / xSteps);
-    const x = axes.toX(val);
-    let label = val.toFixed(1);
-    if (val > 1e12) label = new Date(val).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
-    c.fillText(label, x, 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 {
+    const xSteps = 5;
+    for (let i = 0; i <= xSteps; i++) {
+      const val = axes.xMin.value + (axes.xMax.value - axes.xMin.value) * (i / xSteps);
+      const x = axes.toX(val);
+      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, x, axes.plotTop + axes.plotHeight.value + 16);
+    }
   }
   c.beginPath();
   c.moveTo(axes.plotLeft, axes.plotTop + axes.plotHeight.value);
@@ -253,8 +355,7 @@ const drawAxes = (c) => {
 };
 const drawLine = (c, data, color, progress2) => {
   if (!data.length) return;
-  const sorted = [...data].sort((a, b) => parseValue(a[props.xField]) - parseValue(b[props.xField]));
-  const totalPts = sorted.length;
+  const totalPts = data.length;
   const drawCount = Math.max(1, Math.floor(totalPts * progress2));
   c.save();
   c.strokeStyle = color;
@@ -262,18 +363,20 @@ const drawLine = (c, data, color, progress2) => {
   c.lineJoin = "round";
   c.lineCap = "round";
   c.beginPath();
-  sorted.slice(0, drawCount).forEach((item, i) => {
-    const x = axes.toX(parseValue(item[props.xField]));
-    const y = axes.toY(parseValue(item[props.yField]));
+  for (let i = 0; i < drawCount; i++) {
+    const pt = data[i];
+    const x = axes.toX(pt.xVal);
+    const y = axes.toY(parseValue(pt.item[props.yField]));
     if (i === 0) c.moveTo(x, y);
     else c.lineTo(x, y);
-  });
+  }
   c.stroke();
+  const currentHoveredIdx = hoveredIndex.value;
   for (let i = 0; i < drawCount; i++) {
-    const item = sorted[i];
-    const x = axes.toX(parseValue(item[props.xField]));
-    const y = axes.toY(parseValue(item[props.yField]));
-    const isHovered = hoveredIndex.value === items.value.indexOf(item);
+    const pt = data[i];
+    const x = axes.toX(pt.xVal);
+    const y = axes.toY(parseValue(pt.item[props.yField]));
+    const isHovered = currentHoveredIdx !== -1 && pt.index === currentHoveredIdx;
     c.beginPath();
     c.arc(x, y, isHovered ? 5 : 3, 0, Math.PI * 2);
     c.fillStyle = isHovered ? "#fff" : color;
@@ -284,12 +387,14 @@ const drawLine = (c, data, color, progress2) => {
   }
   c.restore();
 };
-watch([items, scale, panOffset, hoveredIndex, progress], draw, { deep: true });
+watch(progress, draw);
+watch([scale, panOffset, resizeTick, width, height, hoveredIndex], 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) {
@@ -298,22 +403,28 @@ onMounted(async () => {
     else draw();
   }
 });
+watch(() => items.value.length, (newLen) => {
+  if (hoveredIndex.value >= newLen) {
+    setHovered(-1);
+  }
+});
 const hoveredPoints = computed(() => {
-  if (hoveredIndex.value === -1) return [];
+  if (hoveredIndex.value === -1 || hoveredIndex.value >= items.value.length) return [];
   const item = items.value[hoveredIndex.value];
-  const xVal = parseValue(item[props.xField]);
+  if (!item) return [];
+  const xVal = resolveX(item);
   const xPx = axes.toX(xVal);
   const pts = [];
   let seriesIdx = 0;
-  for (const [key, seriesItems] of seriesMap.value) {
-    const seriesItem = seriesItems.find((it) => parseValue(it[props.xField]) === xVal);
-    if (seriesItem) {
+  for (const [, seriesList] of sortedSeriesMap.value) {
+    const found = seriesList.find((pt) => pt.xVal === xVal);
+    if (found) {
       pts.push({
         x: xPx,
-        y: axes.toY(parseValue(seriesItem[props.yField])),
+        y: axes.toY(parseValue(found.item[props.yField])),
         color: props.colors[seriesIdx % props.colors.length],
-        item: seriesItem,
-        index: items.value.indexOf(seriesItem)
+        item: found.item,
+        index: found.index
       });
     }
     seriesIdx++;
@@ -331,11 +442,24 @@ const onMouseMove = (e) => {
   if (!rect) return;
   const mouseX = e.clientX - rect.left;
   const mouseY = e.clientY - rect.top;
-  const nearest = findNearestX(items.value, mouseX, props.xField, axes);
+  if (mouseX < axes.plotLeft || mouseX > axes.plotLeft + axes.plotWidth.value || mouseY < axes.plotTop || mouseY > axes.plotTop + axes.plotHeight.value) {
+    setHovered(-1);
+    hideTooltip();
+    return;
+  }
+  const nearest = findNearestX(items.value, mouseX, props.xField, axes, (r, i) => resolveX(r, i));
   if (nearest) {
     setHovered(nearest.index);
-    showTooltip(mouseX + 10, mouseY - 20, `${nearest.item[props.xField]}: ${nearest.item[props.yField]}`, nearest.item, nearest.index);
     emit("hover-point", nearest.item, nearest.index);
+    const xPx = axes.toX(resolveX(nearest.item, nearest.index));
+    const yPx = axes.toY(parseValue(nearest.item[props.yField]));
+    showTooltip(
+      xPx,
+      yPx - 10,
+      `${props.xField}: ${nearest.item[props.xField]} | ${props.yField}: ${nearest.item[props.yField]}`,
+      nearest.item,
+      nearest.index
+    );
   } else {
     setHovered(-1);
     hideTooltip();
@@ -351,7 +475,7 @@ defineExpose({
   zoomOut: viewport.zoomOut,
   resetZoom: viewport.resetZoom,
   exportPng: () => canvasRef.value && exportPng(canvasRef.value, "line-chart.png"),
-  exportSvg: () => svgRef.value && exportSvgFile(svgRef.value, "line-chart.svg")
+  exportSvg: () => svgRef.value && exportSvgFile(svgRef.value, "line-chart.svg", canvasRef.value)
 });
 </script>
 
@@ -359,6 +483,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/KLineChart/KLineChart.vue.d.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;