zz-chart - npm Package Compare versions

Comparing version 0.1.0-beta.36 to 0.1.0-beta.37

lib/chart/index.js

@@ -33,2 +33,3 @@ import { DEFAULT_INTERACTIONS } from '../utils/constant.js';
             defaultInteractions,
+            chartOption: props,
         };
@@ -35,0 +36,0 @@ super(opts);

lib/chart/view.d.ts

@@ -10,2 +10,3 @@ /// <reference types="react" resolution-mode="require"/>
 import Interaction from '../interaction/interaction.js';
+import { Reactive } from '../reactivity/index.js';
 import { ViewStrategyManager } from '../strategy/index.js';
@@ -20,2 +21,3 @@ import { AxisOption, CoordinateOption, Data, InteractionSteps, LegendOption, Options, ScaleOption, Size, Theme, ThemeOptions, TitleOption, TooltipOption, ViewOption } from '../types/index.js';
     protected options: Options;
+    readonly reactivity: Reactive;
     interactions: Map<string, Interaction>;
@@ -36,5 +38,6 @@ container: HTMLElement;
     init(): void;
-    private initDefaultInteractions;
+    reactive(): object;
     render(size?: Size): void;
     interaction(name: string, steps?: InteractionSteps): void;
+    private initDefaultInteractions;
     /**
@@ -41,0 +44,0 @@ * 基于注册组件初始化

lib/chart/view.js

@@ -5,2 +5,3 @@ import { isBoolean, isObject, merge, set } from 'lodash';
 import Interaction from '../interaction/interaction.js';
+import { reactive } from '../reactivity/index.js';
 import { UPlotViewStrategy, ViewStrategyManager, InternalViewStrategy, } from '../strategy/index.js';
@@ -27,3 +28,4 @@ import { getTheme } from '../theme/index.js';
         };
-        const { width, height, chartEle, ele, options, data, theme, defaultInteractions, } = props;
+        const { width, height, chartEle, ele, options, data, theme, chartOption, defaultInteractions, } = props;
+        this.reactivity = reactive(chartOption, this);
         this.chartContainer = chartEle;
@@ -49,8 +51,4 @@ this.container = ele;
     }
-    initDefaultInteractions(interactions) {
-        for (const name of interactions) {
-            if (name) {
-                this.interaction(name);
-            }
-        }
+    reactive() {
+        return this.reactivity.reactiveObject;
     }
@@ -79,2 +77,9 @@ render(size) {
     }
+    initDefaultInteractions(interactions) {
+        for (const name of interactions) {
+            if (name) {
+                this.interaction(name);
+            }
+        }
+    }
     /**
@@ -261,3 +266,2 @@ * 基于注册组件初始化
         set(this.options, name, option);
-        // console.log(this.options);
         return this;
@@ -274,2 +278,3 @@ }
         this.chartContainer.remove();
+        this.reactivity.unsubscribe();
         [...this.components.values()].forEach(c => c.destroy());
@@ -276,0 +281,0 @@ this.strategyManage.getStrategy('uPlot')?.destroy();

lib/components/annotation.d.ts

@@ -10,4 +10,4 @@ import { AnnotationLineOption, AnnotationOption } from '../types/index.js';
     lineX(options: AnnotationLineOption): this;
-    private updateLineX;
-    lineY(options: AnnotationLineOption): void;
+    private updateLine;
+    lineY(options: AnnotationLineOption): this;
     getTextPosition(position: 'left' | 'right' | string, start: number, textWidth: number, width: number): number;
@@ -14,0 +14,0 @@ getOptions(): {

lib/components/annotation.js

@@ -40,9 +40,16 @@ import { StyleSheet, css } from 'aphrodite/no-important.js';
         // ..
+        this.option = get(this.ctrl.getOption(), this.name);
+        const x = get(this.option, 'lineX');
+        const y = get(this.option, 'lineY');
+        this.lineX(x);
+        this.lineY(y);
     }
     lineX(options) {
         if (this.annotationXFn.length) {
-            this.updateLineX(options);
+            this.updateLine('lineX', options);
             return this;
         }
-        this.ctrl.setOption([this.name, 'lineX'], options);
+        else {
+            this.ctrl.setOption([this.name, 'lineX'], options);
+        }
         const fn = (u) => {
@@ -106,12 +113,22 @@ const { data, text, style = {
     }
-    updateLineX(options) {
-        const opt = merge(get(this.option, 'lineX'), options);
-        set(this.option, 'lineX', opt);
-        this.ctrl.setOption([this.name, 'lineX'], opt);
+    updateLine(type, options) {
+        const opt = merge(get(this.option, type), options);
+        set(this.option, type, opt);
+        this.ctrl.setOption([this.name, type], opt);
         this.ctrl.redraw();
     }
     lineY(options) {
-        this.ctrl.setOption([this.name, 'lineY'], options);
-        const { data, text, style = { lineDash: [8, 5], width: 2, stroke: 'red' }, } = options || {};
+        if (this.annotationYFn.length) {
+            this.updateLine('lineY', options);
+            return this;
+        }
+        else {
+            this.ctrl.setOption([this.name, 'lineY'], options);
+        }
         const fn = (u) => {
+            const { data, text, style = { lineDash: [8, 5], width: 2, stroke: 'red' }, } = get(this.option, 'lineY', {});
+            ;
+            if (!data) {
+                return;
+            }
             let ctx = u.ctx;
@@ -118,0 +135,0 @@ ctx.save();

lib/components/legend.js

@@ -57,2 +57,3 @@ import { StyleSheet, css } from 'aphrodite/no-important.js';
     update() {
+        this.option = get(this.ctrl.getOption(), this.name);
         this.createItem();
@@ -59,0 +60,0 @@ }

lib/components/scale.js

@@ -18,2 +18,7 @@ import { get, isNumber } from 'lodash';
         // ..
+        this.option = get(this.ctrl.getOption(), this.name);
+        const x = get(this.option, 'x');
+        const y = get(this.option, 'y');
+        x && this.setScale('x', { min: x.min, max: x.max });
+        y && this.setScale('y', { min: y.min, max: y.max });
     }
@@ -32,3 +37,6 @@ getOptions() {
         this.ctrl.setOption([this.name, field], limits);
-        iUPlot.setScale(field, { min: limits.min || scale.min, max: limits.max || scale.max });
+        iUPlot.setScale(field, {
+            min: limits.min || scale.min,
+            max: limits.max || scale.max,
+        });
     }
@@ -35,0 +43,0 @@ getXOptions() {

lib/components/shape/area.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="web" />
 import { Shape } from './index.js';
@@ -2,0 +3,0 @@ /**

lib/components/shape/bar.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="web" />
 import { Shape } from './index.js';
@@ -2,0 +3,0 @@ export declare type AdjustType = 'stack' | 'group';

lib/components/shape/line.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="web" />
 import { Shape } from './index.js';
@@ -2,0 +3,0 @@ export declare type StepType = 'start' | 'end';

lib/components/shape/point.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="web" />
 import uPlot from 'uplot';
@@ -2,0 +3,0 @@ import { Shape } from './index.js';

lib/components/title.js

@@ -38,2 +38,3 @@ import { StyleSheet, css } from 'aphrodite/no-important.js';
     update() {
+        this.option = get(this.ctrl.getOption(), this.name);
         if (this.container && !get(this.option, 'custom')) {
@@ -40,0 +41,0 @@ this.container.innerHTML = this.getTitleValue();

lib/components/tooltip.js

@@ -68,3 +68,4 @@ import { StyleSheet, css } from 'aphrodite/no-important.js';
     update() {
-        // ..
+        this.option = get(this.ctrl.getOption(), this.name);
+        this.createItem();
     }
@@ -96,3 +97,6 @@ create() {
     `;
-        isEl && this.container.append(itemTpl);
+        if (isEl) {
+            this.container.remove();
+            this.container.append(itemTpl);
+        }
     }
@@ -99,0 +103,0 @@ getTooltipTitle(title, values) {

lib/strategy/uplot-strategy.d.ts

@@ -25,3 +25,3 @@ import UPlot from 'uplot';
 export declare class UPlotViewStrategy extends ViewStrategy {
-    shapes: ("line" | "area" | "bar" | "point")[];
+    shapes: ("area" | "line" | "bar" | "point")[];
     qt: Quadtree;
@@ -28,0 +28,0 @@ get name(): string;

lib/strategy/uplot-strategy.js

@@ -268,3 +268,3 @@ import { merge, mergeWith, omit } from 'lodash';
                             const noData = !u.data[1].some(d => d !== null);
-                            if (noData) {
+                            if (!noData) {
                                 this.ctrl.components.get('tooltip').showTooltip();
@@ -271,0 +271,0 @@ }

lib/types/options.d.ts

@@ -23,2 +23,3 @@ /// <reference types="react" resolution-mode="require"/>
     readonly chartEle: HTMLElement;
+    readonly chartOption: ChartOption;
     width?: number;
@@ -87,4 +88,2 @@ height?: number;
     formatter?: string | ((value: string | number) => string);
-    min?: number;
-    max?: number;
 }
@@ -91,0 +90,0 @@ export declare type TooltipOption = TooltipOpt | boolean;

lib/utils/component.d.ts

@@ -9,2 +9,2 @@ import { ValueOf } from '../index.js';
 export declare type ShapeType = ValueOf<typeof ShapeType>;
-export declare const SHAPE_TYPES: ("line" | "area" | "bar" | "point")[];
+export declare const SHAPE_TYPES: ("area" | "line" | "bar" | "point")[];

package.json

 {
   "name": "zz-chart",
-  "version": "0.1.0-beta.36",
+  "version": "0.1.0-beta.37",
   "type": "module",
@@ -5,0 +5,0 @@ "author": "Alauda",

No alert changes

Improved metrics

Total package byte prevSize

541176

increased by2.84%

Number of package files

186

increased by3.33%

Lines of code

14152

increased by2.68%

No dependency changes