2020-05-30 10:25:15 +03:00
|
|
|
import React, { useState, useMemo } from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
2020-05-30 10:57:21 +03:00
|
|
|
import {
|
|
|
|
Card,
|
|
|
|
CardHeader,
|
|
|
|
CardBody,
|
|
|
|
UncontrolledDropdown,
|
|
|
|
DropdownToggle,
|
|
|
|
DropdownMenu,
|
|
|
|
DropdownItem,
|
|
|
|
} from 'reactstrap';
|
2020-05-30 10:25:15 +03:00
|
|
|
import { Line } from 'react-chartjs-2';
|
|
|
|
import { reverse } from 'ramda';
|
|
|
|
import moment from 'moment';
|
|
|
|
import { VisitType } from '../types';
|
|
|
|
import { fillTheGaps } from '../../utils/helpers/visits';
|
|
|
|
|
|
|
|
const propTypes = {
|
|
|
|
title: PropTypes.string,
|
|
|
|
visits: PropTypes.arrayOf(VisitType),
|
|
|
|
highlightedVisits: PropTypes.arrayOf(VisitType),
|
|
|
|
};
|
|
|
|
|
2020-05-30 10:57:21 +03:00
|
|
|
const steps = [
|
|
|
|
{
|
|
|
|
value: 'monthly',
|
|
|
|
menuText: 'Month',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
value: 'weekly',
|
|
|
|
menuText: 'Week',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
value: 'daily',
|
|
|
|
menuText: 'Day',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
value: 'hourly',
|
|
|
|
menuText: 'Hour',
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
const STEP_TO_DATE_FORMAT = {
|
|
|
|
hourly: (date) => moment(date).format('YYYY-MM-DD HH:00'),
|
|
|
|
daily: (date) => moment(date).format('YYYY-MM-DD'),
|
|
|
|
weekly(date) {
|
|
|
|
const firstWeekDay = moment(date).isoWeekday(1).format('YYYY-MM-DD');
|
|
|
|
const lastWeekDay = moment(date).isoWeekday(7).format('YYYY-MM-DD');
|
|
|
|
|
|
|
|
return `${firstWeekDay} - ${lastWeekDay}`;
|
|
|
|
},
|
|
|
|
monthly: (date) => moment(date).format('YYYY-MM'),
|
2020-05-30 10:25:15 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
const groupVisitsByStep = (step, visits) => visits.reduce((acc, visit) => {
|
2020-05-30 10:57:21 +03:00
|
|
|
const key = STEP_TO_DATE_FORMAT[step](visit.date);
|
2020-05-30 10:25:15 +03:00
|
|
|
|
|
|
|
acc[key] = acc[key] ? acc[key] + 1 : 1;
|
|
|
|
|
|
|
|
return acc;
|
|
|
|
}, {});
|
|
|
|
|
|
|
|
const generateDataset = (stats, label, color) => ({
|
|
|
|
label,
|
|
|
|
data: Object.values(stats),
|
|
|
|
fill: false,
|
|
|
|
lineTension: 0.2,
|
|
|
|
borderColor: color,
|
|
|
|
backgroundColor: color,
|
|
|
|
});
|
|
|
|
|
|
|
|
const LineChartCard = ({ title, visits, highlightedVisits }) => {
|
2020-05-30 10:57:21 +03:00
|
|
|
const [ step, setStep ] = useState(steps[0].value);
|
2020-05-30 10:25:15 +03:00
|
|
|
const groupedVisits = useMemo(() => groupVisitsByStep(step, reverse(visits)), [ visits, step ]);
|
|
|
|
const labels = useMemo(() => Object.keys(groupedVisits), [ groupedVisits ]);
|
|
|
|
const groupedHighlighted = useMemo(
|
|
|
|
() => fillTheGaps(groupVisitsByStep(step, reverse(highlightedVisits)), labels),
|
|
|
|
[ highlightedVisits, step, labels ]
|
|
|
|
);
|
|
|
|
|
|
|
|
const data = {
|
|
|
|
labels,
|
|
|
|
datasets: [
|
|
|
|
generateDataset(groupedVisits, 'Visits', '#4696e5'),
|
|
|
|
highlightedVisits.length > 0 && generateDataset(groupedHighlighted, 'Selected', '#F77F28'),
|
|
|
|
].filter(Boolean),
|
|
|
|
};
|
|
|
|
const options = {
|
|
|
|
legend: { display: false },
|
|
|
|
scales: {
|
|
|
|
yAxes: [
|
|
|
|
{
|
|
|
|
ticks: { beginAtZero: true, precision: 0 },
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Card>
|
2020-05-30 10:57:21 +03:00
|
|
|
<CardHeader>
|
|
|
|
{title}
|
|
|
|
<div className="float-right">
|
|
|
|
<UncontrolledDropdown>
|
|
|
|
<DropdownToggle caret color="link" className="btn-sm p-0">
|
|
|
|
Group by
|
|
|
|
</DropdownToggle>
|
|
|
|
<DropdownMenu right>
|
|
|
|
{steps.map(({ menuText, value }) => (
|
|
|
|
<DropdownItem key={value} active={step === value} onClick={() => setStep(value)}>
|
|
|
|
{menuText}
|
|
|
|
</DropdownItem>
|
|
|
|
))}
|
|
|
|
</DropdownMenu>
|
|
|
|
</UncontrolledDropdown>
|
|
|
|
</div>
|
|
|
|
</CardHeader>
|
2020-05-30 10:25:15 +03:00
|
|
|
<CardBody>
|
|
|
|
<Line data={data} options={options} height={80} />
|
|
|
|
</CardBody>
|
|
|
|
</Card>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
LineChartCard.propTypes = propTypes;
|
|
|
|
|
|
|
|
export default LineChartCard;
|