@katlux/block-charts 0.1.1-alpha.95 → 0.1.1-alpha.96

package/dist/module.json

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

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

@@ -140,13 +140,14 @@ 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 cleaned = cleanNumber(firstVal, NaN);
+  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(firstVal);
-    if (!isNaN(parsed) && !/^\d+$/.test(firstVal.trim()) && /[-/T:]|[A-Za-z]/.test(firstVal)) return "datetime";
+    const parsed = Date.parse(sample);
+    if (!isNaN(parsed) && !/^\d+$/.test(sample.trim()) && /[-/T:]|[A-Za-z]/.test(sample)) return "datetime";
     return "category";
   }
   return "linear";

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

@@ -60,7 +60,7 @@ import { useChartData } from "../../composables/useChartData";
 import { useChartViewport } from "../../composables/useChartViewport";
 import { useChartAnimation, easeOut } from "../../composables/useChartAnimation";
 import { useChartExport } from "../../composables/useChartExport";
-import { cleanNumber, safeMax } from "../../composables/chartUtils";
+import { cleanNumber, safeMax, safeMin } from "../../composables/chartUtils";
 const clipId = useId();
 const props = defineProps({
   dataProvider: { type: null, required: false },
@@ -133,16 +133,38 @@ const plotWidth = computed(() => Math.max(0, width.value - PAD.left - PAD.right)
 const plotHeight = computed(() => Math.max(0, height.value - PAD.top - PAD.bottom));
 const categories = computed(() => [...new Set(items.value.map((r) => String(r[props.categoryField])))]);
 const groups = computed(() => [...new Set(items.value.map((r) => String(r[props.groupField] ?? "default")))]);
+const categoryMap = computed(() => {
+  const map = /* @__PURE__ */ new Map();
+  for (const item of items.value) {
+    const cat = String(item[props.categoryField]);
+    let list = map.get(cat);
+    if (!list) {
+      list = [];
+      map.set(cat, list);
+    }
+    list.push(item);
+  }
+  return map;
+});
 const minValue = computed(() => {
+  if (props.mode === "stacked") {
+    const negSums = categories.value.map((cat) => {
+      const catItems = categoryMap.value.get(cat) || [];
+      return catItems.reduce((acc, r) => acc + Math.min(0, cleanNumber(r[props.valueField])), 0);
+    });
+    const min2 = Math.min(0, safeMin(negSums, 0));
+    return isFinite(min2) ? min2 : 0;
+  }
   const vals = items.value.map((r) => cleanNumber(r[props.valueField]));
-  const min = Math.min(0, ...vals);
+  const min = Math.min(0, safeMin(vals, 0));
   return isFinite(min) ? min : 0;
 });
 const maxValue = computed(() => {
   if (props.mode === "stacked") {
-    const sums = categories.value.map(
-      (cat) => items.value.filter((r) => String(r[props.categoryField]) === cat).reduce((acc, r) => acc + Math.max(0, cleanNumber(r[props.valueField])), 0)
-    );
+    const sums = categories.value.map((cat) => {
+      const catItems = categoryMap.value.get(cat) || [];
+      return catItems.reduce((acc, r) => acc + Math.max(0, cleanNumber(r[props.valueField])), 0);
+    });
     return safeMax(sums, 10);
   }
   const vals = items.value.map((r) => cleanNumber(r[props.valueField]));
@@ -227,7 +249,7 @@ const draw = () => {
     c.rect(plotLeft, plotTop, plotWidth.value, plotHeight.value);
     c.clip();
     visibleCategories.value.forEach((cat, catIdx) => {
-      const catItems = items.value.filter((r) => String(r[props.categoryField]) === cat);
+      const catItems = categoryMap.value.get(cat) || [];
       const catY = plotTop + catIdx * catHeight;
       if (props.mode === "stacked") {
         let xOffsetPos = 0;
@@ -350,7 +372,7 @@ const draw = () => {
     c.rect(plotLeft, plotTop, plotWidth.value, plotHeight.value);
     c.clip();
     visibleCategories.value.forEach((cat, catIdx) => {
-      const catItems = items.value.filter((r) => String(r[props.categoryField]) === cat);
+      const catItems = categoryMap.value.get(cat) || [];
       const catX = plotLeft + catIdx * catWidth;
       if (props.mode === "stacked") {
         let yOffsetPos = 0;

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

@@ -105,9 +105,17 @@ const hoveredCell = computed(() => {
   if (hoveredIndex.value === -1) return null;
   return renderedCells.value[hoveredIndex.value];
 });
+const parseHexColor = (colorStr, fallback) => {
+  let hex = (colorStr || fallback).replace("#", "").trim();
+  if (hex.length === 3) {
+    hex = hex.split("").map((c) => c + c).join("");
+  }
+  const num = parseInt(hex.padEnd(6, "0").slice(0, 6), 16);
+  return isNaN(num) ? parseInt(fallback.replace("#", ""), 16) : num;
+};
 const lerp = (t) => {
-  const low = parseInt((props.colorLow || "#1e1e2e").replace("#", ""), 16);
-  const high = parseInt((props.colorHigh || "#6366f1").replace("#", ""), 16);
+  const low = parseHexColor(props.colorLow, "1e1e2e");
+  const high = parseHexColor(props.colorHigh, "6366f1");
   const lr = low >> 16 & 255;
   const lg = low >> 8 & 255;
   const lb = low & 255;

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

@@ -139,13 +139,14 @@ const {
 } = viewport;
 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 cleaned = cleanNumber(firstVal, NaN);
+  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(firstVal);
-    if (!isNaN(parsed) && !/^\d+$/.test(firstVal.trim()) && /[-/T:]|[A-Za-z]/.test(firstVal)) return "datetime";
+    const parsed = Date.parse(sample);
+    if (!isNaN(parsed) && !/^\d+$/.test(sample.trim()) && /[-/T:]|[A-Za-z]/.test(sample)) return "datetime";
     return "category";
   }
   return "linear";
@@ -387,7 +388,7 @@ const drawLine = (c, data, color, progress2) => {
   c.restore();
 };
 watch(progress, draw);
-watch([scale, panOffset, hoveredIndex, resizeTick, width, height], draw);
+watch([scale, panOffset, resizeTick, width, height], draw);
 watch(items, () => {
   if (props.animated) animate();
   else draw();

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

@@ -50,8 +50,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     showLegend: boolean;
     xAxisTitle: string;
     yAxisTitle: string;
-    sizeField: string;
     labelField: string;
+    sizeField: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -129,7 +129,8 @@ const xFieldRef = computed(() => props.xField);
 const yFieldRef = computed(() => props.yField);
 const xAxisType = computed(() => {
   if (!items.value.length) return "numeric";
-  const sample = items.value[0][props.xField];
+  const sample = items.value.find((r) => r?.[props.xField] !== void 0 && r?.[props.xField] !== null)?.[props.xField];
+  if (sample === void 0 || sample === null) return "numeric";
   if (typeof sample === "number") return "numeric";
   if (typeof sample === "string") {
     const cleaned = cleanNumber(sample, NaN);
@@ -181,11 +182,25 @@ const axes = useChartAxes({
 const maxSize = computed(() => safeMax(items.value.map((r) => cleanNumber(r[props.sizeField] ?? 1, 1)), 1));
 const seriesMap = computed(() => {
   const map = /* @__PURE__ */ new Map();
-  for (const item of items.value) {
+  const maxS = maxSize.value || 1;
+  items.value.forEach((item, idx) => {
     const key = String(item[props.seriesField] ?? "default");
-    if (!map.has(key)) map.set(key, []);
-    map.get(key).push(item);
-  }
+    let list = map.get(key);
+    if (!list) {
+      list = [];
+      map.set(key, list);
+    }
+    const sizeRaw = cleanNumber(item[props.sizeField] ?? 1, 1);
+    const r = 4 + sizeRaw / maxS * 16;
+    list.push({
+      item,
+      index: idx,
+      xVal: resolveX(item, idx),
+      yVal: parseValue(item[props.yField]),
+      sizeRaw,
+      r
+    });
+  });
   return map;
 });
 const hoveredPoint = computed(() => {
@@ -291,14 +306,13 @@ 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 [, points] of seriesMap.value) {
     const color = props.colors[seriesIdx % props.colors.length];
-    seriesItems.forEach((item, idx) => {
-      const x = axes.toX(resolveX(item, idx));
-      const y = axes.toY(parseValue(item[props.yField]));
-      const sizeRaw = cleanNumber(item[props.sizeField] ?? 1, 1);
-      const r = 4 + sizeRaw / (maxSize.value || 1) * 16;
-      const isHovered = items.value[hoveredIndex.value] === item;
+    points.forEach((pt) => {
+      const x = axes.toX(pt.xVal);
+      const y = axes.toY(pt.yVal);
+      const r = pt.r;
+      const isHovered = items.value[hoveredIndex.value] === pt.item;
       const alpha = p;
       c.save();
       c.globalAlpha = alpha * (isHovered ? 1 : 0.75);

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

@@ -50,8 +50,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     showLegend: boolean;
     xAxisTitle: string;
     yAxisTitle: string;
-    sizeField: string;
     labelField: string;
+    sizeField: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/composables/useChartAxes.js

@@ -69,6 +69,7 @@ export function useChartAxes(opts) {
     return plotTop + plotHeight.value - (value - yMin.value) / range * plotHeight.value;
   };
   const fromX = (px) => {
+    if (plotWidth.value <= 0) return xMin.value;
     const range = xMax.value - xMin.value;
     return xMin.value + (px - plotLeft) / plotWidth.value * range;
   };

package/dist/runtime/composables/useChartCanvas.js

@@ -26,6 +26,22 @@ export function useChartCanvas() {
       resizeTick.value++;
     }
   };
+  let dprMediaQuery = null;
+  const handleDprChange = () => {
+    if (canvas.value) {
+      const rect = canvas.value.getBoundingClientRect();
+      const w = rect.width || canvas.value.clientWidth || width.value;
+      const h = rect.height || canvas.value.clientHeight || height.value;
+      applySize(canvas.value, w, h);
+    }
+    updateDprWatcher();
+  };
+  const updateDprWatcher = () => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    dprMediaQuery?.removeEventListener?.("change", handleDprChange);
+    dprMediaQuery = window.matchMedia(`(resolution: ${window.devicePixelRatio ?? 1}dppx)`);
+    dprMediaQuery.addEventListener?.("change", handleDprChange);
+  };
   const setupCanvas = (el) => {
     canvas.value = el;
     ctx.value = el.getContext("2d");
@@ -33,6 +49,7 @@ export function useChartCanvas() {
     const initialW = rect.width || el.clientWidth || 400;
     const initialH = rect.height || el.clientHeight || 400;
     applySize(el, initialW, initialH);
+    updateDprWatcher();
     if (typeof ResizeObserver !== "undefined") {
       resizeObserver?.disconnect();
       resizeObserver = new ResizeObserver((entries) => {
@@ -57,6 +74,7 @@ export function useChartCanvas() {
   };
   onUnmounted(() => {
     resizeObserver?.disconnect();
+    dprMediaQuery?.removeEventListener?.("change", handleDprChange);
   });
   return { canvas, ctx, width, height, dpr, resizeTick, clear, setupCanvas };
 }

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

@@ -1,7 +1,7 @@
-import { type Ref } from 'vue';
+import { type Ref, type ShallowRef } from 'vue';
 import type { ADataProvider } from '@katlux/providers';
 export interface IChartDataContext<T = any> {
-    items: Ref<T[]>;
+    items: ShallowRef<T[]>;
     loading: Ref<boolean>;
     error: Ref<string | null>;
     reload: () => Promise<void>;

package/dist/runtime/composables/useChartData.js

@@ -1,4 +1,4 @@
-import { ref, watch, onMounted, onUnmounted, onScopeDispose, getCurrentScope, getCurrentInstance, isRef } from "vue";
+import { shallowRef, ref, watch, onMounted, onUnmounted, onScopeDispose, getCurrentScope, getCurrentInstance, isRef } from "vue";
 export function extractProviderItems(provider) {
   if (!provider) return [];
   const instance = isRef(provider) ? provider.value : provider;
@@ -6,6 +6,15 @@ export function extractProviderItems(provider) {
   const hasActiveFilter = Boolean(
     instance.filter && (typeof instance.filter === "object" && Object.keys(instance.filter).length > 0 || typeof instance.hasFilter === "boolean" && instance.hasFilter || typeof instance.hasFilter === "function" && instance.hasFilter())
   );
+  const rowMap = isRef(instance._rowMap) ? instance._rowMap.value : instance._rowMap;
+  if (Array.isArray(rowMap)) {
+    if (hasActiveFilter) {
+      return rowMap;
+    }
+    if (rowMap.length > 0) {
+      return rowMap;
+    }
+  }
   const filtered = isRef(instance.filteredData) ? instance.filteredData.value : instance.filteredData;
   if (Array.isArray(filtered)) {
     if (hasActiveFilter) {
@@ -33,7 +42,7 @@ export function extractProviderItems(provider) {
   return [];
 }
 export function useChartData(dataProvider) {
-  const items = ref([]);
+  const items = shallowRef([]);
   const loading = ref(false);
   const error = ref(null);
   const updateItems = () => {

package/dist/runtime/composables/useChartViewport.js

@@ -37,6 +37,7 @@ export function useChartViewport(options) {
     panOffset.value = { x: 0, y: 0 };
   };
   const zoomTo = (newScale, anchorX) => {
+    if (!isZoomable()) return;
     const prev = scale.value;
     const clamped = Math.min(Math.max(newScale, MIN_SCALE), maxZoom.value);
     if (anchorX !== void 0 && prev !== clamped) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@katlux/block-charts",
-	"version": "0.1.1-alpha.95",
+	"version": "0.1.1-alpha.96",
 	"description": "Pre-built charting block components for Katlux toolkit",
 	"author": "Katlux",
 	"license": "Apache-2.0",
@@ -23,8 +23,8 @@
 		"./components/*": "./dist/runtime/components/*"
 	},
 	"dependencies": {
-		"@katlux/providers": "^0.1.1-alpha.100",
-		"@katlux/toolkit": "^0.1.1-alpha.111",
+		"@katlux/providers": "^0.1.1-alpha.105",
+		"@katlux/toolkit": "^0.1.1-alpha.119",
 		"@nuxt/kit": "^3.12.0",
 		"pug": "^3.0.0",
 		"sass": "^1.80.0"