mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 01:20:24 +03:00
Code Issues Projects Releases Packages Wiki Activity

Improved logic to determine default grouping for line chart based on how old the visits are

Browse source
This commit is contained in:
Alejandro Celaya 2020-05-31 20:03:59 +02:00
parent e00574553f
commit 32cc1cc580
2 changed files with 34 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/visits/helpers/LineChartCard.js
View file

@ -52,6 +52,22 @@ const STEP_TO_DATE_FORMAT = {
monthly: (date) => moment(date).format('YYYY-MM'),
};
const determineInitialStep = (oldestVisitDate) => {
const now = moment();
const oldestDate = moment(oldestVisitDate);
if (now.diff(oldestDate, 'day') <= 2) { // Less than 2 days
return 'hourly';
} else if (now.diff(oldestDate, 'month') <= 1) { // Between 2 days and 1 month
return 'daily';
} else if (now.diff(oldestDate, 'month') <= 6) { // Between 1 and 6 months
return 'weekly';
}
// Older than 6 months
return 'monthly';
};
const groupVisitsByStep = (step, visits) => visits.reduce((acc, visit) => {
const key = STEP_TO_DATE_FORMAT[step](visit.date);
@ -93,7 +109,9 @@ const generateDataset = (stats, label, color) => ({
});
const LineChartCard = ({ title, visits, highlightedVisits, highlightedLabel = 'Selected' }) => {
const [ step, setStep ] = useState('monthly');
const [ step, setStep ] = useState(
visits.length > 0 ? determineInitialStep(visits[visits.length - 1].date) : 'monthly'
);
const [ skipNoVisits, toggleSkipNoVisits ] = useToggle(true);
const groupedVisitsWithGaps = useMemo(() => groupVisitsByStep(step, reverse(visits)), [ step, visits ]);

21
test/visits/helpers/LineChartCard.test.js
View file

@ -2,6 +2,7 @@ import React from 'react';
import { shallow } from 'enzyme';
import { CardHeader, DropdownItem } from 'reactstrap';
import { Line } from 'react-chartjs-2';
import moment from 'moment';
import LineChartCard from '../../../src/visits/helpers/LineChartCard';
import Checkbox from '../../../src/utils/Checkbox';
@ -22,19 +23,27 @@ describe('<LineChartCard />', () => {
expect(header.html()).toContain('Cool title');
});
it('renders group menu and selects active grouping item', () => {
const wrapper = createWrapper();
it.each([
[[], 'monthly' ],
[[{ date: moment().subtract(1, 'day').format() }], 'hourly' ],
[[{ date: moment().subtract(3, 'day').format() }], 'daily' ],
[[{ date: moment().subtract(2, 'month').format() }], 'weekly' ],
[[{ date: moment().subtract(6, 'month').format() }], 'weekly' ],
[[{ date: moment().subtract(7, 'month').format() }], 'monthly' ],
[[{ date: moment().subtract(1, 'year').format() }], 'monthly' ],
])('renders group menu and selects proper grouping item based on visits dates', (visits, expectedActiveItem) => {
const wrapper = createWrapper(visits);
const items = wrapper.find(DropdownItem);
expect(items).toHaveLength(4);
expect(items.at(0).prop('children')).toEqual('Month');
expect(items.at(0).prop('active')).toEqual(true);
expect(items.at(0).prop('active')).toEqual(expectedActiveItem === 'monthly');
expect(items.at(1).prop('children')).toEqual('Week');
expect(items.at(1).prop('active')).toEqual(false);
expect(items.at(1).prop('active')).toEqual(expectedActiveItem === 'weekly');
expect(items.at(2).prop('children')).toEqual('Day');
expect(items.at(2).prop('active')).toEqual(false);
expect(items.at(2).prop('active')).toEqual(expectedActiveItem === 'daily');
expect(items.at(3).prop('children')).toEqual('Hour');
expect(items.at(3).prop('active')).toEqual(false);
expect(items.at(3).prop('active')).toEqual(expectedActiveItem === 'hourly');
});
it('renders chart with expected options', () => {