@data-vision/interactive-chart 0.0.8

package/build/otdr.js

@@ -0,0 +1,417 @@
+import { C as A, d as C, m as S, g as U, c as B } from "./chart-Cj4Fiwnb.js";
+import { a as G } from "./chart-Cj4Fiwnb.js";
+import { f as R } from "./dataset-Bv37sY1L.js";
+var p;
+(function(u) {
+  u[u.solid = 0] = "solid", u[u.dashed = 1] = "dashed";
+})(p || (p = {}));
+var c;
+(function(u) {
+  u[u.two_points = 0] = "two_points", u[u.four_points = 1] = "four_points", u[u.none = 2] = "none";
+})(c || (c = {}));
+var f;
+(function(u) {
+  u.line_A = "A", u.line_B = "B", u.line_a = "a", u.line_b = "b";
+})(f || (f = {}));
+class M {
+  constructor(e, t, i) {
+    Object.defineProperty(this, "name", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "color", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "style", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: p.solid
+    }), Object.defineProperty(this, "location", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "order", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), this.name = e, this.color = t, i && (this.style = i), this.location = 0, this.order = M.orderMap.get(e) ?? 0;
+  }
+  copy() {
+    return new M(this.name, this.color).copyWith({
+      location: this.location,
+      style: this.style
+    });
+  }
+  copyWith({ name: e, color: t, style: i, location: s, order: a }) {
+    return this.name = e ?? this.name, this.color = t ?? this.color, this.style = i ?? this.style, this.location = s ?? this.location, this.order = a ?? this.order, this;
+  }
+}
+Object.defineProperty(M, "orderMap", {
+  enumerable: !0,
+  configurable: !0,
+  writable: !0,
+  value: /* @__PURE__ */ new Map()
+});
+class L extends A {
+  static initConfig() {
+    const e = A.config;
+    e.measureLine = {
+      a: {
+        location: "10%",
+        order: 0,
+        color: "#f00",
+        style: p.dashed
+      },
+      A: {
+        location: "25%",
+        order: 1,
+        color: "#f00",
+        style: p.solid
+      },
+      B: {
+        location: "75%",
+        order: 2,
+        color: "cyan",
+        style: p.solid
+      },
+      b: {
+        location: "90%",
+        order: 3,
+        color: "cyan",
+        style: p.dashed
+      }
+    }, e.grid.top = 15, L.config = e;
+  }
+  // @override
+  constructor(e) {
+    super(e), Object.defineProperty(this, "activeEvent", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: null
+    }), Object.defineProperty(this, "measureMode", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: c.none
+    }), Object.defineProperty(this, "measureLine_a", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "measureLine_A", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "measureLine_B", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "measureLine_b", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "activeMeasureLine", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: null
+    }), Object.defineProperty(this, "draggedMeasureLine", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: null
+    }), Object.defineProperty(this, "onMeasureChange", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: null
+    }), this.measureLine_a = this.createMeasureLine(f.line_a), this.measureLine_A = this.createMeasureLine(f.line_A), this.measureLine_B = this.createMeasureLine(f.line_B), this.measureLine_b = this.createMeasureLine(f.line_b);
+  }
+  createMeasureLine(e) {
+    const { color: t, style: i, order: s } = L.config.measureLine[e];
+    return M.orderMap.set(e, s), new M(e, t, i);
+  }
+  mergeDataset(e) {
+    const { lineWidth: t = 1, precision: i = 1, events: s = [], ...a } = e;
+    return {
+      lineWidth: t,
+      precision: i,
+      events: s,
+      ...a
+    };
+  }
+  loopDatasets(e, t) {
+    if (e)
+      for (const i of e) {
+        const s = this.mergeDataset(i);
+        t(s);
+      }
+  }
+  // @override
+  draw(e) {
+    const { width: t, height: i, data: s, scale: a, sample: r } = this;
+    this.loopDatasets(s, ({ color: o, data: n, lineWidth: d, precision: m }) => {
+      e.lineWidth = d, e.strokeStyle = o, e.beginPath();
+      const { start: h, end: v, loop: b } = R(n, m, this.xRange);
+      b(a.x, (l, y) => {
+        const _ = n.slice(l, Math.min(l + y, v + 1)), w = r(_, L.config.dataSampleMethod), { x, y: g } = this.getDataOffset({
+          x: l,
+          y: w
+        }, m);
+        l === h ? e.moveTo(x, g) : e.lineTo(x, g);
+      }), e.stroke(), this.snapshot = e.getImageData(0, 0, t, i);
+    });
+  }
+  get measureEnabled() {
+    return this.measureMode !== c.none;
+  }
+  // @override
+  drawAnnotations(e) {
+    this.measureEnabled && this.drawMeasureLines();
+  }
+  getDataOffset({ x: e, y: t }, i = 1) {
+    const { scaleGrid: s, rect: a, xMin: r, yMin: o, scale: n } = this;
+    return {
+      x: s.left + (i * e - r) / n.x,
+      y: a.y - (t - o) / n.y
+    };
+  }
+  getEventOffset({ offset: e, size: t }) {
+    const { x: i, y: s } = this.getDataOffset(e), { width: a, height: r } = t;
+    return {
+      x: i - a / 2,
+      y: s - r * 2
+    };
+  }
+  // @override
+  drawSnapshot(e) {
+    this.loopDatasets(this.data, (t) => {
+      this.drawEvents(t);
+    });
+  }
+  drawEvents(e) {
+    const { context: t, activeEvent: i, dpr: s, xMin: a, xMax: r, yMin: o, yMax: n, xUnit: d, yUnit: m } = this, { events: h, color: v } = e;
+    for (const b of h) {
+      const { x: l, y } = this.getEventOffset(b), { key: _, value: w, offset: x, size: g, image: T, renderLabel: O, renderValue: P } = b;
+      if (t.drawImage(T, l, y, g.width, g.height), i?.key === _) {
+        t.strokeStyle = v, t.lineWidth = 1, t.strokeRect(l, y, g.width, g.height);
+        const [D, E] = [l + g.width / 2, y + g.height];
+        t.beginPath(), t.moveTo(D, E), t.lineTo(D, E + 32), t.stroke();
+        const j = 16 * s.value;
+        t.save(), t.fillStyle = v;
+        const k = {
+          xMin: a,
+          xMax: r,
+          yMin: o,
+          yMax: n,
+          xUnit: d,
+          yUnit: m,
+          event: b,
+          dataset: e
+        };
+        t.fillText(`${P ? P(w, k) : w}`, l, y - j * 2), t.fillText(`${O ? O(x.x, k) : x.x}`, l, y - j), t.restore();
+      }
+    }
+  }
+  setActiveEvent(e) {
+    if (this.data) {
+      let t = null;
+      if (e !== null)
+        for (const i of this.data) {
+          let s = !1;
+          const { events: a } = this.mergeDataset(i);
+          for (const r of a)
+            if (r.key === e) {
+              t = r, s = !0;
+              break;
+            }
+          if (s)
+            break;
+        }
+      if (t?.key !== this.activeEvent?.key) {
+        if (t) {
+          const { x: i, y: s } = t.offset;
+          this.setCenter(i, s);
+        }
+        return this.activeEvent = t, this.shouldUpdate = !0, !0;
+      }
+    }
+    return !1;
+  }
+  get measureLines() {
+    const { measureMode: e, measureLine_A: t, measureLine_B: i, measureLine_a: s, measureLine_b: a } = this;
+    let r = [];
+    return e === c.two_points ? r = [
+      t,
+      i
+    ] : e === c.four_points && (r = [
+      t,
+      s,
+      a,
+      i
+    ]), r;
+  }
+  // @override
+  onMouseMove(e) {
+    super.onMouseMove(e);
+    const { data: t, context: i, dpr: s, dragging: a } = this, r = this.getOffset(e).multiply(s.value);
+    let o = null;
+    if (this.loopDatasets(t, ({ events: n }) => {
+      for (const d of n) {
+        const { x: m, y: h } = this.getEventOffset(d), { width: v, height: b } = d.size, l = new Path2D();
+        l.moveTo(m - v / 2, h - b / 2), l.rect(m, h, v, b), i.isPointInPath(l, r.x, r.y) && (o = d);
+      }
+    }), this.activeEvent !== o && (this.activeEvent = o, this.useSnapshot = this.shouldUpdate = !0), !a) {
+      const n = this.findNearMeasureLine(r);
+      n !== this.activeMeasureLine && (this.setCursor(n ? "ew-resize" : void 0), this.activeMeasureLine = n, this.useSnapshot = this.shouldUpdate = !0);
+    }
+  }
+  /// 按实际绘制顺序排列
+  get $measureLines() {
+    const { measureLines: e, draggedMeasureLine: t } = this;
+    return t !== null ? [
+      ...e.filter(({ name: i }) => i !== t.name),
+      t
+    ] : e;
+  }
+  drawMeasureLines() {
+    for (const e of this.$measureLines)
+      this.drawMeasureLine(e);
+  }
+  getLineOffset(e) {
+    const { x: t } = this.getDataOffset({
+      x: e.location,
+      y: 0
+    });
+    return t;
+  }
+  get xRange() {
+    return this.bounds.x;
+  }
+  drawMeasureLine(e) {
+    const { context: t, rect: i, scaleGrid: s, activeMeasureLine: a } = this, r = C(e.location, this.xRange);
+    r !== e.location && (e.location = r, this.emitMeasureChangeEvent(a));
+    const { name: o, color: n, style: d } = e, { width: m } = S(t, o), h = this.getLineOffset(e);
+    t.save(), t.fillStyle = n, t.fillText(o, h - m / 2, 7), t.beginPath(), t.moveTo(h, s.top), t.lineTo(h, i.y), t.strokeStyle = n, d === p.dashed && t.setLineDash([2, 2]), t.lineWidth = a?.name === o ? 2 : 1, t.stroke(), t.restore();
+  }
+  getMeasureLineDefaultAttrs(e) {
+    const { location: t, ...i } = L.config.measureLine[e];
+    let s = 0;
+    return typeof t == "number" ? s = t : s = this.getRatioOffset(+t.replace(/%$/, "") / 100).x, {
+      name: e,
+      location: s,
+      ...i
+    };
+  }
+  get measureLinesMoved() {
+    return this.measureLines.some((e) => {
+      const { location: t } = this.getMeasureLineDefaultAttrs(e.name);
+      return e.location !== t;
+    });
+  }
+  initMeasureLine(e, t) {
+    const i = this.getMeasureLineDefaultAttrs(t);
+    e.copyWith(i);
+  }
+  initMeasureLines(e) {
+    const t = e ?? this.measureMode;
+    switch (t) {
+      case c.two_points:
+      case c.four_points:
+        this.initMeasureLine(this.measureLine_A, f.line_A), this.initMeasureLine(this.measureLine_B, f.line_B), t === c.four_points && (this.initMeasureLine(this.measureLine_a, f.line_a), this.initMeasureLine(this.measureLine_b, f.line_b));
+        break;
+      case c.none:
+    }
+  }
+  get measureValue() {
+    return this.measureLines.map(({ name: e, location: t }) => ({
+      name: e,
+      location: t
+    }));
+  }
+  setMeasureMode(e) {
+    this.measureMode !== e && (this.initMeasureLines(e), this.measureMode = e, this.shouldUpdate = !0);
+  }
+  fitDatasets(e = !0) {
+    if (this.data) {
+      let t = 0, i = 0, s = 0;
+      for (const a of this.data) {
+        const { data: r, precision: o } = this.mergeDataset(a);
+        t = Math.max(t, r.length * o), s = U([s, ...r]), i = B([i, ...r]);
+      }
+      t > 0 && (this.xMin = 0, this.xMax = t, this.yMin = s, this.yMax = i, this.shouldUpdate = e);
+    }
+  }
+  // @override
+  reset() {
+    super.reset(() => {
+      this.fitDatasets(!1), this.measureEnabled && this.measureLinesMoved && (this.initMeasureLines(), this.emitMeasureChangeEvent(null));
+    });
+  }
+  findNearMeasureLine(e) {
+    for (let t = this.$measureLines.length - 1; t >= 0; t--) {
+      const i = this.$measureLines[t], s = this.getLineOffset(i);
+      if (e.x < s + 5 && e.x > s - 5)
+        return i;
+    }
+    return null;
+  }
+  // @override
+  onStart(e) {
+    e.stopPropagation, this.activeMeasureLine !== null ? this.dragging = !0 : super.onStart(e);
+  }
+  emitMeasureChangeEvent(e) {
+    const { measureLines: t } = this, i = t.map(({ name: s, location: a }) => ({
+      name: s,
+      location: e?.name === s ? e.location : a
+    }));
+    this.onMeasureChange?.({
+      current: e,
+      context: i
+    });
+  }
+  // 同步更新其他测量线 确保次序
+  updateMeasureLines() {
+    const { activeMeasureLine: e, measureLines: t } = this;
+    if (e !== null) {
+      const { name: i, location: s, order: a } = e;
+      for (const r of t)
+        r.name !== i && (a > r.order && s < r.location || a < r.order && s > r.location) && (r.location = e.location);
+    }
+  }
+  // @override
+  onUpdate(e) {
+    const { activeMeasureLine: t, scale: i, dpr: s } = this;
+    if (t !== null) {
+      const { x: a } = e.delta.multiply(i).multiply(s.value), { name: r, location: o } = t, n = C(o + a, this.xRange);
+      return n !== o && (t.location = n, this.updateMeasureLines(), this.emitMeasureChangeEvent({
+        name: r,
+        location: n
+      }), this.useSnapshot = this.shouldUpdate = !0), this.draggedMeasureLine = t, e.value;
+    }
+    return super.onUpdate(e);
+  }
+}
+Object.defineProperty(L, "version", {
+  enumerable: !0,
+  configurable: !0,
+  writable: !0,
+  value: "0.2.0"
+});
+L.initConfig();
+export {
+  G as ControlType,
+  p as LineStyle,
+  c as MeasureMode,
+  L as default
+};

