From af0e22666574844b8a8d77e5b9fab54f140c36c0 Mon Sep 17 00:00:00 2001
From: Hugo Smith <huga@iinet.net.au>
Date: Fri, 16 May 2025 10:40:51 +0800
Subject: [PATCH 1/3] Add buttons to graph to choose a view

---
 src/app/static/js/visualise.js   | 78 ++++++++++++++++++++++----------
 src/app/templates/base.html      |  1 -
 src/app/templates/visualise.html | 13 +++++-
 3 files changed, 65 insertions(+), 27 deletions(-)

diff --git a/src/app/static/js/visualise.js b/src/app/static/js/visualise.js
index 17d86c5..6a95e58 100644
--- a/src/app/static/js/visualise.js
+++ b/src/app/static/js/visualise.js
@@ -1,33 +1,61 @@
-document.addEventListener("DOMContentLoaded", function() {
-  fetch('/chart/unit_data')
-    .then(res => res.json())
-    .then(data => {
-      new Chart(document.getElementById('unit_data'), {
+document.addEventListener("DOMContentLoaded", () => {
+  const friendBtn = document.getElementById('friendPicks');
+  const totalBtn  = document.getElementById('totalPicks');
+  const ctx       = document.getElementById('unit_data').getContext('2d');
+  let currentType = 'friend';
+  let chart;
+
+  function buildOrUpdate(data) {
+    const labels = data.labels;
+    const values = currentType === 'friend'
+      ? data.friend_count
+      : data.total_count;
+    const color  = currentType === 'friend'
+      ? 'rgba(29, 71, 225, 1)'
+      : 'rgba(192, 75, 75, 1)';
+
+    if (chart) {
+      chart.data.labels = labels;
+      chart.data.datasets = [{ label:
+           currentType === 'friend' ? 'Friend Picks' : 'Total Picks',
+           data: values,
+           backgroundColor: color
+      }];
+      chart.update();
+    } else {
+      chart = new Chart(ctx, {
         type: 'bar',
         data: {
-          labels: data.labels,
-          datasets: [
-            {
-              label: 'Friend Picks',
-              data: data.friend_count,
-              backgroundColor: 'rgba(29, 71, 225, 1)'
-            },
-            {
-              label: 'Total Picks',
-              data: data.total_count,
-              backgroundColor: 'rgba(192, 75, 75, 1)'
-            }
-          ]
+          labels,
+          datasets: [{
+            label: currentType === 'friend' ? 'Friend Picks' : 'Total Picks',
+            data: values,
+            backgroundColor: color
+          }]
         },
         options: {
           indexAxis: 'y',
-          scales: {
-            x: {
-              beginAtZero: true
-            }
-          }
+          scales: { x: { beginAtZero: true } }
         }
       });
-    });
-});
+    }
+  }
+
+  function fetchData() {
+    fetch('/chart/unit_data')
+      .then(res => res.json())
+      .then(buildOrUpdate);
+  }
 
+  friendBtn.addEventListener('click', () => {
+    currentType = 'friend';
+    fetchData();
+  });
+
+  totalBtn.addEventListener('click', () => {
+    currentType = 'total';
+    fetchData();
+  });
+
+  fetchData();
+});
diff --git a/src/app/templates/base.html b/src/app/templates/base.html
index e78683f..22399a6 100644
--- a/src/app/templates/base.html
+++ b/src/app/templates/base.html
@@ -14,7 +14,6 @@
   <script src="{{ url_for('static', filename='js/tailwindconfig.js') }}" defer></script>
   <script src="{{ url_for('static', filename='js/darkmode.js') }}" defer></script>
   <link rel="stylesheet" href="{{ url_for('static', filename='css/tailwindglobals.css') }}">
-  <link rel="stylesheet" href="{{ url_for('static', filename='css/alert.css') }}">
   <link rel="stylesheet" href="{{ url_for('static', filename='css/dashboard.css') }}">
   <link rel="stylesheet" href="{{ url_for('static', filename='css/discover.css') }}">
   <link rel="stylesheet" href="{{ url_for('static', filename='css/dropdown.css') }}">
diff --git a/src/app/templates/visualise.html b/src/app/templates/visualise.html
index 6dee12e..acd5166 100644
--- a/src/app/templates/visualise.html
+++ b/src/app/templates/visualise.html
@@ -3,7 +3,18 @@
 {% block title %}Visualise{% endblock %}
 
 {% block content %}
-<div class="flex w-full gap-8 items-start" style="max-height: 80vh;">
+<div class="w-full max-h-[80vh] bg-white dark:bg-dark-secondary rounded-lg p-6 shadow">
+  <!-- buttons row -->
+  <div class="flex space-x-4 mb-4">
+    <button id="friendPicks"
+            class="py-2 px-4 bg-blue-500 hover:bg-blue-600 text-white rounded">
+      Friend Picks
+    </button>
+    <button id="totalPicks"
+            class="py-2 px-4 bg-red-500 hover:bg-red-600 text-white rounded">
+      Total Picks
+    </button>
+  </div>
   <canvas id="unit_data"></canvas>
 </div>
 <script src="{{ url_for('static', filename='js/visualise.js') }}"></script>

From 5b2133272c314c195472c24aa376cbb12b4a64e8 Mon Sep 17 00:00:00 2001
From: Hugo Smith <huga@iinet.net.au>
Date: Fri, 16 May 2025 10:51:14 +0800
Subject: [PATCH 2/3] Attempt to style buttons

---
 src/app/templates/visualise.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/templates/visualise.html b/src/app/templates/visualise.html
index acd5166..f8daca8 100644
--- a/src/app/templates/visualise.html
+++ b/src/app/templates/visualise.html
@@ -3,7 +3,7 @@
 {% block title %}Visualise{% endblock %}
 
 {% block content %}
-<div class="w-full max-h-[80vh] bg-white dark:bg-dark-secondary rounded-lg p-6 shadow">
+<div class="flex flex-col w-full gap-8 items-start" style="max-height: 80vh;">
   <!-- buttons row -->
   <div class="flex space-x-4 mb-4">
     <button id="friendPicks"

From 8364aae5095360775b377f271b654ace6e8de436 Mon Sep 17 00:00:00 2001
From: Prashan Wijesinghe <86412584+Quarterpie3141@users.noreply.github.com>
Date: Fri, 16 May 2025 12:12:59 +0800
Subject: [PATCH 3/3] styled graph and added darkmode versions

---
 src/app/static/js/tailwindconfig.js |   2 +-
 src/app/static/js/visualise.js      | 168 +++++++++++++++++++++++-----
 src/app/templates/base.html         |   1 +
 src/app/templates/visualise.html    |  23 ++--
 4 files changed, 158 insertions(+), 36 deletions(-)

diff --git a/src/app/static/js/tailwindconfig.js b/src/app/static/js/tailwindconfig.js
index d4c746f..3a6e331 100644
--- a/src/app/static/js/tailwindconfig.js
+++ b/src/app/static/js/tailwindconfig.js
@@ -5,7 +5,7 @@ tailwind.config = {
         colors: {
           dark: {
             bg: '#121212',
-            fg: '#181818',
+            fg: '#191919',
             primary: '#E0E0E0',
             secondary: '#B0B0B0',
             border: '#343434',
diff --git a/src/app/static/js/visualise.js b/src/app/static/js/visualise.js
index 6a95e58..8010371 100644
--- a/src/app/static/js/visualise.js
+++ b/src/app/static/js/visualise.js
@@ -1,42 +1,156 @@
 document.addEventListener("DOMContentLoaded", () => {
   const friendBtn = document.getElementById('friendPicks');
-  const totalBtn  = document.getElementById('totalPicks');
-  const ctx       = document.getElementById('unit_data').getContext('2d');
+  const totalBtn = document.getElementById('totalPicks');
+  Chart.register(ChartDataLabels);
+  const ctx = document.getElementById('unit_data').getContext('2d');
   let currentType = 'friend';
   let chart;
 
+  //heatmap colors
+  const palette = [
+    '#ffa600',
+    '#ff7c43',
+    '#f95d6a',
+    '#d45087',
+    '#a05195',
+    '#665191',
+    '#2f4b7c',
+    '#003f5c',
+    '#2f4b7c',
+    '#665191',
+    '#a05195', 
+    '#d45087', 
+    '#f95d6a', 
+    '#ff7c43'
+  ];
+
+  function isDarkMode() { //checks if any of the current elements contain the dark class
+    return document.documentElement.classList.contains('dark');
+  }
+
+  function interpolateColor(startColor, endColor, factor) {
+    // take the r g and b values and turn them into ints
+    const start = startColor.match(/\w\w/g).map(x => parseInt(x, 16));
+    const end = endColor.match(/\w\w/g).map(x => parseInt(x, 16));
+
+    // interpolate the ints
+    const result = start.map((startValue, i) => 
+      Math.round(startValue + factor * (end[i] - startValue))
+    );
+
+    // convert back to hex format
+    return '#' + result.map(v => v.toString(16).padStart(2, '0')).join('');
+  }
+
   function buildOrUpdate(data) {
-    const labels = data.labels;
-    const values = currentType === 'friend'
-      ? data.friend_count
-      : data.total_count;
-    const color  = currentType === 'friend'
-      ? 'rgba(29, 71, 225, 1)'
-      : 'rgba(192, 75, 75, 1)';
+    // filter out data with 0 entries
+    const filteredData = {
+      labels: [],
+      friend_count: [],
+      total_count: []
+    };
+    
+    const values = currentType === 'friend' ? data.friend_count : data.total_count;
+    
+    // Create filtered array
+    data.labels.forEach((label, i) => {
+      if (values[i] !== 0) {
+        filteredData.labels.push(label);
+        filteredData.friend_count.push(data.friend_count[i]);
+        filteredData.total_count.push(data.total_count[i]);
+      }
+    });
+
+    const labels = filteredData.labels;
+    const filteredValues = currentType === 'friend' ? filteredData.friend_count : filteredData.total_count;
+    const dark = isDarkMode();
+
+    // give all of the bars a nice color using the pallete and the interpolation function
+    const colors = labels.map((_, i) => {
+      const totalSteps = labels.length - 1;
+      const t = i / totalSteps;
+      const scaledT = t * (palette.length - 1);
+      const lowerIndex = Math.floor(scaledT);
+      const upperIndex = Math.min(lowerIndex + 1, palette.length - 1);
+      const localT = scaledT - lowerIndex;
+      return interpolateColor(palette[lowerIndex], palette[upperIndex], localT);
+    });
+
+    ctx.canvas.height = labels.length * 50; // the labels are too big??
+
+    const dataset = {
+      label: currentType === 'friend' ? 'Friend Picks' : 'Total Picks',
+      data: filteredValues,
+      backgroundColor: colors,
+      // adjust these to mess around with the bar thicnkess and padding
+      borderRadius: 6,
+      maxBarThickness: 30,
+      barPercentage: 1.2,
+      categoryPercentage: 0.6
+    };
+    // darkmode variants TODO: have the graph redraw when the user togles between the two modes
+    const gridColor = dark ? 'rgba(255,255,255,0.05)' : 'rgba(229,231,235,0.3)';
+    const fontColor = dark ? '#D1D5DB' : '#6B7280';
+    const labelColor = dark ? '#F9FAFB' : '#111827';
+
+    const chartOptions = {
+      responsive: true,
+      maintainAspectRatio: false,
+      indexAxis: 'y',
+      scales: {
+        x: {
+          beginAtZero: true,
+          grid: { color: gridColor },
+          ticks: {
+            font: { family: 'Inter, sans-serif', size: 12 },
+            color: fontColor
+          }
+        },
+        y: {
+          ticks: {
+            padding: 12,
+            font: { family: 'Inter, sans-serif', size: 13, weight: '600' },
+            color: labelColor
+          },
+          grid: { display: false }
+        }
+      },
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          backgroundColor: dark ? '#111827' : '#1F2937',
+          titleColor: dark ? '#F9FAFB' : '#F9FAFB',
+          bodyColor: dark ? '#D1D5DB' : '#D1D5DB',
+          cornerRadius: 6,
+          padding: 10,
+          callbacks: {
+            label: ctx => `${ctx.dataset.label}: ${ctx.parsed.x}`
+          }
+        },
+        datalabels: {
+          anchor: 'start',
+          align: 'end',
+          color: '#F9FAFB',
+          font: {
+            family: 'Inter, sans-serif',
+            size: 12,
+            weight: '600'
+          },
+          formatter: value => value
+        }
+      }
+    };
 
     if (chart) {
       chart.data.labels = labels;
-      chart.data.datasets = [{ label:
-           currentType === 'friend' ? 'Friend Picks' : 'Total Picks',
-           data: values,
-           backgroundColor: color
-      }];
+      chart.data.datasets = [dataset];
+      chart.options = chartOptions;
       chart.update();
     } else {
       chart = new Chart(ctx, {
         type: 'bar',
-        data: {
-          labels,
-          datasets: [{
-            label: currentType === 'friend' ? 'Friend Picks' : 'Total Picks',
-            data: values,
-            backgroundColor: color
-          }]
-        },
-        options: {
-          indexAxis: 'y',
-          scales: { x: { beginAtZero: true } }
-        }
+        data: { labels, datasets: [dataset] },
+        options: chartOptions
       });
     }
   }
@@ -58,4 +172,4 @@ document.addEventListener("DOMContentLoaded", () => {
   });
 
   fetchData();
-});
+});
\ No newline at end of file
diff --git a/src/app/templates/base.html b/src/app/templates/base.html
index 22399a6..b5a99b2 100644
--- a/src/app/templates/base.html
+++ b/src/app/templates/base.html
@@ -11,6 +11,7 @@
   <!-- TailwindCSS CDN -->
   <script src="https://cdn.tailwindcss.com"></script>
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0"></script>
   <script src="{{ url_for('static', filename='js/tailwindconfig.js') }}" defer></script>
   <script src="{{ url_for('static', filename='js/darkmode.js') }}" defer></script>
   <link rel="stylesheet" href="{{ url_for('static', filename='css/tailwindglobals.css') }}">
diff --git a/src/app/templates/visualise.html b/src/app/templates/visualise.html
index f8daca8..8464db2 100644
--- a/src/app/templates/visualise.html
+++ b/src/app/templates/visualise.html
@@ -3,19 +3,26 @@
 {% block title %}Visualise{% endblock %}
 
 {% block content %}
-<div class="flex flex-col w-full gap-8 items-start" style="max-height: 80vh;">
+<div class="flex flex-col w-full gap-6 items-start p-4 bg-white rounded-2xl shadow-md dark:bg-dark-fg">
   <!-- buttons row -->
-  <div class="flex space-x-4 mb-4">
-    <button id="friendPicks"
-            class="py-2 px-4 bg-blue-500 hover:bg-blue-600 text-white rounded">
+  <div class="flex space-x-3 mb-4">
+    <button id="friendPicks" class="py-2 px-5 rounded-full font-medium transition
+                                     bg-indigo-100 hover:bg-indigo-200 text-indigo-800 dark:bg-indigo-800 dark:hover:bg-indigo-700 dark:text-white
+                                     focus:outline-none focus:ring-2 focus:ring-indigo-400">
+     
       Friend Picks
     </button>
-    <button id="totalPicks"
-            class="py-2 px-4 bg-red-500 hover:bg-red-600 text-white rounded">
+    <button id="totalPicks" class="py-2 px-5 rounded-full font-medium transition
+                                     bg-slate-100 hover:bg-slate-200 text-slate-800 dark:bg-slate-800 dark:hover:bg-slate-700 dark:text-white
+                                     focus:outline-none focus:ring-2 focus:ring-slate-400">
       Total Picks
     </button>
   </div>
-  <canvas id="unit_data"></canvas>
+
+
+  <div class="w-full relative">
+    <canvas id="unit_data" class="w-full dark:bg-dark-bg"></canvas>
+  </div>
 </div>
 <script src="{{ url_for('static', filename='js/visualise.js') }}"></script>
-{% endblock %}
+{% endblock %}
\ No newline at end of file