@katlux/block-charts 0.1.1-alpha.86 → 0.1.1-alpha.88

package/dist/module.json

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

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

@@ -30,7 +30,6 @@
 						:height="axes.plotHeight.value"
 					)
 			g.k-chart-hits
-				// No more rect v-for here.
 			
 			// Dynamic Interaction Layer
 			g.k-chart-interaction(v-if="hoveredIndex !== -1" clip-path="url(#plot-clip)")
@@ -122,6 +121,34 @@ const {
 } = viewport;
 const xFieldRef = computed(() => props.xField);
 const yFieldRef = computed(() => props.yField);
+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 seriesMap = computed(() => {
   const map = /* @__PURE__ */ new Map();
   for (const item of items.value) {
@@ -131,7 +158,17 @@ const seriesMap = computed(() => {
   }
   return map;
 });
-const axes = useChartAxes({ items, xField: xFieldRef, yField: yFieldRef, width, height, scale, panOffset, padding: { top: 20, right: 20, bottom: 40, left: 55 } });
+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 draw = () => {
   if (!ctx.value) return;
   clear(props.backgroundColor);
@@ -164,12 +201,35 @@ 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);
-    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 {
+    for (let i = 0; i <= 5; i++) {
+      const val = axes.xMin.value + (axes.xMax.value - axes.xMin.value) * (i / 5);
+      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" });
+      } else {
+        label = val.toFixed(1);
+      }
+      c.fillText(label, x, axes.plotTop + axes.plotHeight.value + 16);
+    }
   }
   c.beginPath();
   c.moveTo(axes.plotLeft, axes.plotTop);
@@ -195,22 +255,22 @@ const draw = () => {
   c.rect(axes.plotLeft, axes.plotTop, axes.plotWidth.value, axes.plotHeight.value);
   c.clip();
   let seriesIdx = 0;
-  for (const [key, seriesItems] of seriesMap.value) {
+  for (const [, seriesItems] of seriesMap.value) {
     const color = props.colors[seriesIdx % props.colors.length];
-    const sorted = [...seriesItems].sort((a, b) => parseValue(a[props.xField]) - parseValue(b[props.xField]));
+    const sorted = [...seriesItems].sort((a, b) => resolveX(a) - resolveX(b));
     const drawCount = Math.max(1, Math.floor(sorted.length * p));
     const pts = sorted.slice(0, drawCount);
     c.save();
     c.beginPath();
     pts.forEach((item, i) => {
-      const x = axes.toX(parseValue(item[props.xField]));
+      const x = axes.toX(resolveX(item, i));
       const y = axes.toY(parseValue(item[props.yField]));
       if (i === 0) c.moveTo(x, y);
       else c.lineTo(x, y);
     });
     if (pts.length > 0) {
-      const lastX = axes.toX(parseValue(pts[pts.length - 1][props.xField]));
-      const firstX = axes.toX(parseValue(pts[0][props.xField]));
+      const lastX = axes.toX(resolveX(pts[pts.length - 1], pts.length - 1));
+      const firstX = axes.toX(resolveX(pts[0], 0));
       const baselineY = axes.plotTop + axes.plotHeight.value;
       c.lineTo(lastX, baselineY);
       c.lineTo(firstX, baselineY);
@@ -220,7 +280,7 @@ const draw = () => {
     c.fill();
     c.beginPath();
     pts.forEach((item, i) => {
-      const x = axes.toX(parseValue(item[props.xField]));
+      const x = axes.toX(resolveX(item, i));
       const y = axes.toY(parseValue(item[props.yField]));
       if (i === 0) c.moveTo(x, y);
       else c.lineTo(x, y);
@@ -265,12 +325,12 @@ watch(panOffset, (v) => emit("pan-change", v), { deep: true });
 const hoveredPoints = computed(() => {
   if (hoveredIndex.value === -1) return [];
   const item = items.value[hoveredIndex.value];
-  const xVal = parseValue(item[props.xField]);
+  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);
+  for (const [, seriesItems] of seriesMap.value) {
+    const seriesItem = seriesItems.find((it) => resolveX(it) === xVal);
     if (seriesItem) {
       pts.push({
         x: xPx,
@@ -303,7 +363,7 @@ 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);
+  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);

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

@@ -65,7 +65,7 @@ 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);
@@ -137,6 +137,7 @@ const draw = () => {
   });
   if (props.showLegend) drawLegend(c);
 };
+watch([items, renderedCells, hoveredIndex, width, height, resizeTick], draw, { deep: true });
 const drawAxes = (c) => {
   c.save();
   c.fillStyle = "rgba(120,120,140,0.8)";
@@ -185,7 +186,16 @@ const drawLegend = (c) => {
   c.fillText(maxVal.value.toString(), x + gradW, y + gradH + 10);
   c.restore();
 };
-watch([renderedCells, hoveredIndex, width, height], draw);
+watch(isLoading, (val) => {
+  if (!val) {
+    nextTick(() => {
+      if (canvasRef.value) {
+        setupCanvas(canvasRef.value);
+        draw();
+      }
+    });
+  }
+});
 onMounted(async () => {
   await nextTick();
   if (containerRef.value && canvasRef.value) {

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

@@ -122,6 +122,34 @@ const {
 } = viewport;
 const xFieldRef = computed(() => props.xField);
 const yFieldRef = computed(() => props.yField);
+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 seriesMap = computed(() => {
   const map = /* @__PURE__ */ new Map();
   for (const item of items.value) {
@@ -139,7 +167,8 @@ 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;
@@ -220,13 +249,36 @@ 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") {
+        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" });
+      } 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,7 +305,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 sorted = [...data].sort((a, b) => resolveX(a) - resolveX(b));
   const totalPts = sorted.length;
   const drawCount = Math.max(1, Math.floor(totalPts * progress2));
   c.save();
@@ -263,7 +315,7 @@ const drawLine = (c, data, color, progress2) => {
   c.lineCap = "round";
   c.beginPath();
   sorted.slice(0, drawCount).forEach((item, i) => {
-    const x = axes.toX(parseValue(item[props.xField]));
+    const x = axes.toX(resolveX(item, i));
     const y = axes.toY(parseValue(item[props.yField]));
     if (i === 0) c.moveTo(x, y);
     else c.lineTo(x, y);
@@ -271,7 +323,7 @@ const drawLine = (c, data, color, progress2) => {
   c.stroke();
   for (let i = 0; i < drawCount; i++) {
     const item = sorted[i];
-    const x = axes.toX(parseValue(item[props.xField]));
+    const x = axes.toX(resolveX(item, i));
     const y = axes.toY(parseValue(item[props.yField]));
     const isHovered = hoveredIndex.value === items.value.indexOf(item);
     c.beginPath();
@@ -301,12 +353,12 @@ onMounted(async () => {
 const hoveredPoints = computed(() => {
   if (hoveredIndex.value === -1) return [];
   const item = items.value[hoveredIndex.value];
-  const xVal = parseValue(item[props.xField]);
+  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);
+    const seriesItem = seriesItems.find((it) => resolveX(it) === xVal);
     if (seriesItem) {
       pts.push({
         x: xPx,
@@ -331,7 +383,7 @@ 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);
+  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);

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

@@ -25,10 +25,9 @@
 						: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"
@@ -56,7 +55,7 @@ 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";
@@ -111,7 +110,45 @@ 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 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(() => Math.max(...items.value.map((r) => Number(r[props.sizeField] ?? 1)), 1));
 const seriesMap = computed(() => {
   const map = /* @__PURE__ */ new Map();
@@ -125,6 +162,7 @@ const seriesMap = computed(() => {
 const hoveredPoint = computed(() => {
   if (hoveredIndex.value === -1) return null;
   const item = items.value[hoveredIndex.value];
+  if (!item) return null;
   const sizeRaw = Number(item[props.sizeField] ?? 1);
   const r = 4 + sizeRaw / maxSize.value * 16;
   const seriesKey = String(item[props.seriesField] ?? "default");
@@ -132,8 +170,8 @@ const hoveredPoint = computed(() => {
   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,
@@ -179,9 +217,35 @@ 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);
+      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" });
+      } else {
+        label = val.toFixed(1);
+      }
+      c.fillText(label, x, axes.toX(val), axes.plotTop + axes.plotHeight.value + 16);
+    }
   }
   c.fillStyle = "rgba(120,120,140,0.8)";
   if (props.xAxisTitle) {
@@ -204,8 +268,8 @@ const draw = () => {
   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 x = axes.toX(resolveX(item, items.value.indexOf(item)));
+      const y = axes.toY(parseValue(item[props.yField]));
       const sizeRaw = Number(item[props.sizeField] ?? 1);
       const r = 4 + sizeRaw / maxSize.value * 16;
       const isHovered = items.value[hoveredIndex.value] === item;

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,7 @@ export interface IChartAxesContext {
 }
 /**
  * Robustly parses a value into a number.
- * Handles: numbers, numeric strings, and ISO date strings.
+ * Handles: numbers, numeric strings, ISO date strings, and falls back to array index for unparseable category strings.
  */
-export declare function parseValue(val: any): number;
+export declare function parseValue(val: any, fallbackIndex?: number): number;
 export declare function useChartAxes(opts: IChartAxesOptions): IChartAxesContext;

package/dist/runtime/composables/useChartAxes.js

@@ -1,13 +1,14 @@
 import { computed } from "vue";
-export function parseValue(val) {
-  if (val === null || val === void 0) return 0;
+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 === "string") {
     const d = Date.parse(val);
     if (!isNaN(d)) return d;
   }
-  return 0;
+  return fallbackIndex ?? 0;
 }
 export function useChartAxes(opts) {
   const pad = opts.padding ?? { top: 20, right: 20, bottom: 40, left: 55 };
@@ -15,20 +16,24 @@ 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) => parseValue(r[opts.xField.value]));
+    const vals = opts.items.value.map((r, i) => getXVal(r, i));
     return vals.length ? Math.min(...vals) : 0;
   });
   const rawXMax = computed(() => {
-    const vals = opts.items.value.map((r) => parseValue(r[opts.xField.value]));
+    const vals = opts.items.value.map((r, i) => getXVal(r, i));
     return vals.length ? Math.max(...vals) : 1;
   });
   const yMin = computed(() => {
-    const vals = opts.items.value.map((r) => parseValue(r[opts.yField.value]));
+    const vals = opts.items.value.map((r, i) => parseValue(r[opts.yField.value], i));
     return vals.length ? Math.min(...vals) : 0;
   });
   const yMax = computed(() => {
-    const vals = opts.items.value.map((r) => parseValue(r[opts.yField.value]));
+    const vals = opts.items.value.map((r, i) => parseValue(r[opts.yField.value], i));
     return vals.length ? Math.max(...vals) : 1;
   });
   const xRange = computed(() => rawXMax.value - rawXMin.value);

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

@@ -5,6 +5,7 @@ export interface IChartCanvasContext {
     width: Ref<number>;
     height: Ref<number>;
     dpr: Ref<number>;
+    resizeTick: Ref<number>;
     clear: (color?: string) => void;
     setupCanvas: (el: HTMLCanvasElement) => void;
 }

package/dist/runtime/composables/useChartCanvas.js

@@ -4,32 +4,47 @@ export function useChartCanvas() {
   const ctx = ref(null);
   const width = ref(0);
   const height = ref(0);
-  const dpr = ref(window?.devicePixelRatio ?? 1);
+  const dpr = ref(typeof window !== "undefined" ? window.devicePixelRatio ?? 1 : 1);
+  const resizeTick = ref(0);
   let resizeObserver = null;
   const applySize = (el, w, h) => {
-    const ratio = window.devicePixelRatio ?? 1;
+    const ratio = typeof window !== "undefined" ? window.devicePixelRatio ?? 1 : 1;
+    const newPixelW = Math.round(w * ratio);
+    const newPixelH = Math.round(h * ratio);
     dpr.value = ratio;
-    el.width = w * ratio;
-    el.height = h * ratio;
-    ctx.value?.scale(ratio, ratio);
-    width.value = w;
-    height.value = h;
+    let sizeChanged = false;
+    if (el.width !== newPixelW || el.height !== newPixelH) {
+      el.width = newPixelW;
+      el.height = newPixelH;
+      ctx.value = el.getContext("2d");
+      ctx.value?.scale(ratio, ratio);
+      sizeChanged = true;
+    }
+    if (width.value !== w || height.value !== h || sizeChanged) {
+      width.value = w;
+      height.value = h;
+      resizeTick.value++;
+    }
   };
   const setupCanvas = (el) => {
     canvas.value = el;
     ctx.value = el.getContext("2d");
     const rect = el.getBoundingClientRect();
-    applySize(el, rect.width, rect.height);
-    resizeObserver = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        const { width: w, height: h } = entry.contentRect;
-        if (canvas.value && ctx.value) {
-          ctx.value = canvas.value.getContext("2d");
-          applySize(canvas.value, w, h);
+    const initialW = rect.width || el.clientWidth || 400;
+    const initialH = rect.height || el.clientHeight || 400;
+    applySize(el, initialW, initialH);
+    if (typeof ResizeObserver !== "undefined") {
+      resizeObserver?.disconnect();
+      resizeObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          const { width: w, height: h } = entry.contentRect;
+          if (canvas.value && w > 0 && h > 0) {
+            applySize(canvas.value, w, h);
+          }
         }
-      }
-    });
-    resizeObserver.observe(el);
+      });
+      resizeObserver.observe(el);
+    }
   };
   const clear = (color) => {
     if (ctx.value && canvas.value) {
@@ -43,5 +58,5 @@ export function useChartCanvas() {
   onUnmounted(() => {
     resizeObserver?.disconnect();
   });
-  return { canvas, ctx, width, height, dpr, clear, setupCanvas };
+  return { canvas, ctx, width, height, dpr, resizeTick, clear, setupCanvas };
 }

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

@@ -1,4 +1,5 @@
 import { type Ref } from 'vue';
+import type { ADataProvider } from '@katlux/providers';
 export interface IChartDataContext<T = any> {
     items: Ref<T[]>;
     loading: Ref<boolean>;
@@ -6,9 +7,12 @@ export interface IChartDataContext<T = any> {
     reload: () => Promise<void>;
 }
 /**
- * Robust data fetcher for charts. Supports:
- * 1. Plain arrays
- * 2. Katlux DataProviders (with .pageData ref)
- * 3. Legacy fetchable providers (with .fetch() method)
+ * Extracts item rows strictly from a Katlux DataProvider instance's `pageData` property.
  */
-export declare function useChartData<T = any>(providerOrData: Ref<any>): IChartDataContext<T>;
+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.
+ */
+export declare function useChartData<T = any>(dataProvider: Ref<ADataProvider | null | undefined> | ADataProvider | null | undefined): IChartDataContext<T>;

package/dist/runtime/composables/useChartData.js

@@ -1,45 +1,73 @@
 import { ref, watch, onMounted, isRef } from "vue";
-export function useChartData(providerOrData) {
+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;
+  }
+  if (!raw) return [];
+  if (Array.isArray(raw)) {
+    return raw;
+  }
+  if (Array.isArray(raw.rows)) {
+    return raw.rows;
+  }
+  return [];
+}
+export function useChartData(dataProvider) {
   const items = ref([]);
   const loading = ref(false);
   const error = ref(null);
-  const load = async () => {
-    const source = providerOrData.value;
-    if (!source) {
+  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 = [];
-      return;
     }
+  };
+  watch(
+    () => {
+      const provider = isRef(dataProvider) ? dataProvider.value : dataProvider;
+      if (!provider) return null;
+      const pd = isRef(provider.pageData) ? provider.pageData.value : provider.pageData;
+      return { provider, pd };
+    },
+    (newVal) => {
+      if (newVal?.provider) {
+        ensureUnpaginated(newVal.provider);
+      }
+      updateItems();
+    },
+    { immediate: true, deep: true }
+  );
+  const reload = async () => {
+    const provider = isRef(dataProvider) ? dataProvider.value : dataProvider;
+    if (!provider) return;
     loading.value = true;
     error.value = null;
     try {
-      if (Array.isArray(source)) {
-        items.value = source;
-        return;
-      }
-      if (source.pageData) {
-        items.value = isRef(source.pageData) ? source.pageData.value : source.pageData;
-        return;
-      }
-      if (typeof source.fetch === "function") {
-        const result = await source.fetch();
-        items.value = result?.rows ?? result ?? [];
-        return;
-      }
-      if (source.rows) {
-        items.value = source.rows;
-        return;
+      ensureUnpaginated(provider);
+      if (provider.refresh) {
+        await provider.refresh();
+      } else if (provider.loadPageData) {
+        await provider.loadPageData();
       }
+      updateItems();
     } catch (e) {
-      error.value = e?.message ?? "Failed to load chart data";
+      error.value = e?.message ?? "Failed to reload chart provider";
     } finally {
       loading.value = false;
     }
   };
-  const reload = load;
-  onMounted(load);
-  watch(providerOrData, load);
-  watch(() => providerOrData.value?.pageData?.value, (newRows) => {
-    if (newRows) items.value = newRows;
-  }, { deep: true });
+  onMounted(updateItems);
   return { items, loading, error, reload };
 }

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.86",
+	"version": "0.1.1-alpha.88",
 	"description": "Pre-built charting block components for Katlux toolkit",
 	"author": "Katlux",
 	"license": "Apache-2.0",