Merge pull request #1937 from airqo-platform/ft-charts

[platform] Optimize and Document Chart Component

Author: Baalmart

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

@@ -8,7 +8,7 @@ import WindIcon from '@/icons/Common/wind.svg';
 import CustomTooltip from '../Tooltip';
 import { useWindowSize } from '@/lib/windowSize';
 
-const AQNumberCard = ({ reading, location, keyValue, pollutant, count }) => {
+const AQNumberCard = ({ reading, location, pollutant, count }) => {
   let airQualityText = '';
   let AirQualityIcon = null;
   let airQualityColor = '';
@@ -44,18 +44,15 @@ const AQNumberCard = ({ reading, location, keyValue, pollutant, count }) => {
     <div
       className={`${
         count <= 2 ? 'w-full md:min-w-[200px] md:max-w-[50%] float-left' : 'w-full'
-      } relative h-[164.48px] bg-white flex-col justify-start items-center inline-flex`}
-      key={keyValue}
-    >
+      } relative h-[164.48px] bg-white flex-col justify-start items-center inline-flex`}>
       <div className='border border-gray-200 rounded-lg overflow-hidden w-full'>
         <div className='self-stretch w-full h-[68.48px] px-4 pt-3.5 pb-[10.48px] bg-white border-b border-b-gray-200 flex-col justify-start items-start flex'>
           <div className='self-stretch justify-between items-center inline-flex'>
             <div className='flex-col justify-start items-start inline-flex'>
               {location !== '--' ? (
                 <div
                   className='text-gray-700 text-base font-medium leading-normal whitespace-nowrap overflow-ellipsis'
-                  title={location}
-                >
+                  title={location}>
                   {location.length > 17 ? location.slice(0, 17) + '...' : location}
                 </div>
               ) : (

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

@@ -142,19 +142,14 @@ const CustomCalendar = ({ initialStartDate, initialEndDate, Icon, dropdown, clas
       <button
         onClick={handleClick}
         type='button'
-        className='relative border border-grey-750 rounded flex items-center justify-between gap-2 px-4 py-3'
-      >
+        className='relative border border-grey-750 rounded flex items-center justify-between gap-2 px-4 py-3'>
         {Icon ? <Icon /> : <CalendarIcon />}
         <span className='hidden sm:inline-block text-sm font-medium'>
           {chartData.chartDataRange.label}
         </span>
         {dropdown && <ChevronDownIcon />}
       </button>
-      <div
-        className={`absolute top-[50px] z-[900] ${className} ${
-          openDatePicker ? 'block' : 'hidden'
-        }`}
-      >
+      <div className={`absolute top-[50px]  ${className} ${openDatePicker ? 'block' : 'hidden'}`}>
         <DatePickerHiddenInput />
       </div>
     </div>

platform/src/common/components/Charts/Charts.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   LineChart,
   Line,
@@ -12,250 +12,23 @@ import {
   Label,
   Legend,
 } from 'recharts';
-import GoodAir from '@/icons/Charts/GoodAir';
-import Hazardous from '@/icons/Charts/Hazardous';
-import Moderate from '@/icons/Charts/Moderate';
-import Unhealthy from '@/icons/Charts/Unhealthy';
-import UnhealthySG from '@/icons/Charts/UnhealthySG';
-import VeryUnhealthy from '@/icons/Charts/VeryUnhealthy';
 import { useSelector, useDispatch } from 'react-redux';
 import Spinner from '@/components/Spinner';
 import { setRefreshChart } from '@/lib/store/services/charts/ChartSlice';
 import { fetchAnalyticsData } from '@/lib/store/services/charts/ChartData';
-
-const colors = ['#11225A', '#0A46EB', '#297EFF', '#B8D9FF'];
-
-const reduceDecimalPlaces = (num) => {
-  return Math.round((num + Number.EPSILON) * 10000) / 10000;
-};
-
-const truncate = (str) => {
-  return str.length > 10 ? str.substr(0, 10 - 1) + '...' : str;
-};
-
-const getAirQualityLevelText = (value) => {
-  let airQualityText = '';
-  let AirQualityIcon = null;
-  let airQualityColor = '';
-
-  if (value >= 0 && value <= 12) {
-    airQualityText = 'Air Quality is Good';
-    AirQualityIcon = GoodAir;
-    airQualityColor = 'text-green-500';
-  } else if (value > 12 && value <= 35.4) {
-    airQualityText = 'Air Quality is Moderate';
-    AirQualityIcon = Moderate;
-    airQualityColor = 'text-yellow-500';
-  } else if (value > 35.4 && value <= 55.4) {
-    airQualityText = 'Air Quality is Unhealthy for Sensitive Groups';
-    AirQualityIcon = UnhealthySG;
-    airQualityColor = 'text-orange-500';
-  } else if (value > 55.4 && value <= 150.4) {
-    airQualityText = 'Air Quality is Unhealthy';
-    AirQualityIcon = Unhealthy;
-    airQualityColor = 'text-red-500';
-  } else if (value > 150.4 && value <= 250.4) {
-    airQualityText = 'Air Quality is Very Unhealthy';
-    AirQualityIcon = VeryUnhealthy;
-    airQualityColor = 'text-purple-500';
-  } else if (value > 250.4 && value <= 500) {
-    airQualityText = 'Air Quality is Hazardous';
-    AirQualityIcon = Hazardous;
-    airQualityColor = 'text-gray-500';
-  }
-
-  return { airQualityText, AirQualityIcon, airQualityColor };
-};
-
-const CustomTooltipLineGraph = ({ active, payload }) => {
-  if (active && payload && payload.length) {
-    const hoveredPoint = payload[0];
-    const otherPoints = payload.slice(1);
-
-    const { airQualityText, AirQualityIcon, airQualityColor } = getAirQualityLevelText(
-      hoveredPoint.value,
-    );
-
-    return (
-      <div className='bg-white border border-gray-200 rounded-md shadow-lg w-72 outline-none'>
-        <div className='flex flex-col space-y-1'>
-          <div className='flex flex-col items-start justify-between w-full h-auto p-2'>
-            <span className='text-sm text-gray-300'>
-              {new Date(hoveredPoint.payload.time).toLocaleDateString('en-US', {
-                year: 'numeric',
-                month: 'long',
-                day: 'numeric',
-              })}
-            </span>
-            <p className='flex justify-between w-full mb-1 mt-2'>
-              <div className='flex items-center text-xs font-medium leading-[14px] text-gray-600'>
-                <div className='w-[10px] h-[10px] bg-blue-700 rounded-xl mr-2'></div>
-                {truncate(hoveredPoint.name)}
-              </div>
-              <div className='text-xs font-medium leading-[14px] text-gray-600'>
-                {reduceDecimalPlaces(hoveredPoint.value) + ' μg/m3'}
-              </div>
-            </p>
-            <div className='flex justify-between items-center w-full'>
-              <div className={`${airQualityColor} text-xs font-medium leading-[14px] `}>
-                {airQualityText}
-              </div>
-              <AirQualityIcon width={30} height={30} />
-            </div>
-          </div>
-          {otherPoints.length > 0 && (
-            <>
-              <div className='w-full h-[2px] bg-transparent my-1 border-t border-dotted border-gray-300' />
-              <div className='p-2 space-y-1'>
-                {otherPoints.map((point, index) => (
-                  <p key={index} className='flex justify-between w-full mb-1'>
-                    <div className='flex items-center text-xs font-medium leading-[14px] text-gray-400'>
-                      <div className='w-[10px] h-[10px] bg-gray-400 rounded-xl mr-2'></div>
-                      {truncate(point.name)}
-                    </div>
-                    <div className='text-xs font-medium leading-[14px] text-gray-400'>
-                      {reduceDecimalPlaces(point.value) + ' μg/m3'}
-                    </div>
-                  </p>
-                ))}
-              </div>
-            </>
-          )}
-        </div>
-      </div>
-    );
-  }
-  return '';
-};
-
-const CustomTooltipBarGraph = ({ active, payload }) => {
-  if (active && payload && payload.length) {
-    const hoveredPoint = payload[0];
-
-    const { airQualityText, AirQualityIcon, airQualityColor } = getAirQualityLevelText(
-      hoveredPoint.value,
-    );
-
-    return (
-      <div className='bg-white border border-gray-200 rounded-md shadow-lg w-72 outline-none'>
-        <div className='flex flex-col space-y-1'>
-          <div className='flex flex-col items-start justify-between w-full h-auto p-2'>
-            <span className='text-sm text-gray-300'>
-              {new Date(hoveredPoint.payload.time).toLocaleDateString('en-US', {
-                year: 'numeric',
-                month: 'long',
-                day: 'numeric',
-              })}
-            </span>
-            <p className='flex justify-between w-full mb-1 mt-2'>
-              <div className='flex items-center text-xs font-medium leading-[14px] text-gray-600'>
-                <div className='w-[10px] h-[10px] bg-blue-700 rounded-xl mr-2'></div>
-                {truncate(hoveredPoint.name)}
-              </div>
-              <div className='text-xs font-medium leading-[14px] text-gray-600'>
-                {reduceDecimalPlaces(hoveredPoint.value) + ' μg/m3'}
-              </div>
-            </p>
-            <div className='flex justify-between items-center w-full'>
-              <div className={`${airQualityColor} text-xs font-medium leading-[14px] `}>
-                {airQualityText}
-              </div>
-              <AirQualityIcon width={30} height={30} />
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-  return '';
-};
-
-const CustomizedAxisTick = ({ x, y, payload }) => {
-  return (
-    <g transform={`translate(${x},${y})`}>
-      <text x={0} y={0} dy={16} textAnchor='middle' fill='#666' fontSize={12}>
-        {new Date(payload.value).toLocaleDateString('en-US', {
-          month: 'short',
-          day: 'numeric',
-        })}
-      </text>
-    </g>
-  );
-};
-
-const CustomDot = (props) => {
-  const { cx, cy, fill, payload } = props;
-
-  if (!payload.active) {
-    return null;
-  }
-
-  return <circle cx={cx} cy={cy} r={6} fill={fill} />;
-};
-
-const CustomLegendTooltip = ({ tooltipText, children, direction, themeClass }) => {
-  const [visible, setVisible] = useState(false);
-
-  const tooltipClass = {
-    top: 'bottom-full mb-3',
-    bottom: 'top-full mt-3',
-  }[direction];
-
-  return (
-    <div
-      className='relative'
-      onMouseEnter={() => setVisible(true)}
-      onMouseLeave={() => setVisible(false)}>
-      {children}
-      {visible && (
-        <div
-          className={`absolute ${tooltipClass} ${
-            themeClass ? themeClass : 'bg-white text-center text-gray-700'
-          } p-2 w-48 rounded-md shadow-lg z-10`}>
-          <p className='text-sm'>{tooltipText}</p>
-        </div>
-      )}
-    </div>
-  );
-};
-
-const renderCustomizedLegend = (props) => {
-  const { payload } = props;
-
-  // Sort the payload array from darkest to lightest color
-  const sortedPayload = payload.sort((a, b) => {
-    const colorToGrayscale = (color) => {
-      if (color) {
-        const hex = color.replace('#', '');
-        const r = parseInt(hex.slice(0, 2), 16);
-        const g = parseInt(hex.slice(2, 4), 16);
-        const b = parseInt(hex.slice(4, 6), 16);
-        return 0.2126 * r + 0.7152 * g + 0.0722 * b; // ITU-R BT.709 formula
-      }
-      return 0;
-    };
-    return colorToGrayscale(a.color) - colorToGrayscale(b.color);
-  });
-
-  return (
-    <div className='p-2 md:p-0 flex flex-wrap flex-col md:flex-row md:justify-end mt-2 space-y-2 md:space-y-0 md:space-x-4 outline-none'>
-      {sortedPayload.map((entry, index) => (
-        <CustomLegendTooltip key={`item-${index}`} tooltipText={entry.value} direction='top'>
-          <div
-            style={{ color: '#485972' }}
-            className='flex w-full items-center text-sm outline-none'>
-            <span
-              className='w-[10px] h-[10px] rounded-xl mr-1 ml-1 outline-none'
-              style={{ backgroundColor: entry.color }}></span>
-            {truncate(entry.value)}
-          </div>
-        </CustomLegendTooltip>
-      ))}
-    </div>
-  );
-};
-
-// Custom hook to fetch analytics data
+import {
+  renderCustomizedLegend,
+  CustomDot,
+  CustomizedAxisTick,
+  CustomTooltipLineGraph,
+  CustomTooltipBarGraph,
+  colors,
+} from './components';
+
+/**
+ * @description Custom hook to fetch analytics data
+ * @returns {Object} analyticsData, isLoading, error, loadingTime
+ */
 const useAnalytics = () => {
   const dispatch = useDispatch();
   const chartData = useSelector((state) => state.chart);
@@ -303,6 +76,13 @@ const useAnalytics = () => {
   return { analyticsData, isLoading, error, loadingTime };
 };
 
+/**
+ * @description Charts component
+ * @param {String} chartType - Type of chart to render
+ * @param {String} width - Width of the chart
+ * @param {String} height - Height of the chart
+ * @returns {React.Component} Charts
+ */
 const Charts = ({ chartType = 'line', width = '100%', height = '100%' }) => {
   const chartData = useSelector((state) => state.chart);
   const { analyticsData, isLoading, error, loadingTime } = useAnalytics();
@@ -325,7 +105,8 @@ const Charts = ({ chartType = 'line', width = '100%', height = '100%' }) => {
     return (
       <div className='ml-10 flex justify-center text-center items-center w-full h-full'>
         <p className='text-red-500'>
-          Oops! Something went wrong. Please try again later or contact support.
+          An error has occurred. Please try again later or reach out to our support team for
+          assistance.
         </p>
       </div>
     );
@@ -335,14 +116,14 @@ const Charts = ({ chartType = 'line', width = '100%', height = '100%' }) => {
   if (isLoading || !hasLoaded) {
     return (
       <div className='ml-10 flex justify-center text-center items-center w-full h-full'>
-        <p className='text-blue-500'>
+        <div className='text-blue-500'>
           <Spinner />
           {showLoadingMessage && (
             <span className='text-yellow-500 mt-2'>
-              The data is taking longer than expected to load. Please hang on a bit longer.
+              The data is currently being processed. We appreciate your patience.
             </span>
           )}
-        </p>
+        </div>
       </div>
     );
   }
@@ -351,7 +132,7 @@ const Charts = ({ chartType = 'line', width = '100%', height = '100%' }) => {
   if (hasLoaded && (analyticsData === null || analyticsData.length === 0)) {
     return (
       <div className='ml-10 flex justify-center items-center w-full h-full'>
-        No data for this time range
+        There is no data available for the selected time range.
       </div>
     );
   }
@@ -373,6 +154,7 @@ const Charts = ({ chartType = 'line', width = '100%', height = '100%' }) => {
     allKeys = new Set(Object.keys(dataForChart[0]));
   }
 
+  // Render the chart
   const renderChart = () => {
     if (chartType === 'line') {
       return (
@@ -484,7 +266,7 @@ const Charts = ({ chartType = 'line', width = '100%', height = '100%' }) => {
             wrapperStyle={{ bottom: 0, right: 0, position: 'absolute' }}
           />
           <Tooltip
-            content={<CustomTooltipBarGraph />}
+            content={<CustomTooltipLineGraph />}
             cursor={{ fill: '#eee', fillOpacity: 0.3 }}
           />
         </BarChart>