From c01476238bfecab76e6188b081f9eb1c2a596d96 Mon Sep 17 00:00:00 2001
From: Ochieng Paul <ochiengpaul442@gmail.com>
Date: Thu, 28 Mar 2024 14:45:49 +0300
Subject: [PATCH 1/4] worked on tooltips on chart legends and disabled tabs in
 customize component

---
 .../components/Charts/components/index.jsx    | 52 ++++---------------
 .../src/common/components/Customise/index.jsx | 31 ++++++-----
 2 files changed, 28 insertions(+), 55 deletions(-)

diff --git a/platform/src/common/components/Charts/components/index.jsx b/platform/src/common/components/Charts/components/index.jsx
index 0c93b7e57b..b353e5a81f 100644
--- a/platform/src/common/components/Charts/components/index.jsx
+++ b/platform/src/common/components/Charts/components/index.jsx
@@ -212,36 +212,6 @@ export const CustomDot = (props) => {
   return <circle cx={cx} cy={cy} r={6} fill={fill} />;
 };
 
-/**
- * Custom legend tooltip component
- * @param {Object} props
- */
-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>
-  );
-};
-
 /**
  * Customized legend component
  * @param {Object} props
@@ -265,18 +235,18 @@ export const renderCustomizedLegend = (props) => {
   });
 
   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'>
+    <div className='p-2 flex flex-wrap justify-start md:justify-end items-center w-full'>
       {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
+          key={index}
+          style={{ color: '#485972' }}
+          className='tooltip tooltip-top flex items-center text-sm outline-none'
+          data-tip={entry.value}>
+          <span
+            className='w-[10px] h-[10px] rounded-xl mr-1 ml-1 outline-none'
+            style={{ backgroundColor: entry.color }}></span>
+          {truncate(entry.value)}
+        </div>
       ))}
     </div>
   );
diff --git a/platform/src/common/components/Customise/index.jsx b/platform/src/common/components/Customise/index.jsx
index 8275e66fd5..e11e576048 100644
--- a/platform/src/common/components/Customise/index.jsx
+++ b/platform/src/common/components/Customise/index.jsx
@@ -11,7 +11,7 @@ import Toast from '@/components/Toast';
 import { RxInfoCircled } from 'react-icons/rx';
 import { completeTask } from '@/lib/store/services/checklists/CheckList';
 
-const tabs = ['Locations'];
+const tabs = ['Locations', 'Pollutants'];
 
 const CustomiseLocationsComponent = ({ toggleCustomise }) => {
   const dispatch = useDispatch();
@@ -111,20 +111,23 @@ const CustomiseLocationsComponent = ({ toggleCustomise }) => {
             Select any 4 locations you would like to feature on your overview page.
           </p>
         </div>
-        <div className='mt-6'>
-          <div className='flex flex-row justify-center items-center bg-secondary-neutral-light-25 rounded-md border border-secondary-neutral-light-50 p-1'>
-            {tabs.map((tab) => (
-              <div
-                key={tab}
-                onClick={() => setSelectedTab(tab)}
-                className={`px-3 py-2 flex justify-center items-center w-full hover:cursor-pointer text-sm font-medium text-secondary-neutral-light-600${
-                  selectedTab === tab ? 'border rounded-md bg-white shadow-sm' : ''
-                }`}>
-                {tab}
-              </div>
-            ))}
+        {false && (
+          <div className='mt-6'>
+            {/* Tab section */}
+            <div className='flex flex-row justify-center items-center bg-secondary-neutral-light-25 rounded-md border border-secondary-neutral-light-50 p-1'>
+              {tabs.map((tab) => (
+                <div
+                  key={tab}
+                  onClick={() => setSelectedTab(tab)}
+                  className={`px-3 py-2 flex justify-center items-center w-full hover:cursor-pointer text-sm font-medium text-secondary-neutral-light-600${
+                    selectedTab === tab ? 'border rounded-md bg-white shadow-sm' : ''
+                  }`}>
+                  {tab}
+                </div>
+              ))}
+            </div>
           </div>
-        </div>
+        )}
         {selectedTab === tabs[0] && (
           <LocationsContentComponent selectedLocations={customisedLocations} />
         )}

From 69fdfb1033a49c5dd7b67dc1c8cfdb121979d5a8 Mon Sep 17 00:00:00 2001
From: Ochieng Paul <ochiengpaul442@gmail.com>
Date: Thu, 28 Mar 2024 15:01:37 +0300
Subject: [PATCH 2/4] Update Charts.js

---
 platform/src/common/components/Charts/Charts.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/platform/src/common/components/Charts/Charts.js b/platform/src/common/components/Charts/Charts.js
index 7873860379..ef5e4ba859 100644
--- a/platform/src/common/components/Charts/Charts.js
+++ b/platform/src/common/components/Charts/Charts.js
@@ -182,7 +182,7 @@ const Charts = ({ chartType = 'line', width = '100%', height = '100%' }) => {
           <XAxis
             dataKey='time'
             tick={<CustomizedAxisTick />}
-            tickLine={false}
+            tickLine={true}
             axisLine={false}
             padding={{ left: 30, right: 30 }}
           />
@@ -238,7 +238,7 @@ const Charts = ({ chartType = 'line', width = '100%', height = '100%' }) => {
               <Bar key={key} dataKey={key} fill={colors[index % colors.length]} barSize={15} />
             ))}
           <CartesianGrid stroke='#ccc' strokeDasharray='5 5' vertical={false} />
