Merge pull request #48 from xeptagondev/update_staging_undp

Update staging undp

Author: janithr1

ui/components/indicator-list.tsx

@@ -1,7 +1,8 @@
 import { Pillar } from "database/ancillary";
 import { Score } from "database/processed/db";
 import { roundNumber } from "lib";
-import { FaLink, FaSourcetree } from "react-icons/fa";
+import { useState } from "react";
+import { FaLink } from "react-icons/fa";
 import useSWR from "swr";
 
 interface IndicatorListProps {
@@ -178,19 +179,62 @@ const Indicator = ({
       year: indicator["Year"],
     }))
     .filter((indicator) => indicator.source && indicator.link);
-    const value = +(isShowingRawScores
-      ? indicator.data_col
-      : indicator.new_rank_score);
-    const disp_val = (value==0 ? 0 : roundNumber(value,2));
+  const value = +(isShowingRawScores
+    ? indicator.data_col
+    : indicator.new_rank_score);
+  const disp_val = value == 0 ? 0 : roundNumber(value, 2);
+  const [isHovered, setIsHovered] = useState(false);
+
+  const renderValue = () => {
+    if (isShowingRawScores && indicator.raw_data_col) {
+      const number = parseFloat(indicator.raw_data_col);
+      if (!isNaN(number)) {
+        return number;  
+      }
+      if (indicator.raw_data_col.length > 3) {
+        return (
+          <span
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+          >
+            {indicator.raw_data_col.substring(0, 3)}...
+          </span>
+        );
+      } else {
+        return indicator.raw_data_col;
+      }
+    } else {
+      return hasNoData ? "Data unavailable" : disp_val;
+    }
+  };
+
+  const getWidthClass = () => {
+    if (indicator.raw_data_col.length <= 7) {
+      return "w-auto";
+    }
+    if (indicator.raw_data_col.length < 20) {
+      return "sm:w-40 md:w-70 lg:w-128";
+    }
+    return "sm:w-80 md:w-80 lg:w-128";
+  };
+
   return (
     <li className={hasNoData ? "text-slate-500" : ""}>
       <div className="flex items-center justify-between">
         <span className="text-sm">{indicator.Indicator}</span>
-        <span className="font-mono text-xs ml-4 flex-shrink-0">
-          {hasNoData ? "Data unavailable" : disp_val}
+        <span className="font-mono text-xs ml-4 flex-shrink-0 relative">
+          {renderValue()}
+          {isHovered && (
+            <div
+              className={`absolute right-0 text-center bottom-full mb-2 bg-white shadow-lg border border-gray-200 z-50
+              ${getWidthClass()} p-2`}
+            >
+              {indicator.raw_data_col}
+            </div>
+          )}
         </span>
       </div>
-      {isShowingRawScores && indicator.raw_data_col && (
+      {/* {isShowingRawScores && indicator.raw_data_col && (
         <ul className="mt-1 mb-2 divide-y-1">
           <li className="text-slate-600 text-xs mb-3">
             <div className="group flex items-center">
@@ -199,7 +243,7 @@ const Indicator = ({
             </div>
           </li>
         </ul>
-      )}
+      )} */}
       {/* {isShowingRawScores && !indicator.raw_data_col && (
         <ul className="mt-1 mb-2 divide-y-1">
           <li className="text-slate-600 text-xs mb-3">
@@ -238,4 +282,4 @@ const Indicator = ({
       )}
     </li>
   );
-};
+};

ui/components/score-ring.tsx

@@ -300,14 +300,14 @@ export const ScoreRing = ({
               innerRingR[0] + r * 0.1
             );
             iconPosition[1] -= height / 2;
-
+               const pillarsName = pillar == "Digital Public Infrastructure" ? "DPI" : pillar; 
             return (
               <g key={`${pillar}-${index}`}>
                 <g className="text-sm">
                   <CircleText
                     id={`name-${pillar}`}
                     rotate={midAngle / (Math.PI / 180)}
-                    text={pillar as string}
+                    text={pillarsName as string}
                     r={innerRingR[1] - r * 0.05}
                     stroke="white"
                     strokeWidth={4}
@@ -316,7 +316,7 @@ export const ScoreRing = ({
                   <CircleText
                     id={`name-${pillar}`}
                     rotate={midAngle / (Math.PI / 180)}
-                    text={pillar as string}
+                    text={pillarsName as string}
                     r={innerRingR[1] - r * 0.05}
                     fill={color}
                     className="hidden md:block"

ui/database/raw/pillar-definitions.csv

@@ -1,8 +1,8 @@
 Pillar,ColorBase,ColorTriple1,ColorTriple2,ColorTriple3,colorMap
 Overall,#6366f1,"#FFF", "#a2e0f5", "#6366f1","stroke-pillar-overall"
-People,#4C9F38,"#FFF", "#9ebcf7", "#0d88e0", "stroke-pillar-people"
-Connectivity,#FD6925,"#FFF", "#a2e0f5", "#517Ce8","stroke-pillar-connectivity"
-Government,#19486A,"#FFF", "#e7ff87", "#02965d","stroke-pillar-government"
-Regulation,#0A97D9,"#FFF", "#ffd796", "#ed4b00","stroke-pillar-regulation"
-Economy,#A21942,"#FFF", "#fff566", "#eDa700","stroke-pillar-economy"
+People,#4C9F38,"#FFF", "#79ed8a", "#4C9F38", "stroke-pillar-people"
+Connectivity,#FD6925,"#FFF", "#edc26d", "#FD6925","stroke-pillar-connectivity"
+Government,#19486A,"#FFF", "#54deeb", "#19486A","stroke-pillar-government"
+Regulation,#0A97D9,"#FFF", "#12c0c9", "#0A97D9","stroke-pillar-regulation"
+Economy,#A21942,"#FFF", "#d67240", "#A21942","stroke-pillar-economy"
 "Digital Public Infrastructure","#DE1568","#FFF", "#ffab8a", "#DE1568","stroke-pillar-dpinfrastructure"

ui/pages/popupmessage.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import Image from "next/image";
 import LogoSVG from "../public/undp-logo.svg";
 
@@ -22,15 +22,22 @@ const slides = [
   },
   {
     content: "<b>Elevated User Experience:</b> Enjoy a smoother experience! We've revamped the DDC's visualizations and usability for a more intuitive and informative exploration.",
-    content1: "We're confident these improvements will make the DDC an even more valuable tool for navigating the ever-evolving digital landscape."
+    content1: "We're confident these improvements will make the DDC an even more valuable tool for navigating the ever-evolving digital landscape. Stay tuned for further updates!"
   },
   // Add more slides as needed
 ];
 
 const PopupMessage = () => {
-  const [isOpen, setIsOpen] = useState(true);
-  const [currentPage, setCurrentPage] = useState(0); // Change to index-based state (starting from 0)
-  const totalPages = slides.length; // Set total pages based on slides length
+  const [isOpen, setIsOpen] = useState(false);
+  const [currentPage, setCurrentPage] = useState(0);
+  const totalPages = slides.length;
+
+  useEffect(() => {
+    const hasSeenPopup = localStorage.getItem('hasSeenPopup');
+    if (!hasSeenPopup) {
+      setIsOpen(true);
+    }
+  }, []);
 
   const handleNext = () => {
     if (currentPage < totalPages - 1) {
@@ -44,6 +51,11 @@ const PopupMessage = () => {
     }
   };
 
+  const handleClose = () => {
+    setIsOpen(false);
+    localStorage.setItem('hasSeenPopup', 'true'); // Store the flag in localStorage
+  };
+
   return (
     <div
       className={`fixed z-50 top-20 right-3 sm:right-0 sm:top-25 mt-4 mr-4 ${
@@ -62,7 +74,7 @@ const PopupMessage = () => {
             <h2 className="ml-1 text-lg">Digital Development Compass</h2>
           </div>
           <button
-            onClick={() => setIsOpen(false)}
+            onClick={handleClose}
             className="text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 rounded"
           >
             <span className="text-2xl">&times;</span> {/* Unicode cross character */}
@@ -72,23 +84,25 @@ const PopupMessage = () => {
           <h1 className="text-2xl font-bold">
             {slides[currentPage].title}
           </h1>
-          <h1 className="text-xl">
+          <h1 className="text-lg">
             {slides[currentPage].title1}
           </h1>
-          <div className="text-gray-600" dangerouslySetInnerHTML={{ __html: slides[currentPage].content }} />
+          <div className="text-gray-600 pt-1" dangerouslySetInnerHTML={{ __html: slides[currentPage].content }} />
           <div className="text-gray-600 pt-3" dangerouslySetInnerHTML={{ __html: slides[currentPage].content1 || "" }} />
         </div>
         <div className="px-4 py-4 sm:px-6 flex justify-between items-center border-t">
           <button
             onClick={handleBack}
             className="text-gray-800 hover:bg-gray-200 font-bold py-2 px-4 rounded-l focus:outline-none focus:ring-2 focus:ring-gray-300"
+            disabled={currentPage === 0}
           >
             Back
           </button>
           <span className="text-sm text-gray-600">{`${currentPage + 1} of ${totalPages}`}</span>
           <button
             onClick={handleNext}
             className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            disabled={currentPage === totalPages - 1}
           >
             Next
           </button>