package/build/tooltip/crosshair.d.ts

@@ -0,0 +1,20 @@
+import type { Point } from '../base';
+import type { CSSProperties, Edge } from '../type';
+export interface CrosshairOption {
+    edge: Edge;
+    style?: CSSProperties;
+}
+export declare class Crosshair {
+    private root;
+    private container;
+    private axisX;
+    private axisY;
+    private option;
+    constructor(root: HTMLElement, option: CrosshairOption);
+    private createContainer;
+    private createAxis;
+    setEdge(edge: Edge): void;
+    update({ x, y }: Point): void;
+    hide(): void;
+    dispose(): void;
+}

package/build/tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export * from './tooltip';
+export * from './crosshair';

package/build/tooltip/tooltip.d.ts

@@ -0,0 +1,12 @@
+import type { CSSProperties, TooltipOption } from '../type';
+export declare class Tooltip {
+    private root;
+    private xTooltip;
+    private yTooltip;
+    constructor(root: HTMLElement, style?: CSSProperties);
+    private createTooltip;
+    private updateTooltip;
+    update(xTooltip: TooltipOption | null, yTooltip: TooltipOption | null): void;
+    hide(): void;
+    dispose(): void;
+}

package/build/type.d.ts

@@ -0,0 +1,78 @@
+import type { Point } from './base';
+export type CSSProperties = Partial<CSSStyleDeclaration>;
+export type PartialRequired<T extends object, K extends keyof T> = T & Required<Pick<T, K>>;
+export interface Edge {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+}
+export type DataCache = [Date, Uint8ClampedArray];
+export interface Offset {
+    x: number;
+    y: number;
+}
+export interface Size {
+    width: number;
+    height: number;
+}
+export type RangeValue = [number, number];
+export interface DataTransformer<T> {
+    (data: T): T;
+}
+export interface ValueChangeListener<T> {
+    (value: T): void;
+}
+export interface DragableContext<T> {
+    value: T;
+    dragging: boolean;
+}
+export interface TooltipOption {
+    offset: Offset;
+    content: string;
+}
+export type InteractEvent = MouseEvent | TouchEvent;
+export interface DragUpdateContext<T> {
+    value: T;
+    delta: Point;
+    offset: Point;
+    event: InteractEvent;
+}
+export interface DragableOverride<T> {
+    getStyle(context: DragableContext<T>): string;
+    onStart?(event: InteractEvent): void;
+    onUpdate(context: DragUpdateContext<T>): T;
+    onEnd?(event: InteractEvent): void;
+}
+export interface DragableOption<T> extends DragableOverride<T> {
+    initValue: T;
+}
+export interface Dataset {
+    title?: string;
+    data: ArrayLike<number> & Iterable<number> & {
+        slice(start?: number, end?: number): Iterable<number>;
+    };
+    precision?: number;
+}
+/**
+ * 交互方式
+ */
+export declare enum ControlType {
+    /**
+     * 不可交互
+     */
+    none = -1,
+    /**
+     * 区域选择
+     */
+    crop = 0,
+    /**
+     * 缩放
+     */
+    zoom = 1,
+    /**
+     * 平移
+     */
+    move = 2
+}
+export type DataSampleMethod = 'none' | 'max' | 'min' | 'avg' | 'lttb';

