Extracted logic to render graph from GraphCard to DefatlChart component

This commit is contained in:
Alejandro Celaya 2020-06-06 10:35:13 +02:00
parent 72dd2bd0a7
commit 770cc59448
3 changed files with 131 additions and 112 deletions

View file

@ -0,0 +1,121 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Doughnut, HorizontalBar } from 'react-chartjs-2';
import { keys, values } from 'ramda';
import { fillTheGaps } from '../../utils/helpers/visits';
const propTypes = {
title: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]),
isBarChart: PropTypes.bool,
stats: PropTypes.object,
max: PropTypes.number,
highlightedStats: PropTypes.object,
highlightedLabel: PropTypes.string,
onClick: PropTypes.func,
};
const generateGraphData = (title, isBarChart, labels, data, highlightedData, highlightedLabel) => ({
labels,
datasets: [
{
title,
label: highlightedData ? 'Non-selected' : 'Visits',
data,
backgroundColor: isBarChart ? 'rgba(70, 150, 229, 0.4)' : [
'#97BBCD',
'#F7464A',
'#46BFBD',
'#FDB45C',
'#949FB1',
'#57A773',
'#414066',
'#08B2E3',
'#B6C454',
'#DCDCDC',
'#463730',
],
borderColor: isBarChart ? 'rgba(70, 150, 229, 1)' : 'white',
borderWidth: 2,
},
highlightedData && {
title,
label: highlightedLabel || 'Selected',
data: highlightedData,
backgroundColor: 'rgba(247, 127, 40, 0.4)',
borderColor: '#F77F28',
borderWidth: 2,
},
].filter(Boolean),
});
const dropLabelIfHidden = (label) => label.startsWith('hidden') ? '' : label;
const determineHeight = (isBarChart, labels) => {
if (!isBarChart && labels.length > 8) {
return 200;
}
return isBarChart && labels.length > 20 ? labels.length * 8 : null;
};
const DefaultChart = ({ title, isBarChart, stats, max, highlightedStats, highlightedLabel, onClick }) => {
const hasHighlightedStats = highlightedStats && Object.keys(highlightedStats).length > 0;
const Component = isBarChart ? HorizontalBar : Doughnut;
const labels = keys(stats).map(dropLabelIfHidden);
const data = values(!hasHighlightedStats ? stats : keys(highlightedStats).reduce((acc, highlightedKey) => {
if (acc[highlightedKey]) {
acc[highlightedKey] -= highlightedStats[highlightedKey];
}
return acc;
}, { ...stats }));
const highlightedData = hasHighlightedStats && fillTheGaps(highlightedStats, labels);
const options = {
legend: isBarChart ? { display: false } : { position: 'right' },
scales: isBarChart && {
xAxes: [
{
ticks: { beginAtZero: true, precision: 0, max },
stacked: true,
},
],
yAxes: [{ stacked: true }],
},
tooltips: {
intersect: !isBarChart,
// Do not show tooltip on items with empty label when in a bar chart
filter: ({ yLabel }) => !isBarChart || yLabel !== '',
},
onHover: isBarChart && (({ target }, chartElement) => {
target.style.cursor = chartElement[0] ? 'pointer' : 'default';
}),
};
const graphData = generateGraphData(title, isBarChart, labels, data, highlightedData, highlightedLabel);
const height = determineHeight(isBarChart, labels);
// 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}
getElementAtEvent={([ chart ]) => {
if (!onClick || !chart) {
return;
}
const { _index, _chart: { data } } = chart;
const { labels } = data;
onClick(labels[_index]);
}}
/>
);
};
DefaultChart.propTypes = propTypes;
export default DefaultChart;

View file

