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

package/dist/runtime/composables/useChartExport.js

@@ -0,0 +1,32 @@
+export function useChartExport() {
+  const download = (href, filename) => {
+    const a = document.createElement("a");
+    a.href = href;
+    a.download = filename;
+    a.style.display = "none";
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  };
+  const exportPng = (canvas, filename = "chart.png") => {
+    try {
+      const dataUrl = canvas.toDataURL("image/png");
+      download(dataUrl, filename);
+    } catch (e) {
+      console.error("[KChart] PNG export failed:", e);
+    }
+  };
+  const exportSvg = (svgEl, filename = "chart.svg") => {
+    try {
+      const serializer = new XMLSerializer();
+      const svgStr = serializer.serializeToString(svgEl);
+      const blob = new Blob([svgStr], { type: "image/svg+xml;charset=utf-8" });
+      const url = URL.createObjectURL(blob);
+      download(url, filename);
+      URL.revokeObjectURL(url);
+    } catch (e) {
+      console.error("[KChart] SVG export failed:", e);
+    }
+  };
+  return { exportPng, exportSvg };
+}

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

@@ -0,0 +1,11 @@
+import { type IChartAxesContext } from './useChartAxes.js';
+export declare function useChartHitTest(): {
+    findNearestX: (items: any[], mouseX: number, xField: string, axes: IChartAxesContext) => {
+        item: any;
+        index: number;
+    } | null;
+    findNearestEuclidean: (items: any[], mouseX: number, mouseY: number, axes: IChartAxesContext, xField: string, yField: string, threshold?: number) => {
+        item: any;
+        index: number;
+    } | null;
+};

package/dist/runtime/composables/useChartHitTest.js

@@ -0,0 +1,39 @@
+import { parseValue } from "./useChartAxes.js";
+export function useChartHitTest() {
+  const findNearestX = (items, mouseX, xField, axes) => {
+    if (!items.length) return null;
+    const dataX = axes.fromX(mouseX);
+    let nearestIdx = 0;
+    let minDiff = Math.abs(parseValue(items[0][xField]) - dataX);
+    for (let i = 1; i < items.length; i++) {
+      const val = parseValue(items[i][xField]);
+      const diff = Math.abs(val - dataX);
+      if (diff < minDiff) {
+        minDiff = diff;
+        nearestIdx = i;
+      }
+    }
+    return { item: items[nearestIdx], index: nearestIdx };
+  };
+  const findNearestEuclidean = (items, mouseX, mouseY, axes, xField, yField, threshold = 20) => {
+    if (!items.length) return null;
+    let nearestIdx = -1;
+    let minDistanceSq = threshold * threshold;
+    items.forEach((item, i) => {
+      const px = axes.toX(parseValue(item[xField]));
+      const py = axes.toY(parseValue(item[yField]));
+      const dx = mouseX - px;
+      const dy = mouseY - py;
+      const distSq = dx * dx + dy * dy;
+      if (distSq < minDistanceSq) {
+        minDistanceSq = distSq;
+        nearestIdx = i;
+      }
+    });
+    return nearestIdx !== -1 ? { item: items[nearestIdx], index: nearestIdx } : null;
+  };
+  return {
+    findNearestX,
+    findNearestEuclidean
+  };
+}

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

@@ -0,0 +1,17 @@
+import { type Ref } from 'vue';
+export interface ITooltipState {
+    visible: boolean;
+    x: number;
+    y: number;
+    content: string;
+    item: any;
+    index: number;
+}
+export interface IChartSvgContext {
+    hoveredIndex: Ref<number>;
+    tooltipState: Ref<ITooltipState>;
+    showTooltip: (x: number, y: number, content: string, item: any, index: number) => void;
+    hideTooltip: () => void;
+    setHovered: (index: number) => void;
+}
+export declare function useChartSvg(): IChartSvgContext;

package/dist/runtime/composables/useChartSvg.js

@@ -0,0 +1,22 @@
+import { ref } from "vue";
+export function useChartSvg() {
+  const hoveredIndex = ref(-1);
+  const tooltipState = ref({
+    visible: false,
+    x: 0,
+    y: 0,
+    content: "",
+    item: null,
+    index: -1
+  });
+  const showTooltip = (x, y, content, item, index) => {
+    tooltipState.value = { visible: true, x, y, content, item, index };
+  };
+  const hideTooltip = () => {
+    tooltipState.value.visible = false;
+  };
+  const setHovered = (index) => {
+    hoveredIndex.value = index;
+  };
+  return { hoveredIndex, tooltipState, showTooltip, hideTooltip, setHovered };
+}

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

@@ -0,0 +1,25 @@
+import { type Ref } from 'vue';
+export interface IViewportState {
+    scale: Ref<number>;
+    panOffset: Ref<{
+        x: number;
+        y: number;
+    }>;
+    isDragging: Ref<boolean>;
+    canPan: Ref<boolean>;
+}
+export interface IChartViewportContext extends IViewportState {
+    zoomIn: () => void;
+    zoomOut: () => void;
+    resetZoom: () => void;
+    onWheel: (e: WheelEvent) => void;
+    onMouseDown: (e: MouseEvent) => void;
+    onMouseMove: (e: MouseEvent) => void;
+    onMouseUp: (e: MouseEvent) => void;
+    onMouseLeave: (e: MouseEvent) => void;
+}
+export declare function useChartViewport(options: {
+    maxZoom?: Ref<number>;
+    plotWidth: Ref<number>;
+    plotLeft?: Ref<number>;
+}): IChartViewportContext;

package/dist/runtime/composables/useChartViewport.js

