{% extends 'navbar.html'%}
{% block content %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@2.3.1/build/global/luxon.min.js"></script>
<canvas id="line-chart" class="grad-border mt-3 mb-4" width="600" height="360"></canvas>
{% if cur_miners|length == 0 %}<a role="button" href="/scan" id="noMiners" class="w-100 btn btn-info">Click here to add miners.</a>{% endif %}


<div id="errors"></div>

<script>
if (!window.WebSocket) alert("WebSocket not supported by this browser");
var ws = new WebSocket("ws://{{request.url.hostname}}:{{request.url.port}}/dashboard/ws");
let all_data = []
let all_labels = []
ws.onmessage = function(event) {
    var new_data = JSON.parse(event.data)
    if (!new_data["miners"].length == 0) {
        total_hashrate = parseFloat(0)
        errors = document.getElementById("errors")
        for (i = 0; i< new_data["miners"].length; i++) {
            if (new_data["miners"][i].hasOwnProperty("error")) {
                if (!document.getElementById(new_data["miners"][i]["ip"] + "_error")) {
                    errors.innerHTML += "<div id='" + new_data["miners"][i]["ip"] + "_error" +
                    "' class='d-flex align-items-center p-1 mb-1 alert alert-danger'><strong class='p-0 m-0'>" +
                    new_data["miners"][i]["ip"] + ": " +
                    new_data["miners"][i]["error"] +
                    "</strong><div class='spinner-border spinner-border-sm ms-auto'></div></div>"
                }
            } else {
                if (document.getElementById(new_data["miners"][i]["ip"] + "_error")) {
                    document.getElementById(new_data["miners"][i]["ip"] + "_error").remove()
                }
                total_hashrate += parseFloat(new_data["miners"][i]["hashrate"])
            }
        };
        var chart = document.getElementById("line-chart")
        datetime = luxon.DateTime.fromISO(new_data["datetime"]).toLocal();
        if (minerDataChart.data.labels.length > 50) minerDataChart.data.labels.shift();
        if (minerDataChart.data.datasets[0].data.length > 50) minerDataChart.data.datasets[0].data.shift();
        minerDataChart.data.labels.push(datetime.toLocaleString(luxon.DateTime.TIME_WITH_SECONDS));
        minerDataChart.data.datasets[0].data.push(total_hashrate.toFixed(2));
        minerDataChart.update();
    }
};

var ctx = document.getElementById("line-chart").getContext("2d");
var width = document.getElementById("line-chart").width;
var chartGradient = ctx.createLinearGradient(0, 0, width, 0)
chartGradient.addColorStop(0, '#D0368A');
chartGradient.addColorStop(1, '#708AD4');

const chartAreaBorder = {
  id: 'chartAreaBorder',
  beforeDraw(chart, args, options) {
    const {ctx, chartArea: {left, top, width, height}} = chart;
    ctx.save();
    ctx.strokeStyle = options.borderColor;
    ctx.lineWidth = options.borderWidth;
    ctx.strokeRect(left, top, width, height);
    ctx.restore();
  }
};

var minerDataChart = new Chart(document.getElementById("line-chart"), {
  type: 'line',
  data: {
    labels: [
    ],
    datasets: [{
          label: "Hashrate",
          borderColor: chartGradient,
          pointBorderColor: chartGradient,
          pointBackgroundColor: chartGradient,
          pointHoverBackgroundColor: chartGradient,
          pointHoverBorderColor: chartGradient,
        data: [
        ],
      }
    ]
  },
  plugins: [chartAreaBorder],
  options: {
      animation: {
        easing: 'easeInSine',
        duration: 0
      },
      plugins: {
        chartAreaBorder: {
          borderColor: chartGradient,
          borderWidth: 1
        },
        legend: {
            labels: {
                color: chartGradient
            }
        },
        tooltip: {
            callbacks: {
                label: function(data) {
                    return data.dataset.data[data.dataIndex] + " TH/s";
                }
            }
        }
      },
    scales: {
        y: {
            min: 0, // minimum value
            suggestedMax: 100,
            stepSize: 10,
            ticks: {
                callback: function(value, index, ticks) {
                    return value + " TH/s";
                }
            }
        },
        x: {
            ticks: {
                maxTicksLimit: 6,
                maxRotation: 0,
            }
        }
    }
  }
});

</script>
{% endblock content %}