mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 09:30:31 +03:00
Ensured bar charts are regenerated when their height changes
This commit is contained in:
parent
e0db6d5a57
commit
391424d8a1
4 changed files with 13 additions and 33 deletions
|
@ -4,7 +4,7 @@ All notable changes to this project will be documented in this file.
|
||||||
|
|
||||||
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
|
||||||
|
|
||||||
## [Unreleased]
|
## 2.0.3 - 2019-03-16
|
||||||
|
|
||||||
#### Added
|
#### Added
|
||||||
|
|
||||||
|
@ -26,6 +26,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
||||||
|
|
||||||
* [#120](https://github.com/shlinkio/shlink-web-client/issues/120) Fixed crash when visits page is loaded and there are no visits with known cities.
|
* [#120](https://github.com/shlinkio/shlink-web-client/issues/120) Fixed crash when visits page is loaded and there are no visits with known cities.
|
||||||
* [#113](https://github.com/shlinkio/shlink-web-client/issues/113) Ensured visits loading is cancelled when the visits page is unmounted. Requests on flight will still finish.
|
* [#113](https://github.com/shlinkio/shlink-web-client/issues/113) Ensured visits loading is cancelled when the visits page is unmounted. Requests on flight will still finish.
|
||||||
|
* [#118](https://github.com/shlinkio/shlink-web-client/issues/118) Fixed chart crashing when trying to render lots of bars by adding pagination.
|
||||||
|
|
||||||
|
|
||||||
## 2.0.2 - 2019-03-04
|
## 2.0.2 - 2019-03-04
|
||||||
|
|
|
@ -11,7 +11,6 @@ const propTypes = {
|
||||||
isBarChart: PropTypes.bool,
|
isBarChart: PropTypes.bool,
|
||||||
stats: PropTypes.object,
|
stats: PropTypes.object,
|
||||||
max: PropTypes.number,
|
max: PropTypes.number,
|
||||||
redraw: PropTypes.bool,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const generateGraphData = (title, isBarChart, labels, data) => ({
|
const generateGraphData = (title, isBarChart, labels, data) => ({
|
||||||
|
@ -37,19 +36,19 @@ const generateGraphData = (title, isBarChart, labels, data) => ({
|
||||||
|
|
||||||
const dropLabelIfHidden = (label) => label.startsWith('hidden') ? '' : label;
|
const dropLabelIfHidden = (label) => label.startsWith('hidden') ? '' : label;
|
||||||
|
|
||||||
const renderGraph = (title, isBarChart, stats, max, redraw) => {
|
const renderGraph = (title, isBarChart, stats, max) => {
|
||||||
const Component = isBarChart ? HorizontalBar : Doughnut;
|
const Component = isBarChart ? HorizontalBar : Doughnut;
|
||||||
const labels = keys(stats).map(dropLabelIfHidden);
|
const labels = keys(stats).map(dropLabelIfHidden);
|
||||||
const data = values(stats);
|
const data = values(stats);
|
||||||
const options = {
|
const options = {
|
||||||
legend: isBarChart ? { display: false } : { position: 'right' },
|
legend: isBarChart ? { display: false } : { position: 'right' },
|
||||||
scales: isBarChart ? {
|
scales: isBarChart && {
|
||||||
xAxes: [
|
xAxes: [
|
||||||
{
|
{
|
||||||
ticks: { beginAtZero: true, max },
|
ticks: { beginAtZero: true, max },
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
} : null,
|
},
|
||||||
tooltips: {
|
tooltips: {
|
||||||
intersect: !isBarChart,
|
intersect: !isBarChart,
|
||||||
|
|
||||||
|
@ -58,15 +57,16 @@ const renderGraph = (title, isBarChart, stats, max, redraw) => {
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
const graphData = generateGraphData(title, isBarChart, labels, data);
|
const graphData = generateGraphData(title, isBarChart, labels, data);
|
||||||
const height = labels.length < 20 ? null : labels.length * 8;
|
const height = isBarChart && labels.length > 20 ? labels.length * 8 : null;
|
||||||
|
|
||||||
return <Component data={graphData} options={options} height={height} redraw={redraw} />;
|
// Provide a key based on the height, so that every time the dataset changes, a new graph is rendered
|
||||||
|
return <Component key={height} data={graphData} options={options} height={height} />;
|
||||||
};
|
};
|
||||||
|
|
||||||
const GraphCard = ({ title, footer, isBarChart, stats, max, redraw = false }) => (
|
const GraphCard = ({ title, footer, isBarChart, stats, max }) => (
|
||||||
<Card className="mt-4">
|
<Card className="mt-4">
|
||||||
<CardHeader className="graph-card__header">{typeof title === 'function' ? title() : title}</CardHeader>
|
<CardHeader className="graph-card__header">{typeof title === 'function' ? title() : title}</CardHeader>
|
||||||
<CardBody>{renderGraph(title, isBarChart, stats, max, redraw)}</CardBody>
|
<CardBody>{renderGraph(title, isBarChart, stats, max)}</CardBody>
|
||||||
{footer && <CardFooter className="graph-card__footer--sticky">{footer}</CardFooter>}
|
{footer && <CardFooter className="graph-card__footer--sticky">{footer}</CardFooter>}
|
||||||
</Card>
|
</Card>
|
||||||
);
|
);
|
||||||
|
|
|
@ -26,15 +26,6 @@ export default class SortableBarGraph extends React.Component {
|
||||||
currentPage: 1,
|
currentPage: 1,
|
||||||
itemsPerPage: Infinity,
|
itemsPerPage: Infinity,
|
||||||
};
|
};
|
||||||
redrawChart = false;
|
|
||||||
|
|
||||||
doRedrawChart() {
|
|
||||||
const prev = this.redrawChart;
|
|
||||||
|
|
||||||
this.redrawChart = false;
|
|
||||||
|
|
||||||
return prev;
|
|
||||||
}
|
|
||||||
|
|
||||||
determineStats(stats, sortingItems) {
|
determineStats(stats, sortingItems) {
|
||||||
const pairs = toPairs(stats);
|
const pairs = toPairs(stats);
|
||||||
|
@ -116,10 +107,7 @@ export default class SortableBarGraph extends React.Component {
|
||||||
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.setState({ itemsPerPage, currentPage: 1 })}
|
||||||
this.redrawChart = true;
|
|
||||||
this.setState({ itemsPerPage, currentPage: 1 });
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
@ -131,15 +119,6 @@ export default class SortableBarGraph extends React.Component {
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return <GraphCard isBarChart title={computeTitle} stats={currentPageStats} footer={pagination} max={max} />;
|
||||||
<GraphCard
|
|
||||||
isBarChart
|
|
||||||
title={computeTitle}
|
|
||||||
stats={currentPageStats}
|
|
||||||
footer={pagination}
|
|
||||||
max={max}
|
|
||||||
redraw={this.doRedrawChart()}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -39,7 +39,7 @@ describe('<GraphCard />', () => {
|
||||||
]);
|
]);
|
||||||
expect(borderColor).toEqual('white');
|
expect(borderColor).toEqual('white');
|
||||||
expect(legend).toEqual({ position: 'right' });
|
expect(legend).toEqual({ position: 'right' });
|
||||||
expect(scales).toBeNull();
|
expect(scales).toBeUndefined();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('renders HorizontalBar when is not a bar chart', () => {
|
it('renders HorizontalBar when is not a bar chart', () => {
|
||||||
|
|
Loading…
Reference in a new issue