From cbc03fe6c9680aa896810ae8d9650796f00fd207 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zbigniew=20Zag=C3=B3rski?= Date: Tue, 26 Sep 2023 13:49:20 +0200 Subject: [PATCH] move date range format to separate file --- .../widgets/TimeSeriesWidgetUI.test.js | 153 +--------------- .../widgets/utils/timeFormat.test.js | 140 +++++++++++++++ .../TimeSeriesWidgetUI/TimeSeriesWidgetUI.js | 163 ++---------------- .../TimeSeriesWidgetUI/utils/timeFormat.js | 149 ++++++++++++++++ 4 files changed, 303 insertions(+), 302 deletions(-) create mode 100644 packages/react-ui/__tests__/widgets/utils/timeFormat.test.js create mode 100644 packages/react-ui/src/widgets/TimeSeriesWidgetUI/utils/timeFormat.js diff --git a/packages/react-ui/__tests__/widgets/TimeSeriesWidgetUI.test.js b/packages/react-ui/__tests__/widgets/TimeSeriesWidgetUI.test.js index 2f9b7cb2d..6ea4c6a9e 100644 --- a/packages/react-ui/__tests__/widgets/TimeSeriesWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/TimeSeriesWidgetUI.test.js @@ -1,14 +1,6 @@ import React from 'react'; import { render, screen, act, fireEvent, waitFor } from '../widgets/utils/testUtils'; -import TimeSeriesWidgetUI, { - daysCurrentDateRange, - hoursCurrentDateRange, - minutesCurrentDateRange, - monthsCurrentDateRange, - secondsCurrentDateRange, - weeksCurrentDateRange, - yearCurrentDateRange -} from '../../src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI'; +import TimeSeriesWidgetUI from '../../src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI'; import { mockEcharts } from './testUtils'; import { GroupDateTypes } from '@carto/react-core'; @@ -254,147 +246,4 @@ describe('TimeSeriesWidgetUI', () => { fireEvent.click(screen.getByText(/Clear/)); await waitFor(async () => expect(onStop).toHaveBeenCalledTimes(1)); }); - - describe.only('defaultTooltipFormatter', () => { - test('secondsCurrentDateRange', async () => { - // warning, at least in my test env all those dates a formatted as US dates MM/DD/YYYY - - // 13/09/2023 1:00:00 pm - 1:00:00 pm, 4 Second Interval = 13/09/2023 1:00:00 pm - 13/09/2023 1:00:04 pm - expect(secondsCurrentDateRange(new Date('2022-09-13T13:00:00'))).toBe( - '9/13/2022 01:00:00 PM - 01:00:00 PM' - ); - expect(secondsCurrentDateRange(new Date('2022-09-13T13:00:00'), 2)).toBe( - '9/13/2022 01:00:00 PM - 9/13/2022 01:00:01 PM' - ); - - // full minute - expect(secondsCurrentDateRange(new Date('2022-03-10T15:00:00'), 60)).toBe( - '3/10/2022 03:00:00 PM - 3/10/2022 03:00:59 PM' - ); - - // cross minute - expect(secondsCurrentDateRange(new Date('2022-03-10T15:00:00'), 90)).toBe( - '3/10/2022 03:00:00 PM - 3/10/2022 03:01:29 PM' - ); - }); - - test('minutesCurrentDateRange', async () => { - // warning, at least in my test env all those dates a formatted as US dates MM/DD/YYYY - - // 13/09/2023 1:00:00 pm - 1:00:00 pm, 4 Second Interval = 13/09/2023 1:00:00 pm - 13/09/2023 1:00:04 pm - expect(minutesCurrentDateRange(new Date('2022-09-13T13:00:00'))).toBe( - '9/13/2022 01:00:00 PM - 9/13/2022 01:00:59 PM' - ); - expect(minutesCurrentDateRange(new Date('2022-09-13T13:00:00'), 2)).toBe( - '9/13/2022 01:00:00 PM - 9/13/2022 01:01:59 PM' - ); - - // full hour - expect(minutesCurrentDateRange(new Date('2022-03-10T15:00:00'), 60)).toBe( - '3/10/2022 03:00:00 PM - 3/10/2022 03:59:59 PM' - ); - - // cross hour - expect(minutesCurrentDateRange(new Date('2022-03-10T15:00:00'), 90)).toBe( - '3/10/2022 03:00:00 PM - 3/10/2022 04:29:59 PM' - ); - }); - - test('hoursCurrentDateRange', async () => { - // warning, at least in my test env all those dates a formatted as US dates MM/DD/YYYY - expect(hoursCurrentDateRange(new Date('2022-03-10T13:00:00'))).toBe( - '3/10/2022 1:00 PM - 3/10/2022 1:59 PM' - ); - expect(hoursCurrentDateRange(new Date('2022-03-10T13:00:00'), 2)).toBe( - '3/10/2022 1:00 PM - 3/10/2022 2:59 PM' - ); - - // cross day - expect(hoursCurrentDateRange(new Date('2022-03-10T15:00:00'), 24)).toBe( - '3/10/2022 3:00 PM - 3/11/2022 2:59 PM' - ); - }); - - test('daysCurrentDateRange', async () => { - // warning, at least in my test env all those dates a formatted as US dates MM/DD/YYYY - expect(daysCurrentDateRange(new Date('2022-03-10'))).toBe('3/10/2022'); - expect(daysCurrentDateRange(new Date('2022-03-10'), 2)).toBe( - '3/10/2022 - 3/11/2022' - ); - expect(daysCurrentDateRange(new Date('2022-12-01'), 31)).toBe( - '12/1/2022 - 12/31/2022' - ); - - // cross year - expect(daysCurrentDateRange(new Date('2022-12-01'), 62)).toBe( - '12/1/2022 - 1/31/2023' - ); - - // february/march normal year - expect(daysCurrentDateRange(new Date('2015-02-20'), 10)).toBe( - '2/20/2015 - 3/1/2015' - ); - - // february/march normal step year - expect(daysCurrentDateRange(new Date('2016-02-20'), 10)).toBe( - '2/20/2016 - 2/29/2016' - ); - }); - test('weeksCurrentDateRange', async () => { - // warning, at least in my test env all those dates a formatted as US dates MM/DD/YYYY - - expect(weeksCurrentDateRange(new Date('2023-09-04'))).toBe('9/4/2023 - 9/10/2023'); - expect(weeksCurrentDateRange(new Date('2023-05-01'))).toBe('5/1/2023 - 5/7/2023'); - - expect(weeksCurrentDateRange(new Date('2023-05-01'), 2)).toBe( - '5/1/2023 - 5/14/2023' - ); - - // cross end of year - expect(weeksCurrentDateRange(new Date('2014-12-01'), 10)).toBe( - '12/1/2014 - 2/8/2015' - ); - - // february/march normal year - expect(weeksCurrentDateRange(new Date('2015-02-23'), 2)).toBe( - '2/23/2015 - 3/8/2015' - ); - - // february/march normal step year - expect(weeksCurrentDateRange(new Date('2016-02-22'), 2)).toBe( - '2/22/2016 - 3/6/2016' - ); - }); - - test('monthsCurrentDateRange', async () => { - // warning, at least in my test env all those dates a formatted as US dates MM/DD/YYYY - expect(monthsCurrentDateRange(new Date('2023-05-01'))).toBe('5/1/2023 - 5/31/2023'); - expect(monthsCurrentDateRange(new Date('2023-05-01'), 2)).toBe( - '5/1/2023 - 6/30/2023' - ); - - // february normal - expect(monthsCurrentDateRange(new Date('2015-02-23'), 1)).toBe( - '2/1/2015 - 2/28/2015' - ); - - // february step - expect(monthsCurrentDateRange(new Date('2016-02-23'), 1)).toBe( - '2/1/2016 - 2/29/2016' - ); - - // cross end of year - expect(monthsCurrentDateRange(new Date('2014-12-01'), 10)).toBe( - '12/1/2014 - 9/30/2015' - ); - }); - - test('yearCurrentDateRange', async () => { - // warning, at least in my test env all those dates a formatted as US dates MM/DD/YYYY - expect(yearCurrentDateRange(new Date('2023-05-01'))).toBe('1/1/2023 - 12/31/2023'); - expect(yearCurrentDateRange(new Date('2023-05-01'), 2)).toBe( - '1/1/2023 - 12/31/2024' - ); - }); - }); }); diff --git a/packages/react-ui/__tests__/widgets/utils/timeFormat.test.js b/packages/react-ui/__tests__/widgets/utils/timeFormat.test.js new file mode 100644 index 000000000..45ab40ff2 --- /dev/null +++ b/packages/react-ui/__tests__/widgets/utils/timeFormat.test.js @@ -0,0 +1,140 @@ +import { + daysCurrentDateRange, + hoursCurrentDateRange, + minutesCurrentDateRange, + monthsCurrentDateRange, + secondsCurrentDateRange, + weeksCurrentDateRange, + yearCurrentDateRange +} from '../../../src/widgets/TimeSeriesWidgetUI/utils/timeFormat'; + +describe('defaultTooltipFormatter', () => { + test('secondsCurrentDateRange', async () => { + // warning, at least in my test env all those dates a formatted as US dates MM/DD/YYYY + + // 13/09/2023 1:00:00 pm - 1:00:00 pm, 4 Second Interval = 13/09/2023 1:00:00 pm - 13/09/2023 1:00:04 pm + expect(secondsCurrentDateRange(new Date('2022-09-13T13:00:00'))).toBe( + '9/13/2022 01:00:00 PM - 01:00:00 PM' + ); + expect(secondsCurrentDateRange(new Date('2022-09-13T13:00:00'), 2)).toBe( + '9/13/2022 01:00:00 PM - 9/13/2022 01:00:01 PM' + ); + + // full minute + expect(secondsCurrentDateRange(new Date('2022-03-10T15:00:00'), 60)).toBe( + '3/10/2022 03:00:00 PM - 3/10/2022 03:00:59 PM' + ); + + // cross minute + expect(secondsCurrentDateRange(new Date('2022-03-10T15:00:00'), 90)).toBe( + '3/10/2022 03:00:00 PM - 3/10/2022 03:01:29 PM' + ); + }); + + test('minutesCurrentDateRange', async () => { + // warning, at least in my test env all those dates a formatted as US dates MM/DD/YYYY + + // 13/09/2023 1:00:00 pm - 1:00:00 pm, 4 Second Interval = 13/09/2023 1:00:00 pm - 13/09/2023 1:00:04 pm + expect(minutesCurrentDateRange(new Date('2022-09-13T13:00:00'))).toBe( + '9/13/2022 01:00:00 PM - 9/13/2022 01:00:59 PM' + ); + expect(minutesCurrentDateRange(new Date('2022-09-13T13:00:00'), 2)).toBe( + '9/13/2022 01:00:00 PM - 9/13/2022 01:01:59 PM' + ); + + // full hour + expect(minutesCurrentDateRange(new Date('2022-03-10T15:00:00'), 60)).toBe( + '3/10/2022 03:00:00 PM - 3/10/2022 03:59:59 PM' + ); + + // cross hour + expect(minutesCurrentDateRange(new Date('2022-03-10T15:00:00'), 90)).toBe( + '3/10/2022 03:00:00 PM - 3/10/2022 04:29:59 PM' + ); + }); + + test('hoursCurrentDateRange', async () => { + // warning, at least in my test env all those dates a formatted as US dates MM/DD/YYYY + expect(hoursCurrentDateRange(new Date('2022-03-10T13:00:00'))).toBe( + '3/10/2022 1:00 PM - 3/10/2022 1:59 PM' + ); + expect(hoursCurrentDateRange(new Date('2022-03-10T13:00:00'), 2)).toBe( + '3/10/2022 1:00 PM - 3/10/2022 2:59 PM' + ); + + // cross day + expect(hoursCurrentDateRange(new Date('2022-03-10T15:00:00'), 24)).toBe( + '3/10/2022 3:00 PM - 3/11/2022 2:59 PM' + ); + }); + + test('daysCurrentDateRange', async () => { + // warning, at least in my test env all those dates a formatted as US dates MM/DD/YYYY + expect(daysCurrentDateRange(new Date('2022-03-10'))).toBe('3/10/2022'); + expect(daysCurrentDateRange(new Date('2022-03-10'), 2)).toBe('3/10/2022 - 3/11/2022'); + expect(daysCurrentDateRange(new Date('2022-12-01'), 31)).toBe( + '12/1/2022 - 12/31/2022' + ); + + // cross year + expect(daysCurrentDateRange(new Date('2022-12-01'), 62)).toBe( + '12/1/2022 - 1/31/2023' + ); + + // february/march normal year + expect(daysCurrentDateRange(new Date('2015-02-20'), 10)).toBe('2/20/2015 - 3/1/2015'); + + // february/march normal step year + expect(daysCurrentDateRange(new Date('2016-02-20'), 10)).toBe( + '2/20/2016 - 2/29/2016' + ); + }); + test('weeksCurrentDateRange', async () => { + // warning, at least in my test env all those dates a formatted as US dates MM/DD/YYYY + + expect(weeksCurrentDateRange(new Date('2023-09-04'))).toBe('9/4/2023 - 9/10/2023'); + expect(weeksCurrentDateRange(new Date('2023-05-01'))).toBe('5/1/2023 - 5/7/2023'); + + expect(weeksCurrentDateRange(new Date('2023-05-01'), 2)).toBe('5/1/2023 - 5/14/2023'); + + // cross end of year + expect(weeksCurrentDateRange(new Date('2014-12-01'), 10)).toBe( + '12/1/2014 - 2/8/2015' + ); + + // february/march normal year + expect(weeksCurrentDateRange(new Date('2015-02-23'), 2)).toBe('2/23/2015 - 3/8/2015'); + + // february/march normal step year + expect(weeksCurrentDateRange(new Date('2016-02-22'), 2)).toBe('2/22/2016 - 3/6/2016'); + }); + + test('monthsCurrentDateRange', async () => { + // warning, at least in my test env all those dates a formatted as US dates MM/DD/YYYY + expect(monthsCurrentDateRange(new Date('2023-05-01'))).toBe('5/1/2023 - 5/31/2023'); + expect(monthsCurrentDateRange(new Date('2023-05-01'), 2)).toBe( + '5/1/2023 - 6/30/2023' + ); + + // february normal + expect(monthsCurrentDateRange(new Date('2015-02-23'), 1)).toBe( + '2/1/2015 - 2/28/2015' + ); + + // february step + expect(monthsCurrentDateRange(new Date('2016-02-23'), 1)).toBe( + '2/1/2016 - 2/29/2016' + ); + + // cross end of year + expect(monthsCurrentDateRange(new Date('2014-12-01'), 10)).toBe( + '12/1/2014 - 9/30/2015' + ); + }); + + test('yearCurrentDateRange', async () => { + // warning, at least in my test env all those dates a formatted as US dates MM/DD/YYYY + expect(yearCurrentDateRange(new Date('2023-05-01'))).toBe('1/1/2023 - 12/31/2023'); + expect(yearCurrentDateRange(new Date('2023-05-01'), 2)).toBe('1/1/2023 - 12/31/2024'); + }); +}); diff --git a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js index abfd98890..45e44ebb0 100644 --- a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js +++ b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js @@ -9,13 +9,24 @@ import { capitalize, Link } from '@mui/material'; +import PropTypes from 'prop-types'; + +import { GroupDateTypes } from '@carto/react-core'; + import TimeSeriesChart from './components/TimeSeriesChart'; import { TimeSeriesProvider, useTimeSeriesContext } from './hooks/TimeSeriesContext'; import { CHART_TYPES } from './utils/constants'; -import PropTypes from 'prop-types'; -import { GroupDateTypes, getMonday } from '@carto/react-core'; import Typography from '../../components/atoms/Typography'; import TimeSeriesSkeleton from './components/TimeSeriesSkeleton'; +import { + yearCurrentDateRange, + monthsCurrentDateRange, + weeksCurrentDateRange, + daysCurrentDateRange, + hoursCurrentDateRange, + minutesCurrentDateRange, + secondsCurrentDateRange +} from './utils/timeFormat'; const FORMAT_DATE_BY_STEP_SIZE = { [GroupDateTypes.YEARS]: yearCurrentDateRange, @@ -402,154 +413,6 @@ function TimeSeriesWidgetUIContent({ ); } -function formatDateRange({ start, end, formatter }) { - const startFmt = formatter(start); - const endFmt = formatter(end); - - return `${startFmt} - ${endFmt}`; -} - -const secondstoMs = (s) => 1000 * s; -const minutesToMs = (m) => secondstoMs(60 * m); -const hoursToMs = (h) => minutesToMs(60 * h); - -// Auxiliary fns -export function secondsCurrentDateRange(date, stepMultiplier = 1) { - const start = new Date( - date.getFullYear(), - date.getMonth(), - date.getDate(), - date.getHours(), - date.getMinutes(), - date.getSeconds(), - 0 - ); - const end = new Date(start.getTime() + secondstoMs(stepMultiplier - 1) + 999); - - const datePrefix = date.toLocaleDateString(); - const formatter = (date) => - date.toLocaleTimeString(undefined, { - hour: '2-digit', - minute: '2-digit', - hour12: true, - second: '2-digit' - }); - if (stepMultiplier === 1) { - return `${datePrefix} ${formatDateRange({ start, end, formatter })}`; - } - - return formatDateRange({ - start, - end, - formatter: (date) => `${datePrefix} ${formatter(date)}` - }); -} - -export function minutesCurrentDateRange(date, stepMultiplier = 1) { - const start = new Date( - date.getFullYear(), - date.getMonth(), - date.getDate(), - date.getHours(), - date.getMinutes(), - 0, - 0 - ); - const end = new Date( - start.getTime() + minutesToMs(stepMultiplier - 1) + secondstoMs(59) - ); - - return formatDateRange({ - start, - end, - formatter: (date) => - date.toLocaleDateString() + - ' ' + - date.toLocaleTimeString(undefined, { - hour: '2-digit', - minute: '2-digit', - hour12: true, - second: '2-digit' - }) - }); -} - -export function hoursCurrentDateRange(date, stepMultiplier = 1) { - const start = new Date( - date.getFullYear(), - date.getMonth(), - date.getDate(), - date.getHours(), - 0, - 0, - 0 - ); - const end = new Date(start.getTime() + hoursToMs(stepMultiplier - 1) + minutesToMs(59)); - - return formatDateRange({ - start, - end, - formatter: (date) => - date.toLocaleDateString() + - ' ' + - date.toLocaleTimeString(undefined, { - hour: 'numeric', - hour12: true, - minute: '2-digit' - }) - }); -} - -export function daysCurrentDateRange(date, stepMultiplier = 1) { - const start = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0); - if (stepMultiplier === 1) { - return start.toLocaleDateString(); - } - - const end = new Date( - date.getFullYear(), - date.getMonth(), - date.getDate() + stepMultiplier - 1 - ); - - return formatDateRange({ - start, - end, - formatter: (date) => date.toLocaleDateString() - }); -} - -export function weeksCurrentDateRange(date, stepMultiplier = 1) { - const startDate = new Date(getMonday(date)); - const startDateFmt = startDate.toLocaleDateString(); - - const endDate = new Date( - startDate.getFullYear(), - startDate.getMonth(), - startDate.getDate() + 6 + 7 * (stepMultiplier - 1) - ); - const endDateFmt = endDate.toLocaleDateString(); - return `${startDateFmt} - ${endDateFmt}`; -} - -export function monthsCurrentDateRange(date, stepMultiplier = 1) { - const startDate = new Date(date.getFullYear(), date.getMonth(), 1); - const startDateFmt = startDate.toLocaleDateString(); - - const endDate = new Date(date.getFullYear(), date.getMonth() + stepMultiplier, 0); - const endDateFmt = endDate.toLocaleDateString(); - return `${startDateFmt} - ${endDateFmt}`; -} - -export function yearCurrentDateRange(date, stepMultiplier = 1) { - const startDate = new Date(date.getFullYear(), 0, 1); - const startDateFmt = startDate.toLocaleDateString(); - - const endDate = new Date(date.getFullYear() + (stepMultiplier - 1), 11, 31); - const endDateFmt = endDate.toLocaleDateString(); - return `${startDateFmt} - ${endDateFmt}`; -} - function defaultTooltipFormatter(params, stepSize, valueFormatter, stepMultiplier) { const formatter = FORMAT_DATE_BY_STEP_SIZE[stepSize]; const [name] = params[0].data; diff --git a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/utils/timeFormat.js b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/utils/timeFormat.js new file mode 100644 index 000000000..0153454a3 --- /dev/null +++ b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/utils/timeFormat.js @@ -0,0 +1,149 @@ +import { getMonday } from '@carto/react-core'; + +function formatDateRange({ start, end, formatter }) { + const startFmt = formatter(start); + const endFmt = formatter(end); + + return `${startFmt} - ${endFmt}`; +} + +const secondstoMs = (s) => 1000 * s; +const minutesToMs = (m) => secondstoMs(60 * m); +const hoursToMs = (h) => minutesToMs(60 * h); + +// Auxiliary fns +export function secondsCurrentDateRange(date, stepMultiplier = 1) { + const start = new Date( + date.getFullYear(), + date.getMonth(), + date.getDate(), + date.getHours(), + date.getMinutes(), + date.getSeconds(), + 0 + ); + const end = new Date(start.getTime() + secondstoMs(stepMultiplier - 1) + 999); + + const datePrefix = date.toLocaleDateString(); + const formatter = (date) => + date.toLocaleTimeString(undefined, { + hour: '2-digit', + minute: '2-digit', + hour12: true, + second: '2-digit' + }); + if (stepMultiplier === 1) { + return `${datePrefix} ${formatDateRange({ start, end, formatter })}`; + } + + return formatDateRange({ + start, + end, + formatter: (date) => `${datePrefix} ${formatter(date)}` + }); +} + +export function minutesCurrentDateRange(date, stepMultiplier = 1) { + const start = new Date( + date.getFullYear(), + date.getMonth(), + date.getDate(), + date.getHours(), + date.getMinutes(), + 0, + 0 + ); + const end = new Date( + start.getTime() + minutesToMs(stepMultiplier - 1) + secondstoMs(59) + ); + + return formatDateRange({ + start, + end, + formatter: (date) => + date.toLocaleDateString() + + ' ' + + date.toLocaleTimeString(undefined, { + hour: '2-digit', + minute: '2-digit', + hour12: true, + second: '2-digit' + }) + }); +} + +export function hoursCurrentDateRange(date, stepMultiplier = 1) { + const start = new Date( + date.getFullYear(), + date.getMonth(), + date.getDate(), + date.getHours(), + 0, + 0, + 0 + ); + const end = new Date(start.getTime() + hoursToMs(stepMultiplier - 1) + minutesToMs(59)); + + return formatDateRange({ + start, + end, + formatter: (date) => + date.toLocaleDateString() + + ' ' + + date.toLocaleTimeString(undefined, { + hour: 'numeric', + hour12: true, + minute: '2-digit' + }) + }); +} + +export function daysCurrentDateRange(date, stepMultiplier = 1) { + const start = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0); + if (stepMultiplier === 1) { + return start.toLocaleDateString(); + } + + const end = new Date( + date.getFullYear(), + date.getMonth(), + date.getDate() + stepMultiplier - 1 + ); + + return formatDateRange({ + start, + end, + formatter: (date) => date.toLocaleDateString() + }); +} + +export function weeksCurrentDateRange(date, stepMultiplier = 1) { + const startDate = new Date(getMonday(date)); + const startDateFmt = startDate.toLocaleDateString(); + + const endDate = new Date( + startDate.getFullYear(), + startDate.getMonth(), + startDate.getDate() + 6 + 7 * (stepMultiplier - 1) + ); + const endDateFmt = endDate.toLocaleDateString(); + return `${startDateFmt} - ${endDateFmt}`; +} + +export function monthsCurrentDateRange(date, stepMultiplier = 1) { + const startDate = new Date(date.getFullYear(), date.getMonth(), 1); + const startDateFmt = startDate.toLocaleDateString(); + + const endDate = new Date(date.getFullYear(), date.getMonth() + stepMultiplier, 0); + const endDateFmt = endDate.toLocaleDateString(); + return `${startDateFmt} - ${endDateFmt}`; +} + +export function yearCurrentDateRange(date, stepMultiplier = 1) { + const startDate = new Date(date.getFullYear(), 0, 1); + const startDateFmt = startDate.toLocaleDateString(); + + const endDate = new Date(date.getFullYear() + (stepMultiplier - 1), 11, 31); + const endDateFmt = endDate.toLocaleDateString(); + return `${startDateFmt} - ${endDateFmt}`; +}