zz-chart - npm Package Compare versions

Comparing version 0.1.0-beta.3 to 0.1.0-beta.4

lib/chart/index.js

 import { DEFAULT_INTERACTIONS } from '../utils/constant.js';
 // import { DEFAULT_INTERACTIONS } from '../utils/constant.js';
-import { getChartSize, getElement, resizeObserver } from '../utils/index.js';
+import { generateName, getChartSize, getElement, resizeObserver } from '../utils/index.js';
 import { View } from './view.js';
 export class Chart extends View {
     constructor(props) {
-        const { container, width, height, padding, defaultInteractions = DEFAULT_INTERACTIONS, options, data, } = props;
-        const ele = getElement(container);
-        ele.style.height = '100%';
-        ele.style.width = '100%';
+        const { container, width, autoFit = true, height, padding, defaultInteractions = DEFAULT_INTERACTIONS, options, data, } = props;
+        const chartEle = getElement(container);
+        const header = document.createElement('div');
+        header.className = generateName('header');
+        chartEle.append(header);
+        const ele = document.createElement('div');
+        chartEle.append(ele);
+        if (autoFit) {
+            chartEle.style.width = '100%';
+            chartEle.style.height = '100%';
+            ele.style.width = '100%';
+            ele.style.height = '100%';
+        }
         const size = getChartSize(ele, width, height);
         const opts = {
+            chartEle,
             ele,
@@ -31,6 +41,7 @@ ...size,
             }
-            this.width = width;
-            this.height = height;
+            const size = getChartSize(this.ele, width, height);
+            this.width = size.width;
+            this.height = size.height;
             // 重新渲染
-            this.render({ width, height });
+            this.render(size);
             return this;
@@ -37,0 +48,0 @@ };

lib/chart/view.d.ts

@@ -19,2 +19,3 @@ /// <reference types="react" resolution-mode="require"/>
     container: HTMLElement;
+    chartContainer: HTMLElement;
     coordinateInstance: Coordinate;
@@ -21,0 +22,0 @@ /** 主题配置，存储当前主题配置。 */

lib/chart/view.js

@@ -26,3 +26,4 @@ import { isBoolean, isObject, set } from 'lodash';
         };
-        const { width, height, ele, options, data, theme, defaultInteractions } = props;
+        const { width, height, chartEle, ele, options, data, theme, defaultInteractions, } = props;
+        this.chartContainer = chartEle;
         this.container = ele;
@@ -29,0 +30,0 @@ if (options) {

lib/components/header.js

@@ -31,7 +31,9 @@ import { StyleSheet, css } from 'aphrodite/no-important.js';
         const headerName = generateName('header');
-        const header = this.ctrl.container.querySelector(`.${headerName}`);
+        const header = this.ctrl.chartContainer.querySelector(`.${headerName}`);
         if (!this.container) {
             this.container = header || document.createElement('div');
             this.container.style.display = 'flex';
-            this.ctrl.container.append(this.container);
+            if (!header) {
+                this.ctrl.chartContainer.append(this.container);
+            }
         }
@@ -38,0 +40,0 @@ this.container.className = `${generateName('header')} ${css(styles[this.position])}`;

lib/components/legend.js

@@ -62,3 +62,2 @@ import { StyleSheet, css } from 'aphrodite/no-important.js';
                 : this.option;
-            console.log(position);
             let dom = this.ctrl.container;
@@ -65,0 +64,0 @@ this.container = document.createElement('div');

lib/components/shape/index.d.ts

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

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

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

lib/types/options.d.ts

@@ -11,2 +11,3 @@ /// <reference types="react" resolution-mode="require"/>
     data?: Data;
+    autoFit?: boolean;
     width?: number;
@@ -22,2 +23,3 @@ height?: number;
     readonly ele: HTMLElement;
+    readonly chartEle: HTMLElement;
     width?: number;
@@ -24,0 +26,0 @@ height?: number;

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")[];

lib/utils/dom.js

 import { select } from 'd3';
 import { debounce } from 'lodash';
 function getElementSize(ele) {
+    const style = getComputedStyle(ele);
     return {
-        width: ele.clientWidth,
-        height: ele.clientHeight,
+        width: (ele.clientWidth || parseInt(style.width, 10)) -
+            parseInt(style.paddingLeft, 10) -
+            parseInt(style.paddingRight, 10),
+        height: (ele.clientHeight || parseInt(style.height, 10)) -
+            parseInt(style.paddingTop, 10) -
+            parseInt(style.paddingBottom, 10),
     };
@@ -8,0 +13,0 @@ }

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

419488

increased by0.98%

Lines of code

11204

increased by0.86%

No dependency changes