@katlux/block-charts 0.1.0-beta.8 → 0.1.1-alpha.101

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

@@ -1,8 +1,7 @@
 <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"
+	@wheel="onWheel"
 	@mousedown="onMouseDown"
 	@mousemove="onMouseMove"
 	@mouseup="onMouseUp"
@@ -22,7 +21,7 @@
 			:height="height"
 		)
 			defs
-				clipPath(id="plot-clip")
+				clipPath(:id="'plot-clip-' + clipId")
 					rect(
 						:x="axes.plotLeft"
 						:y="axes.plotTop"
@@ -30,10 +29,9 @@
 						: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)")
+			g.k-chart-interaction(v-if="hoveredIndex !== -1" :clip-path="'url(#plot-clip-' + clipId + ')'")
 				circle.k-chart-hit-proxy(
 					v-for="(pt, i) in hoveredPoints"
 					:key="i"
@@ -41,7 +39,6 @@
 					:cy="pt.y"
 					:r="10"
 					fill="transparent"
-					style="cursor: pointer"
 					@click="emit('click-point', pt.item, pt.index)"
 				)
 				circle(
@@ -57,14 +54,14 @@
 				)
 		.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 }}
 </template>
 
 <script setup>
-import { ref, watch, computed, onMounted, nextTick } from "vue";
+import { ref, watch, computed, onMounted, nextTick, useId, isRef } from "vue";
 import { useChartCanvas } from "../../composables/useChartCanvas";
 import { useChartSvg } from "../../composables/useChartSvg";
 import { useChartData } from "../../composables/useChartData";
