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

package/dist/module.d.mts

@@ -1,6 +1,8 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
 interface ModuleOptions {
 }
-declare const _default: any;
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
 export { _default as default };
 export type { ModuleOptions };

package/dist/module.json

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

package/dist/runtime/components/KAreaChart/KAreaChart.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"
@@ -30,7 +29,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)")
@@ -41,7 +39,6 @@
 					:cy="pt.y"
 					:r="10"
 					fill="transparent"
-					style="cursor: pointer"
 					@click="emit('click-point', pt.item, pt.index)"
 				)
 				circle(
@@ -57,7 +54,7 @@
 				)
 		.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 }}
@@ -73,6 +70,7 @@ 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" },
@@ -92,7 +90,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);
@@ -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);
@@ -122,6 +124,45 @@ const {
 } = 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,12 +172,60 @@ 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 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),
+      yVal: cleanNumber(item[props.yField])
+    })).sort((a, b) => a.xVal - b.xVal);
+    map.set(key, enriched);
+  }
+  return map;
+});
+const stackedMaxY = computed(() => {
+  if (!props.stacked) return 0;
+  const xTotals = /* @__PURE__ */ new Map();
+  for (const [, seriesItems] of sortedSeriesMap.value) {
+    for (const pt of seriesItems) {
+      const current = xTotals.get(pt.xVal) || 0;
+      xTotals.set(pt.xVal, current + Math.max(0, pt.yVal));
+    }
+  }
+  return safeMax(Array.from(xTotals.values()), 10);
+});
+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 effectiveYMax = computed(() => {
+  return props.stacked ? Math.max(stackedMaxY.value, axes.yMax.value) : axes.yMax.value;
+});
+const toStackedY = (val) => {
+  const yMin = axes.yMin.value;
+  const yMax = effectiveYMax.value;
+  const range = yMax - yMin;
+  if (range === 0) return axes.plotTop + axes.plotHeight.value;
+  return axes.plotTop + axes.plotHeight.value - (val - yMin) / range * axes.plotHeight.value;
+};
 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;
