# HFChart **La référence des charts financiers haute fréquence — moteur canvas écrit from scratch, zéro dépendance.** [![Live](https://img.shields.io/badge/live-www.hfchart.io-2a78d6)](https://www.hfchart.io) [![Données](https://img.shields.io/badge/donn%C3%A9es-hfmarketdata.io-1baf7a)](https://www.hfmarketdata.io) [![Dépendances](https://img.shields.io/badge/d%C3%A9pendances-0-008300)](#architecture) [![Types de charts](https://img.shields.io/badge/types_de_charts-14-eb6834)](#le-catalogue) [![Indicateurs](https://img.shields.io/badge/indicateurs-8-eda100)](#indicateurs) [![Options Lab](https://img.shields.io/badge/Options_Lab-cha%C3%AEnes_%2B_Greeks_depuis_2010-0ca30c)](#options-lab) [![Tests](https://img.shields.io/badge/tests-10%2F10-008300)](#options-lab) [![Embed gzip](https://img.shields.io/badge/embed.js-18.3_Ko_gzip-4a3aa7)](#embed--snippet-autonome) [![Mobile](https://img.shields.io/badge/mobile-tactile_%2B_pinch--zoom-e87ba4)](#interactions) [![Python](https://img.shields.io/badge/serveur-Python_stdlib-3776ab)](#architecture) [![CVD safe](https://img.shields.io/badge/daltonisme-sch%C3%A9ma_valid%C3%A9_ΔE_19.2-52514e)](#couleurs) [![Author](https://img.shields.io/badge/author-Simon--Pierre_Boucher-0b0b0b)](https://www.spboucher.ai) [![Contact](https://img.shields.io/badge/contact-contact%40spboucher.ai-d03b3b)](mailto:contact@spboucher.ai) ![HFChart — thème clair](docs/screenshot-light.png) Plateforme-catalogue de graphiques financiers haute fréquence : chaque pixel est dessiné à la main sur un canvas 2D — **pas de TradingView, pas de lib de charts, pas de framework**. Les données proviennent de l'API ouverte [HF Market Data](https://www.hfmarketdata.io) (interrogée directement par le navigateur), qui couvre **6 classes d'actifs et ~13 000 instruments**. --- ## Métriques | Métrique | Valeur | |---|---| | Dépendances (front + serveur) | **0** | | Lignes de code totales | **4 805** (dont 1 564 pour l'Options Lab) | | — moteur de rendu (`engine.js`) | 867 | | — application (`app.js`) | 688 | | — renderers (`renderers.js`) | 348 | | — transformations (`transforms.js`) | 208 | | — client API (`data.js`) | 185 | | — indicateurs (`indicators.js`) | 164 | | — bootstrapper embed (`embed-boot.js`) | 151 | | — serveur statique (`server.py`, stdlib pur) | 109 | | Bundle embed complet (`/embed.js`) | 68,5 Ko brut · **18,3 Ko gzip** | | Types de charts | **14** | | Indicateurs techniques | **8** | | Classes d'actifs | 6 (indices, ETF, actions, futures, crypto, FX) | | Instruments accessibles | ~13 200 | | Thèmes | clair (défaut) + sombre, sélectionnés — pas dérivés | | Schémas hausse/baisse | vert/rouge classique + bleu/rouge validé daltonisme | ## Le catalogue ![Galerie des 14 types](docs/screenshot-gallery.png) | Type | Rendu | |---|---| | **Chandelles** | corps pleins, mèches, fast-path haute densité (< 2 px/barre → traits hi-lo) | | **Chandelles creuses** | hausse creuse / baisse pleine — lisible sans la couleur | | **Barres OHLC** | ticks open/close | | **Ligne · Escalier · Aire · Baseline** | close 2 px, marches, dégradé 3 arrêts, ancre ± | | **Heikin-Ashi** | chandelles lissées de tendance | | **Renko** | briques à taille fixe, auto-dimensionnées par ATR, personnalisables | | **Three-Line Break** | nouvelle barre sur cassure des N dernières | | **Range Bars** | chaque barre couvre exactement un range fixe | | **Kagi** | yang épais / yin fin, renversement fixe | | **Point & Figure** | colonnes de X et O, renversement en boîtes | | **Comparaison %** | jusqu'à 4 symboles, **rebasage dynamique sur la 1ʳᵉ barre visible** | ![Renko](docs/screenshot-renko.png) ![Comparaison %](docs/screenshot-compare.png) ## Indicateurs SMA · EMA · Bollinger · VWAP de session ±2σ · Profil de volume (POC) — en overlay, et RSI · MACD · ATR en panes dédiées. Toutes les périodes sont réglables (menu Réglages). Chaque calcul est implémenté from scratch dans `indicators.js` (Wilder pour RSI/ATR, σ cumulée pour les bandes VWAP). ![Thème sombre + indicateurs](docs/screenshot-dark-indicators.png) ## Interactions - Molette = zoom ancré au curseur · glisser = pan · double-clic = reset - **Tactile** : pan au doigt, **pinch-zoom à deux doigts**, drawer de symboles - Crosshair avec lecture OHLCV + variation %, chips de prix/temps - Échelle logarithmique, extension automatique de l'historique au bord gauche - Vue table (accessibilité), galerie live des types, état persistant - **Vues partageables par URL** : ``` https://www.hfchart.io/?group=etf&symbol=SPY&tf=60&type=renko&inds=rsi,vwap&theme=dark https://www.hfchart.io/?group=index&symbol=SPX&tf=D&type=compare&compare=NDX,DJI,RUT https://www.hfchart.io/?panel=gallery ``` ![Mobile 390 px](docs/screenshot-mobile.png) ## Embed — snippet autonome Le bouton **Exporter** génère un snippet HTML **avec les données intégrées** (barres visibles, type, indicateurs, réglages) : le graphe collé dans n'importe quelle page est pleinement interactif (zoom, pan, crosshair, panes) et ne fait **aucune requête réseau** pour les données. Un seul script : ```html
``` Une variante **iframe live** (`?embed=1`) est aussi proposée. ![Embed autonome dans une page](docs/screenshot-embed.png) ## Options Lab ![Options Lab — bull call spread AAPL août 2015 avec replay réel](docs/screenshot-options-lab.png) Laboratoire de stratégies d'options sur **chaînes historiques réelles depuis 2010** (quotes, IV, open interest, Greeks — API HF Market Data) : - **Chaîne datée** : choisissez un ticker + une date passée et voyez la chaîne telle qu'elle était ce jour-là — calls/puts côte à côte, filtres |Δ| et distance au spot, spot non ajusté (les strikes sont as-traded), ITM ombré, chargement paresseux par échéance avec cache. - **Builder multi-jambes** : clic sur un prix → acheter/vendre ; presets covered call, cash-secured put, verticals, iron condor, straddle, strangle. - **Payoff** : courbe P&L à l'échéance (zones vert/rouge), courbe **T+0** estimée via les Greeks (bornée à sa zone de validité locale), breakevens exacts, profit/perte max, Greeks agrégés (Δ Γ Θ ν ρ). - **Replay historique** : mark-to-market **réel** jour par jour jusqu'à l'échéance via les prix historiques de chaque contrat — pas une simulation Black-Scholes. Slider + P&L réalisé + Greeks du jour. - Module de calcul **pur et testé** (`options-math.js`, 10 tests `node --test`, zéro dépendance) ; vues partageables : `options.html?ticker=AAPL&date=2015-08-24&preset=ironcondor&replay=1`. > Outil éducatif — pas un conseil en investissement. ## Couleurs Le schéma hausse/baisse classique (vert `#0ca30c` / rouge `#d03b3b`) est doublé d'un schéma **« Bleu / rouge (daltonisme) »** dont la paire passe tous les checks du validateur de palette (CVD ΔE 19,2 ; contraste ≥ 3:1 sur les deux surfaces). Les séries d'indicateurs et de comparaison suivent un ordre catégoriel fixe validé — jamais recyclé. ## Architecture ``` server.py hôte statique (Python stdlib) + route /embed.js (bundle concaténé, cache mtime) web/index.html shell de l'app web/css/style.css tokens clair/sombre + layout responsive (drawer mobile) web/js/engine.js moteur canvas : panes, échelles lin/log, axes, crosshair, zoom/pan/pinch web/js/renderers.js dessin des 14 types + colonnes de volume + bandes + profil web/js/transforms.js Heikin-Ashi, Renko, Kagi, PnF, Line Break, Range Bars web/js/indicators.js SMA/EMA/Bollinger/RSI/MACD/ATR/VWAP/profil de volume web/js/data.js client API hfmarketdata.io + resampling client (1h→4h, 1J→1S, 5min→15m) web/js/app.js état, UI, comparaison, galerie, export snippet web/js/embed-boot.js bootstrapper des graphes intégrés ``` Les timeframes absents du lac de données sont dérivés côté client, et les boutons s'activent automatiquement via `/v1/status` quand le lac se remplit. ## Lancer ```bash python3 server.py 8787 # aucune dépendance à installer # → http://localhost:8787 ``` ## Déploiement Production : **https://www.hfchart.io** — nœud MacLustr `M4M64b`, PM2 (`hfchart-web` + `hfchart-ngrok`), tunnel ngrok sur domaine custom. --- **Author : Simon-Pierre Boucher** · [contact@spboucher.ai](mailto:contact@spboucher.ai) · [spboucher.ai](https://www.spboucher.ai)