@ -1,9 +1,7 @@
import { Card, CardHeader, CardBody, CardFooter } from 'reactstrap';
import { Doughnut, HorizontalBar } from 'react-chartjs-2';
import PropTypes from 'prop-types';
import React from 'react';
import { keys, values } from 'ramda';
import { fillTheGaps } from '../../utils/helpers/visits';
import DefaultChart from './DefaultChart';
import './GraphCard.scss';
const propTypes = {
@ -17,112 +15,12 @@ const propTypes = {
onClick: PropTypes.func,
};
const generateGraphData = (title, isBarChart, labels, data, highlightedData, highlightedLabel) => ({
labels,
datasets: [
{
title,
label: highlightedData ? 'Non-selected' : 'Visits',
data,
backgroundColor: isBarChart ? 'rgba(70, 150, 229, 0.4)' : [
'#97BBCD',
'#F7464A',
'#46BFBD',
'#FDB45C',
'#949FB1',
'#57A773',
'#414066',
'#08B2E3',
'#B6C454',
'#DCDCDC',
'#463730',
],
borderColor: isBarChart ? 'rgba(70, 150, 229, 1)' : 'white',
borderWidth: 2,
},
highlightedData && {
title,
label: highlightedLabel || 'Selected',
data: highlightedData,
backgroundColor: 'rgba(247, 127, 40, 0.4)',
borderColor: '#F77F28',
borderWidth: 2,
},
].filter(Boolean),
});
const dropLabelIfHidden = (label) => label.startsWith('hidden') ? '' : label;
const determineHeight = (isBarChart, labels) => {
if (!isBarChart && labels.length > 8) {
return 200;
}
return isBarChart && labels.length > 20 ? labels.length * 8 : null;
};
const renderGraph = (title, isBarChart, stats, max, highlightedStats, highlightedLabel, onClick) => {
const hasHighlightedStats = highlightedStats && Object.keys(highlightedStats).length > 0;
const Component = isBarChart ? HorizontalBar : Doughnut;
const labels = keys(stats).map(dropLabelIfHidden);
const data = values(!hasHighlightedStats ? stats : keys(highlightedStats).reduce((acc, highlightedKey) => {
if (acc[highlightedKey]) {
acc[highlightedKey] -= highlightedStats[highlightedKey];
}
return acc;
}, { ...stats }));
const highlightedData = hasHighlightedStats && fillTheGaps(highlightedStats, labels);
const options = {
legend: isBarChart ? { display: false } : { position: 'right' },
scales: isBarChart && {
xAxes: [
{
ticks: { beginAtZero: true, precision: 0, max },
stacked: true,
},
],
yAxes: [{ stacked: true }],
},
tooltips: {
intersect: !isBarChart,
// Do not show tooltip on items with empty label when in a bar chart
filter: ({ yLabel }) => !isBarChart || yLabel !== '',
},
onHover: isBarChart && (({ target }, chartElement) => {
target.style.cursor = chartElement[0] ? 'pointer' : 'default';
}),
};
const graphData = generateGraphData(title, isBarChart, labels, data, highlightedData, highlightedLabel);
const height = determineHeight(isBarChart, labels);
// 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}
getElementAtEvent={([ chart ]) => {
if (!onClick || !chart) {
return;
}
const { _index, _chart: { data } } = chart;
const { labels } = data;
onClick(labels[_index]);
}}
/>
);
};
const GraphCard = ({ title, footer, isBarChart, stats, max, highlightedStats, highlightedLabel, onClick }) => (
const GraphCard = ({ title, footer, ...rest }) => (
<Card>
<CardHeader className="graph-card__header">{typeof title === 'function' ? title() : title}</CardHeader>
<CardBody>{renderGraph(title, isBarChart, stats, max, highlightedStats, highlightedLabel, onClick)}</CardBody>
<CardBody>
<DefaultChart title={title} {...rest} />
</CardBody>
{footer && <CardFooter className="graph-card__footer--sticky">{footer}</CardFooter>}
</Card>
);

View file

@ -2,9 +2,9 @@ import React from 'react';
import { shallow } from 'enzyme';
import { Doughnut, HorizontalBar } from 'react-chartjs-2';
import { keys, values } from 'ramda';
import GraphCard from '../../../src/visits/helpers/GraphCard';
import DefaultChart from '../../../src/visits/helpers/DefaultChart';
describe('<GraphCard />', () => {
describe('<DefaultChart />', () => {
let wrapper;
const stats = {
foo: 123,
@ -14,7 +14,7 @@ describe('<GraphCard />', () => {
afterEach(() => wrapper && wrapper.unmount());
it('renders Doughnut when is not a bar chart', () => {
wrapper = shallow(<GraphCard title="The chart" stats={stats} />);
wrapper = shallow(<DefaultChart title="The chart" stats={stats} />);
const doughnut = wrapper.find(Doughnut);
const horizontal = wrapper.find(HorizontalBar);
@ -48,7 +48,7 @@ describe('<GraphCard />', () => {
});
it('renders HorizontalBar when is not a bar chart', () => {
wrapper = shallow(<GraphCard isBarChart title="The chart" stats={stats} />);
wrapper = shallow(<DefaultChart isBarChart title="The chart" stats={stats} />);
const doughnut = wrapper.find(Doughnut);
const horizontal = wrapper.find(HorizontalBar);
@ -79,7 +79,7 @@ describe('<GraphCard />', () => {
[{ bar: 20, foo: 13 }, [ 110, 436 ], [ 13, 20 ]],
[ undefined, [ 123, 456 ], undefined ],
])('splits highlighted data from regular data', (highlightedStats, expectedData, expectedHighlightedData) => {
wrapper = shallow(<GraphCard isBarChart title="The chart" stats={stats} highlightedStats={highlightedStats} />);
wrapper = shallow(<DefaultChart isBarChart title="The chart" stats={stats} highlightedStats={highlightedStats} />);
const horizontal = wrapper.find(HorizontalBar);
const { datasets: [{ data, label }, highlightedData ] } = horizontal.prop('data');