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

src/visits/helpers/LineChartCard.js

@@ -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 ]);

test/visits/helpers/LineChartCard.test.js

@@ -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', () => {
+  it.each([
-    const wrapper = createWrapper();
+    [[], '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', () => {