Hi all,
I am working on IS analytics migration to Stream Processor (From DAS) and
had to implement pagination support for Bar chart (In react VizGrammar).
I thought to share the implementation details with you, in case any of you
need such functionality.
I used Material-UI pagination (import Pagination from
'material-ui-pagination';)
following function is used to split data into slices and show them in the
chart.
updateTable(pageNumber) {
let internalPageNumber = pageNumber - 1; // Internally pages are
counted from 0, to make logic easy.
let dataPerPage = 10; // Number of data shown per page
let startPoint = internalPageNumber * dataPerPage;
let endPoint = startPoint + dataPerPage;
let totalPageCount = Math.ceil(this.state.data.length / dataPerPage);
if (internalPageNumber < 0) {
console.error("[ERROR]: Wrong page number", pageNumber,
"Provided. Page number should be positive integer.");
} else if (pageNumber > totalPageCount) {
console.error("[ERROR]: Wrong page number", pageNumber,
"Provided. Page number exceeds total page count, ", totalPageCount);
}
else {
let dataLength = this.state.data.length;
if (endPoint > dataLength) {
endPoint = dataLength;
}
let dataSet = this.state.data.slice(startPoint, endPoint);
this.setState({
currentDataSet: dataSet,
currentPageNumber: pageNumber,
pageCount: totalPageCount,
});
}
Then from the render function we can use this updateTable function to use
pagination.
<Pagination
total={this.state.
p
ageCount}
current={this.state.currentPageNumber}
display={3}
onChange={number => this.updateTable(number)}
/>
Hope you'll find this helpful.
--
Thanks and Best Regards,
Thisaru Guruge
Software Engineer
Mobile: +94 71 720 9720
WSO2 Inc.: http://www.wso2.com
_______________________________________________
Dev mailing list
[email protected]
http://wso2.org/cgi-bin/mailman/listinfo/dev
