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

package/dist/module.json

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

package/dist/runtime/components/KHeatMap/KHeatMap.vue

@@ -65,7 +65,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);
@@ -137,6 +137,7 @@ const draw = () => {
   });
   if (props.showLegend) drawLegend(c);
 };
+watch([items, renderedCells, hoveredIndex, width, height, resizeTick], draw, { deep: true });
 const drawAxes = (c) => {
   c.save();
   c.fillStyle = "rgba(120,120,140,0.8)";
@@ -185,7 +186,16 @@ const drawLegend = (c) => {
   c.fillText(maxVal.value.toString(), x + gradW, y + gradH + 10);
   c.restore();
 };
-watch([renderedCells, hoveredIndex, width, height], draw);
+watch(isLoading, (val) => {
+  if (!val) {
+    nextTick(() => {
+      if (canvasRef.value) {
+        setupCanvas(canvasRef.value);
+        draw();
+      }
+    });
+  }
+});
 onMounted(async () => {
   await nextTick();
   if (containerRef.value && canvasRef.value) {

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

@@ -34,7 +34,7 @@ export interface IChartAxesContext {
 }
 /**
  * Robustly parses a value into a number.
- * Handles: numbers, numeric strings, and ISO date strings.
+ * Handles: numbers, numeric strings, ISO date strings, and falls back to array index for unparseable category strings.
  */
-export declare function parseValue(val: any): number;
+export declare function parseValue(val: any, fallbackIndex?: number): number;
 export declare function useChartAxes(opts: IChartAxesOptions): IChartAxesContext;

package/dist/runtime/composables/useChartAxes.js

@@ -1,13 +1,14 @@
 import { computed } from "vue";
-export function parseValue(val) {
-  if (val === null || val === void 0) return 0;
+export function parseValue(val, fallbackIndex) {
+  if (val === null || val === void 0) return fallbackIndex ?? 0;
+  if (typeof val === "number") return isNaN(val) ? fallbackIndex ?? 0 : val;
   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;
+  return fallbackIndex ?? 0;
 }
 export function useChartAxes(opts) {
   const pad = opts.padding ?? { top: 20, right: 20, bottom: 40, left: 55 };
@@ -16,19 +17,19 @@ export function useChartAxes(opts) {
   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]));
+    const vals = opts.items.value.map((r, i) => parseValue(r[opts.xField.value], i));
     return vals.length ? Math.min(...vals) : 0;
   });
   const rawXMax = computed(() => {
-    const vals = opts.items.value.map((r) => parseValue(r[opts.xField.value]));
+    const vals = opts.items.value.map((r, i) => parseValue(r[opts.xField.value], i));
     return vals.length ? Math.max(...vals) : 1;
   });
   const yMin = computed(() => {
-    const vals = opts.items.value.map((r) => parseValue(r[opts.yField.value]));
+    const vals = opts.items.value.map((r, i) => parseValue(r[opts.yField.value], i));
     return vals.length ? Math.min(...vals) : 0;
   });
   const yMax = computed(() => {
-    const vals = opts.items.value.map((r) => parseValue(r[opts.yField.value]));
+    const vals = opts.items.value.map((r, i) => parseValue(r[opts.yField.value], i));
     return vals.length ? Math.max(...vals) : 1;
   });
   const xRange = computed(() => rawXMax.value - rawXMin.value);

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

@@ -5,6 +5,7 @@ export interface IChartCanvasContext {
     width: Ref<number>;
     height: Ref<number>;
     dpr: Ref<number>;
+    resizeTick: Ref<number>;
     clear: (color?: string) => void;
     setupCanvas: (el: HTMLCanvasElement) => void;
 }

package/dist/runtime/composables/useChartCanvas.js

@@ -4,32 +4,47 @@ export function useChartCanvas() {
   const ctx = ref(null);
   const width = ref(0);
   const height = ref(0);
-  const dpr = ref(window?.devicePixelRatio ?? 1);
+  const dpr = ref(typeof window !== "undefined" ? window.devicePixelRatio ?? 1 : 1);
+  const resizeTick = ref(0);
   let resizeObserver = null;
   const applySize = (el, w, h) => {
-    const ratio = window.devicePixelRatio ?? 1;
+    const ratio = typeof window !== "undefined" ? window.devicePixelRatio ?? 1 : 1;
+    const newPixelW = Math.round(w * ratio);
+    const newPixelH = Math.round(h * ratio);
     dpr.value = ratio;
-    el.width = w * ratio;
-    el.height = h * ratio;
-    ctx.value?.scale(ratio, ratio);
-    width.value = w;
-    height.value = h;
+    let sizeChanged = false;
+    if (el.width !== newPixelW || el.height !== newPixelH) {
+      el.width = newPixelW;
+      el.height = newPixelH;
+      ctx.value = el.getContext("2d");
+      ctx.value?.scale(ratio, ratio);
+      sizeChanged = true;
+    }
+    if (width.value !== w || height.value !== h || sizeChanged) {
+      width.value = w;
+      height.value = h;
+      resizeTick.value++;
+    }
   };
   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);
+    const initialW = rect.width || el.clientWidth || 400;
+    const initialH = rect.height || el.clientHeight || 400;
+    applySize(el, initialW, initialH);
+    if (typeof ResizeObserver !== "undefined") {
+      resizeObserver?.disconnect();
+      resizeObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          const { width: w, height: h } = entry.contentRect;
+          if (canvas.value && w > 0 && h > 0) {
+            applySize(canvas.value, w, h);
+          }
         }
-      }
-    });
-    resizeObserver.observe(el);
+      });
+      resizeObserver.observe(el);
+    }
   };
   const clear = (color) => {
     if (ctx.value && canvas.value) {
@@ -43,5 +58,5 @@ export function useChartCanvas() {
   onUnmounted(() => {
     resizeObserver?.disconnect();
   });
-  return { canvas, ctx, width, height, dpr, clear, setupCanvas };
+  return { canvas, ctx, width, height, dpr, resizeTick, clear, setupCanvas };
 }

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

@@ -1,4 +1,5 @@
 import { type Ref } from 'vue';
+import type { ADataProvider } from '@katlux/providers';
 export interface IChartDataContext<T = any> {
     items: Ref<T[]>;
     loading: Ref<boolean>;
@@ -6,9 +7,12 @@ export interface IChartDataContext<T = any> {
     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)
+ * Extracts item rows strictly from a Katlux DataProvider instance's `pageData` property.
  */
-export declare function useChartData<T = any>(providerOrData: Ref<any>): IChartDataContext<T>;
+export declare function extractProviderItems<T = any>(provider?: ADataProvider | any): T[];
+/**
+ * Provider-agnostic data watcher for Katlux chart components.
+ * Consumes data exclusively through Katlux DataProvider instances (Server-side or Client-side),
+ * using strictly the `pageData` property.
+ */
+export declare function useChartData<T = any>(dataProvider: Ref<ADataProvider | null | undefined> | ADataProvider | null | undefined): IChartDataContext<T>;

package/dist/runtime/composables/useChartData.js

@@ -1,45 +1,73 @@
 import { ref, watch, onMounted, isRef } from "vue";
-export function useChartData(providerOrData) {
+export function extractProviderItems(provider) {
+  if (!provider) return [];
+  const instance = isRef(provider) ? provider.value : provider;
+  if (!instance) return [];
+  let raw = instance.pageData;
+  if (isRef(raw)) {
+    raw = raw.value;
+  }
+  if (!raw) return [];
+  if (Array.isArray(raw)) {
+    return raw;
+  }
+  if (Array.isArray(raw.rows)) {
+    return raw.rows;
+  }
+  return [];
+}
+export function useChartData(dataProvider) {
   const items = ref([]);
   const loading = ref(false);
   const error = ref(null);
-  const load = async () => {
-    const source = providerOrData.value;
-    if (!source) {
+  const ensureUnpaginated = (provider) => {
+    if (provider && provider.pageSize && isRef(provider.pageSize) && provider.pageSize.value !== -1) {
+      provider.pageSize.value = -1;
+    }
+  };
+  const updateItems = () => {
+    const provider = isRef(dataProvider) ? dataProvider.value : dataProvider;
+    if (provider) {
+      ensureUnpaginated(provider);
+      items.value = extractProviderItems(provider);
+    } else {
       items.value = [];
-      return;
     }
+  };
+  watch(
+    () => {
+      const provider = isRef(dataProvider) ? dataProvider.value : dataProvider;
+      if (!provider) return null;
+      const pd = isRef(provider.pageData) ? provider.pageData.value : provider.pageData;
+      return { provider, pd };
+    },
+    (newVal) => {
+      if (newVal?.provider) {
+        ensureUnpaginated(newVal.provider);
+      }
+      updateItems();
+    },
+    { immediate: true, deep: true }
+  );
+  const reload = async () => {
+    const provider = isRef(dataProvider) ? dataProvider.value : dataProvider;
+    if (!provider) 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;
+      ensureUnpaginated(provider);
+      if (provider.refresh) {
+        await provider.refresh();
+      } else if (provider.loadPageData) {
+        await provider.loadPageData();
       }
+      updateItems();
     } catch (e) {
-      error.value = e?.message ?? "Failed to load chart data";
+      error.value = e?.message ?? "Failed to reload chart provider";
     } 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 });
+  onMounted(updateItems);
   return { items, loading, error, reload };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@katlux/block-charts",
-	"version": "0.1.1-alpha.86",
+	"version": "0.1.1-alpha.87",
 	"description": "Pre-built charting block components for Katlux toolkit",
 	"author": "Katlux",
 	"license": "Apache-2.0",