zz-chart - npm Package Compare versions

Comparing version 0.1.1-beta.7 to 0.1.1-beta.8

lib/components/header.js

@@ -39,2 +39,3 @@ import { StyleSheet, css } from 'aphrodite/no-important.js';
             this.container.style.display = 'flex';
+            this.container.style.justifyContent = 'flex-end';
             if (!header) {
@@ -41,0 +42,0 @@ this.ctrl.chartContainer.append(this.container);

lib/components/legend.d.ts

@@ -6,3 +6,3 @@ import { LegendOption } from '../types/index.js';
     color: string;
-    isActive: boolean;
+    activated: boolean;
 }
@@ -17,8 +17,6 @@ export declare class Legend extends BaseComponent<LegendOption> {
     legendItemClick(props: {
-        index: number;
-        data: LegendItem[];
-        value: LegendItem;
-        isActive: boolean;
+        name: string;
+        activated: boolean;
     }): void;
     getLegend(): LegendItem[];
 }

lib/components/legend.js

@@ -57,2 +57,4 @@ import { StyleSheet, css } from 'aphrodite/no-important.js';
         if (!this.container) {
+            const data = this.getLegend();
+            this.inactivatedSet = new Set(data.map(d => d.name));
             this.create();
@@ -100,3 +102,3 @@ }
             const data = this.getLegend();
