spb/hfchart Public
HFChart — la référence des charts haute fréquence : 14 types rendus canvas from scratch (zéro dépendance), données HF Market Data — www.hfchart.io
JavaScript 82.1%
CSS 10%
HTML 5.8%
Python 2.1%
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.io5 Author : Simon-Pierre Boucher — contact@spboucher.ai6=========================================================================== -->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.io24 </a>25 <a class="provider lab-link" href="options.html">Options Lab</a>26 </div>27 <div id="tf-row" class="seg" role="group" aria-label="Timeframe"></div>28 <select id="type-select" aria-label="Type de chart"></select>29 <div class="dropdown">30 <button type="button">Indicateurs ▾</button>31 <div class="menu" id="ind-menu"></div>32 </div>33 <div class="dropdown">34 <button type="button">Réglages ▾</button>35 <div class="menu" id="params"></div>36 </div>37 <button id="btn-gallery" type="button" title="Catalogue des types de charts">Galerie</button>38 <button id="btn-table" type="button" title="Vue table des barres visibles">Données</button>39 <button id="btn-export" type="button" title="Copier un snippet du graphe avec ses données intégrées">Exporter</button>40 <button id="btn-log" type="button" title="Échelle logarithmique">log</button>41 <select id="scheme-select" aria-label="Couleurs hausse/baisse" title="Couleurs hausse/baisse">42 <option value="classic">Vert / rouge</option>43 <option value="cvd">Bleu / rouge (daltonisme)</option>44 </select>45 <button id="btn-theme" type="button" title="Thème clair / sombre">☾</button>46 </header>4748 <div id="layout">49 <div id="drawer-backdrop"></div>50 <aside id="sidebar">51 <nav id="group-tabs" aria-label="Classes d’actifs"></nav>52 <input id="search" type="search" placeholder="Rechercher un symbole…" autocomplete="off">53 <p id="compare-hint" class="hint">Mode comparaison : cliquez des symboles pour les ajouter / retirer (max 4 séries).</p>54 <ul id="symbols"></ul>55 <p id="sym-count" class="dim"></p>56 </aside>5758 <main id="chart-area">59 <div id="legend" aria-live="polite"></div>60 <div id="chart-wrap"></div>61 </main>62 </div>6364 <footer id="footer">65 HFChart — moteur de rendu canvas écrit from scratch, zéro dépendance ·66 Données <a href="https://www.hfmarketdata.io" target="_blank" rel="noopener">HF Market Data</a> ·67 Simon-Pierre Boucher — <a href="mailto:contact@spboucher.ai">contact@spboucher.ai</a>68 </footer>6970 <div id="gallery" class="overlay-panel" role="dialog" aria-label="Catalogue des types de charts">71 <div class="panel">72 <div class="panel-head">73 <h2>Catalogue des charts haute fréquence</h2>74 <button id="gallery-close" type="button" aria-label="Fermer">✕</button>75 </div>76 <p class="dim">Chaque type est rendu en direct sur le symbole courant (journalier). Cliquez pour l’ouvrir.</p>77 <div id="gallery-grid"></div>78 </div>79 </div>8081 <div id="export-view" class="overlay-panel" role="dialog" aria-label="Exporter le graphe">82 <div class="panel">83 <div class="panel-head">84 <h2>Exporter ce graphe</h2>85 <button id="export-close" type="button" aria-label="Fermer">✕</button>86 </div>87 <div class="seg" id="export-tabs">88 <button data-tab="html" class="active" type="button">HTML autonome (données intégrées)</button>89 <button data-tab="iframe" type="button">iframe live</button>90 </div>91 <p id="export-note" class="dim"></p>92 <textarea id="export-code" readonly spellcheck="false" wrap="off"></textarea>93 <div class="export-actions">94 <button id="export-copy" type="button" class="primary">Copier le snippet</button>95 <span id="export-copied" class="dim"></span>96 </div>97 </div>98 </div>99100 <div id="table-view" class="overlay-panel" role="dialog" aria-label="Vue table">101 <div class="panel">102 <div class="panel-head">103 <h2 id="table-title">Données</h2>104 <button id="table-close" type="button" aria-label="Fermer">✕</button>105 </div>106 <div class="table-scroll"><table></table></div>107 </div>108 </div>109110 <div id="toast" class="toast"></div>111112 <script src="js/transforms.js"></script>113 <script src="js/indicators.js"></script>114 <script src="js/renderers.js"></script>115 <script src="js/engine.js"></script>116 <script src="js/data.js"></script>117 <script src="js/app.js"></script>118</body>119</html>120