@katlux/block-charts 0.1.1-alpha.87 → 0.1.1-alpha.89

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

@@ -1,7 +1,6 @@
 <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"
 	@mousedown="onMouseDown"
 	@mousemove="onMouseMove"
@@ -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)")
 				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,7 +43,7 @@
 					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>
@@ -56,11 +53,12 @@ import { ref, watch, computed, onMounted, nextTick } 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 props = defineProps({
   dataProvider: { type: null, required: false },
   xField: { type: String, required: false, default: "x" },
@@ -81,7 +79,7 @@ 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);
@@ -90,6 +88,10 @@ const { exportPng, exportSvg: exportSvgFile } = useChartExport();
 const isLoading = computed(() => {
   return props.dataProvider?.loading?.value || props.dataProvider?.initialLoad?.value || false;
 });
+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);
@@ -111,8 +113,46 @@ 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[0][props.xField];
+  if (typeof sample === "number") return "numeric";
+  if (typeof sample === "string") {
+    const ts = Date.parse(sample);
+    if (!isNaN(ts) && isNaN(Number(sample))) return "datetime";
+    return "category";
+  }
+  return "numeric";
+});
+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) {
@@ -125,15 +165,16 @@ const seriesMap = computed(() => {
 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 +185,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 +203,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";
@@ -183,8 +217,18 @@ const draw = () => {
     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);
   }
+  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) {
@@ -203,11 +247,11 @@ const draw = () => {
   let seriesIdx = 0;
   for (const [, seriesItems] 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;
+    seriesItems.forEach((item, idx) => {
+      const x = axes.toX(resolveX(item, idx));
+      const y = axes.toY(parseValue(item[props.yField]));
+      const sizeRaw = cleanNumber(item[props.sizeField] ?? 1, 1);
+      const r = 4 + sizeRaw / (maxSize.value || 1) * 16;
       const isHovered = items.value[hoveredIndex.value] === item;
       const alpha = p;
       c.save();
@@ -251,16 +295,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 });
 onMounted(async () => {
   await nextTick();
   if (containerRef.value && canvasRef.value) {
-    containerRef.value.style.position = "relative";
     setupCanvas(canvasRef.value);
     if (props.animated) animate();
     else draw();
@@ -297,7 +342,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 +350,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/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/useChartAxes.d.ts

@@ -18,6 +18,7 @@ export interface IChartAxesOptions {
         left: number;
     };
     scaleMode?: TScaleMode;
+    xValueGetter?: (item: any, index: number) => number;
 }
 export interface IChartAxesContext {
     xMin: ComputedRef<number>;
@@ -34,7 +35,8 @@ export interface IChartAxesContext {
 }
 /**
  * Robustly parses a value into a number.
- * Handles: numbers, numeric strings, ISO date strings, and falls back to array index for unparseable category strings.
+ * Handles numbers, strings with thousands/decimal formatting, ISO dates,
+ * and falls back to array index for unparseable category strings.
  */
 export declare function parseValue(val: any, fallbackIndex?: number): number;
 export declare function useChartAxes(opts: IChartAxesOptions): IChartAxesContext;

package/dist/runtime/composables/useChartAxes.js

@@ -1,10 +1,11 @@
 import { computed } from "vue";
+import { cleanNumber, safeMax, safeMin } from "./chartUtils.js";
 export function parseValue(val, fallbackIndex) {
   if (val === null || val === void 0) return fallbackIndex ?? 0;
-  if (typeof val === "number") return isNaN(val) ? fallbackIndex ?? 0 : val;
-  const n = Number(val);
-  if (!isNaN(n)) return n;
+  if (typeof val === "number") return Number.isFinite(val) ? val : fallbackIndex ?? 0;
   if (typeof val === "string") {
+    const cleaned = cleanNumber(val, NaN);
+    if (Number.isFinite(cleaned)) return cleaned;
     const d = Date.parse(val);
     if (!isNaN(d)) return d;
   }
@@ -16,21 +17,25 @@ export function useChartAxes(opts) {
   const plotTop = pad.top;
   const plotWidth = computed(() => Math.max(0, opts.width.value - pad.left - pad.right));
   const plotHeight = computed(() => Math.max(0, opts.height.value - pad.top - pad.bottom));
+  const getXVal = (r, i) => {
+    if (opts.xValueGetter) return opts.xValueGetter(r, i);
+    return parseValue(r[opts.xField.value], i);
+  };
   const rawXMin = computed(() => {
-    const vals = opts.items.value.map((r, i) => parseValue(r[opts.xField.value], i));
-    return vals.length ? Math.min(...vals) : 0;
+    const vals = opts.items.value.map((r, i) => getXVal(r, i));
+    return safeMin(vals, 0);
   });
   const rawXMax = computed(() => {
-    const vals = opts.items.value.map((r, i) => parseValue(r[opts.xField.value], i));
-    return vals.length ? Math.max(...vals) : 1;
+    const vals = opts.items.value.map((r, i) => getXVal(r, i));
+    return safeMax(vals, 1);
   });
   const yMin = computed(() => {
     const vals = opts.items.value.map((r, i) => parseValue(r[opts.yField.value], i));
-    return vals.length ? Math.min(...vals) : 0;
+    return safeMin(vals, 0);
   });
   const yMax = computed(() => {
     const vals = opts.items.value.map((r, i) => parseValue(r[opts.yField.value], i));
-    return vals.length ? Math.max(...vals) : 1;
+    return safeMax(vals, 1);
   });
   const xRange = computed(() => rawXMax.value - rawXMin.value);
   const visibleXRange = computed(() => xRange.value / opts.scale.value);
@@ -47,6 +52,18 @@ export function useChartAxes(opts) {
     return plotLeft + (value - xMin.value) / range * plotWidth.value;
   };
   const toY = (value) => {
+    if (opts.scaleMode === "logarithmic") {
+      const minVal = Math.max(yMin.value, 1e-6);
+      const maxVal = Math.max(yMax.value, minVal + 1e-6);
+      const logMin = Math.log10(minVal);
+      const logMax = Math.log10(maxVal);
+      const logRange = logMax - logMin;
+      if (logRange === 0) return plotTop + plotHeight.value;
+      const safeVal = Math.max(value, minVal);
+      const logVal = Math.log10(safeVal);
+      const ratio = (logVal - logMin) / logRange;
+      return plotTop + plotHeight.value - ratio * plotHeight.value;
+    }
     const range = yMax.value - yMin.value;
     if (range === 0) return plotTop + plotHeight.value;
     return plotTop + plotHeight.value - (value - yMin.value) / range * plotHeight.value;

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

@@ -7,12 +7,13 @@ export interface IChartDataContext<T = any> {
     reload: () => Promise<void>;
 }
 /**
- * Extracts item rows strictly from a Katlux DataProvider instance's `pageData` property.
+ * Extracts item rows from a Katlux DataProvider instance.
+ * Prioritizes complete unpaginated datasets (filteredData or allData)
+ * so charts display all data points instead of being truncated to pageData (e.g. pageSize: 10).
  */
 export declare function extractProviderItems<T = any>(provider?: ADataProvider | any): T[];
 /**
  * Provider-agnostic data watcher for Katlux chart components.
- * Consumes data exclusively through Katlux DataProvider instances (Server-side or Client-side),
- * using strictly the `pageData` property.
+ * Consumes data through Katlux DataProvider instances (Server-side or Client-side).
  */
 export declare function useChartData<T = any>(dataProvider: Ref<ADataProvider | null | undefined> | ADataProvider | null | undefined): IChartDataContext<T>;

package/dist/runtime/composables/useChartData.js

@@ -1,12 +1,17 @@
-import { ref, watch, onMounted, isRef } from "vue";
+import { ref, watch, onMounted, getCurrentInstance, isRef } from "vue";
 export function extractProviderItems(provider) {
   if (!provider) return [];
   const instance = isRef(provider) ? provider.value : provider;
   if (!instance) return [];
-  let raw = instance.pageData;
-  if (isRef(raw)) {
-    raw = raw.value;
+  const filtered = isRef(instance.filteredData) ? instance.filteredData.value : instance.filteredData;
+  if (Array.isArray(filtered) && filtered.length > 0) {
+    return filtered;
   }
+  const all = isRef(instance.allData) ? instance.allData.value : instance.allData;
+  if (Array.isArray(all) && all.length > 0) {
+    return all;
+  }
+  let raw = isRef(instance.pageData) ? instance.pageData.value : instance.pageData;
   if (!raw) return [];
   if (Array.isArray(raw)) {
     return raw;
@@ -20,15 +25,9 @@ export function useChartData(dataProvider) {
   const items = ref([]);
   const loading = ref(false);
   const error = ref(null);
-  const ensureUnpaginated = (provider) => {
-    if (provider && provider.pageSize && isRef(provider.pageSize) && provider.pageSize.value !== -1) {
-      provider.pageSize.value = -1;
-    }
-  };
   const updateItems = () => {
     const provider = isRef(dataProvider) ? dataProvider.value : dataProvider;
     if (provider) {
-      ensureUnpaginated(provider);
       items.value = extractProviderItems(provider);
     } else {
       items.value = [];
@@ -38,16 +37,15 @@ export function useChartData(dataProvider) {
     () => {
       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, pd };
+      return { provider, filtered, all, pd };
     },
-    (newVal) => {
-      if (newVal?.provider) {
-        ensureUnpaginated(newVal.provider);
-      }
+    () => {
       updateItems();
     },
-    { immediate: true, deep: true }
+    { immediate: true, deep: false }
   );
   const reload = async () => {
     const provider = isRef(dataProvider) ? dataProvider.value : dataProvider;
@@ -55,7 +53,6 @@ export function useChartData(dataProvider) {
     loading.value = true;
     error.value = null;
     try {
-      ensureUnpaginated(provider);
       if (provider.refresh) {
         await provider.refresh();
       } else if (provider.loadPageData) {
@@ -68,6 +65,10 @@ export function useChartData(dataProvider) {
       loading.value = false;
     }
   };
-  onMounted(updateItems);
+  if (getCurrentInstance()) {
+    onMounted(updateItems);
+  } else {
+    updateItems();
+  }
   return { items, loading, error, reload };
 }

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

@@ -1,5 +1,5 @@
 export interface IChartExportContext {
     exportPng: (canvas: HTMLCanvasElement, filename?: string) => void;
-    exportSvg: (svgEl: SVGSVGElement, filename?: string) => void;
+    exportSvg: (svgEl: SVGSVGElement, filename?: string, canvas?: HTMLCanvasElement | null) => void;
 }
 export declare function useChartExport(): IChartExportContext;

package/dist/runtime/composables/useChartExport.js

@@ -16,10 +16,26 @@ export function useChartExport() {
       console.error("[KChart] PNG export failed:", e);
     }
   };
-  const exportSvg = (svgEl, filename = "chart.svg") => {
+  const exportSvg = (svgEl, filename = "chart.svg", canvas) => {
     try {
+      const clone = svgEl.cloneNode(true);
+      if (!clone.getAttribute("xmlns")) {
+        clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+      }
+      if (canvas) {
+        const dataUrl = canvas.toDataURL("image/png");
+        const imageEl = document.createElementNS("http://www.w3.org/2000/svg", "image");
+        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;
+        imageEl.setAttribute("width", String(w));
+        imageEl.setAttribute("height", String(h));
+        clone.insertBefore(imageEl, clone.firstChild);
+      }
       const serializer = new XMLSerializer();
-      const svgStr = serializer.serializeToString(svgEl);
+      const svgStr = serializer.serializeToString(clone);
       const blob = new Blob([svgStr], { type: "image/svg+xml;charset=utf-8" });
       const url = URL.createObjectURL(blob);
       download(url, filename);

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

@@ -1,6 +1,6 @@
 import { type IChartAxesContext } from './useChartAxes.js';
 export declare function useChartHitTest(): {
-    findNearestX: (items: any[], mouseX: number, xField: string, axes: IChartAxesContext) => {
+    findNearestX: (items: any[], mouseX: number, xField: string, axes: IChartAxesContext, xValueGetter?: (item: any, index?: number) => number) => {
         item: any;
         index: number;
     } | null;

package/dist/runtime/composables/useChartHitTest.js

@@ -1,12 +1,13 @@
 import { parseValue } from "./useChartAxes.js";
 export function useChartHitTest() {
-  const findNearestX = (items, mouseX, xField, axes) => {
+  const findNearestX = (items, mouseX, xField, axes, xValueGetter) => {
     if (!items.length) return null;
     const dataX = axes.fromX(mouseX);
+    const getX = xValueGetter ?? ((item, i) => parseValue(item[xField], i));
     let nearestIdx = 0;
-    let minDiff = Math.abs(parseValue(items[0][xField]) - dataX);
+    let minDiff = Math.abs(getX(items[0], 0) - dataX);
     for (let i = 1; i < items.length; i++) {
-      const val = parseValue(items[i][xField]);
+      const val = getX(items[i], i);
       const diff = Math.abs(val - dataX);
       if (diff < minDiff) {
         minDiff = diff;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@katlux/block-charts",
-	"version": "0.1.1-alpha.87",
+	"version": "0.1.1-alpha.89",
 	"description": "Pre-built charting block components for Katlux toolkit",
 	"author": "Katlux",
 	"license": "Apache-2.0",