@@ -160,17 +249,45 @@ const draw = () => {
   c.font = "11px system-ui, sans-serif";
   c.textAlign = "right";
   for (let i = 0; i <= 5; i++) {
-    const val = axes.yMin.value + (axes.yMax.value - axes.yMin.value) * (i / 5);
-    c.fillText(val.toFixed(1), axes.plotLeft - 8, axes.toY(val) + 4);
+    const val = axes.yMin.value + (effectiveYMax.value - axes.yMin.value) * (i / 5);
+    c.fillText(val.toFixed(1), axes.plotLeft - 8, toStackedY(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.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);
@@ -194,41 +311,74 @@ const draw = () => {
   c.beginPath();
   c.rect(axes.plotLeft, axes.plotTop, axes.plotWidth.value, axes.plotHeight.value);
   c.clip();
+  const currentBaseline = /* @__PURE__ */ new Map();
   let seriesIdx = 0;
-  for (const [key, seriesItems] of seriesMap.value) {
+  for (const [, seriesItems] of sortedSeriesMap.value) {
     const color = props.colors[seriesIdx % props.colors.length];
-    const sorted = [...seriesItems].sort((a, b) => parseValue(a[props.xField]) - parseValue(b[props.xField]));
-    const drawCount = Math.max(1, Math.floor(sorted.length * p));
-    const pts = sorted.slice(0, drawCount);
+    const drawCount = Math.max(1, Math.floor(seriesItems.length * p));
+    const pts = seriesItems.slice(0, drawCount);
     c.save();
     c.beginPath();
-    pts.forEach((item, i) => {
-      const x = axes.toX(parseValue(item[props.xField]));
-      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 baselineY = axes.plotTop + axes.plotHeight.value;
-      c.lineTo(lastX, baselineY);
-      c.lineTo(firstX, baselineY);
+    if (props.stacked) {
+      const topPoints = [];
+      const bottomPoints = [];
+      for (const pt of pts) {
+        const x = axes.toX(pt.xVal);
+        const base = currentBaseline.get(pt.xVal) || 0;
+        const top = base + pt.yVal;
+        const yTop = toStackedY(top);
+        const yBottom = toStackedY(base);
+        topPoints.push({ x, y: yTop });
+        bottomPoints.push({ x, y: yBottom });
+        currentBaseline.set(pt.xVal, top);
+      }
+      topPoints.forEach((pt, i) => {
+        if (i === 0) c.moveTo(pt.x, pt.y);
+        else c.lineTo(pt.x, pt.y);
+      });
+      for (let i = bottomPoints.length - 1; i >= 0; i--) {
+        c.lineTo(bottomPoints[i].x, bottomPoints[i].y);
+      }
       c.closePath();
+      c.fillStyle = color + "44";
+      c.fill();
+      c.beginPath();
+      topPoints.forEach((pt, i) => {
+        if (i === 0) c.moveTo(pt.x, pt.y);
+        else c.lineTo(pt.x, pt.y);
+      });
+      c.strokeStyle = color;
+      c.lineWidth = 2;
+      c.stroke();
+    } else {
+      pts.forEach((pt, i) => {
+        const x = axes.toX(pt.xVal);
+        const y = toStackedY(pt.yVal);
+        if (i === 0) c.moveTo(x, y);
+        else c.lineTo(x, y);
+      });
+      if (pts.length > 0) {
+        const lastX = axes.toX(pts[pts.length - 1].xVal);
+        const firstX = axes.toX(pts[0].xVal);
+        const baselineY = axes.plotTop + axes.plotHeight.value;
+        c.lineTo(lastX, baselineY);
+        c.lineTo(firstX, baselineY);
+        c.closePath();
+      }
+      c.fillStyle = color + "33";
+      c.fill();
+      c.beginPath();
+      pts.forEach((pt, i) => {
+        const x = axes.toX(pt.xVal);
+        const y = toStackedY(pt.yVal);
+        if (i === 0) c.moveTo(x, y);
+        else c.lineTo(x, y);
+      });
+      c.strokeStyle = color;
+      c.lineWidth = 2;
+      c.lineJoin = "round";
+      c.stroke();
     }
-    c.fillStyle = color + "33";
-    c.fill();
-    c.beginPath();
-    pts.forEach((item, i) => {
-      const x = axes.toX(parseValue(item[props.xField]));
-      const y = axes.toY(parseValue(item[props.yField]));
-      if (i === 0) c.moveTo(x, y);
-      else c.lineTo(x, y);
-    });
-    c.strokeStyle = color;
-    c.lineWidth = 2;
-    c.lineJoin = "round";
-    c.stroke();
     c.restore();
     seriesIdx++;
   }
@@ -256,28 +406,34 @@ const drawLegend = (c) => {
   });
   c.restore();
 };
-watch([items, scale, panOffset, hoveredIndex, progress], draw, { deep: true });
+watch(progress, draw);
+watch([scale, panOffset, hoveredIndex, resizeTick, width, height, () => props.stacked], 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 });
 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: toStackedY(found.yVal),
         color: props.colors[seriesIdx % props.colors.length],
-        item: seriesItem,
-        index: items.value.indexOf(seriesItem)
+        item: found.item,
+        index: found.index
       });
     }
     seriesIdx++;
@@ -293,7 +449,7 @@ onMounted(async () => {
   }
 });
 const onMouseMove = (e) => {
-  viewport.onMouseMove(e);
+  onViewportMouseMove(e);
   if (isDragging.value) {
     setHovered(-1);
     hideTooltip();
@@ -303,11 +459,24 @@ 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 = toStackedY(cleanNumber(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();
@@ -323,7 +492,7 @@ defineExpose({
   zoomOut: viewport.zoomOut,
   resetZoom: viewport.resetZoom,
   exportPng: () => canvasRef.value && exportPng(canvasRef.value, "area-chart.png"),
-  exportSvg: () => svgRef.value && exportSvgFile(svgRef.value, "area-chart.svg")
+  exportSvg: () => svgRef.value && exportSvgFile(svgRef.value, "area-chart.svg", canvasRef.value)
 });
 </script>
 
@@ -331,6 +500,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;
@@ -340,9 +516,6 @@ defineExpose({
   display: flex;
   gap: 4px;
 }
-.k-chart-wrapper .k-chart-btn {
-  display: none;
-}
 .k-chart-wrapper .k-chart-inner {
   width: 100%;
   height: 400px;