{% extends 'base_navbar.html' %}
{% block content %}
<main class="container">
    <div class="bg-light p-5 rounded">
        <h1>Chart</h1>
        <canvas class="my-4 w-100" id="chart1-realtime" width="800" height="400"></canvas>
        <canvas class="my-4 w-100" id="myChart11" width="900" height="400"></canvas>
    </div>

    <!--suppress JSUnresolvedLibraryURL -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <!--suppress JSUnresolvedLibraryURL -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <!--suppress JSUnresolvedLibraryURL -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>

    <!--아직 draw_chart.js 로 보내지 못했다 21.09-->
    <script>
    $(document).ready(function () {
        const config = {
            type: 'line',
            data: {
                labels: [],
                datasets: [{
                    label: "ADC Dataset",
                    backgroundColor: 'rgb(255, 99, 132)',
                    borderColor: 'rgb(255, 99, 132)',
                    data: [], fill: false,
                },
                {
                    label: "CPU Temperature",
                    backgroundColor: 'rgb(55, 99, 132)',
                    borderColor: 'rgb(55, 99, 132)',
                    data: [], fill: false,
                }],
            },
            options: {
                responsive: true,
                title: {
                    display: true, text: 'Real-Time Chart'
                },
                tooltips: {
                    mode: 'index', intersect: false,
                },
                hover: {
                    mode: 'nearest', intersect: true
                },
                scales: {
                    xAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true, labelString: 'Time'
                        }
                    }],
                    yAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true, labelString: 'Value'
                        }
                    }]
                }
            }
        };

        const context = document.getElementById('chart1-realtime').getContext('2d');
        const lineChart = new Chart(context, config);
        const source = new EventSource("/chart-data");
        source.onmessage = function (event) {
            const data = JSON.parse(event.data);
            if (config.data.labels.length === 10) {
                config.data.labels.shift();
                config.data.datasets[0].data.shift();
                config.data.datasets[1].data.shift();
            }
            config.data.labels.push(data.time);
            config.data.datasets[0].data.push(data.value);
            config.data.datasets[1].data.push(data.temp);
            lineChart.update();
        }
    });
    </script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js"
            integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"
            integrity="sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha"
            crossorigin="anonymous"></script>
    <script src="/static/js/bootstrap.bundle.min.js"></script>
    <script src="/static/js/draw_chart.js"></script>
</main>
{% endblock %}
