ui fix

package.json

@@ -94,6 +94,8 @@
   "dependencies": {
     "https": "^1.0.0",
     "jsconfig.json": "^2.3.3",
+    "plotly.js": "^2.35.3",
+    "svelte-plotly.js": "^1.2.0",
     "ua-parser-js": "^1.0.37"
   },
   "description": "UI of stocknear - Stock Analysis & Community Platform for Small Investors.",

src/lib/components/Options/UnusualActivity.svelte

@@ -273,7 +273,7 @@
     optionType: { order: "none", type: "string" },
     unusualType: { order: "none", type: "string" },
     dte: { order: "none", type: "number" },
-    sentiment: { order: "none", type: "string" },
+    sentiment: { order: "none", type: "sentiment" },
     size: { order: "none", type: "number" },
     strike: { order: "none", type: "number" },
     avgPrice: { order: "none", type: "number" },
@@ -319,6 +319,13 @@
           return sortOrder === "asc"
             ? valueA.localeCompare(valueB)
             : valueB.localeCompare(valueA);
+        case "sentiment":
+          const sentimentOrder = { BULLISH: 1, NEUTRAL: 2, BEARISH: 3 };
+          const sentimentA = sentimentOrder[a?.sentiment?.toUpperCase()] || 4;
+          const sentimentB = sentimentOrder[b?.sentiment?.toUpperCase()] || 4;
+          return sortOrder === "asc"
+            ? sentimentA - sentimentB
+            : sentimentB - sentimentA;
         case "number":
         default:
           valueA = parseFloat(a[key]);
@@ -326,11 +333,10 @@
           break;
       }
 
-      if (sortOrder === "asc") {
-        return valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
-      } else {
-        return valueA > valueB ? -1 : valueA < valueB ? 1 : 0;
-      }
+      // Default comparison for numbers and fallback case
+      if (valueA < valueB) return sortOrder === "asc" ? -1 : 1;
+      if (valueA > valueB) return sortOrder === "asc" ? 1 : -1;
+      return 0;
     };
 
     // Sort using the generic comparison function

src/routes/heatmap/+page.svelte

@@ -1,17 +1,47 @@
-<script lang="ts">
-  import { onMount } from "svelte";
+<script>
+  import Plot from "svelte-plotly.js";
 
-  export let data; // Expect `data` to include necessary Plotly configuration.
+  // Treemap data configuration
+  const data = [
+    {
+      type: "treemap",
+      labels: [
+        "Eve",
+        "Cain",
+        "Seth",
+        "Enos",
+        "Noam",
+        "Abel",
+        "Awan",
+        "Enoch",
+        "Azura",
+      ],
+      parents: ["", "Eve", "Eve", "Seth", "Seth", "Eve", "Eve", "Awan", "Eve"],
+      textinfo: "label+parent",
+      marker: { line: { width: 2 } },
+    },
+  ];
 
-  let plotContainer;
+  // Layout configuration with black background
+  const layout = {
+    title: "Family Tree Treemap",
+    margin: { l: 0, r: 0, b: 20, t: 40 },
+    width: 800,
+    height: 600,
+    paper_bgcolor: "#09090b", // Sets the outer background to black
+    font: { color: "#FFFFFF" }, // Optional: Change text color to white for better contrast
+  };
 </script>
 
-{@html data?.getData}
+<div class="w-full min-h-screen">
+  <div class="treemap-container">
+    <Plot {data} {layout} />
+  </div>
+</div>
 
 <style>
-  .plot-container {
-    width: 100%;
-    height: 100%;
-    min-height: 500px;
+  .treemap-container {
+    margin: 1rem;
+    padding: 1rem;
   }
 </style>