<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>График</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
    <style>
        body {
            background-color: #000;
            color: #00ff00;
            font-family: 'Arial', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            overflow: hidden;
            animation: backgroundAnimation 5s linear infinite;
        }

        .chart-container {
            width: 75%;
            max-width: 800px;
            border: 2px solid #00ff00;
            padding: 20px;
            box-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00;
            animation: neonBorder 1.5s ease-in-out infinite alternate;
        }

        @keyframes neonBorder {
            0% {
                box-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00, 0 0 15px #00ff00, 0 0 20px #00ff7f, 0 0 30px #00ff7f, 0 0 40px #00ff7f, 0 0 50px #00ff7f;
            }
            50% {
                box-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00, 0 0 40px #00ff7f, 0 0 50px #00ff7f, 0 0 60px #00ff7f, 0 0 70px #00ff7f;
            }
            100% {
                box-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00, 0 0 15px #00ff00, 0 0 20px #00ff7f, 0 0 30px #00ff7f, 0 0 40px #00ff7f, 0 0 50px #00ff7f;
            }
        }

        @keyframes backgroundAnimation {
            0% {
                background-position: 0% 50%;
            }
            100% {
                background-position: 100% 50%;
            }
        }
    </style>
</head>
<body>
<div class="chart-container">
    <canvas id="myChart"></canvas>
</div>
<script th:inline="javascript">
    /*[
     * Получаем JSON-данные из модели
     */
    var jsonData = /*[[${jsonData}]]*/;

    // Парсим JSON-данные
    jsonData = JSON.parse(jsonData);

    var xData = jsonData.x;
    var yData = jsonData.y;

    console.log("xData:", xData);
    console.log("yData:", yData);

    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: xData,
            datasets: [{
                label: 'Данные',
                data: yData,
                backgroundColor: 'rgba(0, 255, 0, 0.2)',
                borderColor: 'rgba(0, 255, 0, 1)',
                borderWidth: 2,
                pointBackgroundColor: 'rgba(0, 255, 0, 1)',
                pointBorderColor: '#00ff00',
                pointHoverBackgroundColor: '#00ff7f',
                pointHoverBorderColor: '#00ff7f'
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        color: 'rgba(0, 255, 0, 0.2)'
                    },
                    ticks: {
                        color: '#00ff00'
                    }
                },
                x: {
                    grid: {
                        color: 'rgba(0, 255, 0, 0.2)'
                    },
                    ticks: {
                        color: '#00ff00'
                    }
                }
            },
            plugins: {
                legend: {
                    labels: {
                        color: '#00ff00'
                    }
                }
            }
        }
    });
</script>
</body>
</html>

