Added date range presets

NASA-IMPACT · Nov 15, 2022 · 82f822a · 82f822a
1 parent d381083
commit 82f822a
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 9 deletions.
diff --git a/app/scripts/components/analysis/define/index.tsx b/app/scripts/components/analysis/define/index.tsx
@@ -42,7 +42,12 @@ import {
 } from '$components/common/fold';
 import { S_FAILED, S_LOADING, S_SUCCEEDED } from '$utils/status';
 import { useAoiControls } from '$components/common/aoi/use-aoi-controls';
-import { dateToInputFormat, inputFormatToDate } from '$utils/date';
+import {
+  DateRangePreset,
+  dateToInputFormat,
+  getRangeFromPreset,
+  inputFormatToDate
+} from '$utils/date';
 
 const FormBlock = styled.div`
   display: flex;
@@ -129,6 +134,15 @@ export default function Analysis() {
     [setAnalysisParam]
   );
 
+  const onDatePresetClick = useCallback(
+    (preset: DateRangePreset) => {
+      const { start, end } = getRangeFromPreset(preset);
+      setAnalysisParam('start', start);
+      setAnalysisParam('end', end);
+    },
+    [setAnalysisParam]
+  );
+
   const allAvailableDatasetsLayers: DatasetLayer[] = useMemo(
     () =>
       uniqBy(
@@ -253,16 +267,36 @@ export default function Analysis() {
                 <DropTitle>Select a date preset</DropTitle>
                 <DropMenu>
                   <li>
-                    <DropMenuItem href='#'>Preset A</DropMenuItem>
+                    <DropMenuItem
+                      role='button'
+                      onClick={() => onDatePresetClick('thisYear')}
+                    >
+                      This year
+                    </DropMenuItem>
                   </li>
                   <li>
-                    <DropMenuItem href='#'>Preset B</DropMenuItem>
+                    <DropMenuItem
+                      role='button'
+                      onClick={() => onDatePresetClick('last30Days')}
+                    >
+                      Last 30 days
+                    </DropMenuItem>
                   </li>
                   <li>
-                    <DropMenuItem href='#'>Preset C</DropMenuItem>
+                    <DropMenuItem
+                      role='button'
+                      onClick={() => onDatePresetClick('lastYear')}
+                    >
+                      Last year
+                    </DropMenuItem>
                   </li>
                   <li>
-                    <DropMenuItem href='#'>Preset D</DropMenuItem>
+                    <DropMenuItem
+                      role='button'
+                      onClick={() => onDatePresetClick('last10Years')}
+                    >
+                      Last 10 years
+                    </DropMenuItem>
                   </li>
                 </DropMenu>
               </Dropdown>

diff --git a/app/scripts/utils/date.ts b/app/scripts/utils/date.ts
@@ -1,4 +1,12 @@
-import { format, isSameMonth, isSameYear, parse } from 'date-fns';
+import {
+  format,
+  isSameMonth,
+  isSameYear,
+  parse,
+  endOfYear,
+  startOfYear,
+  sub
+} from 'date-fns';
 
 /**
  * Create a date which matches the input date offsetting the timezone to match
@@ -131,10 +139,10 @@ export function formatDateRange(start: Date, end: Date) {
 
 /**
  * Converts a native JS date to the format accepted by HTML inputs
- * @param date 
+ * @param date
  * @returns string
  */
- export function dateToInputFormat(date?: Date) {
+export function dateToInputFormat(date?: Date) {
   if (!date) return undefined;
   return format(date, 'yyyy-MM-dd');
 }
@@ -143,4 +151,26 @@ export function inputFormatToDate(inputFormat: string) {
   return parse(inputFormat, 'yyyy-MM-dd', new Date());
 }
 
-
+export type DateRangePreset =
+  | 'thisYear'
+  | 'last30Days'
+  | 'lastYear'
+  | 'last10Years';
+export function getRangeFromPreset(preset: DateRangePreset): {
+  start: Date;
+  end: Date;
+} {
+  const end = preset === 'thisYear' ? endOfYear(new Date()) : new Date();
+  let start = startOfYear(new Date());
+  if (preset === 'last30Days') {
+    start = sub(end, { days: 30 });
+  } else if (preset === 'lastYear') {
+    start = sub(end, { years: 1 });
+  } else if (preset === 'last10Years') {
+    start = sub(end, { years: 10 });
+  }
+  return {
+    start,
+    end
+  };
+}