Merge branch 'main' into pagination_off

gravity-ui · Oct 14, 2024 · 276a7bc · 276a7bc
2 parents 4b54668 + d7d2ff2
commit 276a7bc
Show file tree

Hide file tree

Showing 12 changed files with 148 additions and 31 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,45 @@
 ### master
 
+## [4.3.4](https://github.com/gravity-ui/yagr/compare/v4.3.3...v4.3.4) (2024-10-07)
+
+
+### Bug Fixes
+
+* update uplot to v1.6.31 ([#226](https://github.com/gravity-ui/yagr/issues/226)) ([b069208](https://github.com/gravity-ui/yagr/commit/b069208789cc02975d1dfc7c917c0c23f48b76ee))
+
+## [4.3.3](https://github.com/gravity-ui/yagr/compare/v4.3.2...v4.3.3) (2024-09-27)
+
+
+### Bug Fixes
+
+* bug with focus in stacking column chart ([#222](https://github.com/gravity-ui/yagr/issues/222)) ([c04ac11](https://github.com/gravity-ui/yagr/commit/c04ac115217bd8df59d095cbf767dc096457a3a3))
+
+## [4.3.2](https://github.com/gravity-ui/yagr/compare/v4.3.1...v4.3.2) (2024-09-19)
+
+
+### Bug Fixes
+
+* tooltip memory leak ([ec80853](https://github.com/gravity-ui/yagr/commit/ec80853d7cabe41ff4df129120e1e206cff36f9e))
+
+## [4.3.1](https://github.com/gravity-ui/yagr/compare/v4.3.0...v4.3.1) (2024-08-13)
+
+
+### Bug Fixes
+
+* overscreen tooltip ([08e3337](https://github.com/gravity-ui/yagr/commit/08e33378c4f5f3b79486cc931d10336a594d28cd))
+
+## [4.3.0](https://github.com/gravity-ui/yagr/compare/v4.2.4...v4.3.0) (2024-04-09)
+
+
+### Features
+
+* rebuild 4.5 ([#216](https://github.com/gravity-ui/yagr/issues/216)) ([a28e124](https://github.com/gravity-ui/yagr/commit/a28e124020bcf4d0f50acd0842a60f0e918a7eef))
+
+
+### Bug Fixes
+
+* fixed series transform for non stacked areas ([#214](https://github.com/gravity-ui/yagr/issues/214)) ([211c653](https://github.com/gravity-ui/yagr/commit/211c65354dd290ca28ba64bf565238ce672d7fca))
+
 ## [4.2.4](https://github.com/gravity-ui/yagr/compare/v4.2.3...v4.2.4) (2024-03-27)
 
 

diff --git a/README.md b/README.md
@@ -78,8 +78,8 @@ new Yagr(document.body, {
 
 Need something specific? Yagr presents some useful examples in the [demo/examples](./demo/examples/) folder. How to start them with current version:
 
-1. Clone the repository
-2. Install dependencies `npm i`
-3. Run `npm run build`
-4. Run `npx http-server .`
-5. Open examples in browser according to the http-server output
+1. Clone the repository.
+2. Install dependencies `npm i`.
+3. Run `npm run build`.
+4. Run `npx http-server .`.
+5. Open examples in browser according to the http-server output.
diff --git a/demo/examples/legend.html b/demo/examples/legend.html
@@ -40,6 +40,10 @@ <h1>Legend</h1>
             <div id="chart8" class="container"></div>
         </div>
 
+        <div class="grid">
+            <div id="chart9" class="container"></div>
+        </div>
+
         <script>
             const y1 = new Yagr(chart1, {
                 title: {text: 'On top'},
@@ -173,11 +177,39 @@ <h1>Legend</h1>
             });
 
             const y7 = new Yagr(chart7, {
-                title: {text: 'Pagination on'},
+                title: {text: 'On top'},
                 timeline: [1, 2, 3],
-                series: new Array(60).fill(1).map((x) => {
+                series: [
+                    {data: [1, 2, 3], color: 'red', type: 'column',},
+
+                    {data: [2, 1, 2], color: 'green', type: 'column'},
+                    {data: [1, 2, 3], color: 'lime', type: 'column'},
+                ],
+                "scales": {
+                    "x": {},
+                    "y": {
+                        "normalize": false,
+                        "stacking": true,
+                        "type": "linear"
+                    },
+                    "yRight": {
+                        "normalize": false,
+                        "stacking": true,
+                        "type": "linear"
+                    }
+                },
+                legend: {
+                    show: true,
+                    position: 'top',
+                },
+            });
+
+            const y8 = new Yagr(chart8, {
+                title: {text: 'Pagination on'},
+                timeline: new Array(100).fill(1).map((_, i) => i + 1),
+                series: new Array(100).fill(1).map((x) => {
                     return {
-                        data: new Array(3).fill(1).map(() => Math.floor(Math.random() * 4)),
+                        data: new Array(100).fill(1).map(() => Math.floor(Math.random() * 4)),
                         color: `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`,
                         type: 'line',
                     };
@@ -197,12 +229,12 @@ <h1>Legend</h1>
                 },
             });
 
-            const y8 = new Yagr(chart8, {
+            const y9 = new Yagr(chart9, {
                 title: {text: 'Pagination off'},
-                timeline: [1, 2, 3],
-                series: new Array(60).fill(1).map((x, i) => {
+                timeline: new Array(100).fill(1).map((_, i) => i + 1),
+                series: new Array(100).fill(1).map((x, i) => {
                     return {
-                        data: new Array(3).fill(1).map(() => Math.floor(Math.random() * 4)),
+                        data: new Array(100).fill(1).map(() => Math.floor(Math.random() * 4)),
                         color: `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`,
                         type: 'line',
                     };
@@ -221,6 +253,7 @@ <h1>Legend</h1>
                     pagination: false,
                 },
             });
+
         </script>
     </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/yagr",
-  "version": "4.2.4",
+  "version": "4.3.4",
   "description": "High level wrapper for uPlot",
   "keywords": [
     "canvas",
@@ -117,6 +117,6 @@
     "typescript": "^4.2.3"
   },
   "dependencies": {
-    "uplot": "1.6.27"
+    "uplot": "1.6.31"
   }
 }
diff --git a/src/YagrCore/mixins/transform-series.ts b/src/YagrCore/mixins/transform-series.ts
@@ -93,15 +93,15 @@ export class TransformSeriesMixin<T extends MinimalValidConfig> {
                         dataLine.push(null);
                         continue;
                     } else {
-                        value = 0;
+                        value = isStacking ? 0 : null;
                     }
                 }
 
                 empty = false;
 
                 if (scaleConfig.normalize) {
                     const sum = getSumByIdx(this.options.series, idx, scale);
-                    value = sum && (value / sum) * (scaleConfig.normalizeBase || 100);
+                    value = sum && ((value ?? 0) / sum) * (scaleConfig.normalizeBase || 100);
 
                     serieOptions.normalizedData = serieOptions.normalizedData || [];
                     serieOptions.normalizedData[idx] = value;
@@ -112,7 +112,7 @@ export class TransformSeriesMixin<T extends MinimalValidConfig> {
                         value = 0;
                     }
 
-                    value = stacks[scale][sGroup][idx] += value;
+                    value = stacks[scale][sGroup][idx] += (value ?? 0);
                 }
 
                 if (scaleConfig.type === 'logarithmic' && value === 0) {

diff --git a/src/YagrCore/plugins/cursor/cursor.ts b/src/YagrCore/plugins/cursor/cursor.ts
@@ -206,8 +206,10 @@ export default function CursorPlugin(
 
                 const emptyLines = uplotOptions.series.filter((s) => s.empty).length;
                 const totalLines = uplotOptions.series.length - 1;
+                const maxCursors = opts?.maxMarkers ?? MAX_CURSORS;
+
                 uplotOptions.cursor.points = {
-                    show: totalLines - emptyLines <= MAX_CURSORS ? cursorPoint : false,
+                    show: totalLines - emptyLines <= maxCursors ? cursorPoint : false,
                     size: (u: uPlot, seriesIdx: number) => {
                         const serie = u.series[seriesIdx];
                         return (

diff --git a/src/YagrCore/plugins/legend/legend.ts b/src/YagrCore/plugins/legend/legend.ts
@@ -256,14 +256,19 @@ export default class LegendPlugin {
             }
 
             const targetSerie = this.yagr.uplot.series.find(({id}) => id === serieId);
-
             if (targetSerie) {
                 yagr.setFocus(targetSerie.id, true);
+
+                // fix bug with focus in stacking column chart
+                yagr.redraw(true, false);
             }
         };
 
         const onSerieMouseLeave = () => {
             yagr.setFocus(null, true);
+
+            // fix bug with focus in stacking column chart
+            yagr.redraw(true, false);
         };
 
         series.forEach((serieNode) => {

diff --git a/src/YagrCore/plugins/tooltip/placement.ts b/src/YagrCore/plugins/tooltip/placement.ts
@@ -12,6 +12,8 @@ const NAMES = {
     scrollOffset: ['pageYOffset', 'pageXOffset'],
     offset: ['offsetY', 'offsetY'],
     offsetOpt: ['yOffset', 'xOffset'],
+    bodyScroll: ['scrollHeight', 'scrollWidth'],
+    inner: ['innerHeight', 'innerWidth'],
 };
 
 interface Props {
@@ -26,6 +28,8 @@ interface Props {
     scrollOffset: 'pageYOffset' | 'pageXOffset';
     offset: 'offsetY' | 'offsetY';
     offsetOpt: 'yOffset' | 'xOffset';
+    bodyScroll: 'scrollHeight' | 'scrollWidth';
+    inner: 'innerHeight' | 'innerWidth';
 }
 
 type Side = 'top' | 'bottom' | 'left' | 'right';
@@ -148,7 +152,8 @@ export default function (
     // Set the position of the popup element along the primary axis using the
     // anchor's bounding rect. If we are working in the context of position:
     // absolute, then we will need to add the window's scroll position as well.
-    const scrollOffset = window[primary.scrollOffset] as unknown as number;
+    const maxOffset = document.body[primary.bodyScroll] - window[primary.inner];
+    const scrollOffset = Math.min(window[primary.scrollOffset] as unknown as number, maxOffset);
 
     const boundPrimaryPos = (pos: number) => {
         return Math.max(
@@ -179,7 +184,8 @@ export default function (
     }
 
     // Set the position of the popup element along the secondary axis.
-    const secondaryScrollOffset = window[secondary.scrollOffset] as unknown as number;
+    const maxSecondaryOffset = document.body[secondary.bodyScroll] - window[secondary.inner];
+    const secondaryScrollOffset = Math.min(window[secondary.scrollOffset] as unknown as number, maxSecondaryOffset);
 
     elem.style[secondary.before] = px(
         secondaryScrollOffset + boundSecondaryPos(anchorRect[secondary.before] - secondaryMarginBefore),

diff --git a/src/YagrCore/plugins/tooltip/tooltip.ts b/src/YagrCore/plugins/tooltip/tooltip.ts
@@ -734,14 +734,17 @@ class YagrTooltip {
 }
 
 /*
- * Tooltip plugin constructor.
+ * Tooltip plugin constructor .
  * Every charts has it's own tooltip plugin instance
  */
 function YagrTooltipPlugin(yagr: Yagr, options: Partial<TooltipOptions> = {}): ReturnType<TooltipPlugin> {
     const tooltip = new YagrTooltip(yagr, options);
 
     const getUplotPlugin = () => ({
         hooks: {
+            destroy: () => {
+                tooltip.dispose();
+            },
             init: (u: uPlot) => {
                 tooltip.initWithUplot(u);
             },
@@ -763,6 +766,7 @@ function YagrTooltipPlugin(yagr: Yagr, options: Partial<TooltipOptions> = {}): R
         tooltip.reset();
 
         u.hooks.init!.push(uPlugin.hooks.init);
+        u.hooks.destroy!.push(uPlugin.hooks.destroy);
         u.hooks.setSize!.push(uPlugin.hooks.setSize);
         u.hooks.setCursor!.push(uPlugin.hooks.setCursor);
     }

diff --git a/src/YagrCore/utils/types.ts b/src/YagrCore/utils/types.ts
@@ -15,6 +15,7 @@ export const Scale: YScale = {
         Ordinal: 2 as uScale.Distr.Ordinal,
         Logarithmic: 3 as uScale.Distr.Logarithmic,
         ArcSinh: 4 as uScale.Distr.ArcSinh,
+        Custom: 5 as uScale.Distr.Custom,
     },
 };
 

diff --git a/tests/plugins/cursor.test.ts b/tests/plugins/cursor.test.ts
@@ -41,6 +41,32 @@ describe('cursor plugin', () => {
         });
     });
 
+    describe('markers', () => {
+        const el = document.createElement('div');
+        document.body.appendChild(el);
+
+        afterAll(() => {
+            document.body.removeChild(el);
+        });
+
+        const y = new Yagr(el, {
+            timeline: [1, 2, 3],
+            cursor: {maxMarkers: 100 },
+            series: Array.from({ length: 100 }).fill(0).map((_, i) => ({
+                id: String(i),
+                data: [1, 2, 3],
+                color: 'rgb(255, 0, 0)'
+            }))
+        });
+
+        y.reflow();
+
+        it('should use the maxMarkers option', () => {
+            const n = document.querySelectorAll('.yagr-point');
+            expect(n.length).toBe(100 + 2);
+        });
+    });
+
     describe('methods', () => {
         const el = document.createElement('div');
         document.body.appendChild(el);