mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2025-01-10 02:07:26 +03:00
Applied some naming improvements
This commit is contained in:
parent
61480abd2e
commit
1ad4290487
2 changed files with 14 additions and 13 deletions
|
@ -94,7 +94,7 @@ const ShortUrlVisits = ({ processStatsFromVisits }) => class ShortUrlVisits exte
|
||||||
<div className="col-xl-4">
|
<div className="col-xl-4">
|
||||||
<SortableBarGraph
|
<SortableBarGraph
|
||||||
stats={referrers}
|
stats={referrers}
|
||||||
supportPagination={false}
|
withPagination={false}
|
||||||
title="Referrers"
|
title="Referrers"
|
||||||
sortingItems={{
|
sortingItems={{
|
||||||
name: 'Referrer name',
|
name: 'Referrer name',
|
||||||
|
|
|
@ -17,7 +17,7 @@ export default class SortableBarGraph extends React.Component {
|
||||||
title: PropTypes.string.isRequired,
|
title: PropTypes.string.isRequired,
|
||||||
sortingItems: PropTypes.object.isRequired,
|
sortingItems: PropTypes.object.isRequired,
|
||||||
extraHeaderContent: PropTypes.node,
|
extraHeaderContent: PropTypes.node,
|
||||||
supportPagination: PropTypes.bool,
|
withPagination: PropTypes.bool,
|
||||||
};
|
};
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
|
@ -26,23 +26,24 @@ export default class SortableBarGraph extends React.Component {
|
||||||
currentPage: 1,
|
currentPage: 1,
|
||||||
itemsPerPage: Infinity,
|
itemsPerPage: Infinity,
|
||||||
};
|
};
|
||||||
redraw = false;
|
redrawChart = false;
|
||||||
|
|
||||||
doRedraw() {
|
doRedrawChart() {
|
||||||
const prev = this.redraw;
|
const prev = this.redrawChart;
|
||||||
|
|
||||||
this.redraw = false;
|
this.redrawChart = false;
|
||||||
|
|
||||||
return prev;
|
return prev;
|
||||||
}
|
}
|
||||||
|
|
||||||
determineStats(stats, sortingItems) {
|
determineStats(stats, sortingItems) {
|
||||||
const sortedPairs = !this.state.orderField ? toPairs(stats) : sortBy(
|
const pairs = toPairs(stats);
|
||||||
|
const sortedPairs = !this.state.orderField ? pairs : sortBy(
|
||||||
pipe(
|
pipe(
|
||||||
prop(this.state.orderField === head(keys(sortingItems)) ? 0 : 1),
|
prop(this.state.orderField === head(keys(sortingItems)) ? 0 : 1),
|
||||||
toLowerIfString
|
toLowerIfString
|
||||||
),
|
),
|
||||||
toPairs(stats)
|
pairs
|
||||||
);
|
);
|
||||||
const directionalPairs = !this.state.orderDir || this.state.orderDir === 'ASC' ? sortedPairs : reverse(sortedPairs);
|
const directionalPairs = !this.state.orderDir || this.state.orderDir === 'ASC' ? sortedPairs : reverse(sortedPairs);
|
||||||
|
|
||||||
|
@ -93,7 +94,8 @@ export default class SortableBarGraph extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { stats, sortingItems, title, extraHeaderContent, supportPagination = true } = this.props;
|
const { stats, sortingItems, title, extraHeaderContent, withPagination = true } = this.props;
|
||||||
|
const { currentPageStats, pagination, max } = this.determineStats(stats, sortingItems);
|
||||||
const computedTitle = (
|
const computedTitle = (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
{title}
|
{title}
|
||||||
|
@ -107,14 +109,14 @@ export default class SortableBarGraph extends React.Component {
|
||||||
onChange={(orderField, orderDir) => this.setState({ orderField, orderDir, currentPage: 1 })}
|
onChange={(orderField, orderDir) => this.setState({ orderField, orderDir, currentPage: 1 })}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
{supportPagination && (
|
{withPagination && keys(stats).length > 50 && (
|
||||||
<div className="float-right">
|
<div className="float-right">
|
||||||
<PaginationDropdown
|
<PaginationDropdown
|
||||||
toggleClassName="btn-sm paddingless mr-3"
|
toggleClassName="btn-sm paddingless mr-3"
|
||||||
ranges={[ 50, 100, 200, 500 ]}
|
ranges={[ 50, 100, 200, 500 ]}
|
||||||
value={this.state.itemsPerPage}
|
value={this.state.itemsPerPage}
|
||||||
setValue={(itemsPerPage) => {
|
setValue={(itemsPerPage) => {
|
||||||
this.redraw = true;
|
this.redrawChart = true;
|
||||||
this.setState({ itemsPerPage, currentPage: 1 });
|
this.setState({ itemsPerPage, currentPage: 1 });
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
@ -123,7 +125,6 @@ export default class SortableBarGraph extends React.Component {
|
||||||
{extraHeaderContent && <div className="float-right">{extraHeaderContent}</div>}
|
{extraHeaderContent && <div className="float-right">{extraHeaderContent}</div>}
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
);
|
);
|
||||||
const { currentPageStats, pagination, max } = this.determineStats(stats, sortingItems);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<GraphCard
|
<GraphCard
|
||||||
|
@ -132,7 +133,7 @@ export default class SortableBarGraph extends React.Component {
|
||||||
stats={currentPageStats}
|
stats={currentPageStats}
|
||||||
footer={pagination}
|
footer={pagination}
|
||||||
max={max}
|
max={max}
|
||||||
redraw={this.doRedraw()}
|
redraw={this.doRedrawChart()}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue