Bitcoin Price Dashboard

/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect, useRef } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import { Chart, registerables } from "https://esm.sh/chart.js"; import { format } from "https://esm.sh/date-fns"; Chart.register(...registerables); const PASSWORD = "office123"; // Change this to your desired password function App() { const [authenticated, setAuthenticated] = useState(false); const [password, setPassword] = useState(""); const [bitcoinData, setBitcoinData] = useState([]); const [currentPrice, setCurrentPrice] = useState(null); const [priceChange, setPriceChange] = useState(null); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); const chartRef = useRef(null); useEffect(() => { if (authenticated) { fetchBitcoinData(); const interval = setInterval(fetchBitcoinData, 5 * 60 * 1000); // Refresh every 5 minutes return () => clearInterval(interval); } }, [authenticated]); useEffect(() => { if (bitcoinData.length > 0) { renderChart(); updatePriceInfo(); } }, [bitcoinData]); const fetchBitcoinData = async () => { setIsLoading(true); setError(null); try { const response = await fetch("/api/bitcoin-data"); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); console.log("Fetched Bitcoin data:", data); setBitcoinData(data); } catch (error) { console.error("Failed to fetch Bitcoin data:", error); setError("Failed to load Bitcoin data. Please try again later."); } finally { setIsLoading(false); } }; const updatePriceInfo = () => { if (bitcoinData.length > 0) { const latestPrice = bitcoinData[bitcoinData.length - 1].price; const yesterdayPrice = bitcoinData[bitcoinData.length - 2].price; setCurrentPrice(latestPrice); setPriceChange(((latestPrice - yesterdayPrice) / yesterdayPrice) * 100); } }; const findAppropriateIncrement = (range) => { const increments = [1, 2, 5, 10, 20, 50, 100, 200, 500, 1000, 2000, 5000, 10000]; return increments.find(inc => range / inc < 10) || increments[increments.length - 1]; }; const roundToIncrement = (value, increment, roundUp = false) => { return roundUp ? Math.ceil(value / increment) * increment : Math.floor(value / increment) * increment; }; const renderChart = () => { console.log("Rendering chart"); const ctx = document.getElementById("bitcoinChart"); if (ctx) { if (chartRef.current) { chartRef.current.destroy(); } const prices = bitcoinData.map(d => d.price); const minPrice = Math.min(...prices); const maxPrice = Math.max(...prices); const priceRange = maxPrice - minPrice; const increment = findAppropriateIncrement(priceRange); const yAxisMin = roundToIncrement(minPrice - (priceRange * 0.10), increment); const yAxisMax = roundToIncrement(maxPrice + (priceRange * 0.05), increment, true); try { chartRef.current = new Chart(ctx, { type: "line", data: { labels: bitcoinData.map(d => format(new Date(d.date), "dd.MM")), datasets: [{ label: "Bitcoin Price (USD)", data: prices, borderColor: "rgba(252, 77, 22, 0.8)", backgroundColor: "rgba(252, 77, 22, 0.1)", fill: true, tension: 0.6, pointRadius: 0 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, tooltip: { mode: 'index', intersect: false, backgroundColor: "rgba(32, 32, 33, 0.8)", titleColor: "rgba(255, 255, 255, 0.8)", bodyColor: "rgba(255, 255, 255, 0.6)", } }, scales: { x: { grid: { color: "rgba(255, 255, 255, 0.1)", drawBorder: false, }, ticks: { color: "rgba(255, 255, 255, 0.6)", maxTicksLimit: 6, maxRotation: 0, minRotation: 0 } }, y: { grid: { color: "rgba(255, 255, 255, 0.1)", drawBorder: false, }, ticks: { color: "rgba(255, 255, 255, 0.6)", callback: (value) => `$${value.toLocaleString()}` }, min: yAxisMin, max: yAxisMax, stepSize: increment } } } }); console.log("Chart rendered successfully"); } catch (error) { console.error("Error rendering chart:", error); setError("Failed to render chart. Please try refreshing the page."); } } else { console.error("Chart canvas not found"); setError("Chart canvas not found. Please try refreshing the page."); } }; const handleLogin = (e) => { e.preventDefault(); if (password === PASSWORD) { setAuthenticated(true); } else { alert("Incorrect password"); } }; const handleLogout = () => { setAuthenticated(false); setPassword(""); setBitcoinData([]); setCurrentPrice(null); setPriceChange(null); setError(null); }; if (!authenticated) { return (

); } return (

Current Price ${currentPrice ? currentPrice.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) : '...'}

