Merge pull request #87 from undp/staging

Merge pull request #87 from undp/staging

ui/components/Layout.tsx

@@ -5,6 +5,7 @@ import { GoMarkGithub } from "react-icons/go";
 import { GrCreativeCommons } from "react-icons/gr";
 import { Header } from "./header";
 import Link from "next/link";
+import CookieConsent from "./cookie-consent";
 type Props = {
   children?: ReactNode;
   title?: string;
@@ -17,33 +18,34 @@ const Layout = ({ children, title = "", countries = [] }: Props) => {
       <NextSeo title={title} />
       <Header key={title} countries={countries} />
       <main className="flex-shrink-0 main">{children}</main>
-
-      <footer className="bg-brand-blue py-16 flex flex-col items-center justify-center text-white">
-        <div className="grid lg:grid-cols-2 md:grid-cols-4 gap-2 text-left">
-          <div className="ml-10 text-left" >
+      <CookieConsent />
+      <footer className="bg-brand-blue text-white py-16 flex flex-col items-center justify-center">
+        <div className="grid lg:grid-cols-2 md:grid-cols-2 gap-2 text-left max-w-screen-2xl mx-auto px-10">
+          <div className="text-left" >
             <div className="space-y-3">
               <div>
                 <a
                   href="https://creativecommons.org/licenses/by/4.0/"
-                  className="ml-4 flex items-center"
-                >
-                  <GrCreativeCommons className="mr-1" />
-                  <FaCreativeCommonsBy className="mr-1" />
+                   className="flex items-center">
+                  <div className="flex flex-wrap text-lg">
+                    <GrCreativeCommons className="mr-1 my-1" />
+                    <FaCreativeCommonsBy className="mr-1 my-1" />
+                  </div>
                   United Nations Development Programme
                 </a>
-                <a
-                  href="https://www.undp.org/copyright-terms-use" target="_blank"
-                  className="ml-4 flex items-center mt-2 underline"
-                >
-                  Privacy Policy
-                </a>
-                <Link href="/disclaimer">
-                  <a className="ml-4 flex items-center mt-2 underline">
-                  Disclaimer
+                <div className="flex gap-4">
+                  <a href="https://www.undp.org/copyright-terms-use" target="_blank"
+                    className="flex items-center mt-2 underline">
+                    Privacy Policy
                   </a>
-                </Link>
+                  <Link href="/disclaimer">
+                    <a className="flex items-center mt-2 underline">
+                      Disclaimer
+                    </a>
+                  </Link>
+                </div>
               </div>
-              <div className="ml-4 text-left">
+              <div className="text-left">
                 <p>
                   <a
                     href="https://undp2020cdo.typeform.com/FeedbackDDD"
@@ -53,7 +55,7 @@ const Layout = ({ children, title = "", countries = [] }: Props) => {
                   </a>
                 </p>
               </div>
-              <div className="ml-4 text-left">
+              <div className="text-left">
                 <a
                   className="hover:underline items-center inline-flex"
                   href="https://github.com/undp/digital-development-compass"
@@ -64,9 +66,9 @@ const Layout = ({ children, title = "", countries = [] }: Props) => {
               </div>
             </div>
           </div>
-          <div className="ml-10 text-left flex flex-col justify-start items-center md:items-start">
-            <p className="text-xs">
-              The designations employed and the presentation of material on this map do not imply the expression of any opinion whatsoever on the part of the Secretariat of the United Nations or UNDP concerning the legal status of any country, territory, city or area or its authorities, or concerning the delimitation of its frontiers or boundaries.<br/><br/>
+          <div className="lg:text-right flex flex-col justify-start items-center md:items-start border-t md:border-t-0 md:mt-0 md:pt-0 pt-5 mt-5">
+            <p className="text-sm text-justify">
+              The designations employed and the presentation of material on this map do not imply the expression of any opinion whatsoever on the part of the Secretariat of the United Nations or UNDP concerning the legal status of any country, territory, city or area or its authorities, or concerning the delimitation of its frontiers or boundaries.<br /><br />
               References to Kosovo* shall be understood to be in the context of UN Security Council resolution 1244 (1999)
             </p>
           </div>

ui/components/about-scrollytelling.tsx

@@ -15,8 +15,8 @@ export default function AboutScrollytelling({
       {[
         "Each nation is ranked according to a stage of digital readiness.",
         <>
-          These are scored from <span className="font-mono">1</span> to{" "}
-          <span className="font-mono">5.99</span>
+          These are scored from <span className="font-mono">0</span> to{" "}
+          <span className="font-mono">5</span>
         </>,
         "We then use UNDP’s Digital Transformation Framework to understand the digital state of a given nation",
         "Each pillar is investigated",
@@ -25,7 +25,7 @@ export default function AboutScrollytelling({
         <>
           For instance, here our analysis shows that {country["Country or Area"]} scored a{" "}
           <span className="font-mono">{countryFocusedSubpillar.score}</span> on
-          the connectivity technology sub-pillar.
+          the physical infrastructure sub-pillar.
         </>,
       ].map((text, index) => (
         <Step data={index} key={index}>

ui/components/circle-text.tsx

@@ -27,7 +27,40 @@ export const CircleText = ({
       {/* @ts-ignore */}
       <text textAnchor="middle" {...props}>
         <textPath href={`#${id}`} startOffset="50%">
-          {text}
+        {(() => {
+                // const text = text// Replace this with your actual text
+                const maxLength = 25;
+
+                if (text.length > maxLength) {
+                    const words = text.split(' ');
+                    let lines = [];
+                    let currentLine = '';
+
+                    words.forEach(word => {
+                        if ((currentLine + word).length <= maxLength) {
+                            currentLine += word + ' ';
+                        } else {
+                            lines.push(currentLine.trim());
+                            currentLine = word + ' ';
+                        }
+                    });
+
+                    if (currentLine.trim().length > 0) {
+                        lines.push(currentLine.trim());
+                    }
+
+                    const lineHeight = 1; // Adjust line height as needed
+                    const yOffset = (lines.length - 1) * lineHeight / 2;
+
+                    return lines.map((line, index) => (
+                        <tspan key={index} x="0" dy={`${index === 0 ? -yOffset : lineHeight}em`}>
+                            {line}
+                        </tspan>
+                    ));
+                } else {
+                    return <tspan>{text}</tspan>;
+                }
+            })()}
         </textPath>
       </text>
     </>

ui/components/cookie-consent.tsx

@@ -0,0 +1,45 @@
+import { useState, useEffect } from "react";
+
+const CookieConsent = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const cookieConsent = localStorage.getItem("cookieConsent");
+    if (!cookieConsent) {
+      setIsVisible(true);
+    }
+  }, []);
+
+  const handleAccept = () => {
+    localStorage.setItem("cookieConsent", "true");
+    setIsVisible(false);
+  };
+
+  if (!isVisible) return null;
+
+  return (
+    <div className="fixed inset-x-0 bottom-0 cookie-bg-color text-white p-4 flex flex-col md:flex-row justify-between items-center">
+      <div className="max-w-full md:max-w-[calc(100%-250px)] space-y-4 md:space-y-0">
+        <p>
+          We use cookies on our website to give you the most relevant experience
+          by remembering your preferences and repeat visits. By clicking “Accept
+          All”, you consent to the use of ALL the cookies. However, you may
+          visit "Cookie Settings" to provide a controlled consent.
+        </p>
+      </div>
+      <div className="flex flex-wrap items-center space-x-2 mt-4 md:mt-0">
+        <button
+          onClick={handleAccept}
+          className="bg-white hover:bg-brand-blue text-brand-blue-dark hover:text-white font-semibold py-2 px-4 rounded"
+        >
+          Accept All
+        </button>
+        <a href="https://www.undp.org/copyright-terms-use" target="_blank">
+          Cookie Settings
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default CookieConsent;

ui/components/country-comparisons.tsx

@@ -4,7 +4,7 @@ import { interpolateHclLong, scaleLinear } from "d3";
 import { ancillary, Pillar } from "database/ancillary";
 import type { Country } from "database/processed/db";
 import { AnimatePresence, motion } from "framer-motion";
-import { pillarColorMap, roundNumber } from "lib";
+import { roundNumber } from "lib";
 import Link from "next/link";
 import { useMemo, useState } from "react";
 import useSWR from "swr";
@@ -18,7 +18,7 @@ async function fetchComparisonData(_: string, iso3: string, key: string) {
   // @ts-ignore
   const res = await fetch(`${url}?${stringifiedParams}`);
   return await res.json();
-}
+} 
 
 interface CountryComparisonsProps {
   relatedCountries?: Pick<
@@ -32,7 +32,7 @@ interface CountryComparisonsProps {
 export function CountryComparisons(props: CountryComparisonsProps) {
   const { country, pillars, relatedCountries = [] } = props;
   const [sameKey, setSameKey] = useState<string>("Sub-region Name");
-  const [pillar, setPillar] = useState<string>("Foundations");
+  const [pillar, setPillar] = useState<string>("Digital Public Infrastructure");
   const [subpillar, setSubpillar] = useState<string>();
   const countryCode = country["ISO-alpha3 Code"];
   const pillarNames = Object.keys(pillars);
@@ -48,7 +48,7 @@ export function CountryComparisons(props: CountryComparisonsProps) {
   };
 
   const colorScale = useMemo(() => {
-    const colorRange = pillarColorMap[pillar];
+    const colorRange = ancillary.pillarColorMap[pillar];
     return scaleLinear<string>()
       .domain([0, 6])
       .range([colorRange.triple[1], colorRange.triple[2]])
@@ -106,14 +106,14 @@ export function CountryComparisons(props: CountryComparisonsProps) {
           trigger={
             <span
               className="text-xs text-white font-medium uppercase tracking-widest py-[0.3em] px-[1em] rounded-full"
-              style={{ background: pillarColorMap[pillar].base }}
+              style={{ background: ancillary.pillarColorMap[pillar].base }}
             >
               {pillar}
             </span>
           }
           itemRenderer={(option) => {
             let asPillar = option as Pillar;
-            let color = pillarColorMap[asPillar].base;
+            let color = ancillary.pillarColorMap[asPillar].base;
             return (
               <span
                 className="text-xs text-white font-medium uppercase tracking-widest py-[0.3em] px-[1em] rounded-full"
@@ -207,7 +207,7 @@ export function CountryComparisons(props: CountryComparisonsProps) {
                     animate={{
                       left: `${xScale(score)}%`,
                       background: isSelected
-                        ? pillarColorMap[pillar].base
+                        ? ancillary.pillarColorMap[pillar].base
                         : colorScale(score),
                     }}
                     transition={{

ui/components/globe-progress-indicator.tsx

@@ -1,3 +1,4 @@
+//import ancillary from "database/processed/ancillary";
 import { motion } from "framer-motion";
 import { useState } from "react";
 import { useInterval } from "react-use";
@@ -8,19 +9,20 @@ interface Props {
 
 const colorMap: Record<string, string> = {
   Overall: "stroke-pillar-overall",
-  Business: "stroke-pillar-business",
-  Foundations: "stroke-pillar-foundations",
+  Economy: "stroke-pillar-economy",
+  "Digital Public Infrastructure": "stroke-pillar-dpinfrastructure",
   Government: "stroke-pillar-government",
-  Infrastructure: "stroke-pillar-infrastructure",
+  Connectivity: "stroke-pillar-connectivity",
   People: "stroke-pillar-people",
   Regulation: "stroke-pillar-regulation",
-  Strategy: "stroke-pillar-strategy",
 };
 
 export function GlobeProgressIndicator(props: Props) {
   const [progress, setProgress] = useState(0);
   const { pillar } = props;
-  const strokeColorClass = colorMap[pillar];
+
+ // const strokeColorClass = ancillary.pillarColorMap[pillar as any];
+   const strokeColorClass =    colorMap[pillar];
 
   useInterval(() => {
     setProgress((curr) => curr + 1);

ui/components/globe-viz.tsx

@@ -176,7 +176,7 @@ export default function GlobeViz({
           const overallScore = datum.scores[pillar].score || 0;
           const isActive =
             hoveredCountry === datum.alpha3 || activeCountryId === datum.alpha3;
-
+          
           // @ts-ignore
           const color = isActive
             ? // @ts-ignore
@@ -223,7 +223,6 @@ export default function GlobeViz({
             setHoveredCountry(null);
           }
           if (!datum || !datum.unMember) {
-            // console.info("Disabled for non-member countries");
             return;
           }
           setHoveredCountry(datum.alpha3 || null);
@@ -232,7 +231,6 @@ export default function GlobeViz({
           let datum = d as GlobeDatum;
 
           if (!datum.unMember) {
-            // console.info("Disabled for non-member countries");
             return;
           }
           if (datum.alpha3 === activeCountryId) {

ui/components/header.tsx

@@ -11,7 +11,7 @@ export function SiteName() {
   return (
     <div className="flex items-center space-x-4">
       <div className="flex flex-col space-y-1">
-        <h1 className="text-sm font-medium lg:text-2xl max-w-[20ch] lg:max-w-full">
+      <h1 className="text-sm font-bold lg:text-xl max-w-[20ch] lg:max-w-full">
           Digital Development Compass
         </h1>
       </div>
@@ -69,17 +69,17 @@ export function Header(props: { countries: CountryNameAndAlpha[] }) {
           </div>
           <div className="flex items-center justify-end space-x-8">
             <Link href="/about">
-              <a className="uppercase text-sm hover:underline font-medium tracking-wider">
+            <a className="uppercase text-sm hover:text-brand-blue-dark font-medium tracking-wider">
                 About
               </a>
             </Link>
             <Link href="/data">
-              <a className="uppercase text-sm hover:underline font-medium tracking-wider">
+            <a className="uppercase text-sm hover:text-brand-blue-dark font-medium tracking-wider">
                 Data
               </a>
             </Link>
             <Link href="/methodology">
-              <a className="uppercase text-sm hover:underline font-medium tracking-wider">
+            <a className="uppercase text-sm hover:text-brand-blue-dark font-medium tracking-wider">
                 Methodology
               </a>
             </Link>