origam 2.3.0 → 2.5.0

package/dist/src/composables/Chart/chart-gauge.composable.d.ts

@@ -0,0 +1,21 @@
+import { type ComputedRef } from 'vue';
+import type { IChartGaugeGeometry, IUseChartGaugeOptions } from '../../interfaces';
+/**
+ * Solid-gauge geometry engine. Given a `value` clamped between
+ * `min` and `max`, produces:
+ *
+ * - `trackPath` — the empty arc behind the indicator (full sweep).
+ * - `valuePath` — the filled arc from `min` to `value` (partial sweep).
+ * - `valueAngle` — the radian angle of the indicator end (for the
+ *   needle / handle if needed later).
+ * - `centerX` / `centerY` — pivot point used by the value label.
+ * - `outerRadius` / `innerRadius` — sized from the available plot
+ *   box minus the gauge thickness.
+ *
+ * The composable is intentionally framework-agnostic in spirit:
+ * inputs are thunks so `<OrigamChartGauge>` can drive it from
+ * props OR a Pinia store without re-instantiating.
+ */
+export declare const useChartGauge: (options: IUseChartGaugeOptions) => {
+    geometry: ComputedRef<IChartGaugeGeometry>;
+};

package/dist/src/composables/Chart/chart-gauge.composable.js

@@ -0,0 +1,47 @@
+import {
+  computed
+} from "vue";
+import { arcPath } from "../../utils/Chart/path.util.js";
+const DEFAULT_START_ANGLE = -Math.PI * 3 / 4;
+const DEFAULT_END_ANGLE = Math.PI * 3 / 4;
+const DEFAULT_THICKNESS = 18;
+export const useChartGauge = (options) => {
+  const geometry = computed(() => {
+    const width = options.width();
+    const height = options.height();
+    const padding = options.padding();
+    const min = options.min();
+    const max = options.max();
+    const value = options.value();
+    const thickness = options.thickness?.() ?? DEFAULT_THICKNESS;
+    const startAngle = options.startAngle?.() ?? DEFAULT_START_ANGLE;
+    const endAngle = options.endAngle?.() ?? DEFAULT_END_ANGLE;
+    const cx = (padding.left + width - padding.right) / 2;
+    const cy = (padding.top + height - padding.bottom) / 2;
+    const availableW = width - padding.left - padding.right;
+    const availableH = height - padding.top - padding.bottom;
+    const outerR = Math.max(thickness, Math.min(availableW, availableH) / 2 - 4);
+    const innerR = Math.max(0, outerR - thickness);
+    const span = Math.max(1e-9, max - min);
+    const clamped = Math.max(min, Math.min(max, value));
+    const ratio = (clamped - min) / span;
+    const sweep = endAngle - startAngle;
+    const valueAngle = startAngle + ratio * sweep;
+    const trackD = arcPath(cx, cy, outerR, innerR, startAngle, endAngle);
+    const valueD = ratio > 1e-6 ? arcPath(cx, cy, outerR, innerR, startAngle, valueAngle) : "";
+    return {
+      trackPath: trackD,
+      valuePath: valueD,
+      valueAngle,
+      startAngle,
+      endAngle,
+      outerRadius: outerR,
+      innerRadius: innerR,
+      centerX: cx,
+      centerY: cy,
+      ratio,
+      clampedValue: clamped
+    };
+  });
+  return { geometry };
+};

