Enhance results view and add voting analysis features

- Introduced detailed voting analysis in the ResultsView, including co-approval rates, approval distributions, and "Anyone But" analysis.
- Updated results.html to display new voting patterns and analysis tables.
- Improved JavaScript for dynamic chart color adjustments based on dark mode preferences.
- Enhanced CSS for better styling of voting analysis tables and charts.
- Adjusted base.html and index.html for improved layout and button styling.

Author: fsargent

approval_polls/staticfiles/embed_instructions.js

@@ -35,14 +35,14 @@ $(document).ready(function () {
       document.execCommand("copy");
       if ($("#alert-success").length === 0) {
         $(
-          "<div id = 'alert-success' class='alert alert-success' style='margin-top:10px'>" +
+          "<div id = 'alert-success' class='alert alert-success alert-margin-top'>" +
             "<strong>Success!</strong> Text copied to clipboard!.</div>",
         ).insertAfter($("#copyText"));
       }
     } catch (err) {
       if ($("#alert-danger").length === 0) {
         $(
-          "<div id = 'alert-danger' class='alert alert-danger' style='margin-top:10px'>" +
+          "<div id = 'alert-danger' class='alert alert-danger alert-margin-top'>" +
             "<strong>Oops, unable to copy!</strong>" +
             " To copy the text to clipboard: Ctrl+C!.</div>",
         ).insertAfter($("#copyText"));

approval_polls/staticfiles/results.js

@@ -30,31 +30,71 @@ document.addEventListener("DOMContentLoaded", async function () {
   // Build a debug table of ballots (optional)
   buildVotesTable(rawBallots, choices);
 
+  // Helper function to detect dark mode
+  function isDarkMode() {
+    return (
+      window.matchMedia &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches
+    );
+  }
+
+  // Get chart colors based on dark mode
+  function getChartColors() {
+    if (isDarkMode()) {
+      // Dark mode colors - brighter and more saturated
+      return {
+        backgroundColor: [
+          "rgba(75, 192, 192, 0.8)",
+          "rgba(255, 99, 132, 0.8)",
+          "rgba(255, 206, 86, 0.8)",
+          "rgba(54, 162, 235, 0.8)",
+          "rgba(153, 102, 255, 0.8)",
+          "rgba(255, 159, 64, 0.8)",
+        ],
+        borderColor: [
+          "rgba(75, 192, 192, 1)",
+          "rgba(255, 99, 132, 1)",
+          "rgba(255, 206, 86, 1)",
+          "rgba(54, 162, 235, 1)",
+          "rgba(153, 102, 255, 1)",
+          "rgba(255, 159, 64, 1)",
+        ],
+      };
+    } else {
+      // Light mode colors
+      return {
+        backgroundColor: [
+          "rgba(75, 192, 192, 0.6)",
+          "rgba(255, 99, 132, 0.6)",
+          "rgba(255, 206, 86, 0.6)",
+          "rgba(54, 162, 235, 0.6)",
+          "rgba(153, 102, 255, 0.6)",
+          "rgba(255, 159, 64, 0.6)",
+        ],
+        borderColor: [
+          "rgba(75, 192, 192, 1)",
+          "rgba(255, 99, 132, 1)",
+          "rgba(255, 206, 86, 1)",
+          "rgba(54, 162, 235, 1)",
+          "rgba(153, 102, 255, 1)",
+          "rgba(255, 159, 64, 1)",
+        ],
+      };
+    }
+  }
+
   // 2. Create Chart.js pie chart
   const ctx = document.getElementById("spavChart").getContext("2d");
+  const chartColors = getChartColors();
   const spavChart = new Chart(ctx, {
     type: "pie",
     data: {
       labels: choices.map((c) => c.choice_text),
       datasets: [
         {
           data: choices.map(() => 0),
-          backgroundColor: [
-            "rgba(75, 192, 192, 0.6)",
-            "rgba(255, 99, 132, 0.6)",
-            "rgba(255, 206, 86, 0.6)",
-            "rgba(54, 162, 235, 0.6)",
-            "rgba(153, 102, 255, 0.6)",
-            "rgba(255, 159, 64, 0.6)",
-          ],
-          borderColor: [
-            "rgba(75, 192, 192, 1)",
-            "rgba(255, 99, 132, 1)",
-            "rgba(255, 206, 86, 1)",
-            "rgba(54, 162, 235, 1)",
-            "rgba(153, 102, 255, 1)",
-            "rgba(255, 159, 64, 1)",
-          ],
+          backgroundColor: chartColors.backgroundColor,
+          borderColor: chartColors.borderColor,
           borderWidth: 1,
         },
       ],
@@ -64,11 +104,28 @@ document.addEventListener("DOMContentLoaded", async function () {
       plugins: {
         legend: {
           position: "bottom",
+          labels: {
+            color: isDarkMode() ? "#e0e0e0" : "#000000",
+          },
         },
       },
     },
   });
 
+  // Listen for dark mode changes and update chart colors
+  if (window.matchMedia) {
+    const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    darkModeQuery.addEventListener("change", (e) => {
+      const newColors = getChartColors();
+      spavChart.data.datasets[0].backgroundColor = newColors.backgroundColor;
+      spavChart.data.datasets[0].borderColor = newColors.borderColor;
+      spavChart.options.plugins.legend.labels.color = e.matches
+        ? "#e0e0e0"
+        : "#000000";
+      spavChart.update();
+    });
+  }
+
   // 3. SPAV allowing multiple seats, now with a debug log
   function spav(choices, ballots, seats) {
     const debugLines = [];