{% extends "_base.html" %} {% block title %}{{ title }}{% endblock %} {% block
head_scripts %}
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
{% endblock %} {% block header %} {% with page_title="Arbitrade Dashboard",
page_subtitle="Live execution, P&L, and system state." %} {% include
"_header.html" %} {% endwith %} {% endblock %} {% block main_class %}shell{%
endblock %} {% block content %}

<section
  id="metrics-shell"
  hx-get="{{ metrics_endpoint }}"
  hx-target="this"
  hx-trigger="load, every 15s"
  hx-swap="outerHTML"
>
  {% include "partials/metrics.html" %}
</section>

<section
  id="overview-shell"
  hx-get="{{ overview_endpoint }}"
  hx-target="this"
  hx-trigger="load, every 10s"
  hx-swap="outerHTML"
>
  {% include "partials/overview.html" %}
</section>

<section
  id="controls-shell"
  hx-get="{{ controls_endpoint }}"
  hx-target="this"
  hx-trigger="load, every 20s"
  hx-swap="outerHTML"
>
  {% include "partials/controls.html" %}
</section>

<section
  id="charts-shell"
  hx-get="{{ charts_endpoint }}"
  hx-target="this"
  hx-trigger="load, every 30s"
  hx-swap="outerHTML"
>
  {% include "partials/charts.html" %}
</section>

{% endblock %} {% block scripts %}
<script>
  window.arbitradeRenderCharts = (payload) => {
    const chartHost = document.getElementById("opportunity-chart");
    if (!chartHost || typeof Chart === "undefined") {
      return;
    }

    const existing = Chart.getChart(chartHost);
    if (existing) {
      existing.destroy();
    }

    const data = JSON.parse(payload);
    if (!data.has_chart_data) {
      return;
    }

    new Chart(chartHost, {
      type: "line",
      data: {
        labels: data.labels,
        datasets: [
          {
            label: "Net %",
            data: data.net_pct_values,
            borderColor: "#2d6cdf",
            backgroundColor: "rgba(45, 108, 223, 0.18)",
            tension: 0.3,
            fill: true,
            yAxisID: "y",
          },
          {
            label: "Est profit USD",
            data: data.est_profit_values,
            borderColor: "#52c41a",
            backgroundColor: "rgba(82, 196, 26, 0.12)",
            tension: 0.3,
            fill: false,
            yAxisID: "y1",
          },
        ],
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        interaction: {
          mode: "index",
          intersect: false,
        },
        plugins: {
          legend: {
            labels: {
              color: "#e5eefb",
            },
          },
        },
        scales: {
          x: {
            ticks: {
              color: "#9fb2d0",
              maxRotation: 0,
              autoSkip: true,
            },
            grid: {
              color: "rgba(255, 255, 255, 0.06)",
            },
          },
          y: {
            position: "left",
            ticks: {
              color: "#9fb2d0",
            },
            grid: {
              color: "rgba(255, 255, 255, 0.06)",
            },
          },
          y1: {
            position: "right",
            ticks: {
              color: "#9fb2d0",
            },
            grid: {
              drawOnChartArea: false,
            },
          },
        },
      },
    });
  };

  const stream = new EventSource("{{ stream_endpoint }}");
  stream.addEventListener("metrics", (event) => {
    const panel = document.getElementById("metrics-panel");
    if (panel) {
      panel.outerHTML = JSON.parse(event.data);
    }
  });
  const overviewStream = new EventSource("{{ overview_stream_endpoint }}");
  overviewStream.addEventListener("overview", (event) => {
    const panel = document.getElementById("overview-panel");
    if (panel) {
      panel.outerHTML = JSON.parse(event.data);
    }
  });
</script>
{% endblock %}