@@ -0,0 +1,92 @@
+import { ref } from "vue";
+const ZOOM_STEP = 0.25;
+const MIN_SCALE = 1;
+const PAN_CLAMP_THRESHOLD = 0.01;
+export function useChartViewport(options) {
+  const maxZoom = options.maxZoom ?? ref(10);
+  const scale = ref(1);
+  const panOffset = ref({ x: 0, y: 0 });
+  const isDragging = ref(false);
+  const canPan = ref(false);
+  let dragStart = { x: 0, y: 0 };
+  let panStart = { x: 0, y: 0 };
+  const clampPan = () => {
+    const maxPanX = plotWidth() * (1 - 1 / scale.value);
+    panOffset.value.x = Math.max(0, Math.min(panOffset.value.x, maxPanX));
+    panOffset.value.y = 0;
+  };
+  const plotWidth = () => options.plotWidth.value;
+  const updateCanPan = () => {
+    canPan.value = scale.value > MIN_SCALE + PAN_CLAMP_THRESHOLD;
+  };
+  const resetPan = () => {
+    panOffset.value = { x: 0, y: 0 };
+  };
+  const zoomTo = (newScale, anchorX) => {
+    const prev = scale.value;
+    const clamped = Math.min(Math.max(newScale, MIN_SCALE), maxZoom.value);
+    if (anchorX !== void 0 && prev !== clamped) {
+      panOffset.value.x += anchorX * (1 / prev - 1 / clamped);
+    }
+    scale.value = clamped;
+    if (scale.value <= MIN_SCALE) resetPan();
+    else clampPan();
+    updateCanPan();
+  };
+  const zoomIn = () => zoomTo(scale.value + ZOOM_STEP);
+  const zoomOut = () => zoomTo(scale.value - ZOOM_STEP);
+  const resetZoom = () => {
+    scale.value = MIN_SCALE;
+    resetPan();
+    updateCanPan();
+  };
+  const onWheel = (e) => {
+    if (e.ctrlKey) {
+      e.preventDefault();
+      const rect = e.currentTarget.getBoundingClientRect();
+      const plotLeft = options.plotLeft?.value ?? 0;
+      const anchorX = e.clientX - rect.left - plotLeft;
+      const delta = e.deltaY < 0 ? ZOOM_STEP : -ZOOM_STEP;
+      zoomTo(scale.value + delta, anchorX);
+    } else if (e.shiftKey) {
+      e.preventDefault();
+      if (!canPan.value) return;
+      const delta = e.deltaX !== 0 ? e.deltaX : e.deltaY;
+      const dx = delta / scale.value;
+      panOffset.value.x += dx;
+      clampPan();
+    }
+  };
+  const onMouseDown = (e) => {
+    if (e.button !== 0 || !canPan.value) return;
+    isDragging.value = true;
+    dragStart = { x: e.clientX, y: e.clientY };
+    panStart = { x: panOffset.value.x, y: panOffset.value.y };
+  };
+  const onMouseMove = (e) => {
+    if (!isDragging.value || !canPan.value) return;
+    const dx = -(e.clientX - dragStart.x) / scale.value;
+    panOffset.value.x = panStart.x + dx;
+    clampPan();
+  };
+  const onMouseUp = (_e) => {
+    isDragging.value = false;
+  };
+  const onMouseLeave = (_e) => {
+    isDragging.value = false;
+  };
+  return {
+    scale,
+    panOffset,
+    isDragging,
+    canPan,
+    zoomIn,
+    zoomOut,
+    resetZoom,
+    onWheel,
+    onMouseDown,
+    onMouseMove,
+    onMouseUp,
+    onMouseLeave
+  };
+}

package/dist/types.d.mts

@@ -0,0 +1,3 @@
+export { default } from './module.mjs'
+
+export { type ModuleOptions } from './module.mjs'

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@katlux/block-charts",
-	"version": "0.1.0-beta.0",
+	"version": "0.1.0-beta.2",
 	"description": "Pre-built charting block components for Katlux toolkit",
 	"author": "Katlux",
 	"license": "MIT",
@@ -10,7 +10,8 @@
 	"main": "./dist/module.mjs",
 	"scripts": {
 		"build": "nuxt-module-build build",
-		"dev": "nuxt-module-build build --stub"
+		"dev": "nuxt-module-build build --stub",
+		"prepublishOnly": "npm run build"
 	},
 	"exports": {
 		".": {
@@ -27,5 +28,8 @@
 		"@nuxt/kit": "^3.20.1",
 		"pug": "^3.0.0",
 		"sass": "^1.80.0"
-	}
+	},
+	"files": [
+		"dist"
+	]
 }

package/build.config.ts

@@ -1,4 +0,0 @@
-export default {
-	failOnWarn: false,
-	externals: ['#app', '@katlux/toolkit', '@katlux/providers']
-}

package/src/module.ts

@@ -1,25 +0,0 @@
-import { defineNuxtModule, createResolver, addComponentsDir } from '@nuxt/kit'
-
-export interface ModuleOptions { }
-
-export default defineNuxtModule<ModuleOptions>({
-	meta: {
-		name: '@katlux/block-charts',
-		configKey: 'katluxCharts',
-		compatibility: {
-			nuxt: '^3.0.0'
-		}
-	},
-	defaults: {},
-	async setup(options, nuxt) {
-		const resolver = createResolver(import.meta.url)
-
-		// Add components directory
-		addComponentsDir({
-			path: resolver.resolve('./runtime/components'),
-			pathPrefix: false,
-			prefix: '',
-			global: true
-		})
-	}
-})