2019-03-10 10:28:14 +03:00
|
|
|
import { Card, CardHeader, CardBody, CardFooter } from 'reactstrap';
|
2018-09-01 12:08:27 +03:00
|
|
|
import { Doughnut, HorizontalBar } from 'react-chartjs-2';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import React from 'react';
|
2020-04-04 21:16:20 +03:00
|
|
|
import { keys, values, zipObj } from 'ramda';
|
2019-03-10 12:08:42 +03:00
|
|
|
import './GraphCard.scss';
|
2018-09-01 12:08:27 +03:00
|
|
|
|
|
|
|
const propTypes = {
|
2019-03-10 19:55:02 +03:00
|
|
|
title: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]),
|
2019-03-10 10:28:14 +03:00
|
|
|
footer: PropTypes.oneOfType([ PropTypes.string, PropTypes.node ]),
|
2018-09-01 12:08:27 +03:00
|
|
|
isBarChart: PropTypes.bool,
|
|
|
|
stats: PropTypes.object,
|
2019-03-10 10:28:14 +03:00
|
|
|
max: PropTypes.number,
|
2020-04-04 21:16:20 +03:00
|
|
|
highlightedStats: PropTypes.object,
|
2020-04-10 12:59:53 +03:00
|
|
|
onClick: PropTypes.func,
|
2018-09-01 12:08:27 +03:00
|
|
|
};
|
|
|
|
|
2020-04-04 21:16:20 +03:00
|
|
|
const generateGraphData = (title, isBarChart, labels, data, highlightedData) => ({
|
2018-10-19 21:27:25 +03:00
|
|
|
labels,
|
2018-10-19 20:04:22 +03:00
|
|
|
datasets: [
|
|
|
|
{
|
|
|
|
title,
|
2020-04-10 13:57:14 +03:00
|
|
|
label: highlightedData && 'Non-selected',
|
2018-10-19 21:27:25 +03:00
|
|
|
data,
|
2018-10-19 20:04:22 +03:00
|
|
|
backgroundColor: isBarChart ? 'rgba(70, 150, 229, 0.4)' : [
|
|
|
|
'#97BBCD',
|
|
|
|
'#DCDCDC',
|
|
|
|
'#F7464A',
|
|
|
|
'#46BFBD',
|
|
|
|
'#FDB45C',
|
|
|
|
'#949FB1',
|
|
|
|
'#4D5360',
|
|
|
|
],
|
|
|
|
borderColor: isBarChart ? 'rgba(70, 150, 229, 1)' : 'white',
|
|
|
|
borderWidth: 2,
|
|
|
|
},
|
2020-04-04 21:16:20 +03:00
|
|
|
highlightedData && {
|
|
|
|
title,
|
|
|
|
label: 'Selected',
|
|
|
|
data: highlightedData,
|
|
|
|
backgroundColor: 'rgba(247, 127, 40, 0.4)',
|
|
|
|
borderColor: '#F77F28',
|
|
|
|
borderWidth: 2,
|
|
|
|
},
|
|
|
|
].filter(Boolean),
|
2018-10-19 20:04:22 +03:00
|
|
|
});
|
2018-09-01 12:08:27 +03:00
|
|
|
|
2019-03-10 10:28:14 +03:00
|
|
|
const dropLabelIfHidden = (label) => label.startsWith('hidden') ? '' : label;
|
2018-10-19 21:27:25 +03:00
|
|
|
|
2020-04-10 12:59:53 +03:00
|
|
|
const renderGraph = (title, isBarChart, stats, max, highlightedStats, onClick) => {
|
|
|
|
const hasHighlightedStats = highlightedStats && Object.keys(highlightedStats).length > 0;
|
2018-10-19 20:04:22 +03:00
|
|
|
const Component = isBarChart ? HorizontalBar : Doughnut;
|
2019-03-10 10:28:14 +03:00
|
|
|
const labels = keys(stats).map(dropLabelIfHidden);
|
2020-04-10 12:59:53 +03:00
|
|
|
const data = values(!hasHighlightedStats ? stats : keys(highlightedStats).reduce((acc, highlightedKey) => {
|
2020-04-04 21:16:20 +03:00
|
|
|
if (acc[highlightedKey]) {
|
2020-04-05 12:57:39 +03:00
|
|
|
acc[highlightedKey] -= highlightedStats[highlightedKey];
|
2020-04-04 21:16:20 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
return acc;
|
2020-04-09 10:44:14 +03:00
|
|
|
}, { ...stats }));
|
2020-04-10 12:59:53 +03:00
|
|
|
const highlightedData = hasHighlightedStats && values(
|
|
|
|
{ ...zipObj(labels, labels.map(() => 0)), ...highlightedStats }
|
|
|
|
);
|
2020-04-04 21:16:20 +03:00
|
|
|
|
2018-10-19 20:04:22 +03:00
|
|
|
const options = {
|
|
|
|
legend: isBarChart ? { display: false } : { position: 'right' },
|
2019-03-16 11:02:10 +03:00
|
|
|
scales: isBarChart && {
|
2018-10-19 20:04:22 +03:00
|
|
|
xAxes: [
|
|
|
|
{
|
2019-03-10 10:28:14 +03:00
|
|
|
ticks: { beginAtZero: true, max },
|
2020-04-04 21:16:20 +03:00
|
|
|
stacked: true,
|
2018-10-19 20:04:22 +03:00
|
|
|
},
|
|
|
|
],
|
2020-04-04 21:16:20 +03:00
|
|
|
yAxes: [{ stacked: true }],
|
2019-03-16 11:02:10 +03:00
|
|
|
},
|
2018-10-30 22:41:36 +03:00
|
|
|
tooltips: {
|
|
|
|
intersect: !isBarChart,
|
2019-03-10 10:28:14 +03:00
|
|
|
|
|
|
|
// Do not show tooltip on items with empty label when in a bar chart
|
|
|
|
filter: ({ yLabel }) => !isBarChart || yLabel !== '',
|
2018-10-30 22:41:36 +03:00
|
|
|
},
|
2020-04-10 14:04:39 +03:00
|
|
|
onHover: isBarChart && (({ target }, chartElement) => {
|
|
|
|
target.style.cursor = chartElement[0] ? 'pointer' : 'default';
|
|
|
|
}),
|
2018-09-01 12:08:27 +03:00
|
|
|
};
|
2020-04-04 21:16:20 +03:00
|
|
|
const graphData = generateGraphData(title, isBarChart, labels, data, highlightedData);
|
2019-03-16 11:02:10 +03:00
|
|
|
const height = isBarChart && labels.length > 20 ? labels.length * 8 : null;
|
2018-09-01 12:08:27 +03:00
|
|
|
|
2019-03-16 11:02:10 +03:00
|
|
|
// Provide a key based on the height, so that every time the dataset changes, a new graph is rendered
|
2020-04-10 12:59:53 +03:00
|
|
|
return (
|
|
|
|
<Component
|
|
|
|
key={height}
|
|
|
|
data={graphData}
|
|
|
|
options={options}
|
|
|
|
height={height}
|
|
|
|
getElementAtEvent={([ chart ]) => {
|
|
|
|
if (!onClick || !chart) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
const { _index, _chart: { data } } = chart;
|
|
|
|
const { labels } = data;
|
|
|
|
|
|
|
|
onClick(labels[_index]);
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
);
|
2018-10-19 20:04:22 +03:00
|
|
|
};
|
|
|
|
|
2020-04-10 12:59:53 +03:00
|
|
|
const GraphCard = ({ title, footer, isBarChart, stats, max, highlightedStats, onClick }) => (
|
2018-10-19 20:04:22 +03:00
|
|
|
<Card className="mt-4">
|
2019-03-10 19:55:02 +03:00
|
|
|
<CardHeader className="graph-card__header">{typeof title === 'function' ? title() : title}</CardHeader>
|
2020-04-10 12:59:53 +03:00
|
|
|
<CardBody>{renderGraph(title, isBarChart, stats, max, highlightedStats, onClick)}</CardBody>
|
2019-03-10 12:08:42 +03:00
|
|
|
{footer && <CardFooter className="graph-card__footer--sticky">{footer}</CardFooter>}
|
2018-10-19 20:04:22 +03:00
|
|
|
</Card>
|
|
|
|
);
|
2018-09-01 12:08:27 +03:00
|
|
|
|
|
|
|
GraphCard.propTypes = propTypes;
|
2018-10-19 20:04:22 +03:00
|
|
|
|
|
|
|
export default GraphCard;
|