24h Change 0 ? 'positive' : 'negative'}`}> {priceChange ? `${priceChange > 0 ? '+' : ''}${priceChange.toFixed(2)}%` : '...'}

{error ? (

{error}

) : isLoading ? (

Loading chart...

) : (

)}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } function processDataTo30Points(prices) { if (prices.length <= 30) { return prices.map(([timestamp, price]) => ({ date: new Date(timestamp).toISOString().split('T')[0], price: price })); } const step = Math.floor(prices.length / 29); const result = []; for (let i = prices.length - 1; i >= 0; i -= step) { const [timestamp, price] = prices[i]; result.unshift({ date: new Date(timestamp).toISOString().split('T')[0], price: price }); if (result.length === 30) break; } // Ensure we always have the latest data point if (result[result.length - 1].date !== new Date(prices[prices.length - 1][0]).toISOString().split('T')[0]) { result[result.length - 1] = { date: new Date(prices[prices.length - 1][0]).toISOString().split('T')[0], price: prices[prices.length - 1][1] }; } return result; } // IMPORTANT: This default export is required for the val to work properly export default async function server(request: Request): Promise { const url = new URL(request.url); if (url.pathname === "/api/bitcoin-data") { try { const thirtyDaysAgo = new Date(); thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30); const response = await fetch(`https://api.coingecko.com/api/v3/coins/bitcoin/market_chart/range?vs_currency=usd&from=${thirtyDaysAgo.getTime() / 1000}&to=${Date.now() / 1000}`); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); // Process the data to get exactly 30 points const processedData = processDataTo30Points(data.prices); return new Response(JSON.stringify(processedData), { headers: { "Content-Type": "application/json" } }); } catch (error) { console.error("Error fetching Bitcoin data:", error); return new Response(JSON.stringify({ error: "Failed to fetch Bitcoin data. The API may be rate limited. Please try again later." }), { status: 500, headers: { "Content-Type": "application/json" } }); } } // For all other routes, including the root path, return the HTML return new Response(` Bitcoin Price Dashboard

`, { headers: { "Content-Type": "text/html" } }); } const css = ` body, html { font-family: 'Inter', sans-serif; margin: 0; padding: 0; background-color: #202021; color: rgba(255, 255, 255, 0.9); height: 100%; width: 100%; } .login-container { display: flex; justify-content: center; align-items: center; height: 100vh; } .login-container form { display: flex; flex-direction: column; gap: 10px; } .login-container input, .login-container button { padding: 10px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.9); } .login-container button { cursor: pointer; background-color: rgba(252, 77, 22, 0.1); color: rgba(252, 77, 22, 0.8); } .dashboard { height: 100vh; width: 100vw; padding: 2rem; box-sizing: border-box; display: flex; flex-direction: column; gap: 20px; } .info-container { display: flex; gap: 20px; align-items: stretch; } .info-box { flex: 1; display: flex; flex-direction: column; background-color: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 15px; } .action-buttons { flex: 0 0 auto; display: flex; gap: 10px; justify-content: center; align-items: center; } .icon-button { width: 32px; height: 32px; border: none; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.9); font-size: 16px; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: background-color 0.3s ease; padding: 0; } .icon-button:hover { background-color: rgba(252, 77, 22, 0.2); } .icon-button:disabled { opacity: 0.5; cursor: not-allowed; } .label { font-size: 12px; color: rgba(255, 255, 255, 0.5); margin-bottom: 5px; } .price, .change { font-size: 18px; font-weight: 600; } .positive { color: rgba(252, 77, 22, 0.8); } .negative { color: rgba(252, 77, 22, 0.8); } .chart-container { flex-grow: 1; background-color: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 20px; min-height: 400px; position: relative; } .spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fc4d16; animation: spin 1s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } .error-message, .loading-message { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: rgba(255, 255, 255, 0.7); } input:focus { outline: none; box-shadow: 0 0 0 2px rgba(252, 77, 22, 0.3); } input { -webkit-tap-highlight-color: transparent; } input::selection { background-color: rgba(252, 77, 22, 0.3); } `;

dataDash