feat: initial commit

simon-pierre boucher committed 3 mo ago (Aug 10, 2026) Browse files

19 changed files +3,409 −0

added .gitignore +8 −0

		`@@ -0,0 +1,8 @@`
	1	+# Échantillons de données brutes 1-min (12 Go) — la plateforme vit sur l'API hfmarketdata.io
	2	+index_full_1min_*/
	3	+etf__full_1min_/
	4	+.hfchart_cache/
	5	+
	6	+.DS_Store
	7	+.claude/
	8	+*.log

added README.md +161 −0

		`@@ -0,0 +1,161 @@`
	1	+# HFChart
	2	+
	3	+La référence des charts financiers haute fréquence — moteur canvas écrit from scratch, zéro dépendance.
	4	+
	5	+[![Live](https://img.shields.io/badge/live-www.hfchart.io-2a78d6)](https://www.hfchart.io)
	6	+[![Données](https://img.shields.io/badge/donn%C3%A9es-hfmarketdata.io-1baf7a)](https://www.hfmarketdata.io)
	7	+[![Dépendances](https://img.shields.io/badge/d%C3%A9pendances-0-008300)](#architecture)
	8	+[![Types de charts](https://img.shields.io/badge/types_de_charts-14-eb6834)](#le-catalogue)
	9	+[![Indicateurs](https://img.shields.io/badge/indicateurs-8-eda100)](#indicateurs)
	10	+[![Embed gzip](https://img.shields.io/badge/embed.js-18.3_Ko_gzip-4a3aa7)](#embed--snippet-autonome)
	11	+[![Mobile](https://img.shields.io/badge/mobile-tactile_%2B_pinch--zoom-e87ba4)](#interactions)
	12	+[![Python](https://img.shields.io/badge/serveur-Python_stdlib-3776ab)](#architecture)
	13	+[![CVD safe](https://img.shields.io/badge/daltonisme-sch%C3%A9ma_valid%C3%A9_ΔE_19.2-52514e)](#couleurs)
	14	+
	15	+[![Author](https://img.shields.io/badge/author-Simon--Pierre_Boucher-0b0b0b)](https://www.spboucher.ai)
	16	+[![Contact](https://img.shields.io/badge/contact-contact%40spboucher.ai-d03b3b)](mailto:contact@spboucher.ai)
	17	+
	18	+![HFChart — thème clair](docs/screenshot-light.png)
	19	+
	20	+Plateforme-catalogue de graphiques financiers haute fréquence : chaque pixel est
	21	+dessiné à la main sur un canvas 2D — **pas de TradingView, pas de lib de charts,
	22	+pas de framework**. Les données proviennent de l'API ouverte
	23	+[HF Market Data](https://www.hfmarketdata.io) (interrogée directement par le
	24	+navigateur), qui couvre 6 classes d'actifs et ~13 000 instruments.
	25	+
	26	+---
	27	+
	28	+## Métriques
	29	+
	30	+\| Métrique \| Valeur \|
	31	+\|---\|---\|
	32	+\| Dépendances (front + serveur) \| 0 \|
	33	+\| Lignes de code totales \| 3 240 \|
	34	+\| — moteur de rendu (`engine.js`) \| 867 \|
	35	+\| — application (`app.js`) \| 688 \|
	36	+\| — renderers (`renderers.js`) \| 348 \|
	37	+\| — transformations (`transforms.js`) \| 208 \|
	38	+\| — client API (`data.js`) \| 185 \|
	39	+\| — indicateurs (`indicators.js`) \| 164 \|
	40	+\| — bootstrapper embed (`embed-boot.js`) \| 151 \|
	41	+\| — serveur statique (`server.py`, stdlib pur) \| 109 \|
	42	+\| Bundle embed complet (`/embed.js`) \| 68,5 Ko brut · 18,3 Ko gzip \|
	43	+\| Types de charts \| 14 \|
	44	+\| Indicateurs techniques \| 8 \|
	45	+\| Classes d'actifs \| 6 (indices, ETF, actions, futures, crypto, FX) \|
	46	+\| Instruments accessibles \| ~13 200 \|
	47	+\| Thèmes \| clair (défaut) + sombre, sélectionnés — pas dérivés \|
	48	+\| Schémas hausse/baisse \| vert/rouge classique + bleu/rouge validé daltonisme \|
	49	+
	50	+## Le catalogue
	51	+
	52	+![Galerie des 14 types](docs/screenshot-gallery.png)
	53	+
	54	+\| Type \| Rendu \|
	55	+\|---\|---\|
	56	+\| Chandelles \| corps pleins, mèches, fast-path haute densité (< 2 px/barre → traits hi-lo) \|
	57	+\| Chandelles creuses \| hausse creuse / baisse pleine — lisible sans la couleur \|
	58	+\| Barres OHLC \| ticks open/close \|
	59	+\| Ligne · Escalier · Aire · Baseline \| close 2 px, marches, dégradé 3 arrêts, ancre ± \|
	60	+\| Heikin-Ashi \| chandelles lissées de tendance \|
	61	+\| Renko \| briques à taille fixe, auto-dimensionnées par ATR, personnalisables \|
	62	+\| Three-Line Break \| nouvelle barre sur cassure des N dernières \|
	63	+\| Range Bars \| chaque barre couvre exactement un range fixe \|
	64	+\| Kagi \| yang épais / yin fin, renversement fixe \|
	65	+\| Point & Figure \| colonnes de X et O, renversement en boîtes \|
	66	+\| Comparaison % \| jusqu'à 4 symboles, rebasage dynamique sur la 1ʳᵉ barre visible \|
	67	+
	68	+![Renko](docs/screenshot-renko.png)
	69	+![Comparaison %](docs/screenshot-compare.png)
	70	+
	71	+## Indicateurs
	72	+
	73	+SMA · EMA · Bollinger · VWAP de session ±2σ · Profil de volume (POC) —
	74	+en overlay, et RSI · MACD · ATR en panes dédiées. Toutes les périodes sont
	75	+réglables (menu Réglages). Chaque calcul est implémenté from scratch dans
	76	+`indicators.js` (Wilder pour RSI/ATR, σ cumulée pour les bandes VWAP).
	77	+
	78	+![Thème sombre + indicateurs](docs/screenshot-dark-indicators.png)
	79	+
	80	+## Interactions
	81	+
	82	+- Molette = zoom ancré au curseur · glisser = pan · double-clic = reset
	83	+- Tactile : pan au doigt, pinch-zoom à deux doigts, drawer de symboles
	84	+- Crosshair avec lecture OHLCV + variation %, chips de prix/temps
	85	+- Échelle logarithmique, extension automatique de l'historique au bord gauche
	86	+- Vue table (accessibilité), galerie live des types, état persistant
	87	+- Vues partageables par URL :
	88	+
	89	+```
	90	+https://www.hfchart.io/?group=etf&symbol=SPY&tf=60&type=renko&inds=rsi,vwap&theme=dark
	91	+https://www.hfchart.io/?group=index&symbol=SPX&tf=D&type=compare&compare=NDX,DJI,RUT
	92	+https://www.hfchart.io/?panel=gallery
	93	+```
	94	+
	95	+![Mobile 390 px](docs/screenshot-mobile.png)
	96	+
	97	+## Embed — snippet autonome
	98	+
	99	+Le bouton Exporter génère un snippet HTML avec les données intégrées
	100	+(barres visibles, type, indicateurs, réglages) : le graphe collé dans n'importe
	101	+quelle page est pleinement interactif (zoom, pan, crosshair, panes) et ne fait
	102	+aucune requête réseau pour les données. Un seul script :
	103	+
	104	+```html
	105	+<div id="hfchart-x7k2" style="width:100%;height:420px"></div>
	106	+<script>
	107	+(window.HFChartEmbedQueue = window.HFChartEmbedQueue \|\| []).push({
	108	+ el: "#hfchart-x7k2",
	109	+ config: { symbol: "SPX", tf: "1h", type: "candles", theme: "light",
	110	+ inds: ["sma20","rsi"], decimals: 2, hasVolume: true,
	111	+ bars: [[1700000000, 100.0, 101.2, 99.8, 100.9, 12000], ...] }
	112	+});
	113	+</script>
	114	+<script async src="https://www.hfchart.io/embed.js"></script>
	115	+```
	116	+
	117	+Une variante iframe live (`?embed=1`) est aussi proposée.
	118	+
	119	+![Embed autonome dans une page](docs/screenshot-embed.png)
	120	+
	121	+## Couleurs
	122	+
	123	+Le schéma hausse/baisse classique (vert `#0ca30c` / rouge `#d03b3b`) est doublé
	124	+d'un schéma « Bleu / rouge (daltonisme) » dont la paire passe tous les
	125	+checks du validateur de palette (CVD ΔE 19,2 ; contraste ≥ 3:1 sur les deux
	126	+surfaces). Les séries d'indicateurs et de comparaison suivent un ordre
	127	+catégoriel fixe validé — jamais recyclé.
	128	+
	129	+## Architecture
	130	+
	131	+```
	132	+server.py hôte statique (Python stdlib) + route /embed.js (bundle concaténé, cache mtime)
	133	+web/index.html shell de l'app
	134	+web/css/style.css tokens clair/sombre + layout responsive (drawer mobile)
	135	+web/js/engine.js moteur canvas : panes, échelles lin/log, axes, crosshair, zoom/pan/pinch
	136	+web/js/renderers.js dessin des 14 types + colonnes de volume + bandes + profil
	137	+web/js/transforms.js Heikin-Ashi, Renko, Kagi, PnF, Line Break, Range Bars
	138	+web/js/indicators.js SMA/EMA/Bollinger/RSI/MACD/ATR/VWAP/profil de volume
	139	+web/js/data.js client API hfmarketdata.io + resampling client (1h→4h, 1J→1S, 5min→15m)
	140	+web/js/app.js état, UI, comparaison, galerie, export snippet
	141	+web/js/embed-boot.js bootstrapper des graphes intégrés
	142	+```
	143	+
	144	+Les timeframes absents du lac de données sont dérivés côté client, et les
	145	+boutons s'activent automatiquement via `/v1/status` quand le lac se remplit.
	146	+
	147	+## Lancer
	148	+
	149	+```bash
	150	+python3 server.py 8787 # aucune dépendance à installer
	151	+# → http://localhost:8787
	152	+```
	153	+
	154	+## Déploiement
	155	+
	156	+Production : https://www.hfchart.io — nœud MacLustr `M4M64b`, PM2
	157	+(`hfchart-web` + `hfchart-ngrok`), tunnel ngrok sur domaine custom.
	158	+
	159	+---
	160	+
	161	+Author : Simon-Pierre Boucher · [contact@spboucher.ai](mailto:contact@spboucher.ai) · [spboucher.ai](https://www.spboucher.ai)

added docs/screenshot-compare.png +0 −0

Binary file not shown.

added docs/screenshot-dark-indicators.png +0 −0

Binary file not shown.

added docs/screenshot-embed.png +0 −0

Binary file not shown.

added docs/screenshot-gallery.png +0 −0

Binary file not shown.

added docs/screenshot-light.png +0 −0

Binary file not shown.

added docs/screenshot-mobile.png +0 −0

Binary file not shown.

added docs/screenshot-renko.png +0 −0

Binary file not shown.

added server.py +109 −0

		`@@ -0,0 +1,109 @@`
	1	+#!/usr/bin/env python3
	2	+# -- coding: utf-8 --
	3	+"""
	4	+================================================================================
	5	+ HFChart — plateforme de référence des charts haute fréquence
	6	+ Hôte statique minimal (stdlib uniquement).
	7	+
	8	+ Les données des graphs proviennent de l'API HF Market Data :
	9	+ https://www.hfmarketdata.io (interrogée directement par le navigateur)
	10	+
	11	+ Author : Simon-Pierre Boucher
	12	+ Contact : contact@spboucher.ai
	13	+================================================================================
	14	+
	15	+ python3 server.py [port] # défaut: 8787
	16	+"""
	17	+import os
	18	+import sys
	19	+from http.server import BaseHTTPRequestHandler, ThreadingHTTPServer
	20	+from urllib.parse import urlparse
	21	+
	22	+ROOT = os.path.dirname(os.path.abspath(__file__))
	23	+WEB = os.path.join(ROOT, "web")
	24	+
	25	+MIME = {
	26	+ ".html": "text/html; charset=utf-8",
	27	+ ".js": "application/javascript; charset=utf-8",
	28	+ ".css": "text/css; charset=utf-8",
	29	+ ".json": "application/json; charset=utf-8",
	30	+ ".svg": "image/svg+xml",
	31	+ ".png": "image/png",
	32	+ ".ico": "image/x-icon",
	33	+ ".webmanifest": "application/manifest+json",
	34	+}
	35	+
	36	+
	37	+# /embed.js = moteur complet concaténé (transforms + indicateurs + renderers +
	38	+# engine + bootstrapper d'embed) — un seul <script> pour les snippets exportés.
	39	+EMBED_PARTS = ["js/transforms.js", "js/indicators.js", "js/renderers.js",
	40	+ "js/engine.js", "js/embed-boot.js"]
	41	+_embed_cache = {"key": None, "body": b""}
	42	+
	43	+
	44	+def embed_js():
	45	+ paths = [os.path.join(WEB, p) for p in EMBED_PARTS]
	46	+ key = tuple(os.path.getmtime(p) for p in paths)
	47	+ if _embed_cache["key"] != key:
	48	+ chunks = [b"/* HFChart embed bundle - Simon-Pierre Boucher - "
	49	+ b"contact@spboucher.ai - https://www.hfchart.io */\n"]
	50	+ for p in paths:
	51	+ with open(p, "rb") as fh:
	52	+ chunks.append(fh.read())
	53	+ chunks.append(b"\n;\n")
	54	+ _embed_cache["key"] = key
	55	+ _embed_cache["body"] = b"".join(chunks)
	56	+ return _embed_cache["body"]
	57	+
	58	+
	59	+class Handler(BaseHTTPRequestHandler):
	60	+ protocol_version = "HTTP/1.1"
	61	+
	62	+ def log_message(self, fmt, *args):
	63	+ sys.stderr.write("[hfchart] %s\n" % (fmt % args))
	64	+
	65	+ def _send(self, code, body, mime="text/plain; charset=utf-8", cache="no-cache"):
	66	+ self.send_response(code)
	67	+ self.send_header("Content-Type", mime)
	68	+ self.send_header("Content-Length", str(len(body)))
	69	+ self.send_header("Cache-Control", cache)
	70	+ self.end_headers()
	71	+ self.wfile.write(body)
	72	+
	73	+ def do_GET(self):
	74	+ try:
	75	+ path = urlparse(self.path).path
	76	+ if path == "/health":
	77	+ return self._send(200, b'{"status":"ok","service":"hfchart"}',
	78	+ "application/json; charset=utf-8")
	79	+ if path == "/embed.js":
	80	+ self.send_response(200)
	81	+ self.send_header("Content-Type", MIME[".js"])
	82	+ body = embed_js()
	83	+ self.send_header("Content-Length", str(len(body)))
	84	+ self.send_header("Cache-Control", "public, max-age=300")
	85	+ self.send_header("Access-Control-Allow-Origin", "*")
	86	+ self.end_headers()
	87	+ self.wfile.write(body)
	88	+ return None
	89	+ if path == "/":
	90	+ path = "/index.html"
	91	+ fp = os.path.normpath(os.path.join(WEB, path.lstrip("/")))
	92	+ if not fp.startswith(WEB) or not os.path.isfile(fp):
	93	+ return self._send(404, b"not found")
	94	+ with open(fp, "rb") as fh:
	95	+ body = fh.read()
	96	+ return self._send(200, body, MIME.get(os.path.splitext(fp)[1],
	97	+ "application/octet-stream"))
	98	+ except BrokenPipeError:
	99	+ pass
	100	+
	101	+
	102	+def main():
	103	+ port = int(sys.argv[1]) if len(sys.argv) > 1 else 8787
	104	+ print(f"HFChart — http://localhost:{port} (données : https://www.hfmarketdata.io)")
	105	+ ThreadingHTTPServer(("0.0.0.0", port), Handler).serve_forever()
	106	+
	107	+
	108	+if __name__ == "__main__":
	109	+ main()

added web/css/style.css +402 −0

		`@@ -0,0 +1,402 @@`
	1	+/* ============================================================================
	2	+ * HFChart — styles & tokens (clair par défaut, sombre sélectionné, pas dérivé)
	3	+ * Author : Simon-Pierre Boucher — contact@spboucher.ai
	4	+ * ----------------------------------------------------------------------------
	5	+ * Les couleurs de séries suivent la palette catégorielle validée (ordre FIXE).
	6	+ * Hausse/baisse : schéma "classic" (vert/rouge, avec encodage secondaire par
	7	+ * la géométrie des chandelles) ou "cvd" (bleu/rouge, validé CVD ΔE 19,2).
	8	+ * ==========================================================================*/
	9	+
	10	+:root {
	11	+ color-scheme: light;
	12	+ --page: #f4f4f2;
	13	+ --surface: #fcfcfb;
	14	+ --ink: #0b0b0b;
	15	+ --ink2: #52514e;
	16	+ --muted: #898781;
	17	+ --grid: #e1e0d9;
	18	+ --axis: #c3c2b7;
	19	+ --border: rgba(11, 11, 11, 0.10);
	20	+ --chip: #0b0b0b;
	21	+ --chip-text: #ffffff;
	22	+ --series-1: #2a78d6;
	23	+ --series-2: #eb6834;
	24	+ --series-3: #1baf7a;
	25	+ --series-4: #eda100;
	26	+ --series-5: #e87ba4;
	27	+ --series-6: #008300;
	28	+ --series-7: #4a3aa7;
	29	+ --series-8: #e34948;
	30	+ --up: #0ca30c;
	31	+ --dn: #d03b3b;
	32	+ --accent-ui: #2a78d6;
	33	+}
	34	+
	35	+:root[data-theme="dark"] {
	36	+ color-scheme: dark;
	37	+ --page: #0d0d0d;
	38	+ --surface: #1a1a19;
	39	+ --ink: #ffffff;
	40	+ --ink2: #c3c2b7;
	41	+ --muted: #898781;
	42	+ --grid: #2c2c2a;
	43	+ --axis: #383835;
	44	+ --border: rgba(255, 255, 255, 0.10);
	45	+ --chip: #ffffff;
	46	+ --chip-text: #0b0b0b;
	47	+ --series-1: #3987e5;
	48	+ --series-2: #d95926;
	49	+ --series-3: #199e70;
	50	+ --series-4: #c98500;
	51	+ --series-5: #d55181;
	52	+ --series-6: #008300;
	53	+ --series-7: #9085e9;
	54	+ --series-8: #e66767;
	55	+ --up: #0ca30c;
	56	+ --dn: #d03b3b;
	57	+ --accent-ui: #3987e5;
	58	+}
	59	+
	60	+/* Schéma hausse/baisse CVD-sûr (paire divergente bleu↔rouge validée). */
	61	+:root[data-scheme="cvd"] { --up: #2a78d6; --dn: #e34948; }
	62	+:root[data-theme="dark"][data-scheme="cvd"] { --up: #3987e5; --dn: #e66767; }
	63	+
	64	+* { box-sizing: border-box; }
	65	+
	66	+html, body {
	67	+ margin: 0;
	68	+ height: 100%;
	69	+ font: 13px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
	70	+ background: var(--page);
	71	+ color: var(--ink);
	72	+}
	73	+
	74	+body { display: flex; flex-direction: column; }
	75	+
	76	+a { color: var(--accent-ui); text-decoration: none; }
	77	+a:hover { text-decoration: underline; }
	78	+.dim { color: var(--muted); }
	79	+
	80	+/* ------------------------------------------------------------------ topbar */
	81	+#topbar {
	82	+ display: flex;
	83	+ align-items: center;
	84	+ gap: 8px;
	85	+ padding: 8px 12px;
	86	+ background: var(--surface);
	87	+ border-bottom: 1px solid var(--border);
	88	+ flex-wrap: wrap;
	89	+}
	90	+
	91	+.brand { display: flex; align-items: center; gap: 8px; margin-right: 8px; }
	92	+.brand .logo {
	93	+ background: var(--accent-ui);
	94	+ color: #fff;
	95	+ font-weight: 700;
	96	+ font-size: 11px;
	97	+ padding: 3px 6px;
	98	+ border-radius: 6px;
	99	+ letter-spacing: 0.5px;
	100	+}
	101	+.brand strong { font-size: 15px; }
	102	+.brand .provider {
	103	+ font-size: 11px;
	104	+ color: var(--muted);
	105	+ border: 1px solid var(--border);
	106	+ border-radius: 999px;
	107	+ padding: 2px 9px;
	108	+}
	109	+.brand .provider:hover { color: var(--accent-ui); text-decoration: none; }
	110	+
	111	+button, select, input[type="search"], input[type="number"] {
	112	+ font: inherit;
	113	+ color: var(--ink);
	114	+ background: var(--surface);
	115	+ border: 1px solid var(--border);
	116	+ border-radius: 7px;
	117	+ padding: 5px 10px;
	118	+ cursor: pointer;
	119	+}
	120	+select { cursor: pointer; }
	121	+button:hover:not(:disabled), select:hover { border-color: var(--accent-ui); }
	122	+button:disabled { opacity: 0.35; cursor: not-allowed; }
	123	+button.active { background: var(--accent-ui); color: #fff; border-color: var(--accent-ui); }
	124	+
	125	+.seg { display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
	126	+.seg button { border: none; border-radius: 0; padding: 5px 9px; }
	127	+.seg button + button { border-left: 1px solid var(--border); }
	128	+
	129	+.dropdown { position: relative; }
	130	+.dropdown .menu {
	131	+ display: none;
	132	+ position: absolute;
	133	+ top: calc(100% + 4px);
	134	+ left: 0;
	135	+ z-index: 40;
	136	+ min-width: 240px;
	137	+ background: var(--surface);
	138	+ border: 1px solid var(--border);
	139	+ border-radius: 10px;
	140	+ box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18);
	141	+ padding: 8px;
	142	+ max-height: 60vh;
	143	+ overflow: auto;
	144	+}
	145	+.dropdown.open .menu { display: block; }
	146	+.dropdown .menu label { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; cursor: pointer; }
	147	+.dropdown .menu label:hover { background: var(--page); }
	148	+.dropdown .menu em { color: var(--muted); font-style: normal; font-size: 11px; margin-left: auto; }
	149	+.param-row { justify-content: space-between; }
	150	+.param-row input { width: 90px; cursor: text; }
	151	+
	152	+/* ------------------------------------------------------------------ layout */
	153	+#layout { display: flex; flex: 1; min-height: 0; }
	154	+
	155	+#sidebar {
	156	+ width: 218px;
	157	+ flex: none;
	158	+ display: flex;
	159	+ flex-direction: column;
	160	+ gap: 8px;
	161	+ padding: 10px;
	162	+ background: var(--surface);
	163	+ border-right: 1px solid var(--border);
	164	+ min-height: 0;
	165	+}
	166	+#group-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
	167	+#group-tabs button { padding: 3px 8px; font-size: 12px; border-radius: 999px; }
	168	+#search { cursor: text; }
	169	+#symbols {
	170	+ list-style: none;
	171	+ margin: 0;
	172	+ padding: 0;
	173	+ overflow-y: auto;
	174	+ flex: 1;
	175	+ min-height: 0;
	176	+ border-top: 1px solid var(--border);
	177	+}
	178	+#symbols li {
	179	+ padding: 4px 8px;
	180	+ border-radius: 6px;
	181	+ cursor: pointer;
	182	+ font-variant-numeric: tabular-nums;
	183	+}
	184	+#symbols li:hover { background: var(--page); }
	185	+#symbols li.active { background: var(--accent-ui); color: #fff; }
	186	+#symbols li.compared { outline: 2px solid var(--accent-ui); outline-offset: -2px; }
	187	+#sym-count { margin: 0; font-size: 11px; }
	188	+.hint {
	189	+ margin: 0;
	190	+ font-size: 11.5px;
	191	+ color: var(--ink2);
	192	+ background: var(--page);
	193	+ border: 1px solid var(--border);
	194	+ border-radius: 7px;
	195	+ padding: 6px 8px;
	196	+ display: none;
	197	+}
	198	+
	199	+#chart-area { flex: 1; position: relative; min-width: 0; display: flex; flex-direction: column; }
	200	+#chart-wrap { position: relative; flex: 1; min-height: 0; background: var(--surface); }
	201	+#chart-wrap.loading::after {
	202	+ content: "";
	203	+ position: absolute;
	204	+ top: 10px; right: 84px;
	205	+ width: 14px; height: 14px;
	206	+ border: 2px solid var(--grid);
	207	+ border-top-color: var(--accent-ui);
	208	+ border-radius: 50%;
	209	+ animation: spin 0.8s linear infinite;
	210	+ z-index: 5;
	211	+}
	212	+@keyframes spin { to { transform: rotate(360deg); } }
	213	+
	214	+#legend {
	215	+ position: absolute;
	216	+ top: 8px; left: 10px;
	217	+ z-index: 4;
	218	+ display: flex;
	219	+ align-items: center;
	220	+ gap: 8px;
	221	+ flex-wrap: wrap;
	222	+ pointer-events: none;
	223	+ font-size: 12.5px;
	224	+ background: color-mix(in srgb, var(--surface) 74%, transparent);
	225	+ backdrop-filter: blur(8px) saturate(1.2);
	226	+ -webkit-backdrop-filter: blur(8px) saturate(1.2);
	227	+ border: 1px solid var(--border);
	228	+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
	229	+ border-radius: 9px;
	230	+ padding: 4px 10px;
	231	+ max-width: calc(100% - 110px);
	232	+}
	233	+#legend .sym { font-weight: 700; font-size: 14px; }
	234	+#legend .k { color: var(--muted); margin-right: 1px; }
	235	+#legend b.up { color: var(--up); font-weight: 600; }
	236	+#legend b.dn { color: var(--dn); font-weight: 600; }
	237	+#legend #ohlcv { font-variant-numeric: tabular-nums; }
	238	+.chip-sym { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
	239	+.chip-sym i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
	240	+
	241	+#footer {
	242	+ padding: 5px 12px;
	243	+ font-size: 11px;
	244	+ color: var(--muted);
	245	+ background: var(--surface);
	246	+ border-top: 1px solid var(--border);
	247	+}
	248	+
	249	+/* ------------------------------------------------------------------ panels */
	250	+.overlay-panel {
	251	+ display: none;
	252	+ position: fixed;
	253	+ inset: 0;
	254	+ z-index: 60;
	255	+ background: rgba(0, 0, 0, 0.42);
	256	+ padding: 4vh 4vw;
	257	+}
	258	+.overlay-panel.open { display: flex; }
	259	+.overlay-panel .panel {
	260	+ margin: auto;
	261	+ width: min(1100px, 100%);
	262	+ max-height: 92vh;
	263	+ overflow: auto;
	264	+ background: var(--page);
	265	+ border: 1px solid var(--border);
	266	+ border-radius: 14px;
	267	+ padding: 16px 20px;
	268	+}
	269	+.panel-head { display: flex; align-items: center; justify-content: space-between; }
	270	+.panel-head h2 { margin: 0; font-size: 17px; }
	271	+
	272	+#gallery-grid {
	273	+ display: grid;
	274	+ grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	275	+ gap: 12px;
	276	+ margin-top: 12px;
	277	+}
	278	+.g-card {
	279	+ display: flex;
	280	+ flex-direction: column;
	281	+ gap: 4px;
	282	+ text-align: left;
	283	+ padding: 10px;
	284	+ border-radius: 10px;
	285	+ background: var(--surface);
	286	+}
	287	+.g-card canvas { width: 100%; height: 96px; display: block; }
	288	+.g-card strong { font-size: 13px; }
	289	+.g-card span { font-size: 11px; color: var(--muted); }
	290	+.g-card.active {
	291	+ /* neutralise le style bouton .active (fond bleu) : la sélection se marque
	292	+ par un anneau, le mini-chart garde ses couleurs lisibles */
	293	+ background: var(--surface);
	294	+ color: inherit;
	295	+ border-color: var(--border);
	296	+ outline: 2px solid var(--accent-ui);
	297	+ outline-offset: 1px;
	298	+}
	299	+
	300	+.table-scroll { overflow: auto; max-height: 74vh; margin-top: 10px; }
	301	+#table-view table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
	302	+#table-view th, #table-view td { padding: 4px 10px; text-align: right; border-bottom: 1px solid var(--border); }
	303	+#table-view th:first-child, #table-view td:first-child { text-align: left; }
	304	+#table-view th { position: sticky; top: 0; background: var(--page); color: var(--ink2); }
	305	+
	306	+/* ------------------------------------------------------------------ toast */
	307	+.toast {
	308	+ position: fixed;
	309	+ bottom: 40px;
	310	+ left: 50%;
	311	+ transform: translate(-50%, 20px);
	312	+ background: var(--chip);
	313	+ color: var(--chip-text);
	314	+ padding: 8px 16px;
	315	+ border-radius: 9px;
	316	+ opacity: 0;
	317	+ pointer-events: none;
	318	+ transition: opacity 0.2s, transform 0.2s;
	319	+ z-index: 90;
	320	+ max-width: 80vw;
	321	+}
	322	+.toast.show { opacity: 1; transform: translate(-50%, 0); }
	323	+.toast.err { background: #d03b3b; color: #fff; }
	324	+
	325	+/* ------------------------------------------------------------------ export */
	326	+#export-code {
	327	+ width: 100%;
	328	+ height: 260px;
	329	+ margin-top: 10px;
	330	+ font: 11.5px/1.5 ui-monospace, "SF Mono", Menlo, monospace;
	331	+ color: var(--ink);
	332	+ background: var(--surface);
	333	+ border: 1px solid var(--border);
	334	+ border-radius: 8px;
	335	+ padding: 10px;
	336	+ resize: vertical;
	337	+ white-space: pre;
	338	+ cursor: text;
	339	+}
	340	+.export-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
	341	+button.primary { background: var(--accent-ui); color: #fff; border-color: var(--accent-ui); }
	342	+#export-tabs { margin-top: 10px; }
	343	+#export-note { margin: 10px 0 0; }
	344	+
	345	+/* ------------------------------------------------------------------ embed (iframe ?embed=1) */
	346	+body.embed #topbar, body.embed #sidebar, body.embed #footer { display: none; }
	347	+body.embed #layout { height: 100vh; }
	348	+
	349	+/* ------------------------------------------------------------------ mobile */
	350	+#btn-symbols { display: none; }
	351	+
	352	+@media (max-width: 900px) {
	353	+ .brand .provider { display: none; }
	354	+}
	355	+
	356	+@media (max-width: 760px) {
	357	+ #topbar {
	358	+ flex-wrap: nowrap;
	359	+ overflow-x: auto;
	360	+ -webkit-overflow-scrolling: touch;
	361	+ gap: 6px;
	362	+ padding: 6px 8px;
	363	+ scrollbar-width: none;
	364	+ }
	365	+ #topbar::-webkit-scrollbar { display: none; }
	366	+ #topbar button, #topbar select { padding: 6px 9px; flex: none; }
	367	+ .brand { margin-right: 2px; }
	368	+ .brand strong { display: none; }
	369	+ .seg { flex: none; }
	370	+
	371	+ #btn-symbols { display: inline-block; font-size: 16px; padding: 5px 10px; }
	372	+ #sidebar {
	373	+ position: fixed;
	374	+ top: 0; bottom: 0; left: 0;
	375	+ width: min(300px, 84vw);
	376	+ z-index: 55;
	377	+ transform: translateX(-105%);
	378	+ transition: transform 0.22s ease;
	379	+ box-shadow: 8px 0 32px rgba(0, 0, 0, 0.25);
	380	+ border-right: 1px solid var(--border);
	381	+ }
	382	+ body.drawer-open #sidebar { transform: none; }
	383	+ #drawer-backdrop {
	384	+ display: none;
	385	+ position: fixed;
	386	+ inset: 0;
	387	+ z-index: 54;
	388	+ background: rgba(0, 0, 0, 0.35);
	389	+ }
	390	+ body.drawer-open #drawer-backdrop { display: block; }
	391	+ #symbols li { padding: 9px 10px; } /* cibles tactiles ≥ 36px */
	392	+ #group-tabs button { padding: 6px 11px; }
	393	+
	394	+ #legend { font-size: 11.5px; gap: 6px; max-width: calc(100% - 70px); }
	395	+ #legend .sym { font-size: 13px; }
	396	+ .overlay-panel { padding: 2vh 2vw; }
	397	+ .overlay-panel .panel { padding: 12px 14px; max-height: 96vh; }
	398	+ #gallery-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
	399	+ .g-card canvas { height: 74px; }
	400	+ #footer { display: none; }
	401	+ #export-code { height: 200px; font-size: 10.5px; }
	402	+}

added web/index.html +118 −0

		`@@ -0,0 +1,118 @@`
	1	+<!DOCTYPE html>
	2	+<!-- ==========================================================================
	3	+ HFChart — la référence des charts haute fréquence, from scratch (zéro dépendance)
	4	+ Données : API HF Market Data — https://www.hfmarketdata.io
	5	+ Author : Simon-Pierre Boucher — contact@spboucher.ai
	6	+=========================================================================== -->
	7	+<html lang="fr" data-theme="light" data-scheme="classic">
	8	+<head>
	9	+ <meta charset="utf-8">
	10	+ <meta name="viewport" content="width=device-width, initial-scale=1">
	11	+ <meta name="author" content="Simon-Pierre Boucher — contact@spboucher.ai">
	12	+ <meta name="description" content="HFChart — catalogue de référence des charts haute fréquence : chandelles, Heikin-Ashi, Renko, Kagi, Point & Figure… rendus canvas from scratch, données HF Market Data.">
	13	+ <title>HFChart — charts haute fréquence · HF Market Data</title>
	14	+ <link rel="stylesheet" href="css/style.css">
	15	+</head>
	16	+<body>
	17	+ <header id="topbar">
	18	+ <button id="btn-symbols" type="button" aria-label="Symboles" title="Symboles">☰</button>
	19	+ <div class="brand">
	20	+ <span class="logo">HF</span>
	21	+ <strong>HFChart</strong>
	22	+ <a class="provider" href="https://www.hfmarketdata.io" target="_blank" rel="noopener">
	23	+ données · hfmarketdata.io
	24	+ </a>
	25	+ </div>
	26	+ <div id="tf-row" class="seg" role="group" aria-label="Timeframe"></div>
	27	+ <select id="type-select" aria-label="Type de chart"></select>
	28	+ <div class="dropdown">
	29	+ <button type="button">Indicateurs ▾</button>
	30	+ <div class="menu" id="ind-menu"></div>
	31	+ </div>
	32	+ <div class="dropdown">
	33	+ <button type="button">Réglages ▾</button>
	34	+ <div class="menu" id="params"></div>
	35	+ </div>
	36	+ <button id="btn-gallery" type="button" title="Catalogue des types de charts">Galerie</button>
	37	+ <button id="btn-table" type="button" title="Vue table des barres visibles">Données</button>
	38	+ <button id="btn-export" type="button" title="Copier un snippet du graphe avec ses données intégrées">Exporter</button>
	39	+ <button id="btn-log" type="button" title="Échelle logarithmique">log</button>
	40	+ <select id="scheme-select" aria-label="Couleurs hausse/baisse" title="Couleurs hausse/baisse">
	41	+ <option value="classic">Vert / rouge</option>
	42	+ <option value="cvd">Bleu / rouge (daltonisme)</option>
	43	+ </select>
	44	+ <button id="btn-theme" type="button" title="Thème clair / sombre">☾</button>
	45	+ </header>
	46	+
	47	+ <div id="layout">
	48	+ <div id="drawer-backdrop"></div>
	49	+ <aside id="sidebar">
	50	+ <nav id="group-tabs" aria-label="Classes d’actifs"></nav>
	51	+ <input id="search" type="search" placeholder="Rechercher un symbole…" autocomplete="off">
	52	+ <p id="compare-hint" class="hint">Mode comparaison : cliquez des symboles pour les ajouter / retirer (max 4 séries).</p>
	53	+ <ul id="symbols"></ul>
	54	+ <p id="sym-count" class="dim"></p>
	55	+ </aside>
	56	+
	57	+ <main id="chart-area">
	58	+ <div id="legend" aria-live="polite"></div>
	59	+ <div id="chart-wrap"></div>
	60	+ </main>
	61	+ </div>
	62	+
	63	+ <footer id="footer">
	64	+ HFChart — moteur de rendu canvas écrit from scratch, zéro dépendance ·
	65	+ Données <a href="https://www.hfmarketdata.io" target="_blank" rel="noopener">HF Market Data</a> ·
	66	+ Simon-Pierre Boucher — <a href="mailto:contact@spboucher.ai">contact@spboucher.ai</a>
	67	+ </footer>
	68	+
	69	+ <div id="gallery" class="overlay-panel" role="dialog" aria-label="Catalogue des types de charts">
	70	+ <div class="panel">
	71	+ <div class="panel-head">
	72	+ <h2>Catalogue des charts haute fréquence</h2>
	73	+ <button id="gallery-close" type="button" aria-label="Fermer">✕</button>
	74	+ </div>
	75	+ <p class="dim">Chaque type est rendu en direct sur le symbole courant (journalier). Cliquez pour l’ouvrir.</p>
	76	+ <div id="gallery-grid"></div>
	77	+ </div>
	78	+ </div>
	79	+
	80	+ <div id="export-view" class="overlay-panel" role="dialog" aria-label="Exporter le graphe">
	81	+ <div class="panel">
	82	+ <div class="panel-head">
	83	+ <h2>Exporter ce graphe</h2>
	84	+ <button id="export-close" type="button" aria-label="Fermer">✕</button>
	85	+ </div>
	86	+ <div class="seg" id="export-tabs">
	87	+ <button data-tab="html" class="active" type="button">HTML autonome (données intégrées)</button>
	88	+ <button data-tab="iframe" type="button">iframe live</button>
	89	+ </div>
	90	+ <p id="export-note" class="dim"></p>
	91	+ <textarea id="export-code" readonly spellcheck="false" wrap="off"></textarea>
	92	+ <div class="export-actions">
	93	+ <button id="export-copy" type="button" class="primary">Copier le snippet</button>
	94	+ <span id="export-copied" class="dim"></span>
	95	+ </div>
	96	+ </div>
	97	+ </div>
	98	+
	99	+ <div id="table-view" class="overlay-panel" role="dialog" aria-label="Vue table">
	100	+ <div class="panel">
	101	+ <div class="panel-head">
	102	+ <h2 id="table-title">Données</h2>
	103	+ <button id="table-close" type="button" aria-label="Fermer">✕</button>
	104	+ </div>
	105	+ <div class="table-scroll"><table></table></div>
	106	+ </div>
	107	+ </div>
	108	+
	109	+ <div id="toast" class="toast"></div>
	110	+
	111	+ <script src="js/transforms.js"></script>
	112	+ <script src="js/indicators.js"></script>
	113	+ <script src="js/renderers.js"></script>
	114	+ <script src="js/engine.js"></script>
	115	+ <script src="js/data.js"></script>
	116	+ <script src="js/app.js"></script>
	117	+</body>
	118	+</html>

added web/js/app.js +688 −0

		`@@ -0,0 +1,688 @@`
	1	+/* ============================================================================
	2	+ * HFChart — application : catalogue de charts HF, sélection, personnalisation
	3	+ * Données : API HF Market Data (https://www.hfmarketdata.io)
	4	+ * Author : Simon-Pierre Boucher — contact@spboucher.ai
	5	+ * ==========================================================================*/
	6	+(function () {
	7	+ 'use strict';
	8	+ const HF = window.HF;
	9	+ const $ = s => document.querySelector(s);
	10	+ const $$ = s => Array.from(document.querySelectorAll(s));
	11	+
	12	+ /* ------------------------------------------------------------ catalogue */
	13	+ const CHART_TYPES = [
	14	+ { id: 'candles', label: 'Chandelles', desc: 'OHLC classique, corps plein', draw: 'candles', vis: 220 },
	15	+ { id: 'hollow', label: 'Chandelles creuses', desc: 'Hausse creuse / baisse pleine — lisible sans couleur', draw: 'hollow', vis: 220 },
	16	+ { id: 'ohlc', label: 'Barres OHLC', desc: 'Barres à ticks open/close', draw: 'ohlc', vis: 260 },
	17	+ { id: 'line', label: 'Ligne', desc: 'Close en trait 2px', draw: 'line', vis: 600 },
	18	+ { id: 'step', label: 'Escalier', desc: 'Close en marches', draw: 'step', vis: 400 },
	19	+ { id: 'area', label: 'Aire', desc: 'Ligne + dégradé vers la base', draw: 'area', vis: 600 },
	20	+ { id: 'baseline', label: 'Baseline', desc: 'Au-dessus / en-dessous de l’ancre', draw: 'baseline', vis: 600 },
	21	+ { id: 'heikin', label: 'Heikin-Ashi', desc: 'Chandelles lissées de tendance', draw: 'candles', transform: 'heikinAshi', vis: 220 },
	22	+ { id: 'renko', label: 'Renko', desc: 'Briques à taille fixe (auto-ATR)', draw: 'bricks', transform: 'renko', vis: 160 },
	23	+ { id: 'linebreak', label: 'Three-Line Break', desc: 'Nouvelle barre sur cassure des 3 dernières', draw: 'bricks', transform: 'lineBreak', vis: 160 },
	24	+ { id: 'rangebars', label: 'Range Bars', desc: 'Chaque barre couvre un range fixe', draw: 'candles', transform: 'rangeBars', vis: 200 },
	25	+ { id: 'kagi', label: 'Kagi', desc: 'Yang épais / yin fin, renversement fixe', draw: 'kagi', transform: 'kagi', vis: 140, noVol: true },
	26	+ { id: 'pnf', label: 'Point & Figure', desc: 'Colonnes de X et O', draw: 'pnf', transform: 'pnf', vis: 90, noVol: true },
	27	+ { id: 'compare', label: 'Comparaison %', desc: 'Jusqu’à 4 symboles, base commune → variation %', draw: 'line', compare: true, vis: 600, noVol: true },
	28	+ ];
	29	+
	30	+ const OVERLAYS = [
	31	+ { id: 'sma20', label: 'SMA 20', slot: 3, make: (bars, p) => ({ vals: HF.ind.sma(HF.ind.closes(bars), p.sma20 \|\| 20) }) },
	32	+ { id: 'sma50', label: 'SMA 50', slot: 1, make: (bars, p) => ({ vals: HF.ind.sma(HF.ind.closes(bars), p.sma50 \|\| 50) }) },
	33	+ { id: 'ema20', label: 'EMA 20', slot: 2, make: (bars, p) => ({ vals: HF.ind.ema(HF.ind.closes(bars), p.ema20 \|\| 20) }) },
	34	+ { id: 'boll', label: 'Bollinger 20·2', slot: 6, make: (bars, p) => { const b = HF.ind.bollinger(bars, p.bollN \|\| 20, p.bollK \|\| 2); return { band: b }; } },
	35	+ { id: 'vwap', label: 'VWAP session ±2σ', slot: 4, needVol: true, intraday: true,
	36	+ make: bars => { const v = HF.ind.vwapSession(bars); return { band: { up: v.up2, lo: v.dn2, mid: v.v } }; } },
	37	+ ];
	38	+ const PANES = [
	39	+ { id: 'rsi', label: 'RSI', kind: 'rsi', make: (bars, p) => HF.ind.rsi(bars, p.rsiN \|\| 14) },
	40	+ { id: 'macd', label: 'MACD', kind: 'macd', make: (bars, p) => HF.ind.macd(bars, p.macdF \|\| 12, p.macdS \|\| 26, p.macdSig \|\| 9) },
	41	+ { id: 'atr', label: 'ATR', kind: 'atr', make: (bars, p) => HF.ind.atr(bars, p.atrN \|\| 14) },
	42	+ ];
	43	+ const TFS = [
	44	+ { id: '1', label: '1m' }, { id: '5', label: '5m' }, { id: '15', label: '15m' },
	45	+ { id: '30', label: '30m' }, { id: '60', label: '1h' }, { id: '240', label: '4h' },
	46	+ { id: 'D', label: '1J' }, { id: 'W', label: '1S' },
	47	+ ];
	48	+ const TF_WANT = { 1: 5000, 5: 5000, 15: 5000, 30: 5000, 60: 5000, 240: 3000, D: 12000, W: 12000 };
	49	+ const DEFAULT_SYMBOL = { index: 'SPX', etf: 'SPY', stock: 'AAPL', futures: 'ES', crypto: 'BTC', fx: 'EURUSD' };
	50	+
	51	+ /* ------------------------------------------------------------ état */
	52	+ const state = Object.assign({
	53	+ group: 'index', symbol: 'SPX', tf: '60', type: 'candles',
	54	+ theme: 'light', scheme: 'classic', log: false,
	55	+ inds: [], compare: [], params: {},
	56	+ }, load(), urlState());
	57	+ state.params = state.params \|\| {};
	58	+
	59	+ /* Surcharges via l'URL (partage de vues) : ?symbol=SPY&group=etf&tf=60&type=renko
	60	+ * &inds=rsi,vwap&compare=QQQ,IWM&theme=dark&scheme=cvd&log=1 */
	61	+ function urlState() {
	62	+ const q = new URLSearchParams(location.search);
	63	+ const out = {};
	64	+ for (const k of ['group', 'symbol', 'tf', 'type', 'theme', 'scheme']) {
	65	+ if (q.get(k)) out[k] = q.get(k);
	66	+ }
	67	+ if (q.get('inds') != null) out.inds = q.get('inds').split(',').filter(Boolean);
	68	+ if (q.get('compare') != null) out.compare = q.get('compare').split(',').filter(Boolean);
	69	+ if (q.get('log') != null) out.log = q.get('log') === '1';
	70	+ return out;
	71	+ }
	72	+
	73	+ function load() {
	74	+ try { return JSON.parse(localStorage.getItem('hfchart-state') \|\| '{}'); } catch (e) { return {}; }
	75	+ }
	76	+ function save() {
	77	+ localStorage.setItem('hfchart-state', JSON.stringify({
	78	+ group: state.group, symbol: state.symbol, tf: state.tf, type: state.type,
	79	+ theme: state.theme, scheme: state.scheme, log: state.log,
	80	+ inds: state.inds, compare: state.compare, params: state.params,
	81	+ }));
	82	+ }
	83	+
	84	+ let chart = null;
	85	+ let raw = null; // {parsed, hasVolume, decimals, srcLimitReached}
	86	+ let compareRaw = {}; // symbole → réponse
	87	+ let tfAvail = {}; // tf UI → dispo pour le groupe courant
	88	+ let loading = false;
	89	+ let curWant = 0;
	90	+
	91	+ function toast(msg, isErr) {
	92	+ const el = $('#toast');
	93	+ el.textContent = msg;
	94	+ el.className = 'toast show' + (isErr ? ' err' : '');
	95	+ clearTimeout(toast._t);
	96	+ toast._t = setTimeout(() => { el.className = 'toast'; }, 4000);
	97	+ }
	98	+
	99	+ /* ------------------------------------------------------------ spec */
	100	+ function typeDef() { return CHART_TYPES.find(t => t.id === state.type) \|\| CHART_TYPES[0]; }
	101	+
	102	+ function buildSpec(keepView) {
	103	+ if (!raw) return;
	104	+ const def = typeDef();
	105	+ const bars = raw.parsed;
	106	+ let items = bars;
	107	+ const p = state.params;
	108	+ if (def.transform) {
	109	+ const opts = {};
	110	+ if (def.id === 'renko' && p.brick > 0) opts.brick = p.brick;
	111	+ if (def.id === 'rangebars' && p.range > 0) opts.range = p.range;
	112	+ if (def.id === 'kagi' && p.reversal > 0) opts.reversal = p.reversal;
	113	+ if (def.id === 'pnf') { if (p.box > 0) opts.box = p.box; if (p.pnfRev > 0) opts.reversal = p.pnfRev; }
	114	+ if (def.id === 'linebreak' && p.lines > 0) opts.lines = p.lines;
	115	+ items = HF.transforms[def.transform](bars, opts);
	116	+ if (!items.length) { toast('Pas assez de données pour ce type sur ce timeframe', true); items = bars; }
	117	+ }
	118	+
	119	+ const spec = {
	120	+ items,
	121	+ draw: def.draw,
	122	+ decimals: raw.decimals,
	123	+ logScale: state.log && !def.compare,
	124	+ defaultVisible: def.vis,
	125	+ hasVolume: raw.hasVolume,
	126	+ showVolume: raw.hasVolume && !def.noVol && !def.compare,
	127	+ overlays: [],
	128	+ panes: [],
	129	+ anchor: def.id === 'baseline' && items.length ? items[0].c : null,
	130	+ volumeProfile: state.inds.includes('vprofile') && raw.hasVolume && !def.transform && !def.compare,
	131	+ meta: { symbol: state.symbol, tfLabel: (TFS.find(t => t.id === state.tf) \|\| {}).label \|\| state.tf },
	132	+ };
	133	+
	134	+ if (!def.compare) {
	135	+ for (const ov of OVERLAYS) {
	136	+ if (!state.inds.includes(ov.id)) continue;
	137	+ if (ov.needVol && !raw.hasVolume) continue;
	138	+ if (ov.intraday && (state.tf === 'D' \|\| state.tf === 'W')) continue;
	139	+ const made = ov.make(items, p);
	140	+ spec.overlays.push({ ...made, color: schemeSeries()[ov.slot], label: ov.label });
	141	+ }
	142	+ for (const pn of PANES) {
	143	+ if (!state.inds.includes(pn.id)) continue;
	144	+ spec.panes.push({ id: pn.id, kind: pn.kind, label: pn.label, data: pn.make(items, p) });
	145	+ }
	146	+ } else {
	147	+ buildCompare(spec);
	148	+ }
	149	+ chart.setSeries(spec, keepView);
	150	+ if (spec._absMain) { // comparaison : base % = première barre visible
	151	+ rebaseCompare(spec, chart.visibleRange()[0]);
	152	+ chart.render();
	153	+ }
	154	+ renderLegendStatic(spec);
	155	+ }
	156	+
	157	+ function schemeSeries() { return chart ? chart.th.series : []; }
	158	+
	159	+ /* Comparaison : tout est ré-exprimé en % depuis le début de la fenêtre.
	160	+ * Slots catégoriels FIXES (jamais recyclés) : le symbole principal garde
	161	+ * le slot 1, chaque comparé garde le slot de sa position. */
	162	+ function buildCompare(spec) {
	163	+ const main = raw.parsed;
	164	+ if (!main.length) return;
	165	+ spec.decimals = 2;
	166	+ spec.percent = true;
	167	+ spec.draw = 'none';
	168	+ spec.overlays = [];
	169	+ spec.anchor = null;
	170	+ const colors = schemeSeries();
	171	+ // séries absolues alignées sur la timeline du symbole principal
	172	+ // (report de la dernière valeur connue dans les trous de séance)
	173	+ spec._absMain = main;
	174	+ spec._absComp = state.compare.slice(0, 3).map((sym, k) => {
	175	+ const cr = compareRaw[sym];
	176	+ if (!cr) return null;
	177	+ const map = new Map(cr.parsed.map(b => [b.t, b.c]));
	178	+ let lastC = null;
	179	+ const closes = main.map(b => {
	180	+ const c = map.get(b.t);
	181	+ if (c != null) lastC = c;
	182	+ return lastC;
	183	+ });
	184	+ return { label: sym, color: colors[k + 1], closes };
	185	+ }).filter(Boolean);
	186	+ spec.items = main.map(b => ({ t: b.t, o: 0, h: 0, l: 0, c: 0, v: b.v }));
	187	+ spec.compare = [{ label: state.symbol, color: colors[0], vals: new Array(main.length).fill(null) }];
	188	+ for (const s of spec._absComp) spec.compare.push({ label: s.label, color: s.color, vals: new Array(main.length).fill(null) });
	189	+ rebaseCompare(spec, 0);
	190	+ }
	191	+
	192	+ /* Rebasage % sur la première barre visible — recalculé au pan/zoom,
	193	+ * comme une vraie échelle "percent". */
	194	+ let lastRebaseI0 = -1;
	195	+ function rebaseCompare(spec, i0) {
	196	+ const main = spec._absMain;
	197	+ if (!main) return;
	198	+ i0 = Math.max(0, Math.min(main.length - 1, i0));
	199	+ const baseM = main[i0].c;
	200	+ for (let i = 0; i < main.length; i++) {
	201	+ const b = main[i], it = spec.items[i];
	202	+ it.o = ((b.o / baseM) - 1) * 100;
	203	+ it.h = ((b.h / baseM) - 1) * 100;
	204	+ it.l = ((b.l / baseM) - 1) * 100;
	205	+ it.c = ((b.c / baseM) - 1) * 100;
	206	+ spec.compare[0].vals[i] = it.c;
	207	+ }
	208	+ spec._absComp.forEach((s, k) => {
	209	+ let base = null;
	210	+ for (let i = i0; i < s.closes.length; i++) { if (s.closes[i] != null) { base = s.closes[i]; break; } }
	211	+ const vals = spec.compare[k + 1].vals;
	212	+ for (let i = 0; i < s.closes.length; i++) {
	213	+ vals[i] = (base && s.closes[i] != null) ? ((s.closes[i] / base) - 1) * 100 : null;
	214	+ }
	215	+ });
	216	+ lastRebaseI0 = i0;
	217	+ }
	218	+
	219	+ /* ------------------------------------------------------------ chargement */
	220	+ async function loadMain(keepView) {
	221	+ const def = typeDef();
	222	+ loading = true;
	223	+ $('#chart-wrap').classList.add('loading');
	224	+ try {
	225	+ tfAvail = HF.data.tfAvailability(state.group);
	226	+ if (!tfAvail[state.tf]) {
	227	+ state.tf = tfAvail['60'] ? '60' : 'D';
	228	+ syncToolbar();
	229	+ }
	230	+ curWant = curWant \|\| TF_WANT[state.tf] \|\| 5000;
	231	+ raw = await HF.data.bars(state.group, state.symbol, state.tf, curWant);
	232	+ if (def.compare) {
	233	+ await Promise.all(state.compare.slice(0, 3).map(async s => {
	234	+ compareRaw[s] = await HF.data.bars(state.group, s, state.tf, curWant);
	235	+ }));
	236	+ }
	237	+ buildSpec(keepView);
	238	+ } catch (e) {
	239	+ toast('Erreur : ' + e.message, true);
	240	+ } finally {
	241	+ loading = false;
	242	+ $('#chart-wrap').classList.remove('loading');
	243	+ syncTfButtons();
	244	+ }
	245	+ }
	246	+
	247	+ function reload(resetLimit) {
	248	+ if (resetLimit) curWant = 0;
	249	+ loadMain(false);
	250	+ save();
	251	+ syncToolbar();
	252	+ }
	253	+
	254	+ /* pan/zoom : rebase la comparaison sur la 1re barre visible,
	255	+ * puis étend l'historique quand on bute sur le bord gauche */
	256	+ function maybeExtend(view) {
	257	+ if (chart.spec && chart.spec._absMain) {
	258	+ const i0 = Math.max(0, Math.floor(view.first));
	259	+ if (i0 !== lastRebaseI0) {
	260	+ rebaseCompare(chart.spec, i0);
	261	+ chart.render();
	262	+ }
	263	+ }
	264	+ if (loading \|\| !raw) return;
	265	+ if (view.first > 40) return;
	266	+ if (raw.srcLimitReached) return;
	267	+ if (raw.parsed.length < curWant * 0.9) return; // le lac n'a pas plus d'historique
	268	+ curWant = Math.min(HF.data.MAX_API_LIMIT, curWant * 2);
	269	+ loadMain(true);
	270	+ }
	271	+
	272	+ /* ------------------------------------------------------------ légende OHLCV */
	273	+ function renderLegendStatic(spec) {
	274	+ const el = $('#legend');
	275	+ const def = typeDef();
	276	+ const tfLabel = (TFS.find(t => t.id === state.tf) \|\| {}).label \|\| state.tf;
	277	+ let html = `<span class="sym">${state.symbol}</span><span class="dim">· ${tfLabel} · ${def.label}</span><span id="ohlcv"></span>`;
	278	+ if (def.compare) {
	279	+ const colors = schemeSeries();
	280	+ const syms = [state.symbol, ...state.compare.slice(0, 3)];
	281	+ html = `<span class="dim">Comparaison % · ${tfLabel}</span>` + syms.map((s, k) =>
	282	+ `<span class="chip-sym"><i style="background:${colors[k]}"></i>${s}</span>`).join('');
	283	+ }
	284	+ el.innerHTML = html;
	285	+ updateOHLCV(null, null);
	286	+ }
	287	+
	288	+ function updateOHLCV(i, item) {
	289	+ const el = $('#ohlcv');
	290	+ if (!el \|\| !raw \|\| !chart.spec) return;
	291	+ const spec = chart.spec;
	292	+ const it = item \|\| spec.items[spec.items.length - 1];
	293	+ if (!it) { el.textContent = ''; return; }
	294	+ const idx = i != null ? i : spec.items.length - 1;
	295	+ const prev = spec.items[idx - 1];
	296	+ const ref = prev ? prev.c : it.o;
	297	+ const chg = ref ? ((it.c / ref) - 1) * 100 : 0;
	298	+ const cls = it.c >= ref ? 'up' : 'dn';
	299	+ const f = v => HF.fmt.price(v, spec.decimals);
	300	+ el.innerHTML =
	301	+ `<span class="k">O</span>${f(it.o)} <span class="k">H</span>${f(it.h)} ` +
	302	+ `<span class="k">L</span>${f(it.l)} <span class="k">C</span><b class="${cls}">${f(it.c)}</b> ` +
	303	+ `<b class="${cls}">${chg >= 0 ? '+' : ''}${chg.toFixed(2)} %</b>` +
	304	+ (spec.hasVolume && it.v ? ` <span class="k">Vol</span>${HF.fmt.vol(it.v)}` : '');
	305	+ }
	306	+
	307	+ /* ------------------------------------------------------------ sidebar */
	308	+ function renderGroupTabs() {
	309	+ const tabs = $('#group-tabs');
	310	+ tabs.innerHTML = '';
	311	+ for (const g of HF.data.GROUPS) {
	312	+ const b = document.createElement('button');
	313	+ b.textContent = g.label;
	314	+ b.className = g.key === state.group ? 'active' : '';
	315	+ b.onclick = async () => {
	316	+ state.group = g.key;
	317	+ state.compare = [];
	318	+ state.symbol = DEFAULT_SYMBOL[g.key] \|\| '';
	319	+ renderGroupTabs();
	320	+ await renderSymbolList(true);
	321	+ reload(true);
	322	+ };
	323	+ tabs.appendChild(b);
	324	+ }
	325	+ }
	326	+
	327	+ async function renderSymbolList(validate) {
	328	+ const ul = $('#symbols');
	329	+ ul.innerHTML = '<li class="dim">Chargement…</li>';
	330	+ let list;
	331	+ try {
	332	+ list = await HF.data.tickers(state.group);
	333	+ } catch (e) {
	334	+ ul.innerHTML = '';
	335	+ toast('Tickers : ' + e.message, true);
	336	+ return;
	337	+ }
	338	+ if (validate && !list.includes(state.symbol)) state.symbol = list[0] \|\| '';
	339	+ const q = ($('#search').value \|\| '').toUpperCase();
	340	+ ul.innerHTML = '';
	341	+ const frag = document.createDocumentFragment();
	342	+ let shown = 0;
	343	+ for (const s of list) {
	344	+ if (q && !s.toUpperCase().includes(q)) continue;
	345	+ if (++shown > 800) break; // le champ recherche affine au-delà
	346	+ const li = document.createElement('li');
	347	+ li.textContent = s;
	348	+ if (s === state.symbol) li.className = 'active';
	349	+ if (state.compare.includes(s)) li.className += ' compared';
	350	+ li.onclick = () => {
	351	+ if (compareMode() && s !== state.symbol) { toggleCompareSymbol(s); renderSymbolList(); return; }
	352	+ state.symbol = s;
	353	+ renderSymbolList();
	354	+ document.body.classList.remove('drawer-open');
	355	+ reload(true);
	356	+ };
	357	+ frag.appendChild(li);
	358	+ }
	359	+ ul.appendChild(frag);
	360	+ $('#sym-count').textContent = `${list.length} symboles`;
	361	+ }
	362	+
	363	+ function compareMode() { return typeDef().compare; }
	364	+
	365	+ function toggleCompareSymbol(sym) {
	366	+ const i = state.compare.indexOf(sym);
	367	+ if (i >= 0) state.compare.splice(i, 1);
	368	+ else {
	369	+ if (state.compare.length >= 3) { toast('Maximum 4 séries (lisibilité) — retirez-en une d’abord'); return; }
	370	+ state.compare.push(sym);
	371	+ }
	372	+ reload(false);
	373	+ }
	374	+
	375	+ /* ------------------------------------------------------------ toolbar */
	376	+ function syncTfButtons() {
	377	+ $$('#tf-row button').forEach(b => {
	378	+ b.classList.toggle('active', b.dataset.tf === state.tf);
	379	+ b.disabled = tfAvail[b.dataset.tf] === false;
	380	+ b.title = b.disabled ? 'Pas encore dans le lac de données' : '';
	381	+ });
	382	+ }
	383	+
	384	+ function syncToolbar() {
	385	+ syncTfButtons();
	386	+ $('#type-select').value = state.type;
	387	+ $('#btn-log').classList.toggle('active', state.log);
	388	+ $('#btn-theme').textContent = state.theme === 'dark' ? '☀︎' : '☾';
	389	+ $('#scheme-select').value = state.scheme;
	390	+ document.documentElement.dataset.theme = state.theme;
	391	+ document.documentElement.dataset.scheme = state.scheme;
	392	+ $$('#ind-menu input').forEach(cb => { cb.checked = state.inds.includes(cb.value); });
	393	+ renderParams();
	394	+ if (chart) { chart.readTheme(); chart.render(); }
	395	+ }
	396	+
	397	+ function buildToolbar() {
	398	+ const tfRow = $('#tf-row');
	399	+ for (const tf of TFS) {
	400	+ const b = document.createElement('button');
	401	+ b.textContent = tf.label;
	402	+ b.dataset.tf = tf.id;
	403	+ b.onclick = () => { if (!b.disabled) { state.tf = tf.id; reload(true); } };
	404	+ tfRow.appendChild(b);
	405	+ }
	406	+ const sel = $('#type-select');
	407	+ for (const t of CHART_TYPES) {
	408	+ const o = document.createElement('option');
	409	+ o.value = t.id; o.textContent = t.label;
	410	+ sel.appendChild(o);
	411	+ }
	412	+ sel.onchange = () => { state.type = sel.value; reload(false); updateCompareHint(); };
	413	+
	414	+ const menu = $('#ind-menu');
	415	+ const mk = (id, label, note) => {
	416	+ const l = document.createElement('label');
	417	+ l.innerHTML = `<input type="checkbox" value="${id}"> ${label}${note ? ` <em>${note}</em>` : ''}`;
	418	+ l.querySelector('input').onchange = e => {
	419	+ if (e.target.checked) state.inds.push(id);
	420	+ else state.inds = state.inds.filter(x => x !== id);
	421	+ reload(false);
	422	+ };
	423	+ menu.appendChild(l);
	424	+ };
	425	+ for (const ov of OVERLAYS) mk(ov.id, ov.label, ov.needVol ? 'volume requis' : '');
	426	+ mk('vprofile', 'Profil de volume', 'volume requis');
	427	+ for (const pn of PANES) mk(pn.id, pn.label + (pn.id === 'rsi' ? ' 14' : pn.id === 'atr' ? ' 14' : ' 12·26·9'), '');
	428	+
	429	+ $('#btn-log').onclick = () => { state.log = !state.log; buildSpec(true); save(); syncToolbar(); };
	430	+ $('#btn-theme').onclick = () => { state.theme = state.theme === 'dark' ? 'light' : 'dark'; save(); syncToolbar(); };
	431	+ $('#scheme-select').onchange = e => { state.scheme = e.target.value; save(); syncToolbar(); };
	432	+ $('#btn-gallery').onclick = openGallery;
	433	+ $('#btn-table').onclick = openTable;
	434	+ $('#btn-export').onclick = openExport;
	435	+ $('#search').oninput = () => renderSymbolList();
	436	+ // drawer mobile
	437	+ $('#btn-symbols').onclick = () => document.body.classList.toggle('drawer-open');
	438	+ $('#drawer-backdrop').onclick = () => document.body.classList.remove('drawer-open');
	439	+ document.addEventListener('click', e => {
	440	+ for (const dd of $$('.dropdown')) {
	441	+ if (!dd.contains(e.target)) dd.classList.remove('open');
	442	+ }
	443	+ });
	444	+ for (const dd of $$('.dropdown > button')) {
	445	+ dd.onclick = e => { e.stopPropagation(); dd.parentElement.classList.toggle('open'); };
	446	+ }
	447	+ for (const ov of $$('.overlay-panel')) {
	448	+ ov.addEventListener('click', e => { if (e.target === ov) ov.classList.remove('open'); });
	449	+ }
	450	+ }
	451	+
	452	+ function updateCompareHint() {
	453	+ $('#compare-hint').style.display = compareMode() ? 'block' : 'none';
	454	+ }
	455	+
	456	+ /* Réglages du type actif (brique, renversement, boîtes…) + périodes. */
	457	+ function renderParams() {
	458	+ const host = $('#params');
	459	+ const def = typeDef();
	460	+ host.innerHTML = '';
	461	+ const fields = [];
	462	+ if (def.id === 'renko') fields.push(['brick', 'Taille de brique (vide = auto ATR)']);
	463	+ if (def.id === 'rangebars') fields.push(['range', 'Range par barre (vide = auto)']);
	464	+ if (def.id === 'kagi') fields.push(['reversal', 'Renversement (vide = auto)']);
	465	+ if (def.id === 'pnf') { fields.push(['box', 'Taille de boîte (vide = auto)']); fields.push(['pnfRev', 'Renversement (boîtes, défaut 3)']); }
	466	+ if (def.id === 'linebreak') fields.push(['lines', 'Lignes à casser (défaut 3)']);
	467	+ if (state.inds.includes('sma20')) fields.push(['sma20', 'Période SMA 20']);
	468	+ if (state.inds.includes('sma50')) fields.push(['sma50', 'Période SMA 50']);
	469	+ if (state.inds.includes('ema20')) fields.push(['ema20', 'Période EMA 20']);
	470	+ if (state.inds.includes('boll')) { fields.push(['bollN', 'Bollinger : période']); fields.push(['bollK', 'Bollinger : écart-type']); }
	471	+ if (state.inds.includes('rsi')) fields.push(['rsiN', 'Période RSI']);
	472	+ if (state.inds.includes('atr')) fields.push(['atrN', 'Période ATR']);
	473	+ if (!fields.length) {
	474	+ host.innerHTML = '<p class="dim">Aucun réglage pour cette configuration.</p>';
	475	+ return;
	476	+ }
	477	+ for (const [key, label] of fields) {
	478	+ const row = document.createElement('label');
	479	+ row.className = 'param-row';
	480	+ row.innerHTML = `<span>${label}</span><input type="number" step="any" value="${state.params[key] ?? ''}">`;
	481	+ row.querySelector('input').onchange = e => {
	482	+ const v = parseFloat(e.target.value);
	483	+ if (isFinite(v) && v > 0) state.params[key] = v; else delete state.params[key];
	484	+ buildSpec(true);
	485	+ save();
	486	+ };
	487	+ host.appendChild(row);
	488	+ }
	489	+ }
	490	+
	491	+ /* ------------------------------------------------------------ galerie */
	492	+ async function openGallery() {
	493	+ const overlay = $('#gallery');
	494	+ overlay.classList.add('open');
	495	+ const grid = $('#gallery-grid');
	496	+ grid.innerHTML = '';
	497	+ let daily;
	498	+ try {
	499	+ daily = (await HF.data.bars(state.group, state.symbol, 'D', 400)).parsed.slice(-260);
	500	+ } catch (e) { toast('Erreur galerie : ' + e.message, true); return; }
	501	+ for (const t of CHART_TYPES) {
	502	+ const card = document.createElement('button');
	503	+ card.className = 'g-card' + (t.id === state.type ? ' active' : '');
	504	+ card.innerHTML = `<canvas></canvas><strong>${t.label}</strong><span>${t.desc}</span>`;
	505	+ card.onclick = () => { state.type = t.id; overlay.classList.remove('open'); reload(false); updateCompareHint(); };
	506	+ grid.appendChild(card);
	507	+ let items = daily;
	508	+ if (t.transform) items = HF.transforms[t.transform](daily, {});
	509	+ const draw = t.compare ? 'line' : t.draw;
	510	+ // les types à corps ont besoin de barres larges pour être reconnaissables
	511	+ const n = ['candles', 'hollow', 'ohlc', 'bricks'].includes(draw) ? 55 : 120;
	512	+ requestAnimationFrame(() => HF.mini(card.querySelector('canvas'), draw, items.slice(-n), chart.th));
	513	+ }
	514	+ $('#gallery-close').onclick = () => overlay.classList.remove('open');
	515	+ }
	516	+
	517	+ /* ------------------------------------------------------------ export snippet */
	518	+ const MAX_EXPORT_BARS = 3000;
	519	+
	520	+ /* Barres brutes couvrant la fenêtre visible (les transforms — Renko, Kagi… —
	521	+ * sont recalculées à l'identique dans l'embed à partir de ces barres). */
	522	+ function exportBars() {
	523	+ const def = typeDef();
	524	+ const [i0, i1] = chart.visibleRange();
	525	+ let bars;
	526	+ if (def.transform) {
	527	+ const t0 = chart.spec.items[i0] ? chart.spec.items[i0].t : raw.parsed[0].t;
	528	+ bars = raw.parsed.filter(b => b.t >= t0);
	529	+ } else {
	530	+ bars = raw.parsed.slice(i0, i1 + 1);
	531	+ }
	532	+ return bars.slice(-MAX_EXPORT_BARS);
	533	+ }
	534	+
	535	+ function buildEmbedSnippet() {
	536	+ const def = typeDef();
	537	+ const bars = exportBars();
	538	+ const d = raw.decimals;
	539	+ const r = v => +v.toFixed(d);
	540	+ const tfLabel = (TFS.find(t => t.id === state.tf) \|\| {}).label \|\| state.tf;
	541	+ const inds = state.inds.filter(x => x !== 'vprofile');
	542	+ const cfg = {
	543	+ symbol: state.symbol, tf: tfLabel, type: state.type, typeLabel: def.label,
	544	+ theme: state.theme, scheme: state.scheme,
	545	+ inds, params: state.params, decimals: d,
	546	+ hasVolume: raw.hasVolume && !def.noVol,
	547	+ visible: Math.min(bars.length, Math.round(chart.view.count)),
	548	+ bars: bars.map(b => [b.t, r(b.o), r(b.h), r(b.l), r(b.c), Math.round(b.v)]),
	549	+ };
	550	+ const id = 'hfchart-' + Math.random().toString(36).slice(2, 8);
	551	+ const base = location.origin.startsWith('http') ? location.origin : 'https://www.hfchart.io';
	552	+ return {
	553	+ count: bars.length,
	554	+ code:
	555	+`<!-- HFChart — ${state.symbol} · ${tfLabel} · ${def.label} — ${bars.length} barres intégrées
	556	+ Graphe interactif autonome (zoom, pan, crosshair), aucune requête réseau pour les données.
	557	+ https://www.hfchart.io — Simon-Pierre Boucher — contact@spboucher.ai -->
	558	+<div id="${id}" style="width:100%;height:420px"></div>
	559	+<script>
	560	+(window.HFChartEmbedQueue = window.HFChartEmbedQueue \|\| []).push({
	561	+ el: "#${id}",
	562	+ config: ${JSON.stringify(cfg)}
	563	+});
	564	+</script>
	565	+<script async src="${base}/embed.js"></script>`,
	566	+ };
	567	+ }
	568	+
	569	+ function buildIframeSnippet() {
	570	+ const base = location.origin.startsWith('http') ? location.origin : 'https://www.hfchart.io';
	571	+ const q = new URLSearchParams({
	572	+ group: state.group, symbol: state.symbol, tf: state.tf, type: state.type,
	573	+ theme: state.theme, scheme: state.scheme, embed: '1',
	574	+ });
	575	+ if (state.inds.length) q.set('inds', state.inds.join(','));
	576	+ if (state.compare.length && compareMode()) q.set('compare', state.compare.join(','));
	577	+ if (state.log) q.set('log', '1');
	578	+ return {
	579	+ code:
	580	+`<!-- HFChart live — ${state.symbol} — https://www.hfchart.io -->
	581	+<iframe src="${base}/?${q.toString()}"
	582	+ style="width:100%;height:480px;border:0;border-radius:8px"
	583	+ loading="lazy" title="HFChart — ${state.symbol}"></iframe>`,
	584	+ };
	585	+ }
	586	+
	587	+ let exportTab = 'html';
	588	+ function renderExport() {
	589	+ const noteEl = $('#export-note');
	590	+ const codeEl = $('#export-code');
	591	+ $$('#export-tabs button').forEach(b => b.classList.toggle('active', b.dataset.tab === exportTab));
	592	+ if (exportTab === 'html') {
	593	+ if (compareMode()) {
	594	+ noteEl.textContent = 'Le mode Comparaison % s’exporte en iframe live (onglet suivant) — le snippet HTML autonome couvre les 13 autres types.';
	595	+ codeEl.value = '';
	596	+ return;
	597	+ }
	598	+ const s = buildEmbedSnippet();
	599	+ const kb = Math.round(s.code.length / 1024);
	600	+ noteEl.textContent =
	601	+ `Graphe 100 % autonome : ${s.count} barres visibles intégrées dans la page (~${kb} Ko), ` +
	602	+ `interactif (zoom, pan, crosshair), indicateurs et réglages inclus. Collez tel quel dans n’importe quelle page HTML.`;
	603	+ codeEl.value = s.code;
	604	+ } else {
	605	+ noteEl.textContent = 'Version live : le graphe embarqué charge la plateforme (données à jour via hfmarketdata.io).';
	606	+ codeEl.value = buildIframeSnippet().code;
	607	+ }
	608	+ }
	609	+
	610	+ function openExport() {
	611	+ if (!raw \|\| !chart.spec) return;
	612	+ $('#export-view').classList.add('open');
	613	+ renderExport();
	614	+ $('#export-copied').textContent = '';
	615	+ $('#export-close').onclick = () => $('#export-view').classList.remove('open');
	616	+ $$('#export-tabs button').forEach(b => {
	617	+ b.onclick = () => { exportTab = b.dataset.tab; renderExport(); };
	618	+ });
	619	+ $('#export-copy').onclick = async () => {
	620	+ const code = $('#export-code').value;
	621	+ if (!code) return;
	622	+ try {
	623	+ await navigator.clipboard.writeText(code);
	624	+ } catch (e) {
	625	+ $('#export-code').select();
	626	+ document.execCommand('copy');
	627	+ }
	628	+ $('#export-copied').textContent = '✓ copié dans le presse-papiers';
	629	+ setTimeout(() => { $('#export-copied').textContent = ''; }, 2500);
	630	+ };
	631	+ }
	632	+
	633	+ /* ------------------------------------------------------------ vue table (accessibilité) */
	634	+ function openTable() {
	635	+ if (!chart \|\| !chart.spec) return;
	636	+ const overlay = $('#table-view');
	637	+ overlay.classList.add('open');
	638	+ const [i0, i1] = chart.visibleRange();
	639	+ const items = chart.spec.items.slice(i0, i1 + 1).slice(-500);
	640	+ const f = v => HF.fmt.price(v, chart.spec.decimals);
	641	+ const hasV = chart.spec.hasVolume;
	642	+ let html = `<tr><th>Temps</th><th>Ouverture</th><th>Haut</th><th>Bas</th><th>Clôture</th>${hasV ? '<th>Volume</th>' : ''}</tr>`;
	643	+ for (let k = items.length - 1; k >= 0; k--) {
	644	+ const b = items[k];
	645	+ html += `<tr><td>${HF.fmt.time(b.t)}</td><td>${f(b.o)}</td><td>${f(b.h)}</td><td>${f(b.l)}</td><td>${f(b.c)}</td>${hasV ? `<td>${HF.fmt.vol(b.v)}</td>` : ''}</tr>`;
	646	+ }
	647	+ $('#table-view table').innerHTML = html;
	648	+ $('#table-title').textContent = `${state.symbol} — ${items.length} barres visibles (max 500)`;
	649	+ $('#table-close').onclick = () => overlay.classList.remove('open');
	650	+ }
	651	+
	652	+ /* ------------------------------------------------------------ boot */
	653	+ async function boot() {
	654	+ document.documentElement.dataset.theme = state.theme;
	655	+ document.documentElement.dataset.scheme = state.scheme;
	656	+ if (new URLSearchParams(location.search).get('embed') === '1') {
	657	+ document.body.classList.add('embed'); // mode iframe : chart seul
	658	+ }
	659	+ chart = new HF.HFChart($('#chart-wrap'), {
	660	+ onCrosshair: updateOHLCV,
	661	+ onViewChange: maybeExtend,
	662	+ });
	663	+ buildToolbar();
	664	+ syncToolbar();
	665	+ updateCompareHint();
	666	+ try {
	667	+ await HF.data.loadStatus();
	668	+ } catch (e) {
	669	+ toast('API hfmarketdata.io injoignable : ' + e.message, true);
	670	+ return;
	671	+ }
	672	+ renderGroupTabs();
	673	+ await renderSymbolList(true);
	674	+ reload(true);
	675	+ const panel = new URLSearchParams(location.search).get('panel');
	676	+ if (panel === 'gallery') openGallery();
	677	+ if (panel === 'table') setTimeout(openTable, 1500);
	678	+ if (new URLSearchParams(location.search).get('debug') === '1') {
	679	+ setTimeout(() => {
	680	+ $('#legend').textContent =
	681	+ `iw:${innerWidth} body:${document.body.clientWidth} wrap:${$('#chart-wrap').clientWidth}` +
	682	+ ` area:${$('#chart-area').clientWidth} layout:${$('#layout').clientWidth} chartW:${chart.w}\|axis:${chart.axisW}`;
	683	+ }, 3000);
	684	+ }
	685	+ }
	686	+
	687	+ boot();
	688	+})();

added web/js/data.js +185 −0

		`@@ -0,0 +1,185 @@`
	1	+/* ============================================================================
	2	+ * HFChart — couche données : API HF Market Data (https://www.hfmarketdata.io)
	3	+ * Author : Simon-Pierre Boucher — contact@spboucher.ai
	4	+ * ----------------------------------------------------------------------------
	5	+ * Le navigateur interroge l'API directement (CORS ouvert). Les timeframes
	6	+ * absents du lac sont dérivés côté client par resampling (1h→4h, 1J→1S,
	7	+ * 5min→15m, …). `/v1/status` pilote dynamiquement ce qui est disponible.
	8	+ * ==========================================================================*/
	9	+(function () {
	10	+ 'use strict';
	11	+ const HF = (window.HF = window.HF \|\| {});
	12	+ const API = window.HFMD_API \|\| 'https://www.hfmarketdata.io';
	13	+ const MAX_API_LIMIT = 50000;
	14	+
	15	+ const GROUPS = [
	16	+ { key: 'index', label: 'Indices' },
	17	+ { key: 'etf', label: 'ETF' },
	18	+ { key: 'stock', label: 'Actions' },
	19	+ { key: 'futures', label: 'Futures' },
	20	+ { key: 'crypto', label: 'Crypto' },
	21	+ { key: 'fx', label: 'FX' },
	22	+ ];
	23	+
	24	+ /* tf UI → sources candidates (ordre de préférence) + facteur de resampling */
	25	+ const TF_SOURCES = {
	26	+ '1': [['1min', 1]],
	27	+ '5': [['5min', 1], ['1min', 5]],
	28	+ '15': [['5min', 3], ['1min', 15]],
	29	+ '30': [['30min', 1], ['5min', 6], ['1min', 30]],
	30	+ '60': [['1hour', 1], ['30min', 2], ['5min', 12]],
	31	+ '240': [['1hour', 4], ['30min', 8]],
	32	+ 'D': [['1day', 1]],
	33	+ 'W': [['1day', 'W']],
	34	+ };
	35	+
	36	+ let status = null; // /v1/status → { asset: { tf: { adj: n } } }
	37	+
	38	+ async function getJSON(url) {
	39	+ const res = await fetch(url);
	40	+ if (!res.ok) {
	41	+ let msg = res.statusText;
	42	+ try { msg = (await res.json()).detail \|\| msg; } catch (e) { /* texte brut */ }
	43	+ throw new Error(msg);
	44	+ }
	45	+ return res.json();
	46	+ }
	47	+
	48	+ async function loadStatus() {
	49	+ if (status) return status;
	50	+ status = (await getJSON(`${API}/v1/status`)).datasets \|\| {};
	51	+ return status;
	52	+ }
	53	+
	54	+ function srcAvailable(asset, srcTf) {
	55	+ const a = status && status[asset];
	56	+ if (!a \|\| !a[srcTf]) return false;
	57	+ return Object.values(a[srcTf]).some(n => n > 0);
	58	+ }
	59	+
	60	+ /* Résout un tf UI vers (source, facteur) selon la disponibilité réelle. */
	61	+ function resolveTf(asset, uiTf) {
	62	+ for (const [src, factor] of (TF_SOURCES[uiTf] \|\| [])) {
	63	+ if (srcAvailable(asset, src)) return { src, factor };
	64	+ }
	65	+ return null;
	66	+ }
	67	+
	68	+ function tfAvailability(asset) {
	69	+ const out = {};
	70	+ for (const tf of Object.keys(TF_SOURCES)) out[tf] = !!resolveTf(asset, tf);
	71	+ return out;
	72	+ }
	73	+
	74	+ function parseDT(s) { // "YYYY-MM-DD HH:MM:SS" → epoch (UTC naïf)
	75	+ return Date.UTC(+s.slice(0, 4), +s.slice(5, 7) - 1, +s.slice(8, 10),
	76	+ +(s.slice(11, 13) \|\| 0), +(s.slice(14, 16) \|\| 0), +(s.slice(17, 19) \|\| 0)) / 1000;
	77	+ }
	78	+
	79	+ function resampleSec(bars, sec) {
	80	+ const out = [];
	81	+ let cur = null, key = null;
	82	+ for (const b of bars) {
	83	+ const k = b.t - (b.t % sec);
	84	+ if (k !== key) {
	85	+ if (cur) out.push(cur);
	86	+ key = k;
	87	+ cur = { t: k, o: b.o, h: b.h, l: b.l, c: b.c, v: b.v };
	88	+ } else {
	89	+ cur.h = Math.max(cur.h, b.h);
	90	+ cur.l = Math.min(cur.l, b.l);
	91	+ cur.c = b.c;
	92	+ cur.v += b.v;
	93	+ }
	94	+ }
	95	+ if (cur) out.push(cur);
	96	+ return out;
	97	+ }
	98	+
	99	+ function resampleWeekly(daily) {
	100	+ const out = [];
	101	+ let cur = null, key = null;
	102	+ for (const b of daily) {
	103	+ const wd = (Math.floor(b.t / 86400) + 3) % 7; // lundi = 0
	104	+ const k = b.t - wd * 86400;
	105	+ if (k !== key) {
	106	+ if (cur) out.push(cur);
	107	+ key = k;
	108	+ cur = { t: k, o: b.o, h: b.h, l: b.l, c: b.c, v: b.v };
	109	+ } else {
	110	+ cur.h = Math.max(cur.h, b.h);
	111	+ cur.l = Math.min(cur.l, b.l);
	112	+ cur.c = b.c;
	113	+ cur.v += b.v;
	114	+ }
	115	+ }
	116	+ if (cur) out.push(cur);
	117	+ return out;
	118	+ }
	119	+
	120	+ function detectDecimals(bars) {
	121	+ let dec = 0;
	122	+ for (let i = Math.max(0, bars.length - 80); i < bars.length; i++) {
	123	+ const c = bars[i].c;
	124	+ for (let d = dec; d <= 6; d++) {
	125	+ if (Math.abs(c * Math.pow(10, d) - Math.round(c * Math.pow(10, d))) < 1e-6) {
	126	+ dec = Math.max(dec, d);
	127	+ break;
	128	+ }
	129	+ if (d === 6) dec = 6;
	130	+ }
	131	+ }
	132	+ return dec;
	133	+ }
	134	+
	135	+ const tickerCache = new Map();
	136	+ async function tickers(asset) {
	137	+ if (tickerCache.has(asset)) return tickerCache.get(asset);
	138	+ await loadStatus();
	139	+ // n'importe quel tf disponible fait l'affaire pour lister
	140	+ const tfs = Object.keys(status[asset] \|\| {});
	141	+ const tf = tfs.includes('1day') ? '1day' : tfs[0];
	142	+ if (!tf) return [];
	143	+ const j = await getJSON(`${API}/v1/${asset}/tickers?timeframe=${tf}&limit=20000`);
	144	+ const list = (j.tickers \|\| []).filter(t => t && t.trim());
	145	+ tickerCache.set(asset, list);
	146	+ return list;
	147	+ }
	148	+
	149	+ const barCache = new Map();
	150	+ /* Retourne {parsed:[{t,o,h,l,c,v}], hasVolume, decimals, srcLimitReached} */
	151	+ async function bars(asset, ticker, uiTf, wantBars) {
	152	+ await loadStatus();
	153	+ const r = resolveTf(asset, uiTf);
	154	+ if (!r) throw new Error(`Timeframe indisponible pour ${asset} (lac de données)`);
	155	+ const factor = r.factor === 'W' ? 5 : r.factor;
	156	+ const apiLimit = Math.min(MAX_API_LIMIT, Math.ceil(wantBars * factor * 1.1));
	157	+ const key = `${asset}\|${ticker}\|${r.src}\|${apiLimit}`;
	158	+ if (barCache.has(key)) return barCache.get(key);
	159	+ const j = await getJSON(
	160	+ `${API}/v1/bars/${asset}/${encodeURIComponent(ticker)}?timeframe=${r.src}&order=desc&limit=${apiLimit}`);
	161	+ const rows = (j.data \|\| []).reverse();
	162	+ let parsed = rows.map(rec => ({
	163	+ t: parseDT(rec.datetime), o: rec.open, h: rec.high, l: rec.low, c: rec.close,
	164	+ v: rec.volume != null ? rec.volume : 0,
	165	+ }));
	166	+ if (r.factor === 'W') parsed = resampleWeekly(parsed);
	167	+ else if (r.factor > 1) {
	168	+ const secOf = { '1min': 60, '5min': 300, '30min': 1800, '1hour': 3600 };
	169	+ parsed = resampleSec(parsed, secOf[r.src] * r.factor);
	170	+ }
	171	+ const out = {
	172	+ parsed,
	173	+ hasVolume: rows.some(rec => rec.volume != null && rec.volume > 0),
	174	+ decimals: detectDecimals(parsed),
	175	+ srcLimitReached: (j.count \|\| rows.length) >= apiLimit && apiLimit >= MAX_API_LIMIT,
	176	+ src: r.src,
	177	+ };
	178	+ if (barCache.size > 24) barCache.delete(barCache.keys().next().value);
	179	+ barCache.set(key, out);
	180	+ return out;
	181	+ }
	182	+
	183	+ HF.data = { API, GROUPS, loadStatus, tfAvailability, resolveTf, tickers, bars,
	184	+ resampleSec, resampleWeekly, MAX_API_LIMIT };
	185	+})();

added web/js/embed-boot.js +151 −0

Large diff (151 lines) is not loaded by default to keep the page fast.Load diff

added web/js/engine.js +867 −0

Large diff (867 lines) is not loaded by default to keep the page fast.Load diff

added web/js/indicators.js +164 −0

Large diff (164 lines) is not loaded by default to keep the page fast.Load diff

added web/js/renderers.js +348 −0

Large diff (348 lines) is not loaded by default to keep the page fast.Load diff

added web/js/transforms.js +208 −0

Large diff (209 lines) is not loaded by default to keep the page fast.Load diff