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

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

@@ -2,7 +2,7 @@
 .k-chart-wrapper(
 	ref="wrapperRef"
 	:class="{ 'k-chart--grabbing': isDragging, 'k-chart--pannable': canPan }"
-	@wheel.prevent="onWheel"
+	@wheel="onWheel"
 	@mousedown="onMouseDown"
 	@mousemove="onMouseMove"
 	@mouseup="onMouseUp"
@@ -22,7 +22,7 @@
 			:height="height"
 		)
 			defs
-				clipPath(id="plot-clip")
+				clipPath(:id="'plot-clip-' + clipId")
 					rect(
 						:x="axes.plotLeft"
 						:y="axes.plotTop"
@@ -30,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"
@@ -62,7 +62,7 @@
 </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";
@@ -71,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" },
@@ -78,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" },
@@ -93,11 +96,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, 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`,
@@ -106,7 +113,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,
@@ -127,14 +142,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();
@@ -297,12 +322,7 @@ const drawAxes = (c) => {
       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);
       }
@@ -373,7 +393,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) {
@@ -382,13 +402,15 @@ onMounted(async () => {
     else draw();
   }
 });
-const hoveredPoints = computed(() => {
-  if (hoveredIndex.value === -1) return [];
-  if (hoveredIndex.value >= items.value.length) {
+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 = [];
@@ -424,7 +446,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);
@@ -443,7 +465,7 @@ const onMouseMove = (e) => {
   }
 };
 const onMouseLeave = (e) => {
-  onViewportMouseLeave();
+  onViewportMouseLeave(e);
   setHovered(-1);
   hideTooltip();
 };

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;

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

@@ -31,7 +31,7 @@
 </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";
@@ -56,11 +56,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`,

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,14 +43,15 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     seriesField: string;
     animated: boolean;
     zoomable: boolean;
+    wheelNavigation: boolean;
     maxZoom: number;
     colors: string[];
     backgroundColor: string;
     showLegend: boolean;
     xAxisTitle: string;
     yAxisTitle: string;
-    labelField: string;
     sizeField: string;
+    labelField: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/KScatterChart/KScatterChart.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="axes.plotLeft"
 						:y="axes.plotTop"
@@ -26,7 +26,7 @@
 			g.k-chart-hits
 			
 			// Dynamic Interaction Layer
-			g.k-chart-interaction(v-if="hoveredIndex !== -1 && !isLoading && hoveredPoint" 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"
@@ -49,7 +49,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";
@@ -59,6 +59,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" },
@@ -68,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" },
@@ -82,11 +84,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`,
@@ -95,7 +101,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 { findNearestEuclidean } = useChartHitTest();
 const {
   scale,
@@ -118,12 +132,24 @@ const xAxisType = computed(() => {
   const sample = items.value[0][props.xField];
   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) && isNaN(Number(sample))) return "datetime";
+    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])))];
@@ -213,9 +239,29 @@ 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();
@@ -302,7 +348,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) {
@@ -322,7 +368,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);

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,14 +43,15 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     seriesField: string;
     animated: boolean;
     zoomable: boolean;
+    wheelNavigation: boolean;
     maxZoom: number;
     colors: string[];
     backgroundColor: string;
     showLegend: boolean;
     xAxisTitle: string;
     yAxisTitle: string;
-    labelField: string;
     sizeField: string;
+    labelField: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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) {

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

@@ -15,5 +15,6 @@ export declare function extractProviderItems<T = any>(provider?: ADataProvider |
 /**
  * Provider-agnostic data watcher for Katlux chart components.
  * Consumes data through Katlux DataProvider instances (Server-side or Client-side).
+ * Uses provider.subscribe() instead of Vue watch() so it works with __v_skip providers.
  */
 export declare function useChartData<T = any>(dataProvider: Ref<ADataProvider | null | undefined> | ADataProvider | null | undefined): IChartDataContext<T>;

package/dist/runtime/composables/useChartData.js

@@ -1,14 +1,25 @@
-import { ref, watch, onMounted, getCurrentInstance, isRef } from "vue";
+import { ref, watch, onMounted, onUnmounted, onScopeDispose, getCurrentScope, getCurrentInstance, isRef } from "vue";
 export function extractProviderItems(provider) {
   if (!provider) return [];
   const instance = isRef(provider) ? provider.value : provider;
   if (!instance) return [];
+  const hasActiveFilter = Boolean(
+    instance.filter && (typeof instance.filter === "object" && Object.keys(instance.filter).length > 0 || typeof instance.hasFilter === "boolean" && instance.hasFilter || typeof instance.hasFilter === "function" && instance.hasFilter())
+  );
   const filtered = isRef(instance.filteredData) ? instance.filteredData.value : instance.filteredData;
-  if (Array.isArray(filtered) && filtered.length > 0) {
-    return filtered;
+  if (Array.isArray(filtered)) {
+    if (hasActiveFilter) {
+      return filtered;
+    }
+    if (filtered.length > 0) {
+      return filtered;
+    }
   }
   const all = isRef(instance.allData) ? instance.allData.value : instance.allData;
   if (Array.isArray(all) && all.length > 0) {
+    if (hasActiveFilter && Array.isArray(filtered)) {
+      return [];
+    }
     return all;
   }
   let raw = isRef(instance.pageData) ? instance.pageData.value : instance.pageData;
@@ -29,24 +40,49 @@ export function useChartData(dataProvider) {
     const provider = isRef(dataProvider) ? dataProvider.value : dataProvider;
     if (provider) {
       items.value = extractProviderItems(provider);
+      const rawLoading = provider.loading !== void 0 ? isRef(provider.loading) ? provider.loading.value : provider.loading?.value ?? provider.loading : false;
+      const rawInitial = provider.initialLoad !== void 0 ? isRef(provider.initialLoad) ? provider.initialLoad.value : provider.initialLoad?.value ?? provider.initialLoad : false;
+      loading.value = Boolean(rawLoading || rawInitial);
     } else {
       items.value = [];
+      loading.value = false;
     }
   };
-  watch(
-    () => {
-      const provider = isRef(dataProvider) ? dataProvider.value : dataProvider;
-      if (!provider) return null;
-      const filtered = isRef(provider.filteredData) ? provider.filteredData.value : provider.filteredData;
-      const all = isRef(provider.allData) ? provider.allData.value : provider.allData;
-      const pd = isRef(provider.pageData) ? provider.pageData.value : provider.pageData;
-      return { provider, filtered, all, pd };
-    },
-    () => {
-      updateItems();
-    },
-    { immediate: true, deep: false }
-  );
+  let unsubscribe = null;
+  const setupSubscription = () => {
+    if (unsubscribe) {
+      unsubscribe();
+      unsubscribe = null;
+    }
+    const isServer = typeof window === "undefined" || typeof import.meta !== "undefined" && Boolean(import.meta.server);
+    const provider = isRef(dataProvider) ? dataProvider.value : dataProvider;
+    if (!isServer && provider?.subscribe) {
+      unsubscribe = provider.subscribe(() => updateItems());
+    }
+    updateItems();
+  };
+  if (isRef(dataProvider)) {
+    watch(dataProvider, setupSubscription, { immediate: true });
+  } else {
+    setupSubscription();
+  }
+  if (getCurrentInstance()) {
+    onMounted(updateItems);
+    onUnmounted(() => {
+      if (unsubscribe) {
+        unsubscribe();
+        unsubscribe = null;
+      }
+    });
+  }
+  if (getCurrentScope()) {
+    onScopeDispose(() => {
+      if (unsubscribe) {
+        unsubscribe();
+        unsubscribe = null;
+      }
+    });
+  }
   const reload = async () => {
     const provider = isRef(dataProvider) ? dataProvider.value : dataProvider;
     if (!provider) return;
@@ -65,10 +101,5 @@ export function useChartData(dataProvider) {
       loading.value = false;
     }
   };
-  if (getCurrentInstance()) {
-    onMounted(updateItems);
-  } else {
-    updateItems();
-  }
   return { items, loading, error, reload };
 }

package/dist/runtime/composables/useChartExport.js

@@ -28,8 +28,10 @@ export function useChartExport() {
         imageEl.setAttribute("href", dataUrl);
         imageEl.setAttribute("x", "0");
         imageEl.setAttribute("y", "0");
-        const w = canvas.style.width ? parseFloat(canvas.style.width) : canvas.width || svgEl.clientWidth || 400;
-        const h = canvas.style.height ? parseFloat(canvas.style.height) : canvas.height || svgEl.clientHeight || 400;
+        const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+        const svgBox = svgEl.viewBox?.baseVal;
+        const w = svgBox && svgBox.width > 0 ? svgBox.width : canvas.style.width ? parseFloat(canvas.style.width) : svgEl.clientWidth || canvas.width / dpr || 400;
+        const h = svgBox && svgBox.height > 0 ? svgBox.height : canvas.style.height ? parseFloat(canvas.style.height) : svgEl.clientHeight || canvas.height / dpr || 400;
         imageEl.setAttribute("width", String(w));
         imageEl.setAttribute("height", String(h));
         clone.insertBefore(imageEl, clone.firstChild);
@@ -39,7 +41,12 @@ export function useChartExport() {
       const blob = new Blob([svgStr], { type: "image/svg+xml;charset=utf-8" });
       const url = URL.createObjectURL(blob);
       download(url, filename);
-      URL.revokeObjectURL(url);
+      setTimeout(() => {
+        try {
+          URL.revokeObjectURL(url);
+        } catch {
+        }
+      }, 1e3);
     } catch (e) {
       console.error("[KChart] SVG export failed:", e);
     }

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

@@ -4,7 +4,7 @@ export declare function useChartHitTest(): {
         item: any;
         index: number;
     } | null;
-    findNearestEuclidean: (items: any[], mouseX: number, mouseY: number, axes: IChartAxesContext, xField: string, yField: string, threshold?: number) => {
+    findNearestEuclidean: (items: any[], mouseX: number, mouseY: number, axes: IChartAxesContext, xField: string, yField: string, threshold?: number, xValueGetter?: (item: any, index: number) => number) => {
         item: any;
         index: number;
     } | null;

package/dist/runtime/composables/useChartHitTest.js

@@ -16,12 +16,13 @@ export function useChartHitTest() {
     }
     return { item: items[nearestIdx], index: nearestIdx };
   };
-  const findNearestEuclidean = (items, mouseX, mouseY, axes, xField, yField, threshold = 20) => {
+  const findNearestEuclidean = (items, mouseX, mouseY, axes, xField, yField, threshold = 20, xValueGetter) => {
     if (!items.length) return null;
     let nearestIdx = -1;
     let minDistanceSq = threshold * threshold;
     items.forEach((item, i) => {
-      const px = axes.toX(parseValue(item[xField]));
+      const xVal = xValueGetter ? xValueGetter(item, i) : parseValue(item[xField], i);
+      const px = axes.toX(xVal);
       const py = axes.toY(parseValue(item[yField]));
       const dx = mouseX - px;
       const dy = mouseY - py;

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

@@ -9,6 +9,7 @@ export interface IViewportState {
     canPan: Ref<boolean>;
 }
 export interface IChartViewportContext extends IViewportState {
+    zoomTo: (newScale: number, anchorX?: number) => void;
     zoomIn: () => void;
     zoomOut: () => void;
     resetZoom: () => void;
@@ -22,4 +23,6 @@ export declare function useChartViewport(options: {
     maxZoom?: Ref<number>;
     plotWidth: Ref<number>;
     plotLeft?: Ref<number>;
+    zoomable?: Ref<boolean> | boolean;
+    wheelNavigation?: Ref<boolean> | boolean;
 }): IChartViewportContext;