Prompt utilisé pour régénérer cette page :
Page: Real-time Crypto Tracker - Cryptocurrency Price Visualization
Title: "Real-time Crypto Tracker"
Description: "Live prices powered by CoinGecko API"
Icon: bitcoin
Tags: crypto, trading, charts
Status: validated
Category: financial
Front matter: no js/scss keys (uses default convention)
HTML structure in index.md:
<section id="crypto-container" class="container visual size-1000 ratio-1-1 canvas-contain">
<canvas id="crypto-canvas"></canvas>
</section>
Note: section has id="crypto-container", size-1000 (larger canvas)
Widget files:
_options.right.md (weight: 5, title: "Options"):
##### Settings
div.crypto-options with 3 labeled selects:
Cryptocurrency <select id="crypto-select">:
bitcoin (BTC, selected), ethereum (ETH), solana (SOL), cardano (ADA),
ripple (XRP), polkadot (DOT), dogecoin (DOGE), avalanche-2 (AVAX)
Currency <select id="currency-select">:
usd (USD $, selected), eur (EUR), gbp (GBP), jpy (JPY)
Timeframe <select id="timeframe-select">:
1 (24 Hours), 7 (7 Days, selected), 30 (30 Days), 90 (90 Days), 365 (1 Year)
_stats.right.md (weight: 10, title: "Statistics"):
##### Current Price
<dl> with 6 dt/dd pairs:
Price: id="stat-price" (initial: --)
24h Change: id="stat-change-24h" (initial: --)
24h High: id="stat-high-24h" (initial: --)
24h Low: id="stat-low-24h" (initial: --)
Market Cap: id="stat-market-cap" (initial: --)
Volume 24h: id="stat-volume" (initial: --)
Architecture (1 JS file):
default.js — IIFE, 'use strict', no external imports (~822 lines):
CONFIG: apiBase='https://api.coingecko.com/api/v3', updateInterval=60000 (1 min auto-refresh)
CONFIG.chart: padding {top:40, right:20, bottom:50, left:80}, gridLines=5, pointRadius=3, lineWidth=2
State: canvas, ctx, dpr, priceData[] (array of [timestamp, price]),
currentCrypto='bitcoin', currentCurrency='usd', currentTimeframe=7,
updateTimer, isLoading=false, lastError=null
Cached colors: background, surface, primary, accent, text, textMuted, gridLine (rgba),
positive (green), negative (red)
Currency symbols map: { usd:'$', eur:'\u20AC', gbp:'\u00A3', jpy:'\u00A5' }
AI Integration Shell (placeholder, all disabled):
AI object with enabled=false, predict(data), analyzeSentiment(data), generateSignals(data), init(config)
All return null when disabled. Future hooks for TensorFlow.js, RSI, MACD, Bollinger Bands
DOM elements cache: canvas, cryptoSelect, currencySelect, timeframeSelect,
statPrice, statChange24h, statHigh24h, statLow24h, statMarketCap, statVolume
Init functions:
init(): Gets canvas, caches DOM elements, updateColorsFromCSS, setupEventListeners, initCanvas (1000px, DPR scaling via ctx.scale), AI.init, fetchData, startUpdateTimer
updateColorsFromCSS(): Reads CSS vars: --background-color-surface, --background-color-primary, --draw-color-primary, --color-accent, --text-color-surface, --text-color-muted, --color-green, --color-red
setupEventListeners(): Binds 3 select change events -> fetchData()
initCanvas(): 1000px fixed, DPR scaling (canvas.width = 1000*dpr, ctx.scale(dpr, dpr))
Data functions:
fetchData(): Async. Sets isLoading, renders loading state.
Fetches market_chart: GET /coins/{crypto}/market_chart?vs_currency={currency}&days={timeframe}
Fetches coin detail: GET /coins/{crypto}?localization=false&tickers=false&community_data=false&developer_data=false
Stores priceData (array of [timestamp, price]), calls updateStats + render.
Error handling: stores lastError, renders error state
updateStats(coinData): Extracts market_data from CoinGecko response. Updates:
current_price, price_change_percentage_24h (with +/- prefix and color), high_24h, low_24h,
market_cap, total_volume. Uses formatPrice and formatLargeNumber
startUpdateTimer(): setInterval(fetchData, 60000)
Rendering functions:
render(): Clears canvas (background fill). Routes to: drawLoadingState, drawErrorState, drawEmptyState, or drawChart
drawLoadingState(w,h): Centered "Loading..." in muted color, 16px system-ui
drawErrorState(w,h): Centered red error message + "Click to retry" below
drawEmptyState(w,h): Centered "No data available" in muted color
drawChart(w,h): Calculates data range (min/max price/time), adds 10% padding to price range.
Calls drawGrid, drawPriceLine, drawTitle
drawGrid(pad, chartW, chartH, minPrice, maxPrice, minTime, maxTime):
5 horizontal grid lines with price labels (right-aligned, left of chart area)
5 vertical time labels (centered, below chart area)
Grid color: colors.gridLine, label color: colors.textMuted, 12px system-ui font
drawPriceLine(pad, chartW, chartH, minPrice, maxPrice, minTime, maxTime):
Trend color: green if last >= first price, red otherwise
Area fill: linear gradient (lineColor+'40' top to lineColor+'05' bottom)
Price line: lineWidth from CONFIG, round lineJoin/lineCap
Current price point: outer filled circle (pointRadius+2) + inner bg circle (pointRadius)
drawTitle(width): Draws "{CryptoName} / {CURRENCY} - {Timeframe}" centered at top, bold 16px
Crypto name lookup: bitcoin->Bitcoin, ethereum->Ethereum, solana->Solana, etc.
Timeframe display: 1->"24h", 365->"1Y", else N+"D"
Utility functions:
formatPrice(price, symbol): >=1000 -> toLocaleString(2 decimals), >=1 -> toFixed(2), else toFixed(6)
formatLargeNumber(num, symbol): >=1T->"T", >=1B->"B", >=1M->"M", else toLocaleString
formatDate(timestamp): timeframe=1 -> toLocaleTimeString(hour+minute), else toLocaleDateString(month+day)
debounce(func, wait): Standard debounce
handleCanvasClick(e): Retries fetchData if lastError exists
Entry point: Checks for #crypto-canvas existence, adds click handler, calls init
default.scss:
:root CSS vars: --crypto-color-positive: var(--color-green), --crypto-color-negative: var(--color-red),
--crypto-color-chart: var(--draw-color-primary)
layout-main main: flex column center, 2rem padding, 1.5rem gap
#crypto-canvas: 1px border surface, 4px radius, themed bg (NOTE: no 100% w/h unlike other pages)
.crypto-options: flex column, 0.75rem gap
label: block, 0.85em, weight 500, muted color, 0.25rem margin-bottom
select: 100% width, 0.5rem/0.75rem padding, 1px border, 4px radius, themed colors, 0.9em font
hover: border-color primary. focus: outline none, border-color primary, box-shadow 2px
option: themed bg + color
aside.right dl: grid (auto 1fr), gap 0.5rem 0.75rem
dt: 0.85em, muted color, weight 400
dd: margin 0, 0.9em, weight 600, tabular-nums, right-aligned
#stat-change-24h: weight 700 (extra bold for emphasis)
@media max-width 768px:
.crypto-options: flex row wrap, 0.5rem gap. label: 100% width. select: flex 1, min-width 120px
Important implementation notes:
- Canvas 1000px with DPR scaling (ctx.scale, not setTransform)
- Auto-refreshes every 60 seconds via setInterval
- CoinGecko API (free, no key required): market_chart endpoint for historical prices, coins endpoint for current stats
- Price data stored as [[timestamp, price], ...] — timestamps in milliseconds
- Chart area has configurable padding (top:40, right:20, bottom:50, left:80)
- Line color determined by overall trend: green if last >= first price, red otherwise
- Area fill uses gradient from 25% opacity at top to 2% at bottom
- Click on canvas retries fetch when in error state
- AI module is a placeholder shell — all methods return null, enabled=false
- No preset files, no algorithm section, no controls widget (only options + stats)
- No animation loop — chart redraws only on data fetch or state change
Page entièrement générée et maintenue par IA, sans intervention humaine.