@@ -73,6 +70,8 @@ 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 clipId = useId();
 const props = defineProps({
   dataProvider: { type: null, required: false },
   xField: { type: String, required: false, default: "x" },
@@ -80,6 +79,7 @@ const props = defineProps({
   seriesField: { type: String, required: false, default: "series" },
   animated: { type: Boolean, required: false, default: true },
   zoomable: { type: Boolean, required: false, default: true },
+  wheelNavigation: { type: Boolean, required: false, default: true },
   maxZoom: { type: Number, required: false, default: 10 },
   stacked: { type: Boolean, required: false, default: false },
   colors: { type: Array, required: false, default: () => ["#6366f1", "#22d3ee", "#f59e0b", "#10b981", "#f43f5e", "#a855f7"] },
@@ -92,19 +92,35 @@ 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);
+const { items, loading: dataLoading } = useChartData(dataRef);
 const { progress, animate } = useChartAnimation();
 const { exportPng, exportSvg: exportSvgFile } = useChartExport();
 const isLoading = computed(() => {
-  return props.dataProvider?.loading?.value || props.dataProvider?.initialLoad?.value || false;
+  const dp = props.dataProvider;
+  if (!dp) return dataLoading.value;
+  const rawLoading = dp.loading !== void 0 ? isRef(dp.loading) ? dp.loading.value : dp.loading?.value ?? dp.loading : false;
+  const rawInitial = dp.initialLoad !== void 0 ? isRef(dp.initialLoad) ? dp.initialLoad.value : dp.initialLoad?.value ?? dp.initialLoad : false;
+  return Boolean(dataLoading.value || rawLoading || rawInitial);
 });
+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);
-const viewport = useChartViewport({ maxZoom: maxZoomRef, plotWidth: plotWidthRef, plotLeft: plotLeftRef });
+const zoomableRef = computed(() => props.zoomable);
+const wheelNavRef = computed(() => props.wheelNavigation);
+const viewport = useChartViewport({
+  maxZoom: maxZoomRef,
+  plotWidth: plotWidthRef,
+  plotLeft: plotLeftRef,
+  zoomable: zoomableRef,
+  wheelNavigation: wheelNavRef
+});
 const { findNearestX } = useChartHitTest();
 const {
   scale,
@@ -122,6 +138,56 @@ const {
 } = viewport;
 const xFieldRef = computed(() => props.xField);
 const yFieldRef = computed(() => props.yField);
+const xAxisType = computed(() => {
+  if (!items.value.length) return "linear";
+  const sample = items.value.find((r) => r?.[props.xField] !== void 0 && r?.[props.xField] !== null)?.[props.xField];
+  if (sample === void 0 || sample === null) return "linear";
+  if (typeof sample === "number") return "linear";
+  if (typeof sample === "string") {
+    const cleaned = cleanNumber(sample, NaN);
+    if (Number.isFinite(cleaned)) return "linear";
+    const parsed = Date.parse(sample);
+    if (!isNaN(parsed) && !/^\d+$/.test(sample.trim()) && /[-/T:]|[A-Za-z]/.test(sample)) return "datetime";
+    return "category";
+  }
+  return "linear";
+});
+const isAllMidnight = computed(() => {
+  if (xAxisType.value !== "datetime" || !items.value.length) return false;
+  const checkCount = Math.min(items.value.length, 100);
+  for (let i = 0; i < checkCount; i++) {
+    const ts = parseValue(items.value[i][props.xField]);
+    const d = new Date(ts);
+    if (d.getHours() !== 0 || d.getMinutes() !== 0) return false;
+  }
+  return true;
+});
+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 +197,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 = props.stacked ? 0 : 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 +274,40 @@ 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") {
+        label = isAllMidnight.value ? 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 +331,75 @@ 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 safeVal = Math.max(0, pt.yVal);
+        const top = base + safeVal;
+        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,29 +427,43 @@ 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 });
+watch(() => [panOffset.value.x, panOffset.value.y], ([x, y]) => emit("pan-change", { x, y }));
+watch(() => items.value.length, (newLen) => {
+  if (hoveredIndex.value >= newLen) {
+    setHovered(-1);
+  }
+});
 const hoveredPoints = computed(() => {
-  if (hoveredIndex.value === -1) return [];
+  if (hoveredIndex.value === -1 || hoveredIndex.value >= items.value.length) return [];
   const item = items.value[hoveredIndex.value];
-  const xVal = parseValue(item[props.xField]);
+  if (!item) return [];
+  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) {
+  let cumulativeBase = 0;
+  for (const [, seriesList] of sortedSeriesMap.value) {
+    const found = seriesList.find((pt) => pt.xVal === xVal);
+    if (found) {
+      const safeVal = Math.max(0, found.yVal);
+      const top = props.stacked ? cumulativeBase + safeVal : found.yVal;
       pts.push({
         x: xPx,
-        y: axes.toY(parseValue(seriesItem[props.yField])),
+        y: toStackedY(top),
         color: props.colors[seriesIdx % props.colors.length],
-        item: seriesItem,
-        index: items.value.indexOf(seriesItem)
+        item: found.item,
+        index: found.index
       });
+      if (props.stacked) {
+        cumulativeBase += safeVal;
+      }
     }
     seriesIdx++;
   }
@@ -293,7 +478,7 @@ onMounted(async () => {
   }
 });
 const onMouseMove = (e) => {
-  viewport.onMouseMove(e);
+  onViewportMouseMove(e);
   if (isDragging.value) {
     setHovered(-1);
     hideTooltip();
@@ -303,11 +488,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(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);
     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 +521,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 +529,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 +545,6 @@ defineExpose({
   display: flex;
   gap: 4px;
 }
-.k-chart-wrapper .k-chart-btn {
-  display: none;
-}
 .k-chart-wrapper .k-chart-inner {
   width: 100%;
   height: 400px;

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

@@ -5,6 +5,7 @@ type __VLS_Props = {
     seriesField?: string;
     animated?: boolean;
     zoomable?: boolean;
+    wheelNavigation?: boolean;
     maxZoom?: number;
     stacked?: boolean;
     colors?: string[];
@@ -41,6 +42,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     seriesField: string;
     animated: boolean;
     zoomable: boolean;
+    wheelNavigation: boolean;
     maxZoom: number;
     stacked: boolean;
     colors: string[];

package/dist/runtime/components/KBarChart/KBarChart.d.vue.ts

@@ -7,6 +7,7 @@ type __VLS_Props = {
     mode?: 'simple' | 'clustered' | 'stacked';
     animated?: boolean;
     zoomable?: boolean;
+    wheelNavigation?: boolean;
     maxZoom?: number;
     colors?: string[];
     backgroundColor?: string;
@@ -39,6 +40,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
 }>, {
     animated: boolean;
     zoomable: boolean;
+    wheelNavigation: boolean;
     maxZoom: number;
     colors: string[];
     backgroundColor: string;