From 1b7cd7960e1297cc4f49c0b90478fa33f49661e4 Mon Sep 17 00:00:00 2001
From: Dongho Kim <dongho@ekstrah.com>
Date: Fri, 20 Dec 2024 17:18:40 +0900
Subject: [PATCH] candlebar added

---
 templates/candle_coin.html | 183 +++++++++++++++++++++++++++++++++++++
 1 file changed, 183 insertions(+)
 create mode 100644 templates/candle_coin.html
diff --git a/templates/candle_coin.html b/templates/candle_coin.html
new file mode 100644
index 0000000..7b7a317
--- /dev/null
+++ b/templates/candle_coin.html
@@ -0,0 +1,183 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>XRP Candlestick Chart</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/2.0.2/luxon.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-adapter-luxon/1.1.0/chartjs-adapter-luxon.min.js"></script>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 20px;
+            background-color: #f5f5f5;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            background-color: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        h1 {
+            color: #333;
+            text-align: center;
+            margin-bottom: 20px;
+        }
+        .chart-container {
+            position: relative;
+            height: 60vh;
+            width: 100%;
+        }
+        .info-container {
+            display: flex;
+            justify-content: space-around;
+            margin-top: 20px;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-radius: 4px;
+        }
+        .info-item {
+            text-align: center;
+        }
+        .info-label {
+            font-size: 0.9em;
+            color: #666;
+        }
+        .info-value {
+            font-size: 1.2em;
+            font-weight: bold;
+            margin-top: 5px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>XRP Candlestick Chart</h1>
+        <div class="chart-container">
+            <canvas id="candlestickChart"></canvas>
+        </div>
+        <div class="info-container">
+            <div class="info-item">
+                <div class="info-label">Open</div>
+                <div class="info-value" id="openPrice">-</div>
+            </div>
+            <div class="info-item">
+                <div class="info-label">High</div>
+                <div class="info-value" id="highPrice">-</div>
+            </div>
+            <div class="info-item">
+                <div class="info-label">Low</div>
+                <div class="info-value" id="lowPrice">-</div>
+            </div>
+            <div class="info-item">
+                <div class="info-label">Close</div>
+                <div class="info-value" id="closePrice">-</div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        let chart;
+
+        async function fetchCandlestickData() {
+            try {
+                const response = await fetch('/data/{{coin}}/candlestick');
+                const data = await response.json();
+                return data;
+            } catch (error) {
+                console.error('Error fetching candlestick data:', error);
+                return null;
+            }
+        }
+
+        function updateInfoDisplay(candlestick) {
+            document.getElementById('openPrice').textContent = `$${candlestick.o.toFixed(4)}`;
+            document.getElementById('highPrice').textContent = `$${candlestick.h.toFixed(4)}`;
+            document.getElementById('lowPrice').textContent = `$${candlestick.l.toFixed(4)}`;
+            document.getElementById('closePrice').textContent = `$${candlestick.c.toFixed(4)}`;
+        }
+
+        async function updateChart() {
+            const data = await fetchCandlestickData();
+            if (!data) return;
+
+            if (data.length > 0) {
+                updateInfoDisplay(data[data.length - 1]);
+            }
+
+            if (chart) {
+                chart.data.datasets[0].data = data;
+                chart.update();
+            } else {
+                const ctx = document.getElementById('candlestickChart').getContext('2d');
+                chart = new Chart(ctx, {
+                    type: 'candlestick',
+                    data: {
+                        datasets: [{
+                            label: 'XRP Price',
+                            data: data,
+                            color: {
+                                up: 'rgb(75, 192, 75)',
+                                down: 'rgb(192, 75, 75)',
+                                unchanged: 'rgb(90, 90, 90)',
+                            }
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        plugins: {
+                            legend: {
+                                display: false
+                            },
+                            title: {
+                                display: true,
+                                text: 'XRP Price Movements'
+                            },
+                            tooltip: {
+                                callbacks: {
+                                    label: function(context) {
+                                        const d = context.raw;
+                                        return [
+                                            `Open: $${d.o.toFixed(4)}`,
+                                            `High: $${d.h.toFixed(4)}`,
+                                            `Low: $${d.l.toFixed(4)}`,
+                                            `Close: $${d.c.toFixed(4)}`
+                                        ];
+                                    }
+                                }
+                            }
+                        },
+                        scales: {
+                            y: {
+                                ticks: {
+                                    callback: function(value) {
+                                        return '$' + value.toFixed(4);
+                                    }
+                                }
+                            },
+                            x: {
+                                type: 'time',
+                                time: {
+                                    unit: 'hour',
+                                    tooltipFormat: 'yyyy-MM-dd HH:mm'
+                                },
+                                ticks: {
+                                    maxTicksLimit: 10,
+                                    maxRotation: 45,
+                                    minRotation: 45
+                                }
+                            }
+                        }
+                    }
+                });
+            }
+        }
+
+        // Update every 5 seconds
+        updateChart();
+        setInterval(updateChart, 5000);
+    </script>
+</body>
+</html>