-            for (const [index, key] of data.entries()) {
+            for (const [_index, key] of data.entries()) {
                 const li = document.createElement('li');
@@ -111,10 +113,8 @@ const value = key;
                 li.addEventListener('click', () => {
-                    const isActive = li.style.opacity === '1' || !li.style.opacity;
-                    li.style.opacity = isActive ? '0.5' : '1';
-                    key.isActive = !isActive;
+                    const activated = li.style.opacity === '1' || !li.style.opacity;
+                    li.style.opacity = activated ? '0.5' : '1';
+                    key.activated = !activated;
                     this.legendItemClick({
-                        index: Number(index),
-                        data: data,
-                        value,
-                        isActive: !isActive,
+                        name: value.name,
+                        activated: !activated,
                     });
@@ -142,8 +142,8 @@ });
     legendItemClick(props) {
-        const currentStatus = !props.isActive;
+        const currentStatus = !props.activated;
         if (currentStatus) {
-            this.inactivatedSet.delete(props.value.name);
+            this.inactivatedSet.delete(props.name);
         }
         else {
-            this.inactivatedSet.add(props.value.name);
+            this.inactivatedSet.add(props.name);
         }
@@ -154,11 +154,12 @@ this.ctrl.emit(ChartEvent.LEGEND_ITEM_CLICK, props);
         const data = this.ctrl.getData();
-        return data
+        const res = data
             .map(({ name, color }) => ({
             name,
             color,
-            isActive: true
+            activated: this.inactivatedSet.has(name),
         }))
             .filter(d => d.name);
+        return res;
     }
 }
 //# sourceMappingURL=legend.js.map

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/index.d.ts

@@ -0,3 +1,3 @@
+/// <reference types="web" />
 /// <reference types="react" resolution-mode="require"/>
-/// <reference types="web" />
 import { View } from '../../chart/view.js';
@@ -4,0 +4,0 @@ import { ShapeOptions } from '../../types/index.js';

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/pie.js

@@ -29,8 +29,4 @@ import { select } from 'd3';
         this.renderLabel();
-        this.ctrl.on(ChartEvent.LEGEND_ITEM_CLICK, res => {
-            const names = res.data.reduce((pre, cur) => [
-                ...pre,
-                ...(cur.isActive ? [cur.name] : []),
-            ], []);
-            this.data = this.getData().filter(d => names.includes(d.name));
+        this.ctrl.on(ChartEvent.LEGEND_ITEM_CLICK, (res) => {
+            this.data = this.getData().filter(d => !(!res.activated && d.name === res.name));
             this.renderPie();
@@ -37,0 +33,0 @@ this.renderLabel();

lib/interaction/action/legend.js

@@ -23,3 +23,3 @@ import { get } from 'lodash';
     //   if (this.uPlot) {
-    //     this.uPlot?.setSeries(value.index + 1, { show: !value.isActive }, true);
+    //     this.uPlot?.setSeries(value.index + 1, { show: !value.activated }, true);
     //   }
@@ -26,0 +26,0 @@ // }

lib/strategy/config.d.ts

@@ -9,2 +9,7 @@ import { axesSpace } from './utils.js';
     };
+    scales: {
+        y: {
+            range: (_u: uPlot, dataMin: number, dataMax: number) => number[];
+        };
+    };
     axes: ({
@@ -11,0 +16,0 @@ space: typeof axesSpace;

lib/strategy/config.js

@@ -22,2 +22,10 @@ import { axesSpace } from './utils.js';
     },
+    scales: {
+        y: {
+            range: (_u, dataMin, dataMax) => {
+                const maxV = Math.max(dataMax ? dataMax + 5 : dataMax, 1);
+                return [dataMin || 0, maxV];
+            },
+        },
+    },
     axes: [
@@ -24,0 +32,0 @@ {

lib/strategy/uplot-strategy.d.ts

@@ -5,13 +5,2 @@ import UPlot from 'uplot';
 import { Quadtree } from './quadtree.js';
-export interface MarkContext {
-    title: Date | number | string;
-    values: MarkContextItem[];
-}
-export interface MarkContextItem {
-    name: string;
-    color: string;
-    x: string;
-    y: number;
-    activated?: boolean;
-}
 export interface BrushContext {
@@ -18,0 +7,0 @@ start: number;

lib/strategy/uplot-strategy.js

@@ -116,3 +116,6 @@ import { cloneDeep, merge, mergeWith, omit, isFunction } from 'lodash';
             if (this.uPlot) {
-                this.uPlot.setSeries(data.index + 1, { show: data.isActive }, true);
+                const index = this.uPlot.series
+                    .filter(d => d.scale === 'y')
+                    .findIndex(item => item.label === data.name);
+                this.uPlot.setSeries(index + 1, { show: data.activated }, true);
             }
@@ -126,2 +129,3 @@ });
                 const series = this.getSeries();
+                const legend = this.ctrl.components.get('legend');
                 ySeries.forEach((s) => {
@@ -134,8 +138,12 @@ if (series.every(d => d.label !== s.label)) {
                     const no = ySeries.every(d => d.label !== s.label);
+                    if (legend.inactivatedSet.has(s.label)) {
+                        s.show = false;
+                    }
                     if (no && index) {
                         this.uPlot.addSeries(s, this.uPlot.series.length);
+                        return;
                     }
+                    this.uPlot.setSeries(this.uPlot.series.length + 1, { show: false });
                 });
                 this.uPlot.setData(data);
-                const legend = this.ctrl.components.get('legend');
                 legend.update();
@@ -142,0 +150,0 @@ }

lib/types/component.d.ts

 /// <reference types="react" resolution-mode="require"/>
 /// <reference types="web" />
-import { LegendItem } from "../components/legend.js";
 export interface LegendItemActive {
-    index: number;
-    value: LegendItem;
-    data: LegendItem[];
-    isActive: boolean;
+    name: string;
+    activated: boolean;
 }
@@ -10,0 +7,0 @@ interface Coordinates {

lib/types/options.d.ts

@@ -97,3 +97,3 @@ /// <reference types="react" resolution-mode="require"/>
     nameFormatter?: string | ((name: string) => string);
-    valueFormatter?: string | ((value: TooltipValue) => string);
+    valueFormatter?: string | ((value: number) => string);
     itemFormatter?: (value: TooltipValue[]) => string | TooltipValue[] | Element;
@@ -100,0 +100,0 @@ sort?: (a: TooltipValue, b: TooltipValue) => number;

package.json

 {
   "name": "zz-chart",
-  "version": "0.1.1-beta.7",
+  "version": "0.1.1-beta.8",
   "type": "module",
@@ -5,0 +5,0 @@ "author": "Alauda",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

663448

increased by0.43%

Lines of code

16767

increased by0.25%

No dependency changes