zz-chart - npm Package Compare versions

Comparing version 0.1.0-beta.33 to 0.1.0-beta.34

lib/components/tooltip.js

@@ -21,2 +21,3 @@ import { StyleSheet, css } from 'aphrodite/no-important.js';
         zIndex: 999,
+        transition: 'transform 0.1s ease-out 0s',
         // transition:
@@ -23,0 +24,0 @@ //   'top 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0s',

lib/strategy/uplot-strategy.js

@@ -52,7 +52,2 @@ import { merge, mergeWith, omit } from 'lodash';
                     ],
-                    destroy: [
-                        () => {
-                            this.ctrl.destroy();
-                        },
-                    ],
                 },
@@ -244,5 +239,6 @@ series,
         let bound;
-        let bLeft;
-        let bTop;
+        // let bLeft: number;
+        // let bTop: number;
         let cacheData;
+        let overBbox;
         return {
@@ -278,14 +274,27 @@ hooks: {
                 },
-                setSize: () => {
-                    const bbox = over.getBoundingClientRect();
-                    bLeft = bbox.left;
-                    bTop = bbox.top;
-                },
+                // setSize: () => {
+                //   const bbox = over.getBoundingClientRect();
+                //   bLeft = bbox.left;
+                //   bTop = bbox.top;
+                // },
+                syncRect: (_, rect) => (overBbox = rect),
                 setCursor: (u) => {
-                    const { left, top, idx, idxs } = u.cursor;
+                    if (!overBbox) {
+                        return;
+                    }
+                    const { idx, idxs } = u.cursor;
                     const x = u.data[0][idx];
-                    const bbox = over.getBoundingClientRect();
-                    bLeft = bbox.left;
-                    bTop = bbox.top;
-                    const anchor = { left: left + bLeft, top: top + bTop };
+                    const bbox = u.over.getBoundingClientRect();
+                    // bLeft = bbox.left;
+                    // bTop = bbox.top;
+                    // const anchor = {
+                    //   left: left + bLeft,
+                    //   top: top + bbox.top,
+                    // };
+                    const { x: tX, y } = positionTooltip(u, overBbox || bbox);
+                    const anchor = {
+                        left: tX,
+                        top: y,
+                    };
+                    // console.log(anchor,scrollY ,bbox.top, );
                     const data = this.ctrl.getData();
@@ -371,2 +380,91 @@ const ySeries = u.series.filter(d => d.scale === 'y');
 }
+function isCursorOutsideCanvas({ left, top }, canvas) {
+    if (left === undefined || top === undefined) {
+        return false;
+    }
+    return left < 0 || left > canvas.width || top < 0 || top > canvas.height;
+}
+/**
+ * Finds y axis midpoint for point at given idx (css pixels relative to uPlot canvas)
+ * @internal
+ **/
+export function findMidPointYPosition(u, idx) {
+    let y;
+    let sMaxIdx = 1;
+    let sMinIdx = 1;
+    // assume min/max being values of 1st series
+    let max = u.data[1][idx];
+    let min = u.data[1][idx];
+    // find min max values AND ids of the corresponding series to get the scales
+    for (let i = 1; i < u.data.length; i++) {
+        const sData = u.data[i];
+        const sVal = sData[idx];
+        if (sVal != null) {
+            if (max == null) {
+                max = sVal;
+            }
+            else {
+                if (sVal > max) {
+                    max = u.data[i][idx];
+                    sMaxIdx = i;
+                }
+            }
+            if (min == null) {
+                min = sVal;
+            }
+            else {
+                if (sVal < min) {
+                    min = u.data[i][idx];
+                    sMinIdx = i;
+                }
+            }
+        }
+    }
+    if (min == null && max == null) {
+        // no tooltip to show
+        y = undefined;
+    }
+    else if (min != null && max != null) {
+        // find median position
+        y = (u.valToPos(min, u.series[sMinIdx].scale) + u.valToPos(max, u.series[sMaxIdx].scale)) / 2;
+    }
+    else {
+        // snap tooltip to min OR max point, one of those is not null :)
+        y = u.valToPos((min || max), u.series[(sMaxIdx || sMinIdx)].scale);
+    }
+    // if y is out of canvas bounds, snap it to the bottom
+    if (y !== undefined && y < 0) {
+        y = u.bbox.height / devicePixelRatio;
+    }
+    return y;
+}
+/**
+ * Given uPlot cursor position, figure out position of the tooltip withing the canvas bbox
+ * Tooltip is positioned relatively to a viewport
+ * @internal
+ **/
+export function positionTooltip(u, bbox) {
+    let x, y;
+    const cL = u.cursor.left || 0;
+    const cT = u.cursor.top || 0;
+    if (isCursorOutsideCanvas(u.cursor, bbox)) {
+        const idx = u.posToIdx(cL);
+        // when cursor outside of uPlot's canvas
+        if (cT < 0 || cT > bbox.height) {
+            let pos = findMidPointYPosition(u, idx);
+            if (pos) {
+                y = bbox.top + pos;
+                if (cL >= 0 && cL <= bbox.width) {
+                    // find x-scale position for a current cursor left position
+                    x = bbox.left + u.valToPos(u.data[0][u.posToIdx(cL)], u.series[0].scale);
+                }
+            }
+        }
+    }
+    else {
+        x = bbox.left + cL;
+        y = bbox.top + cT;
+    }
+    return { x, y };
+}
 //# sourceMappingURL=uplot-strategy.js.map

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

519668

increased by2.16%

Lines of code

13621

increased by2.16%

No dependency changes