Kafka-project-energy-consumption/index.html at main · Domaakshithareddy/Kafka-project-energy-consumption · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EIA Electricity Retail Sales</title>
    <script src="https://cdn.jsdelivr.net/npm/react@18.2.0/umd/react.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/react-dom@18.2.0/umd/react-dom.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.22.9/babel.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    <div id="root" class="container mx-auto p-4"></div>
    <script type="text/babel">
        const { useState, useEffect, useRef } = React;

        function App() {
            const [data, setData] = useState([]);
            const [showPrice, setShowPrice] = useState(true);
            const chartRef = useRef(null);

            useEffect(() => {
                const fetchData = async () => {
                    try {
                        const response = await fetch("http://localhost:8000");
                        const result = await response.json();
                        setData(result);
                    } catch (error) {
                        console.error("Error fetching data:", error);
                    }
                };

                fetchData();
                const interval = setInterval(fetchData, 2000);
                return () => clearInterval(interval);
            }, []);

            useEffect(() => {
                if (data.length > 0) {
                    const ctx = document.getElementById("priceChart").getContext("2d");

                    if (chartRef.current) {
                        chartRef.current.destroy();
                    }

                    const label = showPrice ? "Average Price (cents/kWh)" : "Retail Sales (MWh)";
                    const values = showPrice ? data.map(d => d.price || 0) : data.map(d => d.sales || 0);

                    chartRef.current = new Chart(ctx, {
                        type: "bar",
                        data: {
                            labels: data.map(d => d.period),
                            datasets: [{
                                label: label,
                                data: values,
                                backgroundColor: data.map(() => 'rgba(54, 162, 235, 0.8)'),
                                borderColor: "rgba(75, 192, 192, 1)",
                                borderWidth: 1
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            scales: {
                                y: { beginAtZero: false }
                            }
                        }
                    });
                }
            }, [data, showPrice]);

            return (
                <div className="max-w-4xl mx-auto">
                    <h1 className="text-3xl font-bold mb-4">EIA Electricity Retail Sales</h1><br/>

                    <div className="mb-4">
                        <label className="flex items-center gap-2">
                            <input
                                type="checkbox"
                                checked={showPrice}
                                onChange={() => setShowPrice(prev => !prev)}
                                className="toggle toggle-sm"
                            />
                            <span className="text-lg">{showPrice ? "Showing Price" : "Showing Sales"}</span>
                        </label>
                    </div>

                    <div className="w-full h-96">
                        <canvas id="priceChart" className="w-full h-full"></canvas>
                    </div>
                </div>
            );
        }

        ReactDOM.render(<App />, document.getElementById("root"));
    </script>
</body>
</html>