mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 17:40:23 +03:00
Code Issues Projects Releases Packages Wiki Activity

Updated SortableBarGraph to be a functional component

Browse source
This commit is contained in:
Alejandro Celaya 2020-05-31 11:36:56 +02:00
parent 11f9c7c507
commit 1b60b0e2a8
1 changed files with 95 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

197
src/visits/SortableBarGraph.js
View file

@ -1,4 +1,4 @@
import React from 'react'; import React, { useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { fromPairs, head, keys, pipe, prop, reverse, sortBy, splitEvery, toLower, toPairs, type, zipObj } from 'ramda'; import { fromPairs, head, keys, pipe, prop, reverse, sortBy, splitEvery, toLower, toPairs, type, zipObj } from 'ramda';
import SortingDropdown from '../utils/SortingDropdown'; import SortingDropdown from '../utils/SortingDropdown';
@ -8,73 +8,78 @@ import { roundTen } from '../utils/helpers/numbers';
import SimplePaginator from '../common/SimplePaginator'; import SimplePaginator from '../common/SimplePaginator';
import GraphCard from './GraphCard'; import GraphCard from './GraphCard';
const { max } = Math; const propTypes = {
stats: PropTypes.object.isRequired,
highlightedStats: PropTypes.object,
highlightedLabel: PropTypes.string,
title: PropTypes.string.isRequired,
sortingItems: PropTypes.object.isRequired,
extraHeaderContent: PropTypes.func,
withPagination: PropTypes.bool,
onClick: PropTypes.func,
};
const toLowerIfString = (value) => type(value) === 'String' ? toLower(value) : value; const toLowerIfString = (value) => type(value) === 'String' ? toLower(value) : value;
const pickKeyFromPair = ([ key ]) => key; const pickKeyFromPair = ([ key ]) => key;
const pickValueFromPair = ([ , value ]) => value; const pickValueFromPair = ([ , value ]) => value;
export default class SortableBarGraph extends React.Component { const SortableBarGraph = ({
static propTypes = { stats,
stats: PropTypes.object.isRequired, highlightedStats,
highlightedStats: PropTypes.object, title,
highlightedLabel: PropTypes.string, sortingItems,
title: PropTypes.string.isRequired, extraHeaderContent,
sortingItems: PropTypes.object.isRequired, withPagination = true,
extraHeaderContent: PropTypes.func, ...rest
withPagination: PropTypes.bool, }) => {
onClick: PropTypes.func, const [ order, setOrder ] = useState({
};
state = {
orderField: undefined, orderField: undefined,
orderDir: undefined, orderDir: undefined,
currentPage: 1, });
itemsPerPage: 50, const [ currentPage, setCurrentPage ] = useState(1);
}; const [ itemsPerPage, setItemsPerPage ] = useState(50);
getSortedPairsForStats(stats, sortingItems) { const getSortedPairsForStats = (stats, sortingItems) => {
const pairs = toPairs(stats); const pairs = toPairs(stats);
const sortedPairs = !this.state.orderField ? pairs : sortBy( const sortedPairs = !order.orderField ? pairs : sortBy(
pipe( pipe(
prop(this.state.orderField === head(keys(sortingItems)) ? 0 : 1), prop(order.orderField === head(keys(sortingItems)) ? 0 : 1),
toLowerIfString toLowerIfString
), ),
pairs pairs
); );
return !this.state.orderDir || this.state.orderDir === 'ASC' ? sortedPairs : reverse(sortedPairs); return !order.orderDir || order.orderDir === 'ASC' ? sortedPairs : reverse(sortedPairs);
} };
const determineStats = (stats, highlightedStats, sortingItems) => {
determineStats(stats, highlightedStats, sortingItems) { const sortedPairs = getSortedPairsForStats(stats, sortingItems);
const sortedPairs = this.getSortedPairsForStats(stats, sortingItems);
const sortedKeys = sortedPairs.map(pickKeyFromPair); const sortedKeys = sortedPairs.map(pickKeyFromPair);
// The highlighted stats have to be ordered based on the regular stats, not on its own values // The highlighted stats have to be ordered based on the regular stats, not on its own values
const sortedHighlightedPairs = highlightedStats && toPairs( const sortedHighlightedPairs = highlightedStats && toPairs(
{ ...zipObj(sortedKeys, sortedKeys.map(() => 0)), ...highlightedStats } { ...zipObj(sortedKeys, sortedKeys.map(() => 0)), ...highlightedStats }
); );
if (sortedPairs.length <= this.state.itemsPerPage) { if (sortedPairs.length <= itemsPerPage) {
return { return {
currentPageStats: fromPairs(sortedPairs), currentPageStats: fromPairs(sortedPairs),
currentPageHighlightedStats: sortedHighlightedPairs && fromPairs(sortedHighlightedPairs), currentPageHighlightedStats: sortedHighlightedPairs && fromPairs(sortedHighlightedPairs),
}; };
} }
const pages = splitEvery(this.state.itemsPerPage, sortedPairs); const pages = splitEvery(itemsPerPage, sortedPairs);
const highlightedPages = sortedHighlightedPairs && splitEvery(this.state.itemsPerPage, sortedHighlightedPairs); const highlightedPages = sortedHighlightedPairs && splitEvery(itemsPerPage, sortedHighlightedPairs);
return { return {
currentPageStats: fromPairs(this.determineCurrentPagePairs(pages)), currentPageStats: fromPairs(determineCurrentPagePairs(pages)),
currentPageHighlightedStats: highlightedPages && fromPairs(this.determineCurrentPagePairs(highlightedPages)), currentPageHighlightedStats: highlightedPages && fromPairs(determineCurrentPagePairs(highlightedPages)),
pagination: this.renderPagination(pages.length), pagination: renderPagination(pages.length),
max: roundTen(max(...sortedPairs.map(pickValueFromPair))), max: roundTen(Math.max(...sortedPairs.map(pickValueFromPair))),
}; };
} };
const determineCurrentPagePairs = (pages) => {
const page = pages[currentPage - 1];
determineCurrentPagePairs(pages) { if (currentPage < pages.length) {
const page = pages[this.state.currentPage - 1];
if (this.state.currentPage < pages.length) {
return page; return page;
} }
@ -82,72 +87,60 @@ export default class SortableBarGraph extends React.Component {
// Using the "hidden" key, the chart will just replace the label by an empty string // Using the "hidden" key, the chart will just replace the label by an empty string
return [ ...page, ...rangeOf(firstPageLength - page.length, (i) => [ `hidden_${i}`, 0 ]) ]; return [ ...page, ...rangeOf(firstPageLength - page.length, (i) => [ `hidden_${i}`, 0 ]) ];
} };
const renderPagination = (pagesCount) =>
<SimplePaginator currentPage={currentPage} pagesCount={pagesCount} setCurrentPage={setCurrentPage} />;
renderPagination(pagesCount) { const { currentPageStats, currentPageHighlightedStats, pagination, max } = determineStats(
const { currentPage } = this.state; stats,
const setCurrentPage = (currentPage) => this.setState({ currentPage }); highlightedStats && keys(highlightedStats).length > 0 ? highlightedStats : undefined,
sortingItems
return <SimplePaginator currentPage={currentPage} pagesCount={pagesCount} setCurrentPage={setCurrentPage} />; );
} const activeCities = keys(currentPageStats);
const computeTitle = () => (
render() { <React.Fragment>
const { {title}
stats, <div className="float-right">
highlightedStats, <SortingDropdown
sortingItems, isButton={false}
title, right
extraHeaderContent, items={sortingItems}
withPagination = true, orderField={order.orderField}
...rest orderDir={order.orderDir}
} = this.props; onChange={(orderField, orderDir) => setOrder({ orderField, orderDir }) || setCurrentPage(1)}
const { currentPageStats, currentPageHighlightedStats, pagination, max } = this.determineStats( />
stats, </div>
highlightedStats && keys(highlightedStats).length > 0 ? highlightedStats : undefined, {withPagination && keys(stats).length > 50 && (
sortingItems
);
const activeCities = keys(currentPageStats);
const computeTitle = () => (
<React.Fragment>
{title}
<div className="float-right"> <div className="float-right">
<SortingDropdown <PaginationDropdown
isButton={false} toggleClassName="btn-sm p-0 mr-3"
right ranges={[ 50, 100, 200, 500 ]}
items={sortingItems} value={itemsPerPage}
orderField={this.state.orderField} setValue={(itemsPerPage) => setItemsPerPage(itemsPerPage) || setCurrentPage(1)}
orderDir={this.state.orderDir}
onChange={(orderField, orderDir) => this.setState({ orderField, orderDir, currentPage: 1 })}
/> />
</div> </div>
{withPagination && keys(stats).length > 50 && ( )}
<div className="float-right"> {extraHeaderContent && (
<PaginationDropdown <div className="float-right">
toggleClassName="btn-sm p-0 mr-3" {extraHeaderContent(pagination ? activeCities : undefined)}
ranges={[ 50, 100, 200, 500 ]} </div>
value={this.state.itemsPerPage} )}
setValue={(itemsPerPage) => this.setState({ itemsPerPage, currentPage: 1 })} </React.Fragment>
/> );
</div>
)}
{extraHeaderContent && (
<div className="float-right">
{extraHeaderContent(pagination ? activeCities : undefined)}
</div>
)}
</React.Fragment>
);
return ( return (
<GraphCard <GraphCard
isBarChart isBarChart
title={computeTitle} title={computeTitle}
stats={currentPageStats} stats={currentPageStats}
highlightedStats={currentPageHighlightedStats} highlightedStats={currentPageHighlightedStats}
footer={pagination} footer={pagination}
max={max} max={max}
{...rest} {...rest}
/> />
); );
} };
}
SortableBarGraph.propTypes = propTypes;
export default SortableBarGraph;