Fix some minor issues

Author: siyuanZHANG01

docs/index.html

@@ -243,6 +243,10 @@
         <div class="activity-context-bar compare">
           <span id="activity-compare-context-label">Comparison port</span>
         </div>
+        <div class="rp-section">
+          <div class="section-title">Monthly Activity</div>
+          <div class="chart-wrap"><div id="chart-monthly-compare"></div></div>
+        </div>
         <div class="rp-section">
           <div class="section-title">Hourly Activity</div>
           <div class="chart-wrap"><div id="chart-hourly-compare"></div></div>

docs/js/charts.js

@@ -6,7 +6,7 @@ const Charts = (() => {
     d3.select(el).selectAll("*").remove();
   }
 
-  const CHART_HEIGHTS = { "chart-monthly": 100, "chart-hourly": 110, "chart-hourly-compare": 110, "chart-sog": 90, "chart-sog-compare": 90, "chart-types": 160, "chart-types-compare": 160, "chart-status": 130, "chart-status-compare": 130, "chart-radar": 230 };
+  const CHART_HEIGHTS = { "chart-monthly": 100, "chart-monthly-compare": 100, "chart-hourly": 110, "chart-hourly-compare": 110, "chart-sog": 90, "chart-sog-compare": 90, "chart-types": 160, "chart-types-compare": 160, "chart-status": 130, "chart-status-compare": 130, "chart-radar": 230 };
   const MONTH_ABBR = ["", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
 
   function getSize(el) {
@@ -17,8 +17,8 @@ const Charts = (() => {
     return { w: Math.max(w, 180), h: Math.max(h, fallbackH) };
   }
 
-  function drawMonthly(data, highlightMonth = null) {
-    const el = sel("chart-monthly");
+  function drawMonthly(data, highlightMonth = null, targetId = "chart-monthly") {
+    const el = sel(targetId);
     if (!el) return;
     clearSvg(el);
     const { w, h } = getSize(el);

docs/js/main.js

@@ -241,6 +241,12 @@ function setViewMode(isPortView) {
   }
   updateViewButtons(isPortView);
 
+  const rightPanel = $("right-panel");
+  if (rightPanel) {
+    rightPanel.style.opacity = isPortView ? "1" : "0.35";
+    rightPanel.style.pointerEvents = isPortView ? "" : "none";
+  }
+
   const legend = $("map-legend");
   if (!legend) return;
   if (isPortView) {
@@ -504,6 +510,7 @@ function updateActivityCharts() {
     if (compare) {
       if (compareLabel) compareLabel.textContent = `Comparison: ${compare.name}`;
       if (compareGroup) compareGroup.classList.add("visible");
+      Charts.drawMonthly(computePortMonthly(compare.id), null, "chart-monthly-compare");
       Charts.drawHourly(computePortHourly(compare.id), highlightHour, "chart-hourly-compare");
       Charts.drawSog(computePortSog(compare.id), "chart-sog-compare");
       Charts.drawStatus(computePortPatternStatus(compare.id), "chart-status-compare", "Pattern");
@@ -556,8 +563,8 @@ function computePortPatternStatus(portId) {
 function getPortStats(port) {
   const trajs = _filterTrajs(port.id);
   return {
-    vessels:  fmt(port.n_unique_vessels),
-    records:  fmt(port.n_records),
+    vessels:  fmt(new Set(trajs.map(t => t.mmsi)).size),
+    records:  fmt(trajs.length),
     inbound:  trajs.filter(t => t.pattern === "inbound").length,
     outbound: trajs.filter(t => t.pattern === "outbound").length,
     anchored: trajs.filter(t => t.pattern === "anchored").length,