signalk-auto-polar/public/main.js

Aggregates boat performance data into running averages per wind condition (with a capped count) and displays the results via a static HTML/JS interface with CSV download.

(function() {
  // Default view type. If a URL parameter is provided, use it.
  let urlParams = new URLSearchParams(window.location.search);
  let viewType = urlParams.get("view") || "diagram";

  const toggleButton = document.getElementById("toggleViewButton");
  const contentDiv = document.getElementById("content");

  // Update toggle button text based on current view.
  function updateToggleButtonText() {
    toggleButton.textContent = (viewType === "diagram")
      ? "Switch to Table View"
      : "Switch to Diagram View";
  }

  // Clear any existing content.
  function clearContent() {
    contentDiv.innerHTML = "";
  }

  // Render the diagram view using Chart.js.
  function renderDiagram(data) {
    clearContent();
    const canvas = document.createElement("canvas");
    canvas.id = "chart";
    contentDiv.appendChild(canvas);
    const ctx = canvas.getContext("2d");

    // Prepare scatter plot data:
    // x-axis: Wind Angle (°)
    // y-axis: Average Boat Speed (knots)
    const chartData = {
      datasets: [{
        label: "Avg Boat Speed (knots)",
        data: data.map(item => ({ x: item.windAngle, y: item.avgSpeed })),
        backgroundColor: "rgba(75, 192, 192, 0.6)"
      }]
    };

    new Chart(ctx, {
      type: "scatter",
      data: chartData,
      options: {
        scales: {
          x: { title: { display: true, text: "Wind Angle (°)" } },
          y: { title: { display: true, text: "Avg Boat Speed (knots)" } }
        }
      }
    });
  }

  // Render the table view.
  function renderTable(data) {
    clearContent();
    let html = "<table border='1' cellspacing='0' cellpadding='4'><tr><th>Wind Speed (knots)</th><th>Wind Angle (°)</th><th>Count</th><th>Avg Boat Speed (knots)</th></tr>";
    data.forEach(item => {
      html += `<tr>
                <td>${item.windSpeed}</td>
                <td>${item.windAngle}</td>
                <td>${item.count}</td>
                <td>${item.avgSpeed.toFixed(2)}</td>
              </tr>`;
    });
    html += "</table>";
    contentDiv.innerHTML = html;
  }

  // Fetch aggregated data from the plugin's data endpoint and render the view.
  function renderView() {
    fetch("/plugin/polar-performance/data")
      .then(response => response.json())
      .then(data => {
        if (viewType === "diagram") {
          renderDiagram(data);
        } else {
          renderTable(data);
        }
      })
      .catch(err => {
        contentDiv.innerHTML = "Error loading data: " + err;
      });
  }

  // Toggle view type and re-render.
  toggleButton.addEventListener("click", function() {
    viewType = (viewType === "diagram") ? "table" : "diagram";
    updateToggleButtonText();
    renderView();
  });

  // Set the initial toggle button text and render the initial view.
  updateToggleButtonText();
  renderView();
})();