Merge pull request #1716 from airqo-platform/staging

move to production
airqo-platform · Nov 21, 2023 · 7da8e08 · 7da8e08
2 parents cb87ded + eaaf97d
commit 7da8e08
Show file tree

Hide file tree

Showing 28 changed files with 698 additions and 396 deletions.
diff --git a/k8s/platform/values-stage.yaml b/k8s/platform/values-stage.yaml
@@ -2,7 +2,7 @@ replicaCount: 1
 image:
   repository: eu.gcr.io/airqo-250220/airqo-stage-next-platform
   pullPolicy: Always
-  tag: stage-7542a4b5-1700216129
+  tag: stage-d601c5d3-1700587995
 imagePullSecrets: []
 nameOverride: ''
 fullnameOverride: ''

diff --git a/platform/package.json b/platform/package.json
@@ -39,6 +39,7 @@
     "papaparse": "^5.4.1",
     "postcss": "^8.4.16",
     "react": "^18.2.0",
+    "react-beautiful-dnd": "^13.1.1",
     "react-calendar": "^4.0.0",
     "react-country-flag": "^3.1.0",
     "react-dom": "^18.2.0",

diff --git a/platform/src/common/components/Calendar/CustomCalendar.jsx b/platform/src/common/components/Calendar/CustomCalendar.jsx
@@ -4,7 +4,16 @@ import ChevronDownIcon from '@/icons/Common/chevron_down.svg';
 import { useSelector, useDispatch } from 'react-redux';
 import { setChartDataRange } from '@/lib/store/services/charts/ChartSlice';
 import Calendar from './Calendar';
