zz-chart - npm Package Compare versions

Comparing version 0.1.1-beta.22 to 0.1.1-beta.23

lib/chart/index.js

@@ -20,2 +20,3 @@ import { DEFAULT_INTERACTIONS } from '../utils/constant.js';
         ele.style.position = 'relative';
+        ele.style.height = '100%';
         chartEle.style.flexDirection = 'column';
@@ -22,0 +23,0 @@ chartEle.style.display = 'flex';

lib/components/shape/gauge.js

@@ -109,5 +109,6 @@ import { select } from 'd3';
         const innerRadius = this.option?.innerRadius || 0.8;
-        const r = (END_ANGLE * 220) / Math.PI;
+        // const r = (END_ANGLE * 180) / Math.PI;
         // const padding = 8;
-        const padding = (clientHeight - r) / 2;
+        // const padding = (clientHeight - r) / 2;
+        // console.log(r, padding, clientHeight);
         const values = this.ctrl.getData().map(item => ({
@@ -131,3 +132,3 @@ ...item,
         this.container
-            .attr('transform', `translate(${clientWidth / 2},${clientHeight / 2 + padding})`)
+            .attr('transform', `translate(${clientWidth / 2},${0})`)
             .selectAll('path')
@@ -138,2 +139,8 @@ .data([...colorPaths, ...valuePaths])
             .attr('d', e => e.path);
+        requestAnimationFrame(() => {
+            const { height } = this.container.node().getBBox();
+            const cH = clientHeight < height ? 0 : (clientHeight - height) / 2;
+            console.log(clientHeight, cH, height);
+            this.container.attr('transform', `translate(${clientWidth / 2},${height - cH})`);
+        });
     }
@@ -152,5 +159,6 @@ handlePieColor(value, colors) {
             const { clientWidth } = this.svgEl.node();
-            // const r = (END_ANGLE * 200) / Math.PI;
+            // const r = (END_ANGLE * R_END) / Math.PI;
             // const padding = (clientHeight - r) / 2;
             // const padding = 0;
+            // const padding = (clientHeight - r) / 2;
             const { x = 0, y = 0 } = position || {};
@@ -183,9 +191,11 @@ if (!this.pieGuide) {
             const guideW = this.pieGuide.node().clientWidth;
+            const { height } = this.container.node().getBBox();
             this.pieGuide
                 .style('left', `${left - guideW / 2 + x ?? 0}px`)
-                .style('bottom', `${40 - (y ?? 0)}px`);
+                .style('top', `${height - 25 ?? y}px`);
+            // .style('bottom', `${40 - (y ?? 0)}px`);
             const desW = this.pieDescription.node().clientWidth;
             this.pieDescription
                 .style('left', `${left - desW / 2 + x ?? 0}px`)
-                .style('bottom', `${4 - (y ?? 0)}px`);
+                .style('top', `${height + 15}px`);
             // this.pieGuide
@@ -192,0 +202,0 @@ //   .style('left', `calc(50% + ${x ?? 0}px`)

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

848359

increased by0.21%

Lines of code

19682

increased by0.15%

No dependency changes