An option to disable the pagination

gravity-ui · Oct 11, 2024 · 4b54668 · 4b54668
1 parent 437a940
commit 4b54668
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 2 deletions.
diff --git a/demo/examples/legend.html b/demo/examples/legend.html
@@ -35,6 +35,11 @@ <h1>Legend</h1>
             <div id="chart6" class="container"></div>
         </div>
 
+        <div class="grid">
+            <div id="chart7" class="container"></div>
+            <div id="chart8" class="container"></div>
+        </div>
+
         <script>
             const y1 = new Yagr(chart1, {
                 title: {text: 'On top'},
@@ -166,6 +171,56 @@ <h1>Legend</h1>
                     behaviour: 'extended',
                 },
             });
+
+            const y7 = new Yagr(chart7, {
+                title: {text: 'Pagination on'},
+                timeline: [1, 2, 3],
+                series: new Array(60).fill(1).map((x) => {
+                    return {
+                        data: new Array(3).fill(1).map(() => Math.floor(Math.random() * 4)),
+                        color: `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`,
+                        type: 'line',
+                    };
+                }),
+                axes: {
+                    y: {values: (u, v) => v.map((x) => x + ' Mb')},
+                },
+                scales: {
+                    y: {min: 0, max: 5},
+                },
+                legend: {
+                    show: true,
+                    position: 'bottom',
+                    maxLegendSpace: 0.2,
+                    behaviour: 'extended',
+                    pagination: true,
+                },
+            });
+
+            const y8 = new Yagr(chart8, {
+                title: {text: 'Pagination off'},
+                timeline: [1, 2, 3],
+                series: new Array(60).fill(1).map((x, i) => {
+                    return {
+                        data: new Array(3).fill(1).map(() => Math.floor(Math.random() * 4)),
+                        color: `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`,
+                        type: 'line',
+                    };
+                }),
+                axes: {
+                    y: {values: (u, v) => v.map((x) => x + ' Mb')},
+                },
+                scales: {
+                    y: {min: 0, max: 5},
+                },
+                legend: {
+                    show: true,
+                    position: 'bottom',
+                    maxLegendSpace: 0.2,
+                    behaviour: 'extended',
+                    pagination: false,
+                },
+            });
         </script>
     </body>
 </html>
diff --git a/src/YagrCore/plugins/legend/legend.scss b/src/YagrCore/plugins/legend/legend.scss
@@ -14,6 +14,11 @@ $block: yagr-legend;
         width: 100%;
         height: 100%;
         overflow: hidden;
+
+        &_scroll {
+            overflow-x: hidden;
+            overflow-y: auto;
+        }
     }
 
     &__items {

diff --git a/src/YagrCore/plugins/legend/legend.ts b/src/YagrCore/plugins/legend/legend.ts
@@ -19,6 +19,8 @@ export interface LegendOptions {
     fontSize?: number;
     /** Basic behaviour includes only toggle behaviuor ("Hide/show all" button exists) */
     behaviour?: 'basic' | 'extended';
+    /** Displays pagination if rows exceed the available height (default: true) */
+    pagination?: boolean;
 }
 
 interface LegendState {
@@ -95,6 +97,7 @@ export default class LegendPlugin {
                 maxLegendSpace: DEFAULT_LEGEND_PLACE_RATIO,
                 className: undefined,
                 behaviour: 'basic',
+                pagination: true,
             },
             options || {},
         );
@@ -325,10 +328,14 @@ export default class LegendPlugin {
         this.items = legendEl.querySelector('.yagr-legend__items') as HTMLElement;
         this.container = legendEl.querySelector('.yagr-legend__container') as HTMLElement;
 
+        if (!this.options.pagination) {
+            this.container.classList.add('yagr-legend__container_scroll');
+        }
+
         if (this.state.paginated) {
             const pagination = this.renderPagination();
             this.container?.after(pagination);
-        } else {
+        } else if (this.options.pagination) {
             this.items.style.justifyContent = 'center';
         }
 
@@ -481,7 +488,7 @@ export default class LegendPlugin {
         const itemsRowsPerPage = rowsPerPage - 1;
         const itemsPageSize = Math.min(itemsRowsPerPage * rowHeight, maxPossiblePlace);
         const paginatedPageSize = Math.min(rowsPerPage * rowHeight, maxPossiblePlace);
-        const paginated = requiredHeight > itemsPageSize && itemsPageSize > 0;
+        const paginated = Boolean(this.options.pagination) && requiredHeight > itemsPageSize && itemsPageSize > 0;
         const requiredSpace = Math.min(paginated ? paginatedPageSize : itemsPageSize, requiredHeight);
         const pages = Math.ceil(requiredHeight / itemsPageSize);
         const additionalSpace = paginated ? this.VERTICAL_PADDING + PAGINATION_BUTTON_HEIGHT : this.VERTICAL_PADDING;