package/build/util/dataset.d.ts

@@ -0,0 +1,6 @@
+import type { Dataset, RangeValue } from '../type';
+export declare function fitDataset(data: Dataset['data'], precision: number, [xMin, xMax]: RangeValue): {
+    start: number;
+    end: number;
+    loop: (s: number, callback: (i: number, p: number) => void) => void;
+};

package/build/util/date.d.ts

@@ -0,0 +1 @@
+export declare function formatTime(date: Date, format?: string): string;

package/build/util/env.d.ts

@@ -0,0 +1,15 @@
+import type { ValueChangeListener } from '../type';
+export declare class Dpr {
+    private _value;
+    private mediaQuery;
+    private listener;
+    constructor(listener: ValueChangeListener<number>);
+    private createMediaMatch;
+    get value(): number;
+    private onMediaChange;
+    dispose(): void;
+}
+export declare function measureText(context: CanvasRenderingContext2D, text: string): {
+    width: number;
+    height: number;
+};

package/build/util/event.d.ts

@@ -0,0 +1,6 @@
+import { Point } from '../base';
+export declare function getOffset(event: MouseEvent | TouchEvent, target?: HTMLElement): Point;
+export declare function debounce(callback: (...args: any[]) => void, delay: number): {
+    (this: any, ...args: any[]): void;
+    cancel: () => void;
+};

