import React, { useEffect, useState } from 'react';
import { Line } from 'react-chartjs-2';
import axios from 'axios';
import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale } from 'chart.js';

// Регистрация компонентов Chart.js
ChartJS.register(Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale);

const SimpleGraph = () => {
    const [data, setData] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            try {
                // Загружаем данные из файла с использованием axios
                const response = await axios.get('/data.json'); // Путь должен быть относительно папки public
                const rawData = response.data;

                // Проверяем, что данные действительно массив
                if (Array.isArray(rawData)) {
                    const chartData = rawData.map(item => ({
                        timestamp: item.timestamp,
                        value: item.value,
                    }));

                    setData(chartData);
                } else {
                    throw new Error('Ошибка: Данные не являются массивом.');
                }
            } catch (error) {
                console.error('Error fetching data:', error);
            }
        };

        fetchData();
    }, []);

    if (data.length === 0) return <div>Loading...</div>;

    // Настройки графика
    const chartOptions = {
        responsive: true,
        plugins: {
            title: {
                display: true,
                text: 'Simple Data Graph',
            },
        },
    };

    const chartData = {
        labels: data.map(item => item.timestamp), // Массив меток для оси X
        datasets: [
            {
                label: 'Value',
                data: data.map(item => item.value), // Массив значений для оси Y
                borderColor: 'rgb(75, 192, 192)',
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                fill: false,
                tension: 0.1,
            },
        ],
    };

    return <Line data={chartData} options={chartOptions} />;
};

export default SimpleGraph;