{% extends "base.html" %}


{% block content %}
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <p>{{ plant.name }}</p>
    <p>{{ plant.bought }}</p>
    <br>

    <h5>Temperature and Moisture Graph</h5>
    <canvas id="temperatureMoistureChart" width="400" height="200"></canvas>



    <!-- JavaScript code to render the temperature graph -->

    <script>
        let ctx = document.getElementById('temperatureMoistureChart').getContext('2d');

        let temperatureData = [
            {% for temp in temps %}
                {{ temp.temp }},
            {% endfor %}
        ];

        let moistureData = [
            {% for moist in moists %}
                {{ moist.moisture }},
            {% endfor %}
        ];

        let dateTimes = [
            {% for temp in temps %}
                "{{ temp.dateTime|date:"d.m.y h:i" }}",
            {% endfor %}
        ];

        new Chart(ctx, {
            type: 'line',
            data: {
                labels: dateTimes,
                datasets: [
                    {
                        label: 'Temperature',
                        data: temperatureData,
                        borderColor: 'rgb(34, 36, 36)',
                        tension: 0.1,
                        yAxisID: 'temperature-y-axis'
                    },
                    {
                        label: 'Moisture',
                        data: moistureData,
                        borderColor: 'rgb(75, 192, 192)',
                        tension: 0.1,
                        yAxisID: 'moisture-y-axis'
                    }
                ]
            },
            options: {
                scales: {
                    y: [
                        {
                            id: 'temperature-y-axis',
                            type: 'linear',
                            position: 'left',
                            beginAtZero: true
                        },
                        {
                            id: 'moisture-y-axis',
                            type: 'linear',
                            position: 'right',
                            beginAtZero: true
                        }
                    ]
                }
            }
        });
    </script>

{% endblock %}