package/build/util/index.d.ts

@@ -0,0 +1,6 @@
+export * from './style';
+export * from './event';
+export * from './date';
+export * from './numeric';
+export * from './env';
+export * from './dataset';

package/build/util/numeric.d.ts

@@ -0,0 +1,26 @@
+import type { Point } from '../base';
+import type { DataTransformer, RangeValue, Edge } from '../type';
+export declare const getMin: (args: Iterable<number>) => number;
+export declare const getMax: (args: Iterable<number>) => number;
+export declare const reverseRange: DataTransformer<RangeValue>;
+/**
+ *
+ * @param {RangeValue} range input range value
+ * @param {number} limit value limit
+ * @returns {RangeValue}
+ */
+export declare function invertRange(range: RangeValue, limit?: number): RangeValue;
+export declare function restrictRange([s1, e1]: RangeValue, [s2, e2]: RangeValue, [sl, el]?: RangeValue): RangeValue;
+export declare function isPointInBounds({ x, y }: Point, { left, top, right, bottom }: Edge): boolean;
+export declare function clampInRange(value: number, [min, max]: RangeValue): number;
+export declare function restrictBoundsInRange(bounds: Edge, xLimit: RangeValue, yLimit: RangeValue): Edge;
+export declare function scaleBounds({ left, top, right, bottom }: Edge, scale: number): {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+};
+export declare function createScale(range: RangeValue, [min, max]: RangeValue): {
+    rules: number[];
+    density: number;
+};

