Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

An option to disable the pagination #228

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

An option to disable the pagination #228

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4b54668
An option to disable the pagination
bt4R9 Oct 11, 2024
276a7bc
Merge branch 'main' into pagination_off
bt4R9 Oct 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 56 additions & 0 deletions demo/examples/legend.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,11 @@ <h1>Legend</h1>

<div class="grid">
<div id="chart7" class="container"></div>
<div id="chart8" class="container"></div>
</div>

<div class="grid">
<div id="chart9" class="container"></div>
</div>

<script>
Expand Down Expand Up @@ -198,6 +203,57 @@ <h1>Legend</h1>
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(100).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 y9 = new Yagr(chart9, {
title: {text: 'Pagination off'},
timeline: new Array(100).fill(1).map((_, i) => i + 1),
series: new Array(100).fill(1).map((x, i) => {
return {
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',
};
}),
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>
5 changes: 5 additions & 0 deletions src/YagrCore/plugins/legend/legend.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,11 @@ $block: yagr-legend;
width: 100%;
height: 100%;
overflow: hidden;

&_scroll {
overflow-x: hidden;
overflow-y: auto;
}
}

&__items {
Expand Down
11 changes: 9 additions & 2 deletions src/YagrCore/plugins/legend/legend.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -95,6 +97,7 @@ export default class LegendPlugin {
maxLegendSpace: DEFAULT_LEGEND_PLACE_RATIO,
className: undefined,
behaviour: 'basic',
pagination: true,
},
options || {},
);
Expand Down Expand Up @@ -330,10 +333,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';
}

Expand Down Expand Up @@ -486,7 +493,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;
Expand Down
Loading