frontend done

static/index.html

@@ -13,9 +13,9 @@
     })();
   </script>
 
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;700&display=swap" rel="stylesheet">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;700&display=swap" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
 
   <link rel="stylesheet" href="/static/style.css">
@@ -57,6 +57,12 @@
             <label for="month_to">To</label>
             <select id="month_to"><option value="">All</option></select>
           </div>
+ <div class="filter-group">
+  <label class="toggle-label">
+    <input type="checkbox" id="show-all-species">
+    <span>Show "Other species" bucket</span>
+  </label>
+</div>
           <button class="apply-btn" id="apply-filters">Apply</button>
         </div>
       </div>
@@ -75,12 +81,12 @@
 
         <div id="charts-grid" class="charts-grid" style="display:none;">
           <div class="chart-container full-width">
-            <div class="chart-title">Total Landings (Mass & Value)</div>
+            <div class="chart-title">Total Landings (Mass &amp; Value)</div>
             <div id="chart-line" style="width:100%; height:420px;"></div>
           </div>
           <div class="chart-container">
-            <div class="chart-title">Top Species by Value</div>
-            <div id="chart-donut" style="width:100%; height:380px;"></div>
+            <div class="chart-title">Price per kg Trend</div>
+            <div id="chart-price" style="width:100%; height:380px;"></div>
           </div>
           <div class="chart-container">
             <div class="chart-title">Monthly Value by Top Species</div>