zz-chart - npm Package Compare versions

Comparing version 0.1.1-beta.5 to 0.1.1-beta.6

lib/components/annotation.js

@@ -65,9 +65,23 @@ import { StyleSheet, css } from 'aphrodite/no-important.js';
             ctx.save();
-            let x0 = u.valToPos(data, 'x', true);
-            let y0 = u.valToPos(u.scales.y.min, 'y', true);
+            const xData = u.data[0];
+            const isTransposed = u.scales.y.ori === 0 && u.axes[1].side === 2;
+            const posValue = u.scales.x.distr === 2
+                ? xData.findIndex(d => d === data)
+                : data;
+            // let x0 = u.valToPos(posValue, 'x', true);
+            // let y0 = u.valToPos(u.scales.y.min, 'y', true);
+            console.log(u.valToPos(posValue, 'x', true), data);
+            const x0 = isTransposed
+                ? u.valToPos(u.scales.y.min, 'y', true)
+                : u.valToPos(posValue, 'x', true);
+            const x1 = isTransposed ? u.bbox.width : x0;
+            const y0 = isTransposed ? u.valToPos(posValue, 'x', true) : u.bbox.top;
+            const y1 = isTransposed
+                ? u.valToPos(posValue, 'x', true)
+                : u.valToPos(u.scales.y.min, 'y', true);
             ctx.beginPath();
             ctx.setLineDash(style?.lineDash);
             ctx.lineWidth = style?.width;
-            ctx.moveTo(x0, u.bbox.top);
-            ctx.lineTo(x0, y0);
+            ctx.moveTo(x0, y0);
+            ctx.lineTo(x1, y1);
             ctx.strokeStyle = style?.stroke;
@@ -93,4 +107,9 @@ ctx.stroke();
                 requestAnimationFrame(() => {
-                    const x = Math.round(u.valToPos(data, 'x'));
+                    const x = isTransposed
+                        ? u.valToPos(u.scales.y.max, 'y')
+                        : Math.round(u.valToPos(posValue, 'x'));
                     const markElWidth = parseInt(labelStyle.width, 10) / 2;
+                    const y = isTransposed
+                        ? u.valToPos(posValue, 'x') - parseInt(labelStyle.height, 10) / 2
+                        : -parseInt(labelStyle.height, 10) + TEXT_SPACE;
                     let left = x;
@@ -104,3 +123,3 @@ if (x + markElWidth > u.over.clientWidth) {
                     markEl.style.left = `${left}px`;
-                    markEl.style.top = `-${parseInt(labelStyle.height, 10) + TEXT_SPACE}px`;
+                    markEl.style.top = `${y}px`;
                 });
@@ -107,0 +126,0 @@ !markLabelE && markEl.appendChild(labelEl);

lib/strategy/uplot-strategy.d.ts

@@ -35,2 +35,3 @@ import UPlot from 'uplot';
     init(): void;
+    private get transposed();
     /**
@@ -37,0 +38,0 @@ * 监听 chart 事件

lib/strategy/uplot-strategy.js

@@ -100,2 +100,5 @@ import { cloneDeep, merge, mergeWith, omit, isFunction } from 'lodash';
     }
+    get transposed() {
+        return this.ctrl.getCoordinate().isTransposed;
+    }
     /**
@@ -286,5 +289,5 @@ * 监听 chart 事件
                     over.addEventListener('click', () => {
-                        const { left } = u.cursor;
+                        const { left, top } = u.cursor;
                         const data = this.ctrl.getData();
-                        const x = u.data[0][u.valToIdx(u.posToVal(left, 'x'))];
+                        const x = u.data[0][u.valToIdx(u.posToVal(this.transposed ? top : left, 'x'))];
                         const values = data.reduce((pre, cur) => {
@@ -291,0 +294,0 @@ const items = cur.values.find(c => c.x === x);

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

571989

increased by0.83%

Lines of code

14637

increased by0.36%

No dependency changes