package/dist/src/composables/Chart/chart-zoom.composable.cjs

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartZoom = useChartZoom;
+var _vue = require("vue");
+const MIN_VISIBLE_CATEGORIES = 2;
+const WHEEL_ZOOM_STEP = 0.15;
+function useChartZoom(options) {
+  const zoomStart = (0, _vue.ref)(0);
+  const zoomEnd = (0, _vue.ref)(Infinity);
+  const isDragging = (0, _vue.ref)(false);
+  const dragStartPx = (0, _vue.ref)(null);
+  const dragEndPx = (0, _vue.ref)(null);
+  const isZoomed = (0, _vue.computed)(() => {
+    const len = options.dataLength();
+    return zoomStart.value > 0 || zoomEnd.value < len - 1 && Number.isFinite(zoomEnd.value);
+  });
+  const effectiveEnd = (0, _vue.computed)(() => {
+    const len = options.dataLength();
+    return Number.isFinite(zoomEnd.value) ? Math.min(zoomEnd.value, len - 1) : Math.max(0, len - 1);
+  });
+  const applyZoom = (start, end) => {
+    const len = options.dataLength();
+    if (len <= 0) return;
+    const maxIdx = len - 1;
+    let s = Math.max(0, Math.min(start, maxIdx));
+    let e = Math.max(0, Math.min(end, maxIdx));
+    if (s > e) [s, e] = [e, s];
+    if (e - s < MIN_VISIBLE_CATEGORIES - 1) {
+      e = Math.min(maxIdx, s + MIN_VISIBLE_CATEGORIES - 1);
+    }
+    zoomStart.value = Math.round(s);
+    zoomEnd.value = Math.round(e);
+  };
+  const zoomTo = (start, end) => {
+    applyZoom(start, end);
+  };
+  const zoomReset = () => {
+    zoomStart.value = 0;
+    zoomEnd.value = Infinity;
+  };
+  const zoomBy = (deltaFraction, anchorFraction) => {
+    const len = options.dataLength();
+    if (len <= 0) return;
+    const cur = effectiveEnd.value;
+    const visibleRange = cur - zoomStart.value;
+    if (visibleRange < MIN_VISIBLE_CATEGORIES - 1 && deltaFraction > 0) return;
+    const delta = visibleRange * deltaFraction;
+    const anchor = zoomStart.value + visibleRange * Math.max(0, Math.min(1, anchorFraction));
+    const newStart = anchor - (anchor - zoomStart.value) * (1 - deltaFraction);
+    const newEnd = anchor + (cur - anchor) * (1 - deltaFraction);
+    applyZoom(newStart, newEnd);
+  };
+  const panBy = deltaCategories => {
+    const len = options.dataLength();
+    if (len <= 0) return;
+    const cur = effectiveEnd.value;
+    const windowSize = cur - zoomStart.value;
+    const newStart = Math.max(0, Math.min(len - 1 - windowSize, zoomStart.value + deltaCategories));
+    applyZoom(newStart, newStart + windowSize);
+  };
+  const pxToCategoryIndex = (svgX, plotX0, plotX1) => {
+    const len = options.dataLength();
+    if (len <= 1) return 0;
+    const ratio = Math.max(0, Math.min(1, (svgX - plotX0) / Math.max(1, plotX1 - plotX0)));
+    const cur = effectiveEnd.value;
+    return zoomStart.value + ratio * (cur - zoomStart.value);
+  };
+  const categoryIndexToPx = (categoryIndex, plotX0, plotX1) => {
+    const cur = effectiveEnd.value;
+    const windowSize = Math.max(1, cur - zoomStart.value);
+    const ratio = (categoryIndex - zoomStart.value) / windowSize;
+    return plotX0 + ratio * (plotX1 - plotX0);
+  };
+  return {
+    zoomStart,
+    zoomEnd: effectiveEnd,
+    zoomEndRaw: zoomEnd,
+    isDragging,
+    dragStartPx,
+    dragEndPx,
+    isZoomed,
+    zoomTo,
+    zoomReset,
+    zoomBy,
+    panBy,
+    pxToCategoryIndex,
+    categoryIndexToPx,
+    WHEEL_ZOOM_STEP
+  };
+}

package/dist/src/composables/Chart/chart-zoom.composable.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Manages interactive zoom / pan state for `<OrigamChartCartesian>`.
+ *
+ * The zoom window is expressed as a closed `[zoomStart, zoomEnd]`
+ * range of **category indices** (integers). The engine clips the
+ * category array and re-computes the X scale against the visible
+ * subset before handing off to the path generator.
+ *
+ * Invariants maintained by every mutating method:
+ *   - `0 ≤ zoomStart < zoomEnd ≤ dataLength - 1`
+ *   - `zoomEnd - zoomStart ≥ MIN_VISIBLE_CATEGORIES - 1`
+ *
+ * @param options.dataLength  Reactive getter returning the total
+ *   number of categories (or data points when no categories array
+ *   is provided). Must always be ≥ 1.
+ */
+export declare function useChartZoom(options: {
+    dataLength: () => number;
+}): {
+    zoomStart: import("vue").Ref<number, number>;
+    zoomEnd: import("vue").ComputedRef<number>;
+    zoomEndRaw: import("vue").Ref<number, number>;
+    isDragging: import("vue").Ref<boolean, boolean>;
+    dragStartPx: import("vue").Ref<number | null, number | null>;
+    dragEndPx: import("vue").Ref<number | null, number | null>;
+    isZoomed: import("vue").ComputedRef<boolean>;
+    zoomTo: (start: number, end: number) => void;
+    zoomReset: () => void;
+    zoomBy: (deltaFraction: number, anchorFraction: number) => void;
+    panBy: (deltaCategories: number) => void;
+    pxToCategoryIndex: (svgX: number, plotX0: number, plotX1: number) => number;
+    categoryIndexToPx: (categoryIndex: number, plotX0: number, plotX1: number) => number;
+    WHEEL_ZOOM_STEP: number;
+};

