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

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.1.1-alpha.87",
+  "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/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>;

package/dist/runtime/composables/useChartAxes.js

@@ -16,12 +16,16 @@ 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));
+    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, i) => parseValue(r[opts.xField.value], i));
+    const vals = opts.items.value.map((r, i) => getXVal(r, i));
     return vals.length ? Math.max(...vals) : 1;
   });
   const yMin = computed(() => {

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