@data-vision/interactive-chart 0.0.8

package/README.md

@@ -0,0 +1,144 @@
+<p align="center">
+  <img width="160" src="https://bytebucket.org/icefee/interactive-chart/raw/aef189e3e4799bd815ad126d97c54dd76f8fcc2a/assets/logo.png" alt="interactive chart">
+  <br/>
+  A interactive chart library(0 dependence)
+</p>
+
+### Features
+
+* Built in interaction for mouse and touch, including mouse wheel, crop, pan, zoom
+* High-performance, over 100,000 data points with 60fps render
+* Easy to use, no framework limit
+* Optimize for different screen scaling ratios
+* Rich customization options
+
+### Online Demo
+
+[Online Demo](https://interactive-chart-vision.netlify.app/)
+
+### Install
+
+```bash
+// npm
+npm install @data-vision/interactive-chart
+
+// yarn
+yarn add @data-vision/interactive-chart
+
+// pnpm
+pnpm add @data-vision/interactive-chart
+
+// bun
+bun add @data-vision/interactive-chart
+```
+
+### Support Charts
+
+Currently supports 3 types of charts:
+
+* Line chart
+
+![<img src="./assets/line.png" alt="line chart">](https://bytebucket.org/icefee/interactive-chart/raw/aef189e3e4799bd815ad126d97c54dd76f8fcc2a/assets/line.png)
+
+```javascript
+// import the library
+import Line from '@data-vision/interactive-chart/line'
+
+// get the element for mounting chart instance
+const container = document.querySelector('#chart-line')
+
+// create chart instance
+const lineChart = new Line(contaner)
+
+// 100,000 data points
+var DATA_COUNT = 100_000
+
+// create random data
+const randomData = Array.from(
+  { length: DATA_COUNT },
+  (_, t) => Math.floor(Math.sin(t) * Math.random() * 20)
+)
+
+// set chart data
+lineChart.setData([
+  {
+    color: 'hsl(200 100% 50%)',
+    data: randomData
+  },
+  {
+    color: 'hsl(0 100% 50%)',
+    data: randomData
+  }
+])
+
+```
+
+* Bar chart
+
+![<img src="./assets/bar.png" alt="bar chart">](https://bytebucket.org/icefee/interactive-chart/raw/aef189e3e4799bd815ad126d97c54dd76f8fcc2a/assets/bar.png)
+
+```javascript
+// import the library
+import Bar from '@data-vision/interactive-chart/bar'
+
+// get the element for mounting chart instance
+const container = document.querySelector('#chart-bar')
+
+// create chart instance
+const barChart = new Bar(contaner)
+
+// 100,000 data points
+var DATA_COUNT = 100_000
+
+// create random data
+const randomData = Array.from(
+  { length: DATA_COUNT },
+  (_, t) => Math.floor(Math.sin(t) * Math.random() * 20)
+)
+
+// set chart data
+barChart.setData(
+  {
+    color: ['hsl(200 100% 50%)', 'hsl(0 100% 50%)'],
+    data: randomData
+  }
+)
+
+```
+
+* Heatmap
+
+![<img src="./assets/heatmap.png" alt="heatmap">](https://bytebucket.org/icefee/interactive-chart/raw/aef189e3e4799bd815ad126d97c54dd76f8fcc2a/assets/heatmap.png)
+
+```javascript
+// import the library
+import HeatMap from '@data-vision/interactive-chart/heatmap'
+
+// get the element for mounting chart instance
+const container = document.querySelector('#chart-heat')
+
+// set text painting style
+HeatMap.config.textColor = '#ccc'
+// set max data cache size
+HeatMap.config.maxCacheSize = 200
+
+// create chart instance
+const barChart = new HeatMap(contaner)
+
+// 100,000 data points
+var DATA_COUNT = 100_000
+
+let i = 0
+setInterval(
+  () => {
+    // loop make real data
+    const data = Uint8ClampedArray.from({
+      length: DATA_COUNT
+    }, (_, j) => (j * 32 + i) % 256)
+    heatMap.setData(data)
+    i += 8
+  },
+  10
+)
+
+```

package/build/bar.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const M=require("./chart-Dr9ZOezr.cjs"),G=require("./dataset-D4KLCpTU.cjs");class g extends M.Chart{draw(l){const{data:T,xMin:u,xMax:b,yMin:q,scale:i,grid:o,rect:f,sample:w}=this,n=T;if(n){const{precision:S=1,color:h,data:m}=n,{end:I,loop:j}=G.fitDataset(m,S,[u,b]),d=M.getMin([...m]),x=M.getMax([...m]);if(l.save(),d<1/0&&x>-1/0){const v=q/i.y,r=f.y+v,C=S/i.x;if(typeof h=="string")l.fillStyle=h;else if(h.length<2){const[t]=n.color;t&&(l.fillStyle=t)}else{let t=Math.min(r-d/i.y,f.y),s=Math.max(r-x/i.y,o.top);d===x&&(d>0?t=r:(t=s,s=r));const a=l.createLinearGradient(0,t,0,s);for(let e=0,p=n.color,c=p.length,y=1/(c-1);e<c;e++)a.addColorStop(e*y,p[e]);l.fillStyle=a}j(i.x,(t,s)=>{let a=o.left-u/i.x+C*(t+s*.1),e=C*s*.8;a<o.left?(e=Math.max(0,e-(o.left-a)),a=o.left):a+e>f.x&&(e=Math.max(0,f.x-a));const c=w(n.data.slice(t,Math.min(t+s,I+1)),g.config.dataSampleMethod)/i.y,y=r-c,D=c-Math.max(0,o.top-y)-Math.max(0,v);l.fillRect(a,Math.max(y,o.top),e,D)}),l.restore()}}}}exports.ControlType=M.ControlType;exports.default=g;

package/build/bar.d.ts

@@ -0,0 +1,10 @@
+import { Chart } from './base';
+import type { Dataset } from './type';
+export { ControlType, type Dataset } from './type';
+export interface BarDataSet extends Dataset {
+    color: string | string[];
+}
+declare class Bar extends Chart<BarDataSet> {
+    protected draw(context: CanvasRenderingContext2D): void;
+}
+export default Bar;

package/build/bar.js

@@ -0,0 +1,44 @@
+import { C as T, g as b, c as j } from "./chart-Cj4Fiwnb.js";
+import { a as E } from "./chart-Cj4Fiwnb.js";
+import { f as k } from "./dataset-Bv37sY1L.js";
+class v extends T {
+  // @override
+  draw(s) {
+    const { data: w, xMin: p, xMax: I, yMin: u, scale: l, grid: o, rect: c, sample: D } = this, n = w;
+    if (n) {
+      const { precision: g = 1, color: d, data: h } = n, { end: G, loop: L } = k(h, g, [p, I]), m = b([...h]), x = j([...h]);
+      if (s.save(), m < 1 / 0 && x > -1 / 0) {
+        const S = u / l.y, f = c.y + S, C = g / l.x;
+        if (typeof d == "string")
+          s.fillStyle = d;
+        else if (d.length < 2) {
+          const [t] = n.color;
+          t && (s.fillStyle = t);
+        } else {
+          let t = Math.min(f - m / l.y, c.y), i = Math.max(f - x / l.y, o.top);
+          m === x && (m > 0 ? t = f : (t = i, i = f));
+          const e = s.createLinearGradient(
+            0,
+            t,
+            // Math.min(t, rect.y),
+            0,
+            i
+          );
+          for (let a = 0, M = n.color, r = M.length, y = 1 / (r - 1); a < r; a++)
+            e.addColorStop(a * y, M[a]);
+          s.fillStyle = e;
+        }
+        L(l.x, (t, i) => {
+          let e = o.left - p / l.x + C * (t + i * 0.1), a = C * i * 0.8;
+          e < o.left ? (a = Math.max(0, a - (o.left - e)), e = o.left) : e + a > c.x && (a = Math.max(0, c.x - e));
+          const r = D(n.data.slice(t, Math.min(t + i, G + 1)), v.config.dataSampleMethod) / l.y, y = f - r, R = r - Math.max(0, o.top - y) - Math.max(0, S);
+          s.fillRect(e, Math.max(y, o.top), a, R);
+        }), s.restore();
+      }
+    }
+  }
+}
+export {
+  E as ControlType,
+  v as default
+};

package/build/base/chart.d.ts

@@ -0,0 +1,137 @@
+import { Dragable } from './dragable';
+import { Point } from './point';
+import { ControlType, Edge, type DragUpdateContext, type CSSProperties, type DataSampleMethod, type RangeValue, type Offset, type InteractEvent } from '../type';
+import { Dpr } from '../util';
+interface TooltipLabelRender {
+    (value: number, unit: string): string;
+}
+interface FetureConfig {
+    enabled?: boolean;
+    style?: CSSProperties;
+}
+interface TooltipConfig extends FetureConfig {
+    xLabel?: TooltipLabelRender;
+    yLabel?: TooltipLabelRender;
+}
+interface CrosshairConfig extends FetureConfig {
+}
+export interface Config {
+    xMin: number;
+    xMax: number;
+    yMin: number;
+    yMax: number;
+    grid: Edge;
+    controlType: ControlType;
+    xUnit: string;
+    yUnit: string;
+    xMinScale: number;
+    xMaxScale: number;
+    yMinScale: number;
+    yMaxScale: number;
+    responsiveScale: boolean;
+    gridColor: string;
+    textColor: string;
+    accentColor: string;
+    fontSize: number;
+    cropStyle: CSSProperties;
+    tooltip: TooltipConfig;
+    crosshair: CrosshairConfig;
+    axisXScaleOffset: Offset;
+    axisYScaleOffset: Offset;
+    xLimit: RangeValue;
+    yLimit: RangeValue;
+    wheelZoom: boolean;
+    dataSampleMethod: DataSampleMethod;
+}
+declare class Chart<T> extends Dragable {
+    private root;
+    private resizeObserver;
+    protected dpr: Dpr;
+    private canvasContainer;
+    private canvas;
+    static version: string;
+    static config: Config;
+    protected width: number;
+    protected height: number;
+    protected context: CanvasRenderingContext2D;
+    protected xMin: number;
+    protected xMax: number;
+    protected yMin: number;
+    protected yMax: number;
+    protected data: T | null;
+    private tooltip;
+    private crosshair;
+    private crop;
+    private controlType;
+    private prevControlType;
+    private wheelZoom;
+    private cropOrigin;
+    private cropOffset;
+    private inCrop;
+    protected grid: Edge;
+    private xMinScale;
+    private xMaxScale;
+    private yMinScale;
+    private yMaxScale;
+    protected xUnit: string;
+    protected yUnit: string;
+    private raf;
+    protected shouldUpdate: boolean;
+    protected snapshot: ImageData | null;
+    protected useSnapshot: boolean;
+    constructor(root: HTMLElement);
+    get $root(): HTMLElement;
+    get $canvas(): HTMLCanvasElement;
+    setData(data: T): void;
+    setControlType(controlType: ControlType): void;
+    protected draw(_context: CanvasRenderingContext2D): void;
+    protected drawSnapshot(_context: CanvasRenderingContext2D): void;
+    protected drawAnnotations(_context: CanvasRenderingContext2D): void;
+    protected sample(data: Iterable<number>, method: DataSampleMethod): number;
+    private updateDraw;
+    private drawVerticalGrid;
+    private drawAxisX;
+    private drawScaleX;
+    private drawHorizontalGrid;
+    private drawAxisY;
+    private drawScaleY;
+    private getScaleText;
+    private setRoot;
+    protected get cursor(): "move" | "crosshair" | "zoom-in" | "default";
+    protected setCursor(cursor?: string): void;
+    private initCanvas;
+    protected get scaleGrid(): Edge;
+    protected get bounds(): {
+        x: [number, number];
+        y: [number, number];
+    };
+    protected get rectBounds(): Edge;
+    protected get rect(): Point;
+    protected get drawWidth(): number;
+    protected get drawHeight(): number;
+    private updateCanvas;
+    private onDprChange;
+    setUnit(xUnit?: string | null, yUnit?: string | null): void;
+    protected getOffset(event: MouseEvent | TouchEvent): Point;
+    protected onMouseMove(event: MouseEvent): void;
+    private onMouseLeave;
+    private onWheel;
+    protected onDblClick(): void;
+    private onResize;
+    protected get scale(): Point;
+    protected getRatioOffset(ratio: number): Offset;
+    private setMoveBounds;
+    protected onStart(event: InteractEvent): void;
+    protected onUpdate({ value, delta }: DragUpdateContext<number>): number;
+    protected onEnd(event: InteractEvent): void;
+    private get cropRange();
+    private updateCrop;
+    setCenter(offset: Offset): void;
+    setCenter(range: RangeValue): void;
+    setCenter(x: number, y: number): void;
+    setBounds(xMin?: number, xMax?: number, yMin?: number, yMax?: number): void;
+    resize(): void;
+    reset(beforeUpdate?: VoidFunction): void;
+    dispose(): void;
+}
+export default Chart;

package/build/base/color.d.ts

@@ -0,0 +1,18 @@
+export declare class RgbColor {
+    r: number;
+    g: number;
+    b: number;
+    constructor(r: number, g: number, b: number);
+    private getIntervalValue;
+    interval(color: RgbColor, offset: number): RgbColor;
+    private toHexValue;
+    toHex(): string;
+    toString(): string;
+}
+export declare class Gradient {
+    colors: RgbColor[];
+    constructor(colors: RgbColor[]);
+    addColor(color: RgbColor): void;
+    toString(): string[];
+    getOffsetColor(offset: number): RgbColor;
+}

package/build/base/dragable.d.ts

@@ -0,0 +1,29 @@
+import { Field } from './field';
+import type { InteractEvent, DragableContext, DragableOption, DragUpdateContext } from '../type';
+export declare class Dragable<T = number> extends Field<T> {
+    private element;
+    protected dragging: boolean;
+    private origin;
+    constructor(element: HTMLElement, initValue: T);
+    set value(value: T);
+    private onPointerDown;
+    protected getStyle(_context: DragableContext<T>): string;
+    protected onUpdate({ value }: DragUpdateContext<T>): T;
+    protected isEqual(prev: T, current: T): boolean;
+    protected onStart(_event: InteractEvent): void;
+    protected onEnd(_event: InteractEvent): void;
+    resize(): void;
+    private onPointerMove;
+    private onPointerUp;
+    dispose(): void;
+}
+export declare class DragableThumb<T = number> extends Dragable<T> {
+    private root;
+    private container;
+    protected option: DragableOption<T>;
+    constructor(root: HTMLElement, option: DragableOption<T>);
+    protected onStart(event: MouseEvent): void;
+    protected onUpdate(context: DragUpdateContext<T>): T;
+    protected onEnd(event: DragEvent): void;
+    dispose(): void;
+}

package/build/base/field.d.ts

@@ -0,0 +1,18 @@
+import type { ValueChangeListener } from '../type';
+declare abstract class StateField<T> {
+    abstract get value(): T;
+    abstract set value(value: T);
+    abstract addEventListener(listener: ValueChangeListener<T>): void;
+    abstract removeEventListener(listener: ValueChangeListener<T>): void;
+}
+export declare class Field<T> implements StateField<T> {
+    protected _value: T;
+    protected listeners: ValueChangeListener<T>[];
+    constructor(initValue: T);
+    get value(): T;
+    set value(value: T);
+    addEventListener(listener: ValueChangeListener<T>): void;
+    removeEventListener(listener: ValueChangeListener<T>): void;
+    protected emitChangeEvent(): void;
+}
+export {};

package/build/base/index.d.ts

@@ -0,0 +1,5 @@
+export * from './color';
+export * from './dragable';
+export * from './point';
+export * from './field';
+export { default as Chart, type Config } from './chart';

package/build/base/point.d.ts

@@ -0,0 +1,15 @@
+import type { Offset } from '../type';
+export declare class Point implements Offset {
+    x: number;
+    y: number;
+    constructor(x: number, y: number);
+    add(p: Offset): Point;
+    add(s: number): Point;
+    sub(p: Offset): Point;
+    sub(s: number): Point;
+    multiply(p: Offset): Point;
+    multiply(s: number): Point;
+    divide(p: Offset): Point;
+    divide(s: number): Point;
+    static origin(): Point;
+}

package/build/brush/brush.d.ts

@@ -0,0 +1,49 @@
+import { Field } from '../base';
+import type { DragableContext, RangeValue, CSSProperties, DragUpdateContext } from '../type';
+interface BrushLabelInputOption {
+    from(value: number): number;
+    to(value: number): number;
+}
+interface BrushOption {
+    initValue?: RangeValue;
+    labelInput?: BrushLabelInputOption;
+    style?: CSSProperties;
+}
+export declare class Brush extends Field<RangeValue> {
+    private root;
+    container: HTMLElement;
+    protected thumbSize: number;
+    private startThumb;
+    private endThumb;
+    private range;
+    private resizeObserver;
+    protected width: number;
+    protected height: number;
+    private brushLabel;
+    private labelInput;
+    constructor(root: HTMLElement, option?: BrushOption);
+    get value(): RangeValue;
+    set value([s, e]: RangeValue);
+    private getFormatLabel;
+    updateBrushLabelInput(): void;
+    private initBrushLabelInput;
+    private createLabelInput;
+    private createThumb;
+    protected emitChangeEvent(): void;
+    protected getRangeStyle({ value: [s, e] }: DragableContext<RangeValue>): string;
+    private createRange;
+    private updateRangeValue;
+    private onStartValueChange;
+    private onStartLabelInputChange;
+    private onEndValueChange;
+    private onEndLabelInputChange;
+    private onRangeValueChange;
+    private get trackWidth();
+    private onResize;
+    protected onUpdate({ delta }: DragUpdateContext<number>): number;
+    protected getStyle({ value }: DragableContext<number>): string;
+    private createContainer;
+    setStyle(style: CSSProperties): void;
+    dispose(): void;
+}
+export {};

package/build/brush/crop.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties, Edge } from '../type';
+export declare class Crop {
+    private root;
+    private container;
+    private style;
+    private inheritStyle?;
+    constructor(root: HTMLElement, style?: CSSProperties);
+    private setContainer;
+    update({ top, right, bottom, left }: Edge): void;
+    hide(): void;
+    dispose(): void;
+}

package/build/brush/index.d.ts

@@ -0,0 +1,2 @@
+export * from './brush';
+export * from './crop';

package/build/brush/range.d.ts

@@ -0,0 +1,6 @@
+import { DragableThumb } from '../base';
+import type { RangeValue, DragableOption, DragUpdateContext } from '../type';
+export declare class BrushRange extends DragableThumb<RangeValue> {
+    constructor(root: HTMLElement, option: DragableOption<RangeValue>);
+    onUpdate(context: DragUpdateContext<RangeValue>): RangeValue;
+}

package/build/brush/thumb.d.ts

@@ -0,0 +1,6 @@
+import { DragableThumb } from '../base';
+import type { DragableOption, DragUpdateContext } from '../type';
+export declare class Thumb extends DragableThumb<number> {
+    constructor(root: HTMLElement, option: DragableOption<number>);
+    onUpdate(context: DragUpdateContext<number>): number;
+}