Merge branch 'main' into zefirka/screenshot-testing

gravity-ui · Sep 7, 2023 · f9b3427 · f9b3427
2 parents e7ea189 + 2f01d75
commit f9b3427
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 3 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -48,3 +48,28 @@ jobs:
               run: npm ci
             - name: Unit Tests
               run: npm run test:units
+
+    test_screenshots:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v2
+              with:
+                  fetch-depth: 0
+
+            - name: Setup Node
+              uses: actions/setup-node@v2
+              with:
+                  node-version: '18.x'
+                  cache: 'npm'
+            - name: Install Packages
+              run: npm ci
+            - name: Build
+              run: npm run build
+            - name: Unit Tests
+              run: npm run test:screenshots
+
+            - name: Upload screenshots
+              uses: actions/upload-artifact@v2
+              with:
+                  name: screenshots
+                  path: tests/screenshots/tests/__image_snapshots__
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,12 @@
 ### master
 
+## [3.7.13](https://github.com/gravity-ui/yagr/compare/v3.7.12...v3.7.13) (2023-09-05)
+
+
+### Bug Fixes
+
+* forced plot bands to draw only inside plotting area ([#140](https://github.com/gravity-ui/yagr/issues/140)) ([72839b1](https://github.com/gravity-ui/yagr/commit/72839b1c3ceac884230ff21806b5892283109c29))
+
 ## [3.7.12](https://github.com/gravity-ui/yagr/compare/v3.7.11...v3.7.12) (2023-08-31)
 
 

diff --git a/demo/examples/plotlines.html b/demo/examples/plotlines.html
@@ -30,6 +30,10 @@ <h1>Plot lines</h1>
             <div id="chart4" class="container right"></div>
         </div>
 
+        <div class="grid">
+            <div id="chart5" class="container left"></div>
+        </div>
+
         <script>
             const y1 = new Yagr(chart1, {
                 title: {text: 'Vertical lines'},
@@ -118,6 +122,39 @@ <h1>Plot lines</h1>
                     },
                 },
             });
+
+            const y5 = new Yagr(chart5, {
+                title: {text: 'Restrict with plotting area'},
+                timeline: [5, 6, 7, 8],
+                series: [{data: [1000, 2000, 1000, 3000], color: 'red'}],
+                scales: {y: {min: 0, max: 5000}},
+                axes: {
+                    y: {
+                        plotLines: [
+                            {
+                                value: [-1000, 1000],
+                                color: 'rgba(100, 120, 244, 0.3)',
+                            },
+                            {
+                                value: [2000, 12000],
+                                color: 'rgba(130, 20, 244, 0.3)',
+                            },
+                        ],
+                    },
+                    x: {
+                        plotLines: [
+                            {
+                                value: [0, 6],
+                                color: 'rgba(130, 20, 244, 0.3)',
+                            },
+                            {
+                                value: [7, 10],
+                                color: 'rgba(130, 20, 244, 0.3)',
+                            },
+                        ],
+                    },
+                },
+            });
         </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": "3.7.12",
+  "version": "3.7.13",
   "description": "High level wrapper for uPlot",
   "keywords": [
     "canvas",

diff --git a/src/YagrCore/plugins/plotLines/plotLines.ts b/src/YagrCore/plugins/plotLines/plotLines.ts
@@ -54,6 +54,7 @@ export default function plotLinesPlugin(yagr: Yagr, plotLinesCfg: PlotLineConfig
     function renderPlotLines(u: UPlot) {
         const {ctx} = u;
         const {height, top, width, left} = u.bbox;
+        const timeline = u.data[0];
 
         for (const plotLineConfig of plotLines) {
             if (!plotLineConfig.scale) {
@@ -69,6 +70,25 @@ export default function plotLinesPlugin(yagr: Yagr, plotLinesCfg: PlotLineConfig
                 /** This weird code should handles unexpected Inifinities in values */
                 const [fromValue, toValue] = value.map((val) => {
                     if (Math.abs(val) !== Infinity) {
+                        if (scale === DEFAULT_X_SCALE) {
+                            if (val < timeline[0]) {
+                                return timeline[0];
+                            }
+
+                            if (val > timeline[timeline.length - 1]) {
+                                return timeline[timeline.length - 1];
+                            }
+                        } else {
+                            const scaleCfg = u.scales[scale];
+                            if (scaleCfg.min !== undefined && val < scaleCfg.min) {
+                                return scaleCfg.min;
+                            }
+
+                            if (scaleCfg.max !== undefined && val > scaleCfg.max) {
+                                return scaleCfg.max;
+                            }
+                        }
+
                         return val;
                     }