feat(severity-indicator): grouped timeline logic into single logic.ts…

… file as all individual utilities are very small yet depent on each other; cleaned up JSX a bit;

packages/app/src/components/severity-indicator-tile/components/timeline/logic.ts

@@ -0,0 +1,72 @@
+import { middleOfDayInSeconds } from '@corona-dashboard/common';
+import { createDateFromUnixTimestamp } from '~/utils/create-date-from-unix-timestamp';
+import { SeverityIndicatorTimelineEventConfig } from './timeline';
+
+/**
+ * Calculated the difference, in days, between two dates.
+ * @param start - the start date of a given range
+ * @param end - the end date of a given range
+ * @returns the number of days between two dates
+ */
+export const getDifferenceInDays = (start: Date, end: Date): number => {
+  return Math.floor((end.getTime() - start.getTime()) / (1000 * 3600 * 24));
+};
+
+/**
+ * Calculates the date representing the middle of the day for passed in dates.
+ * @param today - today's Date object
+ * @param startDate - the start date of a given range
+ * @param endDate - the end date of a given range
+ * @returns the date representing the middle of the day for the passed in dates
+ */
+export const getMiddleOfDayDates = (today: Date, startDate: number, endDate: number): Record<string, Date> => {
+  const todayMiddleOfDaySeconds = middleOfDayInSeconds(today.getTime() / 1000);
+
+  return {
+    startOfIntervalDate: createDateFromUnixTimestamp(middleOfDayInSeconds(startDate)),
+    endOfIntervalDate: createDateFromUnixTimestamp(middleOfDayInSeconds(endDate)),
+    todayMiddleOfDayDate: createDateFromUnixTimestamp(todayMiddleOfDaySeconds),
+  };
+};
+
+/**
+ * Calculates the relative offset value for the 'Today' label on the timeline.
+ * @param today - today's Date object
+ * @param startDate - the start date of the timeline
+ * @param endDate - the end date of the timeline
+ * @returns the relative offset value for the 'Today' label on the timeline
+ */
+export const getTimelineBarArrowOffset = (today: Date, startDate: number, endDate: number): number => {
+  const { startOfIntervalDate, endOfIntervalDate, todayMiddleOfDayDate } = getMiddleOfDayDates(today, startDate, endDate);
+  const numberOfDaysInInterval = getDifferenceInDays(startOfIntervalDate, endOfIntervalDate);
+  const numberOfDaysFromStartToToday = getDifferenceInDays(startOfIntervalDate, todayMiddleOfDayDate);
+  const arrowOffset = (numberOfDaysFromStartToToday / numberOfDaysInInterval) * 100;
+
+  return arrowOffset;
+};
+
+/**
+ * Calculates the amount of relative width a timeline bar part covers.
+ * @param daysInBarPart - the amount of days in a timeline bar part
+ * @param totalDays - the total amount of days in a timeline
+ * @returns the relative width of a timeline bar part
+ */
+export const getTimelineBarPartWidth = (daysInBarPart: ReturnType<typeof getDifferenceInDays>, totalDays: number) => (daysInBarPart / totalDays) * 100;
+
+/**
+ * Calculates the start and end date of a given timeline range.
+ * @param timelineEvents - the timeline events/range to calculate the start and end dates for
+ * @returns the start and end date of the given timeline range
+ */
+export const getTimelineRangeDates = (timelineEvents: SeverityIndicatorTimelineEventConfig[]) => {
+  const timelineEventDates = timelineEvents
+    .flatMap((timelineEvent: SeverityIndicatorTimelineEventConfig) => [timelineEvent.start, timelineEvent.end])
+    .map((timelineEventDate: number) => {
+      return createDateFromUnixTimestamp(timelineEventDate).getTime();
+    });
+
+  return {
+    startDate: Math.min(...timelineEventDates),
+    endDate: Math.max(...timelineEventDates),
+  };
+};

packages/app/src/components/severity-indicator-tile/components/timeline/timeline.tsx

