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

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

@@ -2,7 +2,6 @@
 .k-chart-wrapper(
 	ref="wrapperRef"
 	:class="{ 'k-chart--grabbing': isDragging, 'k-chart--pannable': canPan }"
-	:style="{ cursor: isDragging ? 'grabbing' : canPan ? 'grab' : 'default' }"
 	@wheel.prevent="onWheel"
 	@mousedown="onMouseDown"
 	@mousemove="onMouseMove"
@@ -39,7 +38,6 @@
 					:cy="pt.y"
 					:r="10"
 					fill="transparent"
-					style="cursor: pointer"
 					@click="emit('click-point', pt.item, pt.index)"
 				)
 				// Visible indicators
@@ -57,7 +55,7 @@
 		// Tooltip
 		.k-chart-tooltip(
 			v-if="tooltipState.visible && !isLoading"
-			:style="{ left: tooltipState.x + 'px', top: tooltipState.y + 'px' }"
+			:style="tooltipStyle"
 		)
 			slot(name="tooltip" :item="tooltipState.item" :index="tooltipState.index")
 				span {{ tooltipState.content }}
@@ -92,7 +90,7 @@ const wrapperRef = ref(null);
 const containerRef = ref(null);
 const canvasRef = ref(null);
 const svgRef = ref(null);
-const { ctx, width, height, clear, setupCanvas } = useChartCanvas();
+const { ctx, width, height, resizeTick, clear, setupCanvas } = useChartCanvas();
 const { hoveredIndex, tooltipState, showTooltip, hideTooltip, setHovered } = useChartSvg();
 const dataRef = computed(() => props.dataProvider);
 const { items, loading } = useChartData(dataRef);
@@ -101,6 +99,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);
@@ -120,8 +122,45 @@ const {
   onMouseUp,
   onMouseLeave: onViewportMouseLeave
 } = viewport;
