shlink-web-client/src/visits/helpers/LineChartCard.js

128 lines
3.2 KiB
JavaScript
Raw Normal View History

import React, { useState, useMemo } from 'react';
import PropTypes from 'prop-types';
import {
Card,
CardHeader,
CardBody,
UncontrolledDropdown,
DropdownToggle,
DropdownMenu,
DropdownItem,
} from 'reactstrap';
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),
};
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'),
};
const groupVisitsByStep = (step, visits) => visits.reduce((acc, visit) => {
const key = STEP_TO_DATE_FORMAT[step](visit.date);
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 }) => {
const [ step, setStep ] = useState(steps[0].value);
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>
<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>
<CardBody>
<Line data={data} options={options} height={80} />
</CardBody>
</Card>
);
};
LineChartCard.propTypes = propTypes;
export default LineChartCard;