package/dist/src/composables/Chart/chart-zoom.composable.js

@@ -0,0 +1,87 @@
+import { computed, ref } from "vue";
+const MIN_VISIBLE_CATEGORIES = 2;
+const WHEEL_ZOOM_STEP = 0.15;
+export function useChartZoom(options) {
+  const zoomStart = ref(0);
+  const zoomEnd = ref(Infinity);
+  const isDragging = ref(false);
+  const dragStartPx = ref(null);
+  const dragEndPx = ref(null);
+  const isZoomed = computed(() => {
+    const len = options.dataLength();
+    return zoomStart.value > 0 || zoomEnd.value < len - 1 && Number.isFinite(zoomEnd.value);
+  });
+  const effectiveEnd = computed(() => {
+    const len = options.dataLength();
+    return Number.isFinite(zoomEnd.value) ? Math.min(zoomEnd.value, len - 1) : Math.max(0, len - 1);
+  });
+  const applyZoom = (start, end) => {
+    const len = options.dataLength();
+    if (len <= 0) return;
+    const maxIdx = len - 1;
+    let s = Math.max(0, Math.min(start, maxIdx));
+    let e = Math.max(0, Math.min(end, maxIdx));
+    if (s > e) [s, e] = [e, s];
+    if (e - s < MIN_VISIBLE_CATEGORIES - 1) {
+      e = Math.min(maxIdx, s + MIN_VISIBLE_CATEGORIES - 1);
+    }
+    zoomStart.value = Math.round(s);
+    zoomEnd.value = Math.round(e);
+  };
+  const zoomTo = (start, end) => {
+    applyZoom(start, end);
+  };
+  const zoomReset = () => {
+    zoomStart.value = 0;
+    zoomEnd.value = Infinity;
+  };
+  const zoomBy = (deltaFraction, anchorFraction) => {
+    const len = options.dataLength();
+    if (len <= 0) return;
+    const cur = effectiveEnd.value;
+    const visibleRange = cur - zoomStart.value;
+    if (visibleRange < MIN_VISIBLE_CATEGORIES - 1 && deltaFraction > 0) return;
+    const delta = visibleRange * deltaFraction;
+    const anchor = zoomStart.value + visibleRange * Math.max(0, Math.min(1, anchorFraction));
+    const newStart = anchor - (anchor - zoomStart.value) * (1 - deltaFraction);
+    const newEnd = anchor + (cur - anchor) * (1 - deltaFraction);
+    applyZoom(newStart, newEnd);
+  };
+  const panBy = (deltaCategories) => {
+    const len = options.dataLength();
+    if (len <= 0) return;
+    const cur = effectiveEnd.value;
+    const windowSize = cur - zoomStart.value;
+    const newStart = Math.max(0, Math.min(len - 1 - windowSize, zoomStart.value + deltaCategories));
+    applyZoom(newStart, newStart + windowSize);
+  };
+  const pxToCategoryIndex = (svgX, plotX0, plotX1) => {
+    const len = options.dataLength();
+    if (len <= 1) return 0;
+    const ratio = Math.max(0, Math.min(1, (svgX - plotX0) / Math.max(1, plotX1 - plotX0)));
+    const cur = effectiveEnd.value;
+    return zoomStart.value + ratio * (cur - zoomStart.value);
+  };
+  const categoryIndexToPx = (categoryIndex, plotX0, plotX1) => {
+    const cur = effectiveEnd.value;
+    const windowSize = Math.max(1, cur - zoomStart.value);
+    const ratio = (categoryIndex - zoomStart.value) / windowSize;
+    return plotX0 + ratio * (plotX1 - plotX0);
+  };
+  return {
+    zoomStart,
+    zoomEnd: effectiveEnd,
+    zoomEndRaw: zoomEnd,
+    isDragging,
+    dragStartPx,
+    dragEndPx,
+    isZoomed,
+    zoomTo,
+    zoomReset,
+    zoomBy,
+    panBy,
+    pxToCategoryIndex,
+    categoryIndexToPx,
+    WHEEL_ZOOM_STEP
+  };
+}