@@ -14,9 +14,8 @@ import { SeverityLevels } from '../../types';
 import { TimelineBar } from './components/timeline-bar';
 import { TimelineBarPart } from './components/timeline-bar-part';
 import { TimelineTooltipContent } from './components/tooltip-content';
-import { getTimelineBarArrowOffset } from './logic/get-timeline-bar-arrow-offset';
-import { getTimelineBarPartDays } from './logic/get-timeline-bar-part-days';
-import { getTimelineBarPartWidth } from './logic/get-timeline-bar-part-width';
+import { getDifferenceInDays, getTimelineBarArrowOffset, getTimelineBarPartWidth } from './logic';
+import { createDateFromUnixTimestamp } from '~/utils/create-date-from-unix-timestamp';
 
 export interface SeverityIndicatorTimelineEventConfig {
   title: string;
@@ -53,6 +52,9 @@ export const Timeline = ({ labels, startDate, endDate, legendItems, size = 10, t
 
   const totalDays = (endDate - startDate) / (1000 * 3600 * 24);
 
+  const timelineBarPartDays = (timelineEvent: SeverityIndicatorTimelineEventConfig) =>
+    getDifferenceInDays(createDateFromUnixTimestamp(timelineEvent.start), createDateFromUnixTimestamp(timelineEvent.end));
+
   return (
     <Box marginY={space[3]} position="relative">
       <TimelineHeading level={4}>{labels.heading}</TimelineHeading>
@@ -65,7 +67,7 @@ export const Timeline = ({ labels, startDate, endDate, legendItems, size = 10, t
             isFirst={i === 0}
             isLast={i + 1 === timelineEvents.length}
             size={size}
-            width={`${getTimelineBarPartWidth(getTimelineBarPartDays(timelineEvent.start * 1000, timelineEvent.end * 1000), totalDays)}%`}
+            width={`${getTimelineBarPartWidth(timelineBarPartDays(timelineEvent), totalDays)}%`}
           >
             {i + 1 === timelineEvents.length && (
               <TimelineBarArrow startDate={timelineEvents[timelineEvents.length - 1].start} endDate={timelineEvents[timelineEvents.length - 1].end}>

packages/app/src/pages/index.tsx

@@ -4,11 +4,11 @@ import { css } from '@styled-system/css';
 import { GetStaticPropsContext } from 'next';
 import styled from 'styled-components';
 import { isPresent } from 'ts-is-present';
-import { MaxWidth } from '~/components/max-width';
 import { Box, Spacer } from '~/components/base';
 import { RichContent } from '~/components/cms/rich-content';
 import { CollapsibleSection } from '~/components/collapsible';
-import { getTimelineRangeDates } from '~/components/severity-indicator-tile/components/timeline/logic/get-timeline-range-dates';
+import { MaxWidth } from '~/components/max-width';
+import { getTimelineRangeDates } from '~/components/severity-indicator-tile/components/timeline/logic';
 import { Timeline } from '~/components/severity-indicator-tile/components/timeline/timeline';
 import { SEVERITY_LEVELS_LIST, TOPICAL_SEVERITY_INDICATOR_TILE_MAX_WIDTH } from '~/components/severity-indicator-tile/constants';
 import { SeverityIndicatorTile } from '~/components/severity-indicator-tile/severity-indicator-tile';
@@ -29,7 +29,7 @@ import { Languages, SiteText } from '~/locale';
 import { getArticleParts, getPagePartsQuery } from '~/queries/get-page-parts-query';
 import { getThermometerEvents, getTopicalStructureQuery } from '~/queries/get-topical-structure-query';
 import { TopicalSanityData } from '~/queries/query-types';
-import { createGetStaticProps, StaticProps } from '~/static-props/create-get-static-props';
+import { StaticProps, createGetStaticProps } from '~/static-props/create-get-static-props';
 import { createGetContent, getLastGeneratedDate, getLokalizeTexts } from '~/static-props/get-data';
 import { space } from '~/style/theme';
 import { ArticleParts, LinkParts, PagePartQueryResult, RichTextParts } from '~/types/cms';