-          <XAxis dataKey='time' tickLine={false} tick={<CustomizedAxisTick />} axisLine={false} />
+          <XAxis dataKey='time' tickLine={true} tick={<CustomizedAxisTick />} axisLine={false} />
           <YAxis
             axisLine={false}
             fontSize={12}

From 932dc2a0a34e97be773b0b0297e5b88721ea2b74 Mon Sep 17 00:00:00 2001
From: Ochieng Paul <ochiengpaul442@gmail.com>
Date: Thu, 28 Mar 2024 15:26:04 +0300
Subject: [PATCH 3/4] include intervals 0 for the x-axis points and increase
 character length to 20 for the legends

---
 platform/src/common/components/Charts/Charts.js          | 9 ++++++++-
 .../src/common/components/Charts/components/index.jsx    | 4 ++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/platform/src/common/components/Charts/Charts.js b/platform/src/common/components/Charts/Charts.js
index ef5e4ba859..8438fda1b1 100644
--- a/platform/src/common/components/Charts/Charts.js
+++ b/platform/src/common/components/Charts/Charts.js
@@ -185,6 +185,7 @@ const Charts = ({ chartType = 'line', width = '100%', height = '100%' }) => {
             tickLine={true}
             axisLine={false}
             padding={{ left: 30, right: 30 }}
+            interval={0}
           />
           <YAxis
             axisLine={false}
@@ -238,7 +239,13 @@ const Charts = ({ chartType = 'line', width = '100%', height = '100%' }) => {
               <Bar key={key} dataKey={key} fill={colors[index % colors.length]} barSize={15} />
             ))}
           <CartesianGrid stroke='#ccc' strokeDasharray='5 5' vertical={false} />
-          <XAxis dataKey='time' tickLine={true} tick={<CustomizedAxisTick />} axisLine={false} />
+          <XAxis
+            dataKey='time'
+            tickLine={true}
+            interval={0}
+            tick={<CustomizedAxisTick />}
+            axisLine={false}
+          />
           <YAxis
             axisLine={false}
             fontSize={12}
diff --git a/platform/src/common/components/Charts/components/index.jsx b/platform/src/common/components/Charts/components/index.jsx
index b353e5a81f..48b18be71b 100644
--- a/platform/src/common/components/Charts/components/index.jsx
+++ b/platform/src/common/components/Charts/components/index.jsx
@@ -13,7 +13,7 @@ export const reduceDecimalPlaces = (num) => {
 };
 
 export const truncate = (str) => {
-  return str.length > 10 ? str.substr(0, 10 - 1) + '...' : str;
+  return str.length > 20 ? str.substr(0, 20 - 1) + '...' : str;
 };
 
 /**
@@ -235,7 +235,7 @@ export const renderCustomizedLegend = (props) => {
   });
 
   return (
-    <div className='p-2 flex flex-wrap justify-start md:justify-end items-center w-full'>
+    <div className='p-2 flex flex-wrap space-x-3 justify-start md:justify-end items-center w-full'>
       {sortedPayload.map((entry, index) => (
         <div
           key={index}

From 6757faac45cc90e470b2a4655490e6fb8c67fdab Mon Sep 17 00:00:00 2001
From: Ochieng Paul <ochiengpaul442@gmail.com>
Date: Thu, 28 Mar 2024 16:55:39 +0300
Subject: [PATCH 4/4] updated

---
 platform/src/common/components/Charts/Charts.js          | 9 +--------
 .../src/common/components/Charts/components/index.jsx    | 5 +++--
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/platform/src/common/components/Charts/Charts.js b/platform/src/common/components/Charts/Charts.js
index 8438fda1b1..ef5e4ba859 100644
--- a/platform/src/common/components/Charts/Charts.js
+++ b/platform/src/common/components/Charts/Charts.js
@@ -185,7 +185,6 @@ const Charts = ({ chartType = 'line', width = '100%', height = '100%' }) => {
             tickLine={true}
             axisLine={false}
             padding={{ left: 30, right: 30 }}
-            interval={0}
           />
           <YAxis
             axisLine={false}
@@ -239,13 +238,7 @@ const Charts = ({ chartType = 'line', width = '100%', height = '100%' }) => {
               <Bar key={key} dataKey={key} fill={colors[index % colors.length]} barSize={15} />
             ))}
           <CartesianGrid stroke='#ccc' strokeDasharray='5 5' vertical={false} />
-          <XAxis
-            dataKey='time'
-            tickLine={true}
-            interval={0}
-            tick={<CustomizedAxisTick />}
-            axisLine={false}
-          />
+          <XAxis dataKey='time' tickLine={true} tick={<CustomizedAxisTick />} axisLine={false} />
           <YAxis
             axisLine={false}
             fontSize={12}
diff --git a/platform/src/common/components/Charts/components/index.jsx b/platform/src/common/components/Charts/components/index.jsx
index 48b18be71b..3d95203bd1 100644
--- a/platform/src/common/components/Charts/components/index.jsx
+++ b/platform/src/common/components/Charts/components/index.jsx
@@ -1,10 +1,11 @@
-import React, { useState } from 'react';
+import React from 'react';
 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 { format } from 'date-fns';
 
 export const colors = ['#11225A', '#0A46EB', '#297EFF', '#B8D9FF'];
 
@@ -235,7 +236,7 @@ export const renderCustomizedLegend = (props) => {
   });
 
   return (
-    <div className='p-2 flex flex-wrap space-x-3 justify-start md:justify-end items-center w-full'>
+    <div className='p-2 flex flex-wrap md:space-x-3 justify-start md:justify-end items-center w-full'>
       {sortedPayload.map((entry, index) => (
         <div
           key={index}