-import { set } from 'date-fns';
+import {
+  differenceInDays,
+  isSameDay,
+  startOfMonth,
+  endOfMonth,
+  startOfQuarter,
+  endOfQuarter,
+  subMonths,
+  subDays,
+} from 'date-fns';
 
 const CustomCalendar = ({
   initialStartDate,
@@ -24,27 +33,15 @@ const CustomCalendar = ({
   });
 
   const handleValueChange = (newValue) => {
-    const computeDaysBetweenDates = (startDate, endDate) => {
-      const oneDay = 24 * 60 * 60 * 1000;
-      return Math.floor(Math.abs((startDate.getTime() - endDate.getTime()) / oneDay));
-    };
-
-    const isSameDay = (date1, date2) =>
-      date1.getDate() === date2.getDate() &&
-      date1.getMonth() === date2.getMonth() &&
-      date1.getFullYear() === date2.getFullYear();
-
     const handleDateChange = (newValue) => {
       const startDate = new Date(newValue.start);
       const endDate = new Date(newValue.end);
 
       const today = new Date();
 
-      const yesterday = new Date(today);
-      yesterday.setDate(yesterday.getDate() - 1);
-      yesterday.setHours(0, 0, 0, 0);
+      const yesterday = subDays(today, 1);
 
-      const computedValue = computeDaysBetweenDates(startDate, endDate);
+      const computedValue = Math.abs(differenceInDays(startDate, endDate));
 
       let label = `Last ${computedValue} days`;
 
@@ -64,19 +61,26 @@ const CustomCalendar = ({
         label = 'Last year';
       }
 
-      // include also for This month and Last month
-      const thisMonthStart = new Date(today.getFullYear(), today.getMonth(), 1);
-
-      const lastMonthStart = new Date(today.getFullYear(), today.getMonth() - 1, 1);
-
-      const lastMonthEnd = new Date(today.getFullYear(), today.getMonth(), 0);
+      const thisMonthStart = startOfMonth(today);
+      const lastMonthStart = startOfMonth(subMonths(today, 1));
+      const lastMonthEnd = endOfMonth(subMonths(today, 1));
 
       if (isSameDay(startDate, thisMonthStart) && isSameDay(endDate, today)) {
         label = 'This month';
       } else if (isSameDay(startDate, lastMonthStart) && isSameDay(endDate, lastMonthEnd)) {
         label = 'Last month';
       }
 
+      const thisQuarterStart = startOfQuarter(today);
+      const lastQuarterStart = startOfQuarter(subMonths(today, 3));
+      const lastQuarterEnd = endOfQuarter(subMonths(today, 3));
+
+      if (isSameDay(startDate, thisQuarterStart) && isSameDay(endDate, today)) {
+        label = 'This quarter';
+      } else if (isSameDay(startDate, lastQuarterStart) && isSameDay(endDate, lastQuarterEnd)) {
+        label = 'Last quarter';
+      }
+
       dispatch(setChartDataRange({ startDate, endDate, label }));
       setValue(newValue);
     };

diff --git a/platform/src/common/components/Calendar/components/ShortCuts.jsx b/platform/src/common/components/Calendar/components/ShortCuts.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import {
   startOfDay,
   endOfDay,
@@ -7,41 +7,49 @@ import {
   startOfYear,
   endOfMonth,
   endOfYear,
+  startOfQuarter,
+  endOfQuarter,
+  subQuarters,
 } from 'date-fns';
 
-const ShortCuts = ({ setSelectedRange }) => {
-  const timePeriods = [
-    { label: 'Today', range: () => [startOfDay(new Date()), endOfDay(new Date())] },
-    {
-      label: 'Yesterday',
-      range: () => [startOfDay(subDays(new Date(), 1)), endOfDay(subDays(new Date(), 1))],
-    },
-    {
-      label: 'Last 7 days',
-      range: () => [startOfDay(subDays(new Date(), 7)), endOfDay(new Date())],
-    },
-    {
-      label: 'Last 30 days',
-      range: () => [startOfDay(subDays(new Date(), 30)), endOfDay(new Date())],
-    },
-    {
-      label: 'Last 90 days',
-      range: () => [startOfDay(subDays(new Date(), 90)), endOfDay(new Date())],
-    },
-    { label: 'This month', range: () => [startOfMonth(new Date()), endOfMonth(new Date())] },
-    { label: 'This year', range: () => [startOfYear(new Date()), endOfYear(new Date())] },
-    {
-      label: 'Last year',
-      range: () => [startOfYear(subDays(new Date(), 365)), endOfYear(subDays(new Date(), 365))],
-    },
-  ];
+const timePeriods = [
+  { label: 'Today', range: () => [startOfDay(new Date()), endOfDay(new Date())] },
+  {
+    label: 'Yesterday',
+    range: () => [startOfDay(subDays(new Date(), 1)), endOfDay(subDays(new Date(), 1))],
+  },
+  { label: 'Last 7 days', range: () => [startOfDay(subDays(new Date(), 7)), endOfDay(new Date())] },
+  {
+    label: 'Last 30 days',
+    range: () => [startOfDay(subDays(new Date(), 30)), endOfDay(new Date())],
+  },
+  {
+    label: 'Last 90 days',
+    range: () => [startOfDay(subDays(new Date(), 90)), endOfDay(new Date())],
+  },
+  { label: 'This month', range: () => [startOfMonth(new Date()), endOfMonth(new Date())] },
+  { label: 'This year', range: () => [startOfYear(new Date()), endOfYear(new Date())] },
+  {
+    label: 'Last year',
+    range: () => [startOfYear(subDays(new Date(), 365)), endOfYear(subDays(new Date(), 365))],
+  },
+  { label: 'This quarter', range: () => [startOfQuarter(new Date()), endOfQuarter(new Date())] },
+  {
+    label: 'Last quarter',
+    range: () => [
+      startOfQuarter(subQuarters(new Date(), 1)),
+      endOfQuarter(subQuarters(new Date(), 1)),
+    ],
+  },
+];
 
+const ShortCuts = ({ setSelectedRange }) => {
   const handleShortcutClick = (range) => {
     setSelectedRange({ start: range()[0], end: range()[1] });
   };
 
   return (
-    <div className='py-6 border-r border-gray-100 w-full md:w-[260px]'>
+    <div className='py-6 border-r border-gray-100 w-full md:w-[260px] max-h-[350px] overflow-y-auto scr'>
       <ul className='text-sm leading-5 font-normal flex flex-wrap md:flex-col lg:flex-col'>
         {timePeriods.map((period) => (
           <li key={period.label}>

diff --git a/platform/src/common/components/Charts/ChartContainer.js b/platform/src/common/components/Charts/ChartContainer.js
@@ -210,7 +210,7 @@ const ChartContainer = ({ chartType, chartTitle, menuBtn, height, width, id, dow
       <PrintReportModal
         title='Share report'
         btnText='Send'
-        ModalType='share'
+        shareModel={true}
         open={openShare}
         onClose={() => setOpenShare(false)}
         format={shareFormat}