Merge pull request #2206 from airqo-platform/analytics-ui-improvements

Analytics: Code clean up and commenting

platform/src/common/components/AQNumberCard/index.jsx

@@ -114,10 +114,12 @@ const AQNumberCard = () => {
   };
 
   const SkeletonCard = () => (
-    <div className="w-full bg-gray-200 animate-pulse rounded-xl px-4 py-10">
-      <div className="h-6 w-3/4 bg-gray-300 rounded"></div>
-      <div className="mt-2 h-4 w-1/2 bg-gray-300 rounded"></div>
-      <div className="mt-4 h-8 w-full bg-gray-300 rounded"></div>
+    <div className="w-full border border-gray-200 rounded-xl px-4 py-6">
+      <div className="w-full bg-gray-200 animate-pulse rounded-xl px-4 py-10">
+        <div className="h-6 w-3/4 bg-gray-300 rounded"></div>
+        <div className="mt-2 h-4 w-1/2 bg-gray-300 rounded"></div>
+        <div className="mt-4 h-8 w-full bg-gray-300 rounded"></div>
+      </div>
     </div>
   );
 

platform/src/common/components/Calendar/CustomCalendar.jsx

@@ -36,6 +36,7 @@ const isValidDate = (date) => {
 const CustomCalendar = ({
   initialStartDate,
   initialEndDate,
+  initial_label,
   onChange,
   className = '',
   dropdown = false,
@@ -46,7 +47,7 @@ const CustomCalendar = ({
   const [value, setValue] = useState({
     startDate: initialStartDate,
     endDate: initialEndDate,
-    label: '',
+    label: initial_label,
   });
 
   /**

platform/src/common/components/Charts/ChartContainer.jsx

@@ -1,11 +1,10 @@
 import React, { useRef, useCallback, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import PropTypes from 'prop-types';
 import { jsPDF } from 'jspdf';
 import html2canvas from 'html2canvas';
 import CheckIcon from '@/icons/tickIcon';
 import CustomDropdown from '@/components/Dropdowns/CustomDropdown';
-// import PrintReportModal from '@/components/Modal/PrintReportModal'; // Retained as per request
+// import PrintReportModal from '@/components/Modal/PrintReportModal';
 import MoreInsightsChart from './MoreInsightsChart';
 import SkeletonLoader from './components/SkeletonLoader';
 import { setOpenModal, setModalType } from '@/lib/store/services/downloadModal';
@@ -67,7 +66,6 @@ const ChartContainer = ({
       }, 4000);
     }
 
-    // Cleanup the timer if component unmounts or chartLoading changes
     return () => {
       if (timer) {
         clearTimeout(timer);
@@ -280,18 +278,4 @@ const ChartContainer = ({
   );
 };
 
-ChartContainer.propTypes = {
-  chartType: PropTypes.oneOf(['line', 'bar']).isRequired,
-  chartTitle: PropTypes.string.isRequired,
-  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  id: PropTypes.string.isRequired,
-  showTitle: PropTypes.bool,
-  data: PropTypes.array.isRequired,
-  chartLoading: PropTypes.bool.isRequired,
-  error: PropTypes.string,
-  refetch: PropTypes.func.isRequired,
-  // defaultBody: PropTypes.object, // Commented out as per your request
-};
-
 export default ChartContainer;

platform/src/common/components/Charts/MoreInsightsChart.jsx

@@ -43,9 +43,7 @@ const MoreInsightsChart = ({
 }) => {
   const [activeIndex, setActiveIndex] = useState(null);
 
-  // Reference to the chart container
   const containerRef = useRef(null);
-  // Use the custom hook to get container dimensions
   const { width: containerWidth } = useResizeObserver(containerRef);
 
   /**
@@ -56,7 +54,6 @@ const MoreInsightsChart = ({
     const siteIdToName = {};
     const allSiteIds = new Set();
 
-    // Build a mapping from site_id to site name
     data.forEach((dataPoint) => {
       const { site_id, name } = dataPoint;
       if (site_id && name) {

platform/src/common/components/Modal/dataDownload/constants/index.jsx

@@ -23,7 +23,7 @@ export const FREQUENCY_OPTIONS = [
 export const FILE_TYPE_OPTIONS = [
   { id: 1, name: 'CSV' },
   { id: 2, name: 'Json' },
-  { id: 3, name: 'PDF' },
+  // { id: 3, name: 'PDF' },
 ];
 
 export const tableData = [

platform/src/core/utils/useFetchAnalyticsData.jsx

@@ -1,4 +1,3 @@
-// src/core/utils/useFetchAnalyticsData.js
 import { useState, useCallback, useEffect } from 'react';
 import { getAnalyticsData } from '@/core/apis/DeviceRegistry';
 import { parseAndValidateISODate } from '@/core/utils/dateUtils';
@@ -27,7 +26,6 @@ const useFetchAnalyticsData = ({
 
     try {
       if (selectedSiteIds.length === 0) {
-        // No sites selected, clear data and error, set loading to false
         setAllSiteData([]);
         setError(null);
         setChartLoading(false);

platform/src/lib/store/services/charts/ChartSlice.js

@@ -11,12 +11,11 @@ const defaultChartSites = process.env.NEXT_PUBLIC_DEFAULT_CHART_SITES
   : [];
 
 /**
- * Utility function to calculate the ISO string for 7 days ago from the current date.
- * Ensures that the date is set accurately in UTC.
+ * Calculates the date 7 days prior to today.
  */
 const getStartDate = () => {
   const startDate = new Date();
-  startDate.setUTCDate(startDate.getUTCDate() - 7);
+  startDate.setDate(startDate.getDate() - 7);
   return startDate.toISOString();
 };
 

platform/src/pages/analytics/_components/OverView.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import ChartContainer from '@/components/Charts/ChartContainer';
 import AQNumberCard from '@/components/AQNumberCard';
@@ -27,11 +27,34 @@ const OverView = () => {
   const dispatch = useDispatch();
   const isOpen = useSelector((state) => state.modal.openModal);
   const chartData = useSelector((state) => state.chart);
-  const [dateRange, setDateRange] = useState({
+
+  // Default date range for the last 7 days
+  const defaultDateRange = {
     startDate: subDays(new Date(), 7),
     endDate: new Date(),
     label: 'Last 7 days',
-  });
+  };
+
+  const [dateRange, setDateRange] = useState(defaultDateRange);
+
+  // Reset chart data range to default when the component is unmounted
+  useEffect(() => {
+    return () => {
+      const { startDate, endDate } = defaultDateRange;
+      const { startDateISO, endDateISO } = formatDateRangeToISO(
+        startDate,
+        endDate,
+      );
+
+      dispatch(
+        setChartDataRange({
+          startDate: startDateISO,
+          endDate: endDateISO,
+          label: defaultDateRange.label,
+        }),
+      );
+    };
+  }, [dispatch]);
 
   const handleOpenModal = useCallback(
     (type, ids = []) => {
@@ -142,6 +165,7 @@ const OverView = () => {
             <CustomCalendar
               initialStartDate={dateRange.startDate}
               initialEndDate={dateRange.endDate}
+              initial_label={dateRange.label}
               onChange={handleDateChange}
               className="-left-24 md:left-14 lg:left-[70px] top-11"
               dropdown