package/build/util/style.d.ts

@@ -0,0 +1,3 @@
+import type { CSSProperties } from '../type';
+export declare function createStyle(styles: CSSProperties): string;
+export declare function applyStyle(element: HTMLElement, styles: CSSProperties): void;

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@data-vision/interactive-chart",
+  "version": "0.0.8",
+  "license": "MIT",
+  "author": {
+    "name": "icefee",
+    "email": "icefee@outlook.com"
+  },
+  "repository": {
+    "url": "https://bitbucket.org/icefee/interactive-chart"
+  },
+  "type": "module",
+  "files": [
+    "build"
+  ],
+  "types": "./build/index.d.ts",
+  "main": "./build/index.cjs",
+  "module": "./build/index.js",
+  "exports": {
+    ".": {
+      "import": "./build/index.js",
+      "require": "./build/index.cjs"
+    },
+    "./bar": {
+      "import": "./build/bar.js",
+      "require": "./build/bar.cjs"
+    },
+    "./line": {
+      "import": "./build/line.js",
+      "require": "./build/line.cjs"
+    },
+    "./heatmap": {
+      "import": "./build/heatmap.js",
+      "require": "./build/heatmap.cjs"
+    },
+    "./otdr": {
+      "import": "./build/otdr.js",
+      "require": "./build/otdr.cjs"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@types/node": "20.14.9",
+    "tslib": "^2.6.3",
+    "typescript": "^5.2.2",
+    "vite": "^7.3.1"
+  }
+}