-const xFieldRef = computed(() => props.xField);
-const yFieldRef = computed(() => props.yField);
+const xAxisType = computed(() => {
+  if (!items.value.length) return "linear";
+  const firstVal = items.value[0]?.[props.xField];
+  if (typeof firstVal === "number") return "linear";
+  if (typeof firstVal === "string") {
+    const parsed = Date.parse(firstVal);
+    if (!isNaN(parsed) && !/^\d+$/.test(firstVal.trim())) return "datetime";
+    const num = Number(firstVal);
+    if (!isNaN(num)) return "linear";
+    return "category";
+  }
+  return "linear";
+});
+const categoryList = computed(() => {
+  if (xAxisType.value !== "category") return [];
+  const seen = /* @__PURE__ */ new Set();
+  const list = [];
+  for (const item of items.value) {
+    const val = String(item[props.xField] ?? "");
+    if (!seen.has(val)) {
+      seen.add(val);
+      list.push(val);
+    }
+  }
+  return list;
+});
+const categoryIndexMap = computed(() => {
+  const map = {};
+  categoryList.value.forEach((cat, i) => {
+    map[cat] = i;
+  });
+  return map;
+});
+const resolveX = (item, index = 0) => {
+  if (!item) return index;
+  const raw = item[props.xField];
+  if (xAxisType.value === "category") return categoryIndexMap.value[String(raw)] ?? index;
+  return parseValue(raw, index);
+};
 const seriesMap = computed(() => {
   const map = /* @__PURE__ */ new Map();
   for (const item of items.value) {
@@ -131,6 +170,24 @@ const seriesMap = computed(() => {
   }
   return map;
 });
+const sortedSeriesMap = computed(() => {
+  const map = /* @__PURE__ */ new Map();
+  const itemIndexMap = /* @__PURE__ */ new Map();
+  for (let i = 0; i < items.value.length; i++) {
+    itemIndexMap.set(items.value[i], i);
+  }
+  for (const [key, seriesItems] of seriesMap.value) {
+    const enriched = seriesItems.map((item, idx) => ({
+      item,
+      index: itemIndexMap.get(item) ?? idx,
+      xVal: resolveX(item, idx)
+    })).sort((a, b) => a.xVal - b.xVal);
+    map.set(key, enriched);
+  }
+  return map;
+});
+const xFieldRef = computed(() => props.xField);
+const yFieldRef = computed(() => props.yField);
 const axes = useChartAxes({
   items,
   xField: xFieldRef,
@@ -139,13 +196,14 @@ const axes = useChartAxes({
   height,
   scale,
   panOffset,
-  padding: { top: 20, right: 20, bottom: 40, left: 55 }
+  padding: { top: 20, right: 20, bottom: 40, left: 55 },
+  xValueGetter: (r, i) => resolveX(r, i)
 });
 const draw = () => {
   if (!ctx.value) return;
   clear(props.backgroundColor);
   const c = ctx.value;
-  const p = easeOut(progress.value);
+  const p = props.animated ? easeOut(progress.value) : 1;
   drawGrid(c);
   drawAxes(c);
   c.save();
@@ -153,9 +211,9 @@ const draw = () => {
   c.rect(axes.plotLeft, axes.plotTop, axes.plotWidth.value, axes.plotHeight.value);
   c.clip();
   let seriesIdx = 0;
-  for (const [, seriesItems] of seriesMap.value) {
+  for (const [, seriesData] of sortedSeriesMap.value) {
     const color = props.colors[seriesIdx % props.colors.length];
-    drawLine(c, seriesItems, color, p);
+    drawLine(c, seriesData, color, p);
     seriesIdx++;
   }
   c.restore();
@@ -220,13 +278,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);
@@ -234,7 +315,7 @@ const drawAxes = (c) => {
   c.stroke();
   c.beginPath();
   c.moveTo(axes.plotLeft, axes.plotTop);
-  c.lineTo(axes.plotLeft, axes.plotTop + axes.plotHeight.value);
+  c.lineTo(axes.plotLeft + axes.plotHeight.value);
   c.stroke();
   c.fillStyle = "rgba(120,120,140,0.8)";
   if (props.xAxisTitle) {
@@ -253,8 +334,7 @@ const drawAxes = (c) => {
 };
 const drawLine = (c, data, color, progress2) => {
   if (!data.length) return;
-  const sorted = [...data].sort((a, b) => parseValue(a[props.xField]) - parseValue(b[props.xField]));
-  const totalPts = sorted.length;
+  const totalPts = data.length;
   const drawCount = Math.max(1, Math.floor(totalPts * progress2));
   c.save();
   c.strokeStyle = color;
@@ -262,18 +342,20 @@ const drawLine = (c, data, color, progress2) => {
   c.lineJoin = "round";
   c.lineCap = "round";
   c.beginPath();
-  sorted.slice(0, drawCount).forEach((item, i) => {
-    const x = axes.toX(parseValue(item[props.xField]));
-    const y = axes.toY(parseValue(item[props.yField]));
+  for (let i = 0; i < drawCount; i++) {
+    const pt = data[i];
+    const x = axes.toX(pt.xVal);
+    const y = axes.toY(parseValue(pt.item[props.yField]));
     if (i === 0) c.moveTo(x, y);
     else c.lineTo(x, y);
-  });
+  }
   c.stroke();
+  const currentHoveredIdx = hoveredIndex.value;
   for (let i = 0; i < drawCount; i++) {
-    const item = sorted[i];
-    const x = axes.toX(parseValue(item[props.xField]));
-    const y = axes.toY(parseValue(item[props.yField]));
-    const isHovered = hoveredIndex.value === items.value.indexOf(item);
+    const pt = data[i];
+    const x = axes.toX(pt.xVal);
+    const y = axes.toY(parseValue(pt.item[props.yField]));
+    const isHovered = currentHoveredIdx !== -1 && pt.index === currentHoveredIdx;
     c.beginPath();
     c.arc(x, y, isHovered ? 5 : 3, 0, Math.PI * 2);
     c.fillStyle = isHovered ? "#fff" : color;
@@ -284,10 +366,12 @@ const drawLine = (c, data, color, progress2) => {
   }
   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 () => {
@@ -300,20 +384,24 @@ onMounted(async () => {
 });
 const hoveredPoints = computed(() => {
   if (hoveredIndex.value === -1) return [];
+  if (hoveredIndex.value >= items.value.length) {
+    setHovered(-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);
-    if (seriesItem) {
+  for (const [, seriesList] of sortedSeriesMap.value) {
+    const found = seriesList.find((pt) => pt.xVal === xVal);
+    if (found) {
       pts.push({
         x: xPx,
-        y: axes.toY(parseValue(seriesItem[props.yField])),
+        y: axes.toY(parseValue(found.item[props.yField])),
         color: props.colors[seriesIdx % props.colors.length],
-        item: seriesItem,
-        index: items.value.indexOf(seriesItem)
+        item: found.item,
+        index: found.index
       });
     }
     seriesIdx++;
@@ -331,18 +419,31 @@ const onMouseMove = (e) => {
   if (!rect) return;
   const mouseX = e.clientX - rect.left;
   const mouseY = e.clientY - rect.top;
-  const nearest = findNearestX(items.value, mouseX, props.xField, axes);
+  if (mouseX < axes.plotLeft || mouseX > axes.plotLeft + axes.plotWidth.value || mouseY < axes.plotTop || mouseY > axes.plotTop + axes.plotHeight.value) {
+    setHovered(-1);
+    hideTooltip();
+    return;
+  }
+  const nearest = findNearestX(mouseX, items.value, axes.toX, (r, i) => resolveX(r, i));
   if (nearest) {
     setHovered(nearest.index);
-    showTooltip(mouseX + 10, mouseY - 20, `${nearest.item[props.xField]}: ${nearest.item[props.yField]}`, nearest.item, nearest.index);
     emit("hover-point", nearest.item, nearest.index);
+    const xPx = axes.toX(resolveX(nearest.item, nearest.index));
+    const yPx = axes.toY(parseValue(nearest.item[props.yField]));
+    showTooltip(
+      xPx,
+      yPx - 10,
+      `${props.xField}: ${nearest.item[props.xField]} | ${props.yField}: ${nearest.item[props.yField]}`,
+      nearest.item,
+      nearest.index
+    );
   } else {
     setHovered(-1);
     hideTooltip();
   }
 };
 const onMouseLeave = (e) => {
-  onViewportMouseLeave(e);
+  onViewportMouseLeave();
   setHovered(-1);
   hideTooltip();
 };
@@ -351,7 +452,7 @@ defineExpose({
   zoomOut: viewport.zoomOut,
   resetZoom: viewport.resetZoom,
   exportPng: () => canvasRef.value && exportPng(canvasRef.value, "line-chart.png"),
-  exportSvg: () => svgRef.value && exportSvgFile(svgRef.value, "line-chart.svg")
+  exportSvg: () => svgRef.value && exportSvgFile(svgRef.value, "line-chart.svg", canvasRef.value)
 });
 </script>
 
@@ -359,6 +460,13 @@ defineExpose({
 .k-chart-wrapper {
   position: relative;
   user-select: none;
+  cursor: default;
+}
+.k-chart-wrapper.k-chart--pannable {
+  cursor: grab;
+}
+.k-chart-wrapper.k-chart--grabbing {
+  cursor: grabbing;
 }
 .k-chart-wrapper .k-chart-controls {
   position: absolute;

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

@@ -9,14 +9,13 @@
 		canvas(ref="canvasRef" v-show="!isLoading")
 		svg.k-chart-svg(v-show="!isLoading" ref="svgRef" :width="width" :height="height")
 			g.k-chart-hits
-				// Hit detection now handled via angle calculation in onMouseMove
+				// Hit detection handled via angle calculation in onMouseMove
 			
 			// Dynamic Interaction Layer
 			g.k-chart-interaction(v-if="hoveredIndex !== -1 && hoveredSeg")
 				path.k-chart-hit-proxy(
 					:d="hoveredSeg.d"
 					fill="transparent"
-					style="cursor: pointer"
 					@click="emit('click-point', hoveredSeg.item, hoveredIndex)"
 				)
 				path(
@@ -26,7 +25,7 @@
 					stroke-width="3"
 					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>
@@ -38,6 +37,7 @@ import { useChartSvg } from "../../composables/useChartSvg";
 import { useChartData } from "../../composables/useChartData";
 import { useChartAnimation, easeOut } from "../../composables/useChartAnimation";
 import { useChartExport } from "../../composables/useChartExport";
+import { cleanNumber } from "../../composables/chartUtils";
 const props = defineProps({
   dataProvider: { type: null, required: false },
   labelField: { type: String, required: false, default: "label" },
@@ -53,7 +53,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);
@@ -62,8 +62,12 @@ 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 hitSegments = ref([]);
-const total = computed(() => items.value.reduce((s, r) => s + Number(r[props.valueField]), 0));
+const total = computed(() => items.value.reduce((s, r) => s + Math.max(0, cleanNumber(r[props.valueField])), 0));
 const hoveredSeg = computed(() => {
   if (hoveredIndex.value === -1) return null;
   return hitSegments.value[hoveredIndex.value];
@@ -88,7 +92,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;
   const segs = [];
   const cx = width.value / 2;
   const cy = props.showLegend ? (height.value - 50) / 2 : height.value / 2;
@@ -96,7 +100,8 @@ const draw = () => {
   let startAngle = -Math.PI / 2;
   const tot = total.value || 1;
   items.value.forEach((item, i) => {
-    const slice = Number(item[props.valueField]) / tot * Math.PI * 2 * p;
+    const val = Math.max(0, cleanNumber(item[props.valueField]));
+    const slice = val / tot * Math.PI * 2 * p;
     const endAngle = startAngle + slice;
     const color = props.colors[i % props.colors.length];
     const isHovered = hoveredIndex.value === i;
@@ -113,13 +118,13 @@ const draw = () => {
     const lr = r * 0.7;
     const lx = cx + lr * Math.cos(midAngle);
     const ly = cy + lr * Math.sin(midAngle);
-    if (p > 0.5) {
+    if (p > 0.5 && val > 0) {
       c.save();
       c.fillStyle = "#fff";
       c.font = "bold 11px system-ui, sans-serif";
       c.textAlign = "center";
       c.textBaseline = "middle";
-      const pct = (Number(item[props.valueField]) / tot * 100).toFixed(0) + "%";
+      const pct = (val / tot * 100).toFixed(0) + "%";
       c.fillText(pct, lx, ly);
       c.restore();
     }
@@ -128,41 +133,32 @@ const draw = () => {
       cx: cx + r * 0.75 * Math.cos(startAngle + slice / 2),
       cy: cy + r * 0.75 * Math.sin(startAngle + slice / 2),
       item,
-      label: `${item[props.labelField]}: ${item[props.valueField]}`,
+      label: `${item[props.labelField]}: ${val}`,
       startAngle,
       endAngle
     });
     startAngle = endAngle;
   });
   if (props.donut) {
+    const ri = r * 0.5;
     c.save();
     c.beginPath();
-    c.arc(cx, cy, r * 0.5, 0, Math.PI * 2);
-    c.fillStyle = "#000";
-    c.globalCompositeOperation = "destination-out";
+    c.arc(cx, cy, ri, 0, Math.PI * 2);
+    c.fillStyle = props.backgroundColor || "#ffffff";
     c.fill();
-    c.globalCompositeOperation = "source-over";
     c.restore();
   }
   hitSegments.value = segs;
   if (props.showLegend) {
     drawLegend(c);
   }
-  if (props.title) {
-    c.save();
-    c.fillStyle = "rgba(120,120,140,0.9)";
-    c.font = "bold 16px system-ui, sans-serif";
-    c.textAlign = "center";
-    c.fillText(props.title, width.value / 2, 30);
-    c.restore();
-  }
 };
 const drawLegend = (c) => {
   c.save();
   c.font = "11px system-ui, sans-serif";
   c.textAlign = "left";
   c.textBaseline = "middle";
-  const keys = items.value.map((it) => String(it[props.labelField]));
+  const keys = items.value.map((r) => String(r[props.labelField]));
   let xOffset = 20;
   let yOffset = height.value - 25;
   keys.forEach((key, i) => {
@@ -180,10 +176,12 @@ const drawLegend = (c) => {
   });
   c.restore();
 };
-watch([items, hoveredIndex, progress, () => props.donut], draw, { deep: true });
+watch(progress, draw);
+watch([hoveredIndex, resizeTick, width, height, () => props.donut], draw);
 watch(items, () => {
   if (props.animated) animate();
-}, { deep: true });
+  else draw();
+});
 onMounted(async () => {
   await nextTick();
   if (containerRef.value && canvasRef.value) {
@@ -225,7 +223,7 @@ const onMouseLeave = () => {
 };
 defineExpose({
   exportPng: () => canvasRef.value && exportPng(canvasRef.value, "pie-chart.png"),
-  exportSvg: () => svgRef.value && exportSvgFile(svgRef.value, "pie-chart.svg")
+  exportSvg: () => svgRef.value && exportSvgFile(svgRef.value, "pie-chart.svg", canvasRef.value)
 });
 </script>
 
@@ -233,6 +231,7 @@ defineExpose({
 .k-chart-wrapper {
   position: relative;
   user-select: none;
+  cursor: default;
 }
 .k-chart-wrapper .k-chart-inner {
   width: 100%;