@katlux/block-charts 0.1.0-beta.0 → 0.1.0-beta.2

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

@@ -0,0 +1,356 @@
+<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"
+	@mouseup="onMouseUp"
+	@mouseleave="onMouseLeave"
+)
+	.k-chart-controls(v-if="zoomable")
+		KButton(size="small" @click="zoomIn" title="Zoom In") +
+		KButton(size="small" @click="zoomOut" title="Zoom Out") −
+		KButton(size="small" @click="resetZoom" title="Reset") ↺
+	.k-chart-inner(ref="containerRef")
+		KLoader(:loading="isLoading" overlay)
+		canvas(ref="canvasRef" v-show="!isLoading")
+		svg.k-chart-svg(v-show="!isLoading" ref="svgRef" :width="width" :height="height")
+			defs
+				clipPath(id="plot-clip")
+					rect(
+						:x="axes.plotLeft"
+						:y="axes.plotTop"
+						:width="axes.plotWidth.value"
+						: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)")
+				circle.k-chart-hit-proxy(
+					:cx="hoveredPoint.x"
+					:cy="hoveredPoint.y"
+					:r="20"
+					fill="transparent"
+					style="cursor: pointer"
+					@click="emit('click-point', hoveredPoint.item, hoveredPoint.index)"
+				)
+				circle(
+					:cx="hoveredPoint.x"
+					:cy="hoveredPoint.y"
+					:r="hoveredPoint.r + 3"
+					fill="transparent"
+					:stroke="hoveredPoint.color"
+					stroke-width="2"
+					pointer-events="none"
+				)
+		.k-chart-tooltip(v-if="tooltipState.visible && !isLoading" :style="{ left: tooltipState.x + 'px', top: tooltipState.y + 'px' }")
+			slot(name="tooltip" :item="tooltipState.item" :index="tooltipState.index")
+				span {{ tooltipState.content }}
+</template>
+
+<script setup>
+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 { useChartViewport } from "../../composables/useChartViewport";
+import { useChartAnimation, easeOut } from "../../composables/useChartAnimation";
+import { useChartExport } from "../../composables/useChartExport";
+import { useChartHitTest } from "../../composables/useChartHitTest";
+const props = defineProps({
+  dataProvider: { type: null, required: false },
+  xField: { type: String, required: false, default: "x" },
+  yField: { type: String, required: false, default: "y" },
+  seriesField: { type: String, required: false, default: "series" },
+  sizeField: { type: String, required: false, default: "size" },
+  labelField: { type: String, required: false, default: "label" },
+  animated: { type: Boolean, required: false, default: true },
+  zoomable: { type: Boolean, required: false, default: true },
+  maxZoom: { type: Number, required: false, default: 20 },
+  colors: { type: Array, required: false, default: () => ["#6366f1", "#22d3ee", "#f59e0b", "#10b981", "#f43f5e", "#a855f7", "#14b8a6", "#fb923c"] },
+  backgroundColor: { type: String, required: false, default: "#ffffff" },
+  showLegend: { type: Boolean, required: false, default: true },
+  xAxisTitle: { type: String, required: false, default: "" },
+  yAxisTitle: { type: String, required: false, default: "" }
+});
+const emit = defineEmits(["click-point", "hover-point", "zoom-change", "pan-change"]);
+const containerRef = ref(null);
+const canvasRef = ref(null);
+const svgRef = ref(null);
+const { ctx, width, height, clear, setupCanvas } = useChartCanvas();
+const { hoveredIndex, tooltipState, showTooltip, hideTooltip, setHovered } = useChartSvg();
+const dataRef = computed(() => props.dataProvider);
+const { items } = 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 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 { findNearestEuclidean } = useChartHitTest();
+const {
+  scale,
+  panOffset,
+  isDragging,
+  canPan,
+  zoomIn,
+  zoomOut,
+  resetZoom,
+  onWheel,
+  onMouseDown,
+  onMouseMove: onViewportMouseMove,
+  onMouseUp,
+  onMouseLeave: onViewportMouseLeave
+} = 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 maxSize = computed(() => Math.max(...items.value.map((r) => Number(r[props.sizeField] ?? 1)), 1));
+const seriesMap = computed(() => {
+  const map = /* @__PURE__ */ new Map();
+  for (const item of items.value) {
+    const key = String(item[props.seriesField] ?? "default");
+    if (!map.has(key)) map.set(key, []);
+    map.get(key).push(item);
+  }
+  return map;
+});
+const hoveredPoint = computed(() => {
+  if (hoveredIndex.value === -1) return null;
+  const item = items.value[hoveredIndex.value];
+  const sizeRaw = Number(item[props.sizeField] ?? 1);
+  const r = 4 + sizeRaw / maxSize.value * 16;
+  const seriesKey = String(item[props.seriesField] ?? "default");
+  const seriesKeys = Array.from(seriesMap.value.keys());
+  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])),
+    r,
+    color,
+    item,
+    index: hoveredIndex.value
+  };
+});
+const draw = () => {
+  if (!ctx.value) return;
+  clear(props.backgroundColor);
+  const c = ctx.value;
+  const p = easeOut(progress.value);
+  c.save();
+  c.strokeStyle = "rgba(100,100,120,0.1)";
+  c.lineWidth = 1;
+  for (let i = 0; i <= 6; i++) {
+    const y = axes.plotTop + axes.plotHeight.value / 6 * i;
+    c.beginPath();
+    c.moveTo(axes.plotLeft, y);
+    c.lineTo(axes.plotLeft + axes.plotWidth.value, y);
+    c.stroke();
+  }
+  for (let i = 0; i <= 6; i++) {
+    const x = axes.plotLeft + axes.plotWidth.value / 6 * i;
+    c.beginPath();
+    c.moveTo(x, axes.plotTop);
+    c.lineTo(x, axes.plotTop + axes.plotHeight.value);
+    c.stroke();
+  }
+  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);
+  c.stroke();
+  c.fillStyle = "rgba(150,150,170,0.8)";
+  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);
+  }
+  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);
+  }
+  c.fillStyle = "rgba(120,120,140,0.8)";
+  if (props.xAxisTitle) {
+    c.fillText(props.xAxisTitle, axes.plotLeft + axes.plotWidth.value / 2, axes.plotTop + axes.plotHeight.value + 34);
+  }
+  if (props.yAxisTitle) {
+    c.save();
+    c.translate(axes.plotLeft - 40, axes.plotTop + axes.plotHeight.value / 2);
+    c.rotate(-Math.PI / 2);
+    c.textAlign = "center";
+    c.fillText(props.yAxisTitle, 0, 0);
+    c.restore();
+  }
+  c.restore();
+  c.save();
+  c.beginPath();
+  c.rect(axes.plotLeft, axes.plotTop, axes.plotWidth.value, axes.plotHeight.value);
+  c.clip();
+  let seriesIdx = 0;
+  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 sizeRaw = Number(item[props.sizeField] ?? 1);
+      const r = 4 + sizeRaw / maxSize.value * 16;
+      const isHovered = items.value[hoveredIndex.value] === item;
+      const alpha = p;
+      c.save();
+      c.globalAlpha = alpha * (isHovered ? 1 : 0.75);
+      c.beginPath();
+      c.arc(x, y, isHovered ? r + 3 : r, 0, Math.PI * 2);
+      c.fillStyle = color;
+      c.fill();
+      c.strokeStyle = "#fff";
+      c.lineWidth = 1.5;
+      c.stroke();
+      c.restore();
+    });
+    seriesIdx++;
+  }
+  c.restore();
+  if (props.showLegend) {
+    drawLegend(c);
+  }
+};
+const drawLegend = (c) => {
+  c.save();
+  c.font = "11px system-ui, sans-serif";
+  c.textAlign = "left";
+  c.textBaseline = "middle";
+  let xOffset = axes.plotLeft;
+  const yPos = axes.plotTop + axes.plotHeight.value + 28;
+  let seriesIdx = 0;
+  for (const [key] of seriesMap.value) {
+    const color = props.colors[seriesIdx % props.colors.length];
+    c.fillStyle = color;
+    c.beginPath();
+    c.arc(xOffset + 5, yPos, 4, 0, Math.PI * 2);
+    c.fill();
+    c.fillStyle = "rgba(150,150,170,0.9)";
+    const label = key === "default" ? "Series" : key;
+    c.fillText(label, xOffset + 15, yPos);
+    const metrics = c.measureText(label);
+    xOffset += metrics.width + 35;
+    seriesIdx++;
+  }
+  c.restore();
+};
+watch([items, scale, panOffset, hoveredIndex, progress], draw, { deep: true });
+watch(items, () => {
+  if (props.animated) animate();
+}, { deep: true });
+watch(scale, (v) => emit("zoom-change", v));
+watch(panOffset, (v) => emit("pan-change", v), { deep: true });
+onMounted(async () => {
+  await nextTick();
+  if (containerRef.value && canvasRef.value) {
+    containerRef.value.style.position = "relative";
+    setupCanvas(canvasRef.value);
+    if (props.animated) animate();
+    else draw();
+  }
+});
+const onMouseMove = (e) => {
+  onViewportMouseMove(e);
+  if (isDragging.value) {
+    setHovered(-1);
+    hideTooltip();
+    return;
+  }
+  const rect = containerRef.value?.getBoundingClientRect();
+  if (!rect) return;
+  const mx = e.clientX - rect.left;
+  const my = e.clientY - rect.top;
+  const nearest = findNearestEuclidean(items.value, mx, my, axes, props.xField, props.yField, 20);
+  if (nearest) {
+    setHovered(nearest.index);
+    showTooltip(mx + 10, my - 10, `${nearest.item[props.xField]}: ${nearest.item[props.yField]}`, nearest.item, nearest.index);
+    emit("hover-point", nearest.item, nearest.index);
+  } else {
+    setHovered(-1);
+    hideTooltip();
+  }
+};
+const onMouseLeave = (e) => {
+  onViewportMouseLeave(e);
+  setHovered(-1);
+  hideTooltip();
+};
+defineExpose({
+  zoomIn: viewport.zoomIn,
+  zoomOut: viewport.zoomOut,
+  resetZoom: viewport.resetZoom,
+  exportPng: () => canvasRef.value && exportPng(canvasRef.value, "scatter-chart.png"),
+  exportSvg: () => svgRef.value && exportSvgFile(svgRef.value, "scatter-chart.svg")
+});
+</script>
+
+<style scoped>
+.k-chart-wrapper {
+  position: relative;
+  user-select: none;
+}
+.k-chart-wrapper .k-chart-controls {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 10;
+  display: flex;
+  gap: 4px;
+}
+.k-chart-wrapper .k-chart-btn {
+  display: none;
+}
+.k-chart-wrapper .k-chart-inner {
+  width: 100%;
+  height: 400px;
+  position: relative;
+}
+.k-chart-wrapper .k-chart-inner canvas, .k-chart-wrapper .k-chart-inner .k-chart-svg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+.k-chart-wrapper .k-chart-inner .k-chart-svg {
+  overflow: visible;
+}
+.k-chart-wrapper .k-chart-svg {
+  pointer-events: none;
+}
+.k-chart-wrapper .k-chart-svg .k-chart-hit-proxy {
+  pointer-events: all;
+  cursor: pointer;
+}
+.k-chart-wrapper .k-chart-tooltip {
+  position: absolute;
+  background: var(--bg-color-elevated, #1e1e2e);
+  color: var(--text-color-primary, #cdd6f4);
+  border: 1px solid var(--border-color-medium, #45475a);
+  border-radius: 8px;
+  padding: 6px 10px;
+  font-size: 12px;
+  pointer-events: none;
+  z-index: 20;
+  white-space: nowrap;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+</style>

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

@@ -0,0 +1,55 @@
+type __VLS_Props = {
+    dataProvider?: any;
+    xField?: string;
+    yField?: string;
+    seriesField?: string;
+    sizeField?: string;
+    labelField?: string;
+    animated?: boolean;
+    zoomable?: boolean;
+    maxZoom?: number;
+    colors?: string[];
+    backgroundColor?: string;
+    showLegend?: boolean;
+    xAxisTitle?: string;
+    yAxisTitle?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    zoomIn: () => void;
+    zoomOut: () => void;
+    resetZoom: () => void;
+    exportPng: () => void | null;
+    exportSvg: () => void | null;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "click-point": (item: any, index: number) => any;
+    "hover-point": (item: any, index: number) => any;
+    "zoom-change": (scale: number) => any;
+    "pan-change": (offset: {
+        x: number;
+        y: number;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onClick-point"?: ((item: any, index: number) => any) | undefined;
+    "onHover-point"?: ((item: any, index: number) => any) | undefined;
+    "onZoom-change"?: ((scale: number) => any) | undefined;
+    "onPan-change"?: ((offset: {
+        x: number;
+        y: number;
+    }) => any) | undefined;
+}>, {
+    xField: string;
+    yField: string;
+    seriesField: string;
+    animated: boolean;
+    zoomable: boolean;
+    maxZoom: number;
+    colors: string[];
+    backgroundColor: string;
+    showLegend: boolean;
+    xAxisTitle: string;
+    yAxisTitle: string;
+    labelField: string;
+    sizeField: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,9 @@
+import { type Ref } from 'vue';
+export interface IChartAnimationContext {
+    progress: Ref<number>;
+    animate: () => void;
+    stop: () => void;
+}
+export declare function useChartAnimation(duration?: number): IChartAnimationContext;
+/** Easing function: ease-out cubic */
+export declare function easeOut(t: number): number;

package/dist/runtime/composables/useChartAnimation.js

@@ -0,0 +1,32 @@
+import { ref } from "vue";
+export function useChartAnimation(duration = 600) {
+  const progress = ref(0);
+  let rafId = null;
+  let startTime = null;
+  const animate = () => {
+    stop();
+    progress.value = 0;
+    startTime = null;
+    const tick = (now) => {
+      if (startTime === null) startTime = now;
+      const elapsed = now - startTime;
+      progress.value = Math.min(elapsed / duration, 1);
+      if (progress.value < 1) {
+        rafId = requestAnimationFrame(tick);
+      } else {
+        rafId = null;
+      }
+    };
+    rafId = requestAnimationFrame(tick);
+  };
+  const stop = () => {
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId);
+      rafId = null;
+    }
+  };
+  return { progress, animate, stop };
+}
+export function easeOut(t) {
+  return 1 - Math.pow(1 - t, 3);
+}

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

@@ -0,0 +1,40 @@
+import { type Ref, type ComputedRef } from 'vue';
+export type TScaleMode = 'linear' | 'logarithmic' | 'time';
+export interface IChartAxesOptions {
+    items: Ref<any[]>;
+    xField: Ref<string>;
+    yField: Ref<string>;
+    width: Ref<number>;
+    height: Ref<number>;
+    scale: Ref<number>;
+    panOffset: Ref<{
+        x: number;
+        y: number;
+    }>;
+    padding?: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    scaleMode?: TScaleMode;
+}
+export interface IChartAxesContext {
+    xMin: ComputedRef<number>;
+    xMax: ComputedRef<number>;
+    yMin: ComputedRef<number>;
+    yMax: ComputedRef<number>;
+    plotLeft: number;
+    plotTop: number;
+    plotWidth: ComputedRef<number>;
+    plotHeight: ComputedRef<number>;
+    toX: (value: number) => number;
+    toY: (value: number) => number;
+    fromX: (px: number) => number;
+}
+/**
+ * Robustly parses a value into a number.
+ * Handles: numbers, numeric strings, and ISO date strings.
+ */
+export declare function parseValue(val: any): number;
+export declare function useChartAxes(opts: IChartAxesOptions): IChartAxesContext;

package/dist/runtime/composables/useChartAxes.js

@@ -0,0 +1,58 @@
+import { computed } from "vue";
+export function parseValue(val) {
+  if (val === null || val === void 0) return 0;
+  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;
+}
+export function useChartAxes(opts) {
+  const pad = opts.padding ?? { top: 20, right: 20, bottom: 40, left: 55 };
+  const plotLeft = pad.left;
+  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 rawXMin = computed(() => {
+    const vals = opts.items.value.map((r) => parseValue(r[opts.xField.value]));
+    return vals.length ? Math.min(...vals) : 0;
+  });
+  const rawXMax = computed(() => {
+    const vals = opts.items.value.map((r) => parseValue(r[opts.xField.value]));
+    return vals.length ? Math.max(...vals) : 1;
+  });
+  const yMin = computed(() => {
+    const vals = opts.items.value.map((r) => parseValue(r[opts.yField.value]));
+    return vals.length ? Math.min(...vals) : 0;
+  });
+  const yMax = computed(() => {
+    const vals = opts.items.value.map((r) => parseValue(r[opts.yField.value]));
+    return vals.length ? Math.max(...vals) : 1;
+  });
+  const xRange = computed(() => rawXMax.value - rawXMin.value);
+  const visibleXRange = computed(() => xRange.value / opts.scale.value);
+  const panOffsetDomain = computed(() => {
+    const pxRange = plotWidth.value;
+    if (pxRange === 0) return 0;
+    return opts.panOffset.value.x / pxRange * xRange.value;
+  });
+  const xMin = computed(() => rawXMin.value + panOffsetDomain.value);
+  const xMax = computed(() => xMin.value + visibleXRange.value);
+  const toX = (value) => {
+    const range = xMax.value - xMin.value;
+    if (range === 0) return plotLeft;
+    return plotLeft + (value - xMin.value) / range * plotWidth.value;
+  };
+  const toY = (value) => {
+    const range = yMax.value - yMin.value;
+    if (range === 0) return plotTop + plotHeight.value;
+    return plotTop + plotHeight.value - (value - yMin.value) / range * plotHeight.value;
+  };
+  const fromX = (px) => {
+    const range = xMax.value - xMin.value;
+    return xMin.value + (px - plotLeft) / plotWidth.value * range;
+  };
+  return { xMin, xMax, yMin, yMax, plotLeft, plotTop, plotWidth, plotHeight, toX, toY, fromX };
+}

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

@@ -0,0 +1,11 @@
+import { type Ref } from 'vue';
+export interface IChartCanvasContext {
+    canvas: Ref<HTMLCanvasElement | null>;
+    ctx: Ref<CanvasRenderingContext2D | null>;
+    width: Ref<number>;
+    height: Ref<number>;
+    dpr: Ref<number>;
+    clear: (color?: string) => void;
+    setupCanvas: (el: HTMLCanvasElement) => void;
+}
+export declare function useChartCanvas(): IChartCanvasContext;

package/dist/runtime/composables/useChartCanvas.js

@@ -0,0 +1,47 @@
+import { ref, onUnmounted } from "vue";
+export function useChartCanvas() {
+  const canvas = ref(null);
+  const ctx = ref(null);
+  const width = ref(0);
+  const height = ref(0);
+  const dpr = ref(window?.devicePixelRatio ?? 1);
+  let resizeObserver = null;
+  const applySize = (el, w, h) => {
+    const ratio = window.devicePixelRatio ?? 1;
+    dpr.value = ratio;
+    el.width = w * ratio;
+    el.height = h * ratio;
+    ctx.value?.scale(ratio, ratio);
+    width.value = w;
+    height.value = h;
+  };
+  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);
+        }
+      }
+    });
+    resizeObserver.observe(el);
+  };
+  const clear = (color) => {
+    if (ctx.value && canvas.value) {
+      ctx.value.clearRect(0, 0, width.value, height.value);
+      if (color && color !== "transparent") {
+        ctx.value.fillStyle = color;
+        ctx.value.fillRect(0, 0, width.value, height.value);
+      }
+    }
+  };
+  onUnmounted(() => {
+    resizeObserver?.disconnect();
+  });
+  return { canvas, ctx, width, height, dpr, clear, setupCanvas };
+}

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

@@ -0,0 +1,14 @@
+import { type Ref } from 'vue';
+export interface IChartDataContext<T = any> {
+    items: Ref<T[]>;
+    loading: Ref<boolean>;
+    error: Ref<string | null>;
+    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)
+ */
+export declare function useChartData<T = any>(providerOrData: Ref<any>): IChartDataContext<T>;

package/dist/runtime/composables/useChartData.js

@@ -0,0 +1,45 @@
+import { ref, watch, onMounted, isRef } from "vue";
+export function useChartData(providerOrData) {
+  const items = ref([]);
+  const loading = ref(false);
+  const error = ref(null);
+  const load = async () => {
+    const source = providerOrData.value;
+    if (!source) {
+      items.value = [];
+      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;
+      }
+    } catch (e) {
+      error.value = e?.message ?? "Failed to load chart data";
+    } 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 });
+  return { items, loading, error, reload };
+}

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

@@ -0,0 +1,5 @@
+export interface IChartExportContext {
+    exportPng: (canvas: HTMLCanvasElement, filename?: string) => void;
+    exportSvg: (svgEl: SVGSVGElement, filename?: string) => void;
+}
+export declare function useChartExport(): IChartExportContext;