Update templates/index.html

templates/index.html

@@ -125,10 +125,12 @@
 
         const API_BASE_URL = '';
         
-        function getSDGBadge(score) {
-            if (score >= 67) return `<span class="sdg-badge sdg-positive">SDG+</span>`;
-            if (score >= 34) return `<span class="sdg-badge sdg-neutral">SDG Neutral</span>`;
-            return `<span class="sdg-badge sdg-negative">SDG-</span>`;
+        function getSDGBadge(label) {
+            if (!label) label = "neutral";
+            const lowerLabel = label.toLowerCase();
+            if (lowerLabel === "positive") return `<span class="sdg-badge sdg-positive">SDG+</span>`;
+            if (lowerLabel === "negative") return `<span class="sdg-badge sdg-negative">SDG-</span>`;
+            return `<span class="sdg-badge sdg-neutral">SDG Neutral</span>`;
         }
 
         let stockChart = null; // Variable to hold the chart instance
@@ -369,6 +371,11 @@
         }
 
         function renderAnalysis(data, stockInfo) {
+            // ✅ Define SDG variables at the top
+            const sdgLabel = data?.sdg?.label || "Neutral";
+            const sdgScore = data?.sdg?.score || 50;
+            const sdgExplanation = data?.sdg?.explanation || "No SDG-related impact detected.";
+
             const getRecommendationClass = (r) => {
                 if (!r) return 'rec-hold';
                 const lowerR = r.toLowerCase();
@@ -397,8 +404,7 @@
                                 ${data.recommendation}
                             </div>
                             <div>
-                                ${getSDGBadge(data.sdg_score)}
-                            </div>
+                                ${getSDGBadge(sdgLabel)} </div>
                         </div>
                     </div>
 
@@ -423,8 +429,7 @@
                                 <div class="mt-4">
                                     <h3 class="text-xl font-bold mb-2">SDG Explanation</h3>
                                     <div class="bg-black bg-opacity-20 p-4 rounded-lg text-gray-300 space-y-2">
-                                        ${convertMarkdownToHTML(data.sdg_details?.map(s => s.sdg.explanation).join("\n") || "No SDG explanation available.")}
-                                    </div>
+                                        ${convertMarkdownToHTML(sdgExplanation)} </div>
                                 </div>
                                 <div>
                                     <h3 class="text-xl font-bold mb-2">Valuation Analysis</h3>
@@ -469,9 +474,7 @@
                         <div>
                             <h3 class="text-xl font-bold mb-2">SDG Impact Score</h3>
                             <div class="bg-black bg-opacity-20 p-4 rounded-lg text-center">
-                                <p class="text-4xl font-bold">${data.sdg_score}</p>
-                                <p class="mt-2">${getSDGBadge(data.sdg_score)}</p>
-                            </div>
+                                <p class="text-4xl font-bold">${sdgScore}</p> <p class="mt-2">${getSDGBadge(sdgLabel)}</p> </div>
                         </div>
 
                         <div>