Merge pull request #49 from xeptagondev/score_ring_issues

Score ring issues

Author: janithr1

ui/components/digital-right-indicator-list.tsx

@@ -175,23 +175,29 @@ const Indicator = ({
       if (!isNaN(number)) {
         return number;  
       }
-     if (indicator.raw_data_col.length > 3) {
+      const cleanedData = indicator.raw_data_col.replace(/^["']+|["']+$/g, '').trim();
+
+      if (cleanedData.length > 9) {
+        // Find the first word
+        const firstWord = cleanedData.split(' ')[0];
+        
         return (
           <span
             onMouseEnter={() => setIsHovered(true)}
             onMouseLeave={() => setIsHovered(false)}
           >
-            {indicator.raw_data_col.substring(0, 3)}...
+            {firstWord}...
           </span>
         );
       } else {
-        return indicator.raw_data_col;
+        return cleanedData;
       }
     } else {
       return hasNoData ? "Data unavailable" : disp_val;
     }
   };
 
+
   const getWidthClass = () => {
     if (indicator.raw_data_col.length <= 7) {
       return "w-auto";
@@ -211,7 +217,7 @@ const Indicator = ({
           {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}
+              {indicator.raw_data_col.replace(/^["']+|["']+$/g, '').trim()}
             </div>
           )}
         </span>

ui/components/indicator-list.tsx

@@ -191,17 +191,22 @@ const Indicator = ({
       if (!isNaN(number)) {
         return number;  
       }
-      if (indicator.raw_data_col.length > 3) {
+      const cleanedData = indicator.raw_data_col.replace(/^["']+|["']+$/g, '').trim();
+
+      if (cleanedData.length > 9) {
+        // Find the first word
+        const firstWord = cleanedData.split(' ')[0];
+        
         return (
           <span
             onMouseEnter={() => setIsHovered(true)}
             onMouseLeave={() => setIsHovered(false)}
           >
-            {indicator.raw_data_col.substring(0, 3)}...
+            {firstWord}...
           </span>
         );
       } else {
-        return indicator.raw_data_col;
+        return cleanedData;
       }
     } else {
       return hasNoData ? "Data unavailable" : disp_val;
@@ -229,7 +234,7 @@ const Indicator = ({
               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}
+              {indicator.raw_data_col.replace(/^["']+|["']+$/g, '').trim()}
             </div>
           )}
         </span>

ui/pages/about.tsx

@@ -573,12 +573,9 @@ const Scrollytelling = ({ country }: { country: any }) => {
           )}
 
           {currentStepIndex > 1 && currentStepIndex < 5 && (
-            <>
-              <SolarSystem
-                isExpandedDefault={currentStepIndex === 4}
-                isHighlightingPillars={currentStepIndex === 3}
-              />
-            </>
+            <div className="SolarSystem w-[min(70vh,100%)] pointer-events-[all]">
+                <img src="/DTF.gif" alt="DTF Animation" />
+            </div>
           )}
 
           {currentStepIndex > 4 && currentStepIndex < 7 && (