(chore) Minor code updates to charts and customize components

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}

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'];
 
@@ -13,7 +14,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;
 };
 
 /**
@@ -212,36 +213,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 +236,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 md:space-x-3 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>
   );

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} />
         )}