@quantlife/qlchart 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (321) hide show
  1. package/.idea/QLChart.iml +12 -0
  2. package/.idea/modules.xml +8 -0
  3. package/.idea/vcs.xml +6 -0
  4. package/README.md +75 -0
  5. package/demo/App.css +213 -0
  6. package/demo/App.tsx +46 -0
  7. package/demo/components/ControlPanel.tsx +13 -0
  8. package/demo/components/DemoNav.tsx +27 -0
  9. package/demo/index.html +16 -0
  10. package/demo/main.tsx +10 -0
  11. package/demo/pages/BasicChartDemo.tsx +61 -0
  12. package/demo/pages/DrawingDemo.tsx +22 -0
  13. package/demo/pages/IndicatorDemo.tsx +22 -0
  14. package/demo/pages/LayoutDemo.tsx +35 -0
  15. package/demo/pages/MultiPeriodDemo.tsx +31 -0
  16. package/demo/pages/ReplayDemo.tsx +195 -0
  17. package/demo/pages/SaveDemo.tsx +27 -0
  18. package/demo/pages/ThemeDemo.tsx +29 -0
  19. package/demo/standalone-demo.html +597 -0
  20. package/demo/vite.config.demo.ts +17 -0
  21. package/dist/index.d.ts +1973 -0
  22. package/dist/qlchart.js +23169 -0
  23. package/dist/style.css +1 -0
  24. package/doc/api/indicator-data-processor.md +35 -0
  25. package/doc/api-reference/.nojekyll +1 -0
  26. package/doc/api-reference/assets/hierarchy.js +1 -0
  27. package/doc/api-reference/assets/highlight.css +43 -0
  28. package/doc/api-reference/assets/icons.js +18 -0
  29. package/doc/api-reference/assets/icons.svg +1 -0
  30. package/doc/api-reference/assets/main.js +60 -0
  31. package/doc/api-reference/assets/navigation.js +1 -0
  32. package/doc/api-reference/assets/search.js +1 -0
  33. package/doc/api-reference/assets/style.css +1611 -0
  34. package/doc/api-reference/classes/ChartManager.html +16 -0
  35. package/doc/api-reference/classes/DataManager.html +13 -0
  36. package/doc/api-reference/classes/DrawingAdapter.html +64 -0
  37. package/doc/api-reference/classes/DrawingPersistence.html +21 -0
  38. package/doc/api-reference/classes/EventManager.html +12 -0
  39. package/doc/api-reference/classes/HollowCandlestickSeries.html +22 -0
  40. package/doc/api-reference/classes/IndicatorRenderer.html +20 -0
  41. package/doc/api-reference/classes/KlineReplay.html +31 -0
  42. package/doc/api-reference/classes/MockDataService.html +13 -0
  43. package/doc/api-reference/classes/MockIndicatorService.html +4 -0
  44. package/doc/api-reference/classes/OverlayIndicator.html +11 -0
  45. package/doc/api-reference/classes/PaneIndicator.html +16 -0
  46. package/doc/api-reference/classes/PaneManager.html +24 -0
  47. package/doc/api-reference/classes/RealtimeDataFeed.html +22 -0
  48. package/doc/api-reference/classes/RenkoSeries.html +22 -0
  49. package/doc/api-reference/classes/ScreenshotUtil.html +10 -0
  50. package/doc/api-reference/classes/SeriesManager.html +30 -0
  51. package/doc/api-reference/classes/ThemeManager.html +18 -0
  52. package/doc/api-reference/enums/ChartEvent.html +12 -0
  53. package/doc/api-reference/enums/IndicatorType.html +4 -0
  54. package/doc/api-reference/enums/SeriesType.html +13 -0
  55. package/doc/api-reference/functions/ChartFunctionMenu.html +1 -0
  56. package/doc/api-reference/functions/DrawingModule.html +8 -0
  57. package/doc/api-reference/functions/IndicatorPanel.html +2 -0
  58. package/doc/api-reference/functions/IndicatorTag.html +2 -0
  59. package/doc/api-reference/functions/KlineTypeSelector.html +1 -0
  60. package/doc/api-reference/functions/LayoutSwitcher.html +1 -0
  61. package/doc/api-reference/functions/PeriodSelector.html +1 -0
  62. package/doc/api-reference/functions/QLChartLayout.html +1 -0
  63. package/doc/api-reference/functions/QLChartPanel.html +10 -0
  64. package/doc/api-reference/functions/QLChartProvider.html +2 -0
  65. package/doc/api-reference/functions/QLToolbar.html +1 -0
  66. package/doc/api-reference/functions/ReplayController.html +1 -0
  67. package/doc/api-reference/functions/TimeBarModule.html +4 -0
  68. package/doc/api-reference/functions/TimeRangeSelector.html +1 -0
  69. package/doc/api-reference/functions/createIndicatorConfig.html +2 -0
  70. package/doc/api-reference/functions/getToolConfig.html +2 -0
  71. package/doc/api-reference/functions/getToolsByCategory.html +2 -0
  72. package/doc/api-reference/functions/getToolsByPriority.html +2 -0
  73. package/doc/api-reference/functions/mapLibTypeToOurs.html +2 -0
  74. package/doc/api-reference/functions/mapToolTypeToLib.html +3 -0
  75. package/doc/api-reference/functions/transformCandlestickData.html +3 -0
  76. package/doc/api-reference/functions/transformIndicatorData.html +2 -0
  77. package/doc/api-reference/functions/transformVolumeData.html +3 -0
  78. package/doc/api-reference/functions/useChart.html +4 -0
  79. package/doc/api-reference/functions/useChartStore.html +8 -0
  80. package/doc/api-reference/functions/useCrosshairSync.html +8 -0
  81. package/doc/api-reference/functions/useDrawingModule.html +1 -0
  82. package/doc/api-reference/functions/useDrawingStore.html +8 -0
  83. package/doc/api-reference/functions/useIndicatorStore.html +8 -0
  84. package/doc/api-reference/functions/useQLChartConfig.html +2 -0
  85. package/doc/api-reference/functions/useReplayStore.html +8 -0
  86. package/doc/api-reference/functions/useTheme.html +2 -0
  87. package/doc/api-reference/functions/useTimeBarStore.html +8 -0
  88. package/doc/api-reference/index.html +1 -0
  89. package/doc/api-reference/interfaces/CandlestickData.html +7 -0
  90. package/doc/api-reference/interfaces/CandlestickRawData.html +8 -0
  91. package/doc/api-reference/interfaces/ChartFunctionMenuProps.html +2 -0
  92. package/doc/api-reference/interfaces/ChartManagerCreateOptions.html +4 -0
  93. package/doc/api-reference/interfaces/ChartOptions.html +8 -0
  94. package/doc/api-reference/interfaces/ChartRequestParams.html +8 -0
  95. package/doc/api-reference/interfaces/ChartResponse.html +5 -0
  96. package/doc/api-reference/interfaces/ChartState.html +24 -0
  97. package/doc/api-reference/interfaces/ChartThemeOptions.html +5 -0
  98. package/doc/api-reference/interfaces/CrosshairData.html +5 -0
  99. package/doc/api-reference/interfaces/DrawingModuleProps.html +5 -0
  100. package/doc/api-reference/interfaces/DrawingState.html +48 -0
  101. package/doc/api-reference/interfaces/HistogramData.html +5 -0
  102. package/doc/api-reference/interfaces/HollowCandlestickData.html +14 -0
  103. package/doc/api-reference/interfaces/IndicatorConfig.html +11 -0
  104. package/doc/api-reference/interfaces/IndicatorDataPoint.html +4 -0
  105. package/doc/api-reference/interfaces/IndicatorDataResponse.html +5 -0
  106. package/doc/api-reference/interfaces/IndicatorDefinition.html +9 -0
  107. package/doc/api-reference/interfaces/IndicatorPanelProps.html +3 -0
  108. package/doc/api-reference/interfaces/IndicatorParamDef.html +8 -0
  109. package/doc/api-reference/interfaces/IndicatorRawData.html +4 -0
  110. package/doc/api-reference/interfaces/IndicatorState.html +19 -0
  111. package/doc/api-reference/interfaces/IndicatorTagProps.html +2 -0
  112. package/doc/api-reference/interfaces/KlineReplayOptions.html +4 -0
  113. package/doc/api-reference/interfaces/LayoutSwitcherProps.html +3 -0
  114. package/doc/api-reference/interfaces/LineData.html +4 -0
  115. package/doc/api-reference/interfaces/MockDataConfig.html +8 -0
  116. package/doc/api-reference/interfaces/MockIndicatorConfig.html +5 -0
  117. package/doc/api-reference/interfaces/PairInfo.html +6 -0
  118. package/doc/api-reference/interfaces/PaneInfo.html +6 -0
  119. package/doc/api-reference/interfaces/PanelConfig.html +9 -0
  120. package/doc/api-reference/interfaces/PersistenceConfig.html +12 -0
  121. package/doc/api-reference/interfaces/QLChartConfig.html +18 -0
  122. package/doc/api-reference/interfaces/QLChartLayoutProps.html +9 -0
  123. package/doc/api-reference/interfaces/QLChartPanelProps.html +13 -0
  124. package/doc/api-reference/interfaces/QLChartPanelRef.html +14 -0
  125. package/doc/api-reference/interfaces/QLToolbarProps.html +7 -0
  126. package/doc/api-reference/interfaces/RealtimeCandle.html +9 -0
  127. package/doc/api-reference/interfaces/RealtimeSubscribeFn.html +2 -0
  128. package/doc/api-reference/interfaces/RenkoData.html +16 -0
  129. package/doc/api-reference/interfaces/ReplayControllerProps.html +2 -0
  130. package/doc/api-reference/interfaces/ReplayState.html +19 -0
  131. package/doc/api-reference/interfaces/ThemeConfig.html +14 -0
  132. package/doc/api-reference/interfaces/TimeBarModuleProps.html +5 -0
  133. package/doc/api-reference/interfaces/TimeBarState.html +13 -0
  134. package/doc/api-reference/interfaces/UseChartReturn.html +4 -0
  135. package/doc/api-reference/interfaces/UseDrawingModuleOptions.html +11 -0
  136. package/doc/api-reference/interfaces/UseDrawingModuleReturn.html +6 -0
  137. package/doc/api-reference/interfaces/UseThemeReturn.html +5 -0
  138. package/doc/api-reference/types/EventHandler.html +2 -0
  139. package/doc/api-reference/types/FetchFn.html +2 -0
  140. package/doc/api-reference/types/LayoutMode.html +2 -0
  141. package/doc/api-reference/types/MarketTrend.html +2 -0
  142. package/doc/api-reference/types/ThemePreset.html +2 -0
  143. package/doc/api-reference/variables/BUILTIN_INDICATORS.html +2 -0
  144. package/doc/api-reference/variables/CATEGORY_LABELS.html +2 -0
  145. package/doc/api-reference/variables/DRAWING_TOOLS.html +3 -0
  146. package/doc/api-reference/variables/MARKET_PRESETS.html +1 -0
  147. package/doc/api-reference/variables/PAIR_PRESETS.html +1 -0
  148. package/doc/api-reference/variables/darkPreset.html +1 -0
  149. package/doc/api-reference/variables/lightPreset.html +1 -0
  150. package/doc/components/drawing-module.md +24 -0
  151. package/doc/components/indicator-list-panel.md +24 -0
  152. package/doc/components/indicator-panel.md +17 -0
  153. package/doc/components/pane-divider.md +25 -0
  154. package/doc/components/qlchart-layout.md +30 -0
  155. package/doc/components/qlchart-panel.md +93 -0
  156. package/doc/components/qlchart-provider.md +73 -0
  157. package/doc/components/qltoolbar.md +17 -0
  158. package/doc/components/replay-controller.md +23 -0
  159. package/doc/components/timebar-module.md +13 -0
  160. package/doc/core/chart-manager.md +14 -0
  161. package/doc/core/data-manager.md +33 -0
  162. package/doc/core/event-manager.md +26 -0
  163. package/doc/core/pane-manager.md +13 -0
  164. package/doc/core/series-manager.md +19 -0
  165. package/doc/core/theme-manager.md +21 -0
  166. package/doc/examples/basic-chart.md +24 -0
  167. package/doc/examples/data-format-guide.md +119 -0
  168. package/doc/examples/drawing-tools.md +30 -0
  169. package/doc/examples/indicator-properties.md +34 -0
  170. package/doc/examples/multi-pane.md +24 -0
  171. package/doc/examples/multi-panel.md +23 -0
  172. package/doc/examples/realtime-data.md +147 -0
  173. package/doc/examples/standalone-js.md +333 -0
  174. package/doc/guide/architecture.md +87 -0
  175. package/doc/guide/data-flow.md +310 -0
  176. package/doc/guide/deployment.md +59 -0
  177. package/doc/guide/drawing-properties.md +40 -0
  178. package/doc/guide/getting-started.md +94 -0
  179. package/doc/guide/pane-system.md +47 -0
  180. package/doc/guide/theme-switching.md +58 -0
  181. package/doc/hooks/use-chart.md +20 -0
  182. package/doc/hooks/use-crosshair-sync.md +14 -0
  183. package/doc/hooks/use-drawing-module.md +43 -0
  184. package/doc/hooks/use-theme.md +15 -0
  185. package/doc/index.md +33 -0
  186. package/doc/plugins/drawing/overview.md +36 -0
  187. package/doc/plugins/drawing/persistence.md +42 -0
  188. package/doc/plugins/drawing/tool-registry.md +29 -0
  189. package/doc/plugins/hollow-candlestick.md +18 -0
  190. package/doc/plugins/indicators.md +28 -0
  191. package/doc/plugins/renko.md +17 -0
  192. package/doc/plugins/replay.md +21 -0
  193. package/doc/plugins/screenshot.md +20 -0
  194. package/docs/api.md +94 -0
  195. package/package.json +54 -0
  196. package/python/qlchart/__init__.py +9 -0
  197. package/python/qlchart/__pycache__/__init__.cpython-311.pyc +0 -0
  198. package/python/qlchart/__pycache__/chart.cpython-311.pyc +0 -0
  199. package/python/qlchart/chart.py +333 -0
  200. package/python/qlchart/templates/chart_template.html +304 -0
  201. package/python/requirements.txt +1 -0
  202. package/python/setup.py +18 -0
  203. package/python/tests/__init__.py +1 -0
  204. package/python/tests/__pycache__/__init__.cpython-311.pyc +0 -0
  205. package/python/tests/__pycache__/test_chart.cpython-311-pytest-8.3.3.pyc +0 -0
  206. package/python/tests/test_chart.py +114 -0
  207. package/quantlife-qlchart-0.0.1.tgz +0 -0
  208. package/src/api/chartApi.ts +30 -0
  209. package/src/api/indicatorApi.ts +27 -0
  210. package/src/components/ChartFunctionMenu.tsx +64 -0
  211. package/src/components/PaneChartPanel.tsx +116 -0
  212. package/src/components/PaneDivider.tsx +66 -0
  213. package/src/components/QLChartLayout.tsx +151 -0
  214. package/src/components/QLChartPanel.tsx +560 -0
  215. package/src/components/QLChartProvider.tsx +90 -0
  216. package/src/components/context-menu/ChartContextMenu.tsx +139 -0
  217. package/src/components/context-menu/index.ts +2 -0
  218. package/src/components/drawing/DrawingModule.tsx +36 -0
  219. package/src/components/drawing/DrawingPropertyPanel.tsx +347 -0
  220. package/src/components/drawing/DrawingToolbar.tsx +305 -0
  221. package/src/components/drawing/index.ts +5 -0
  222. package/src/components/index.ts +43 -0
  223. package/src/components/indicator/IndicatorListPanel.tsx +94 -0
  224. package/src/components/indicator/IndicatorModal.tsx +171 -0
  225. package/src/components/indicator/IndicatorPanel.tsx +9 -0
  226. package/src/components/indicator/IndicatorPropertyPanel.tsx +130 -0
  227. package/src/components/indicator/IndicatorTag.tsx +173 -0
  228. package/src/components/indicator/index.ts +4 -0
  229. package/src/components/replay/ReplayController.css +97 -0
  230. package/src/components/replay/ReplayController.tsx +138 -0
  231. package/src/components/timebar/TimeBarModule.tsx +30 -0
  232. package/src/components/timebar/TimeRangeSelector.tsx +96 -0
  233. package/src/components/timebar/index.ts +3 -0
  234. package/src/components/toolbar/GlobalToolbar.tsx +58 -0
  235. package/src/components/toolbar/KlineTypeSelector.tsx +123 -0
  236. package/src/components/toolbar/LayoutSwitcher.tsx +45 -0
  237. package/src/components/toolbar/PeriodSelector.tsx +35 -0
  238. package/src/components/toolbar/QLToolbar.tsx +71 -0
  239. package/src/components/toolbar/TimeRangeSelector.tsx +89 -0
  240. package/src/components/ui/Modal.tsx +67 -0
  241. package/src/core/ChartManager.ts +95 -0
  242. package/src/core/DataManager.ts +427 -0
  243. package/src/core/EventManager.ts +63 -0
  244. package/src/core/IndicatorDataProcessor.ts +104 -0
  245. package/src/core/PaneManager.ts +121 -0
  246. package/src/core/RealtimeDataFeed.ts +110 -0
  247. package/src/core/SeriesManager.ts +210 -0
  248. package/src/core/ThemeManager.ts +59 -0
  249. package/src/core/index.ts +10 -0
  250. package/src/css.d.ts +4 -0
  251. package/src/hooks/useChart.ts +62 -0
  252. package/src/hooks/useCrosshairSync.ts +109 -0
  253. package/src/hooks/useDrawingModule.ts +475 -0
  254. package/src/hooks/useTheme.ts +31 -0
  255. package/src/index.ts +170 -0
  256. package/src/mock/MockDataService.ts +102 -0
  257. package/src/mock/MockIndicatorService.ts +40 -0
  258. package/src/mock/index.ts +5 -0
  259. package/src/mock/presets.ts +16 -0
  260. package/src/plugins/drawing/DrawingAdapter.ts +1762 -0
  261. package/src/plugins/drawing/DrawingPersistence.ts +273 -0
  262. package/src/plugins/drawing/DrawingPropertyTemplates.ts +327 -0
  263. package/src/plugins/drawing/DrawingSharedService.ts +125 -0
  264. package/src/plugins/drawing/DrawingToolRegistry.ts +684 -0
  265. package/src/plugins/drawing/TextLabelOverlay.ts +101 -0
  266. package/src/plugins/drawing/colorUtils.ts +53 -0
  267. package/src/plugins/drawing/index.ts +10 -0
  268. package/src/plugins/drawing/lineStyleMap.ts +46 -0
  269. package/src/plugins/drawing/migration.ts +105 -0
  270. package/src/plugins/drawing/patterns/PatternDefinitions.ts +57 -0
  271. package/src/plugins/drawing/patterns/index.ts +2 -0
  272. package/src/plugins/drawing/periodUtils.ts +51 -0
  273. package/src/plugins/indicators/AutoIndicatorRenderer.ts +204 -0
  274. package/src/plugins/indicators/IndicatorRenderer.ts +350 -0
  275. package/src/plugins/indicators/OverlayIndicator.ts +114 -0
  276. package/src/plugins/indicators/PaneIndicator.ts +137 -0
  277. package/src/plugins/indicators/index.ts +4 -0
  278. package/src/plugins/replay/KlineReplay.ts +163 -0
  279. package/src/plugins/replay/index.ts +2 -0
  280. package/src/plugins/screenshot/ScreenshotUtil.ts +123 -0
  281. package/src/plugins/screenshot/index.ts +1 -0
  282. package/src/plugins/series/HollowCandlestickSeries.ts +111 -0
  283. package/src/plugins/series/RenkoSeries.ts +104 -0
  284. package/src/plugins/series/VolumeCandlestickSeries.ts +127 -0
  285. package/src/plugins/series/index.ts +6 -0
  286. package/src/standalone.ts +386 -0
  287. package/src/store/useChartStore.ts +101 -0
  288. package/src/store/useDrawingStore.ts +135 -0
  289. package/src/store/useIndicatorStore.ts +100 -0
  290. package/src/store/usePanelRegistry.ts +50 -0
  291. package/src/store/useReplayStore.ts +42 -0
  292. package/src/store/useTimeBarStore.ts +34 -0
  293. package/src/styles/chart.css +312 -0
  294. package/src/styles/components.css +184 -0
  295. package/src/styles/context-menu.css +60 -0
  296. package/src/styles/drawing.css +524 -0
  297. package/src/styles/indicator-modal.css +216 -0
  298. package/src/styles/indicator-tag.css +210 -0
  299. package/src/styles/pane-chart.css +9 -0
  300. package/src/styles/responsive.css +71 -0
  301. package/src/styles/themes/dark.css +63 -0
  302. package/src/styles/themes/light.css +61 -0
  303. package/src/styles/toolbar.css +129 -0
  304. package/src/types/api.ts +36 -0
  305. package/src/types/chart.ts +44 -0
  306. package/src/types/drawing.ts +265 -0
  307. package/src/types/index.ts +40 -0
  308. package/src/types/indicator.ts +344 -0
  309. package/src/types/series.ts +53 -0
  310. package/src/types/theme.ts +48 -0
  311. package/src/utils/dataTransformer.ts +63 -0
  312. package/src/utils/heikinAshi.ts +41 -0
  313. package/src/utils/index.ts +3 -0
  314. package/src/utils/lineBreak.ts +88 -0
  315. package/src/utils/themePresets.ts +69 -0
  316. package/src/utils/timeFormatter.ts +29 -0
  317. package/src/utils/timeScaleUtils.ts +68 -0
  318. package/tsconfig.json +21 -0
  319. package/typedoc.json +10 -0
  320. package/vite.config.standalone.ts +31 -0
  321. package/vite.config.ts +24 -0
package/demo/standalone-demo.html ADDED
@@ -0,0 +1,597 @@
1
+ <!DOCTYPE html>
2
+ <html lang="zh-CN" data-theme="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>QLChart Standalone Demo</title>
7
+ <style>
8
+ * { margin: 0; padding: 0; box-sizing: border-box; }
9
+ body {
10
+ background: var(--qlchart-bg, #131722);
11
+ color: var(--qlchart-text, #d1d4dc);
12
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
13
+ overflow-y: auto;
14
+ }
15
+
16
+ /* ═══ 顶部工具栏 ═══ */
17
+ .ql-toolbar {
18
+ display: flex;
19
+ align-items: center;
20
+ gap: 4px;
21
+ padding: 6px 12px;
22
+ background: var(--qlchart-toolbar-bg, #1e222d);
23
+ border-bottom: 1px solid var(--qlchart-border, #2a2e39);
24
+ flex-wrap: wrap;
25
+ }
26
+ .ql-toolbar-group {
27
+ display: flex;
28
+ align-items: center;
29
+ gap: 2px;
30
+ }
31
+ .ql-period-btn {
32
+ padding: 4px 10px;
33
+ border: none;
34
+ border-radius: 4px;
35
+ background: transparent;
36
+ color: var(--qlchart-text, #d1d4dc);
37
+ font-size: 12px;
38
+ cursor: pointer;
39
+ transition: all 0.15s;
40
+ }
41
+ .ql-period-btn:hover {
42
+ background: var(--qlchart-border, #2a2e39);
43
+ }
44
+ .ql-period-btn.active {
45
+ background: var(--qlchart-accent, #2962ff);
46
+ color: #ffffff;
47
+ }
48
+ .ql-toolbar-separator {
49
+ width: 1px;
50
+ height: 20px;
51
+ background: var(--qlchart-border, #2a2e39);
52
+ margin: 0 4px;
53
+ }
54
+ .ql-kline-selector {
55
+ background: var(--qlchart-bg, #131722);
56
+ border: 1px solid var(--qlchart-border, #2a2e39);
57
+ color: var(--qlchart-text, #d1d4dc);
58
+ padding: 4px 8px;
59
+ border-radius: 4px;
60
+ font-size: 12px;
61
+ cursor: pointer;
62
+ }
63
+ .ql-toolbar-btn {
64
+ padding: 4px 10px;
65
+ border: none;
66
+ border-radius: 4px;
67
+ background: transparent;
68
+ color: var(--qlchart-text, #d1d4dc);
69
+ font-size: 12px;
70
+ cursor: pointer;
71
+ transition: all 0.15s;
72
+ }
73
+ .ql-toolbar-btn:hover {
74
+ background: var(--qlchart-border, #2a2e39);
75
+ }
76
+ .ql-toolbar-btn.active {
77
+ background: rgba(41, 98, 255, 0.25);
78
+ color: #5b8def;
79
+ }
80
+
81
+ /* ═══ 图表区域 ═══ */
82
+ .chart-wrapper {
83
+ position: relative;
84
+ width: 100%;
85
+ height: 500px;
86
+ }
87
+ #chart-container {
88
+ width: 100%;
89
+ height: 100%;
90
+ position: relative;
91
+ }
92
+ .info {
93
+ position: absolute;
94
+ bottom: 10px;
95
+ right: 10px;
96
+ font-size: 11px;
97
+ color: var(--qlchart-text-secondary, #787b86);
98
+ z-index: 10;
99
+ background: rgba(19, 23, 34, 0.7);
100
+ padding: 2px 8px;
101
+ border-radius: 4px;
102
+ }
103
+
104
+ /* ═══ 竖排绘图工具栏 ═══ */
105
+ .drawing-sidebar {
106
+ position: absolute;
107
+ left: 8px;
108
+ top: 8px;
109
+ bottom: 8px;
110
+ z-index: 100;
111
+ display: none;
112
+ flex-direction: column;
113
+ gap: 2px;
114
+ padding: 4px;
115
+ background: var(--qlchart-toolbar-bg, #1e222d);
116
+ border: 1px solid var(--qlchart-border, #2a2e39);
117
+ border-radius: 6px;
118
+ }
119
+ .drawing-sidebar.visible {
120
+ display: flex;
121
+ }
122
+ .drawing-cat-btn {
123
+ position: relative;
124
+ width: 32px;
125
+ height: 32px;
126
+ display: flex;
127
+ align-items: center;
128
+ justify-content: center;
129
+ font-size: 16px;
130
+ cursor: pointer;
131
+ border-radius: 4px;
132
+ transition: background 0.15s;
133
+ }
134
+ .drawing-cat-btn:hover {
135
+ background: var(--qlchart-border, #2a2e39);
136
+ }
137
+ .drawing-sub-panel {
138
+ display: none;
139
+ position: absolute;
140
+ left: 100%;
141
+ top: 0;
142
+ margin-left: 4px;
143
+ padding: 4px;
144
+ background: var(--qlchart-toolbar-bg, #1e222d);
145
+ border: 1px solid var(--qlchart-border, #2a2e39);
146
+ border-radius: 6px;
147
+ flex-direction: column;
148
+ gap: 2px;
149
+ box-shadow: 0 4px 12px rgba(0,0,0,0.4);
150
+ }
151
+ .drawing-cat-btn:hover .drawing-sub-panel {
152
+ display: flex;
153
+ }
154
+ .drawing-tool-btn {
155
+ width: 36px;
156
+ height: 32px;
157
+ border: none;
158
+ border-radius: 4px;
159
+ background: transparent;
160
+ color: var(--qlchart-text, #d1d4dc);
161
+ font-size: 14px;
162
+ cursor: pointer;
163
+ white-space: nowrap;
164
+ transition: all 0.15s;
165
+ text-align: left;
166
+ padding: 0 8px;
167
+ min-width: 90px;
168
+ }
169
+ .drawing-tool-btn:hover {
170
+ background: var(--qlchart-border, #2a2e39);
171
+ }
172
+ .drawing-tool-btn.active {
173
+ background: rgba(41, 98, 255, 0.25);
174
+ color: #5b8def;
175
+ }
176
+ .drawing-cat-label {
177
+ font-size: 9px;
178
+ color: var(--qlchart-text-secondary, #787b86);
179
+ text-align: center;
180
+ padding: 2px 0;
181
+ user-select: none;
182
+ }
183
+ .drawing-clear-btn {
184
+ color: #ef5350;
185
+ }
186
+
187
+ /* ═══ 多Panel示例区 ═══ */
188
+ .demo-section {
189
+ padding: 16px 12px;
190
+ border-top: 1px solid var(--qlchart-border, #2a2e39);
191
+ }
192
+ .demo-section h3 {
193
+ font-size: 14px;
194
+ color: var(--qlchart-text, #d1d4dc);
195
+ margin-bottom: 8px;
196
+ }
197
+ .multi-panel-container {
198
+ display: flex;
199
+ gap: 12px;
200
+ flex-wrap: wrap;
201
+ }
202
+ .panel-item {
203
+ flex: 1;
204
+ min-width: 300px;
205
+ }
206
+ .panel-title {
207
+ font-size: 12px;
208
+ color: var(--qlchart-text-secondary, #787b86);
209
+ margin-bottom: 4px;
210
+ }
211
+ .panel-chart {
212
+ width: 100%;
213
+ height: 300px;
214
+ border: 1px solid var(--qlchart-border, #2a2e39);
215
+ border-radius: 6px;
216
+ overflow: hidden;
217
+ }
218
+
219
+ .panel-tool-btn {
220
+ font-size: 14px !important;
221
+ padding: 2px 6px !important;
222
+ min-width: auto !important;
223
+ }
224
+ .panel-tool-btn.active {
225
+ background: rgba(41, 98, 255, 0.25);
226
+ }
227
+
228
+ /* ═══ 响应式 ═══ */
229
+ @media (max-width: 768px) {
230
+ .ql-toolbar { font-size: 11px; }
231
+ .ql-period-btn { padding: 3px 6px; font-size: 11px; }
232
+ .chart-wrapper { height: 400px; }
233
+ .drawing-sidebar { left: 4px; top: 4px; }
234
+ .drawing-tool-btn { min-width: 70px; font-size: 12px; }
235
+ }
236
+ </style>
237
+ </head>
238
+ <body>
239
+ <!-- 顶部工具栏 -->
240
+ <div class="ql-toolbar">
241
+ <!-- 周期按钮组 -->
242
+ <div class="ql-toolbar-group">
243
+ <button class="ql-period-btn" data-period="1m">1m</button>
244
+ <button class="ql-period-btn" data-period="5m">5m</button>
245
+ <button class="ql-period-btn" data-period="15m">15m</button>
246
+ <button class="ql-period-btn" data-period="30m">30m</button>
247
+ <button class="ql-period-btn active" data-period="1h">1h</button>
248
+ <button class="ql-period-btn" data-period="4h">4h</button>
249
+ <button class="ql-period-btn" data-period="1d">1d</button>
250
+ <button class="ql-period-btn" data-period="1w">1w</button>
251
+ <button class="ql-period-btn" data-period="1M">1M</button>
252
+ </div>
253
+ <span class="ql-toolbar-separator"></span>
254
+ <!-- K线类型 -->
255
+ <select id="kline-type" class="ql-kline-selector">
256
+ <option value="candlestick">标准K线</option>
257
+ <option value="line">线性图</option>
258
+ <option value="area">面积图</option>
259
+ <option value="bar">柱状图</option>
260
+ </select>
261
+ <span class="ql-toolbar-separator"></span>
262
+ <!-- 功能按钮 -->
263
+ <button id="btn-drawing" class="ql-toolbar-btn">📈 绘图</button>
264
+ <button id="btn-screenshot" class="ql-toolbar-btn">📸 截图</button>
265
+ <button id="btn-theme" class="ql-toolbar-btn">🎨 主题</button>
266
+ <button id="btn-reload" class="ql-toolbar-btn">🔄 重载</button>
267
+ <button id="btn-realtime" class="ql-toolbar-btn">⚡ 实时</button>
268
+ </div>
269
+
270
+ <!-- 主图表 -->
271
+ <div class="chart-wrapper">
272
+ <!-- 竖排绘图工具栏 -->
273
+ <div id="drawing-sidebar" class="drawing-sidebar"></div>
274
+ <!-- 图表容器 -->
275
+ <div id="chart-container"></div>
276
+ <div class="info" id="info">就绪</div>
277
+ </div>
278
+
279
+ <!-- 多Panel示例 — 跨周期共享绘图 -->
280
+ <div class="demo-section">
281
+ <h3>📊 多周期共享绘图 — 1h ↔ 4h（自动同步）</h3>
282
+ <div style="font-size:12px;color:var(--qlchart-text-secondary,#787b86);margin-bottom:8px;">
283
+ 在任意面板绘图，另一面板自动同步（时间戳自动对齐到目标周期）
284
+ </div>
285
+ <div class="multi-panel-container">
286
+ <div class="panel-item">
287
+ <div class="panel-title">Chart A — 1h
288
+ <button class="ql-toolbar-btn panel-tool-btn" data-tool="trend-line">📈</button>
289
+ <button class="ql-toolbar-btn panel-tool-btn" data-tool="rectangle">⬜</button>
290
+ <button class="ql-toolbar-btn panel-tool-btn" data-tool="horizontal-line">➖</button>
291
+ <button class="ql-toolbar-btn panel-tool-btn" data-tool="cursor">✚</button>
292
+ </div>
293
+ <div id="chart-a" class="panel-chart"></div>
294
+ </div>
295
+ <div class="panel-item">
296
+ <div class="panel-title">Chart B — 4h</div>
297
+ <div id="chart-b" class="panel-chart"></div>
298
+ </div>
299
+ </div>
300
+ </div>
301
+
302
+ <script src="../dist/qlchart.standalone.js"></script>
303
+ <script>
304
+ // ═══ 全局状态 ═══
305
+ var isDark = true;
306
+ var currentSeriesType = 'candlestick';
307
+ var realtimeTimer = null;
308
+ var activeToolBtn = null;
309
+ var drawingSidebarVisible = false;
310
+
311
+ // ═══ 创建主图表 ═══
312
+ var chart = QLChart.create('chart-container', {
313
+ theme: 'dark',
314
+ seriesType: 'candlestick',
315
+ showVolume: true,
316
+ enableDrawing: true,
317
+ period: '1h',
318
+ onDataReload: function(period) {
319
+ var data = QLChart.generateMockData(500, 42000, period);
320
+ chart.setData(data);
321
+ document.getElementById('info').textContent = '周期: ' + period + ' | ' + data.length + ' 根K线';
322
+ },
323
+ });
324
+
325
+ var initialData = QLChart.generateMockData(500, 42000, '1h');
326
+ chart.setData(initialData);
327
+ document.getElementById('info').textContent = '已加载 ' + initialData.length + ' 根K线';
328
+
329
+ // ═══ 周期切换 ═══
330
+ document.querySelectorAll('.ql-period-btn').forEach(function(btn) {
331
+ btn.addEventListener('click', function() {
332
+ document.querySelectorAll('.ql-period-btn').forEach(function(b) {
333
+ b.classList.remove('active');
334
+ });
335
+ btn.classList.add('active');
336
+ var period = btn.dataset.period;
337
+ chart.setPeriod(period);
338
+ });
339
+ });
340
+
341
+ // ═══ K线类型切换 ═══
342
+ document.getElementById('kline-type').addEventListener('change', function(e) {
343
+ currentSeriesType = e.target.value;
344
+ rebuildChart();
345
+ });
346
+
347
+ function rebuildChart() {
348
+ // 保存状态
349
+ var savedDrawings = chart.drawing ? chart.drawing.exportDrawings() : [];
350
+ var currentPeriod = chart.getPeriod();
351
+
352
+ // 销毁重建
353
+ chart.destroy();
354
+ chart = QLChart.create('chart-container', {
355
+ theme: isDark ? 'dark' : 'light',
356
+ seriesType: currentSeriesType,
357
+ showVolume: true,
358
+ enableDrawing: true,
359
+ period: currentPeriod,
360
+ onDataReload: function(period) {
361
+ var data = QLChart.generateMockData(500, 42000, period);
362
+ chart.setData(data);
363
+ document.getElementById('info').textContent = '周期: ' + period + ' | ' + data.length + ' 根K线';
364
+ },
365
+ });
366
+
367
+ // 恢复数据
368
+ chart.setData(QLChart.generateMockData(500, 42000, currentPeriod));
369
+
370
+ // 恢复绘图
371
+ if (savedDrawings.length > 0 && chart.drawing) {
372
+ chart.drawing.importDrawings(savedDrawings);
373
+ }
374
+
375
+ // 恢复绘图工具栏
376
+ if (drawingSidebarVisible) {
377
+ document.getElementById('drawing-sidebar').classList.add('visible');
378
+ }
379
+ }
380
+
381
+ // ═══ 绘图工具栏（竖排分类） ═══
382
+ function buildDrawingSidebar() {
383
+ var sidebar = document.getElementById('drawing-sidebar');
384
+ var categories = QLChart.getDrawingToolsByCategory();
385
+ var categoryLabels = QLChart.drawingCategories;
386
+
387
+ sidebar.innerHTML = '';
388
+
389
+ // 光标按钮（顶部）
390
+ var cursorWrapper = document.createElement('div');
391
+ cursorWrapper.className = 'drawing-cat-btn';
392
+ cursorWrapper.title = '光标（取消绘图）';
393
+ cursorWrapper.innerHTML = '✚';
394
+ cursorWrapper.style.fontSize = '18px';
395
+ cursorWrapper.addEventListener('click', function() {
396
+ if (chart.drawing) chart.drawing.setDrawingTool('cursor');
397
+ if (activeToolBtn) activeToolBtn.classList.remove('active');
398
+ activeToolBtn = null;
399
+ });
400
+ sidebar.appendChild(cursorWrapper);
401
+
402
+ // 分类工具
403
+ categories.forEach(function(tools, category) {
404
+ if (!tools || tools.length === 0) return;
405
+
406
+ var catBtn = document.createElement('div');
407
+ catBtn.className = 'drawing-cat-btn';
408
+ catBtn.innerHTML = getCategoryIcon(category) +
409
+ '<div class="drawing-sub-panel"></div>';
410
+
411
+ var subPanel = catBtn.querySelector('.drawing-sub-panel');
412
+
413
+ // 分类标签
414
+ var label = document.createElement('div');
415
+ label.className = 'drawing-cat-label';
416
+ label.textContent = categoryLabels[category] || category;
417
+ subPanel.appendChild(label);
418
+
419
+ // 工具按钮
420
+ tools.forEach(function(tool) {
421
+ var btn = document.createElement('button');
422
+ btn.className = 'drawing-tool-btn';
423
+ btn.innerHTML = tool.icon + ' ' + tool.label;
424
+ btn.dataset.tool = tool.type;
425
+ btn.addEventListener('click', function() {
426
+ if (chart.drawing) {
427
+ chart.drawing.setDrawingTool(tool.type);
428
+ }
429
+ if (activeToolBtn) activeToolBtn.classList.remove('active');
430
+ btn.classList.add('active');
431
+ activeToolBtn = btn;
432
+ });
433
+ subPanel.appendChild(btn);
434
+ });
435
+
436
+ sidebar.appendChild(catBtn);
437
+ });
438
+
439
+ // 清空按钮（底部）
440
+ var clearBtn = document.createElement('div');
441
+ clearBtn.className = 'drawing-cat-btn drawing-clear-btn';
442
+ clearBtn.innerHTML = '🗑️';
443
+ clearBtn.title = '清空所有绘图';
444
+ clearBtn.addEventListener('click', function() {
445
+ if (chart.drawing) chart.drawing.clearDrawings();
446
+ if (activeToolBtn) {
447
+ activeToolBtn.classList.remove('active');
448
+ activeToolBtn = null;
449
+ }
450
+ });
451
+ sidebar.appendChild(clearBtn);
452
+ }
453
+
454
+ function getCategoryIcon(category) {
455
+ var icons = {
456
+ 'line': '📏',
457
+ 'channel': '📊',
458
+ 'fibonacci': '📐',
459
+ 'shape': '⬜',
460
+ 'annotation': '✏️',
461
+ 'position': '🎯',
462
+ 'measure': '🔢',
463
+ 'pattern': '🔤',
464
+ };
465
+ return icons[category] || '🔧';
466
+ }
467
+
468
+ buildDrawingSidebar();
469
+
470
+ // ═══ 绘图工具栏显示/隐藏 ═══
471
+ document.getElementById('btn-drawing').addEventListener('click', function() {
472
+ drawingSidebarVisible = !drawingSidebarVisible;
473
+ var sidebar = document.getElementById('drawing-sidebar');
474
+ if (drawingSidebarVisible) {
475
+ sidebar.classList.add('visible');
476
+ this.classList.add('active');
477
+ } else {
478
+ sidebar.classList.remove('visible');
479
+ this.classList.remove('active');
480
+ }
481
+ });
482
+
483
+ // ═══ 截图 ═══
484
+ document.getElementById('btn-screenshot').addEventListener('click', function() {
485
+ var url = chart.screenshot();
486
+ if (url) {
487
+ var link = document.createElement('a');
488
+ link.download = 'qlchart-' + Date.now() + '.png';
489
+ link.href = url;
490
+ link.click();
491
+ }
492
+ });
493
+
494
+ // ═══ 主题切换 ═══
495
+ document.getElementById('btn-theme').addEventListener('click', function() {
496
+ isDark = !isDark;
497
+ chart.setTheme(isDark ? 'dark' : 'light');
498
+ document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
499
+ });
500
+
501
+ // ═══ 重载数据 ═══
502
+ document.getElementById('btn-reload').addEventListener('click', function() {
503
+ var period = chart.getPeriod();
504
+ var data = QLChart.generateMockData(500, 42000, period);
505
+ chart.setData(data);
506
+ document.getElementById('info').textContent = '已重载 ' + data.length + ' 根K线 (周期: ' + period + ')';
507
+ });
508
+
509
+ // ═══ 实时数据 ═══
510
+ document.getElementById('btn-realtime').addEventListener('click', function() {
511
+ if (realtimeTimer) {
512
+ clearInterval(realtimeTimer);
513
+ realtimeTimer = null;
514
+ this.classList.remove('active');
515
+ document.getElementById('info').textContent = '实时更新已停止';
516
+ } else {
517
+ this.classList.add('active');
518
+ var period = chart.getPeriod();
519
+ var interval = getPeriodIntervalMs(period);
520
+ realtimeTimer = setInterval(function() {
521
+ var now = Date.now();
522
+ var candle = {
523
+ time: Math.floor(now / 1000),
524
+ open: 42000 + (Math.random() - 0.5) * 200,
525
+ high: 42500 + Math.random() * 300,
526
+ low: 41800 - Math.random() * 300,
527
+ close: 42200 + (Math.random() - 0.5) * 400,
528
+ volume: Math.floor(500 + Math.random() * 4500),
529
+ };
530
+ chart.update(candle);
531
+ }, 2000);
532
+ document.getElementById('info').textContent = '实时更新中...';
533
+ }
534
+ });
535
+
536
+ function getPeriodIntervalMs(period) {
537
+ var map = { '1m': 60000, '5m': 300000, '15m': 900000, '30m': 1800000,
538
+ '1h': 3600000, '4h': 14400000, '1d': 86400000, '1w': 604800000, '1M': 2592000000 };
539
+ return map[period] || 3600000;
540
+ }
541
+
542
+ // ═══ 多Panel示例 — 跨周期共享绘图（1h ↔ 4h）═══
543
+ var chartA = QLChart.create('chart-a', {
544
+ theme: 'dark',
545
+ seriesType: 'candlestick',
546
+ showVolume: false,
547
+ enableDrawing: true,
548
+ period: '1h',
549
+ });
550
+ chartA.setData(QLChart.generateMockData(500, 42000, '1h'));
551
+
552
+ var chartB = QLChart.create('chart-b', {
553
+ theme: 'dark',
554
+ seriesType: 'candlestick',
555
+ showVolume: false,
556
+ enableDrawing: true,
557
+ period: '4h',
558
+ });
559
+ chartB.setData(QLChart.generateMockData(500, 42000, '4h'));
560
+
561
+ // ═══ 自动双向同步：任一面板绘图变化 → 自动同步到另一面板 ═══
562
+ // 防重入锁：importDrawings会触发onCreated回调，双向绑定后形成无限递归
563
+ var syncing = false;
564
+ function setupAutoSync(source, target) {
565
+ if (!source.drawing || !target.drawing) return;
566
+ var syncFn = function() {
567
+ if (syncing) return; // ★ 防重入：正在同步中时跳过回调
568
+ syncing = true;
569
+ try {
570
+ var exported = source.drawing.exportDrawings();
571
+ target.drawing.clearDrawings();
572
+ target.drawing.importDrawings(exported);
573
+ } finally {
574
+ syncing = false;
575
+ }
576
+ };
577
+ source.drawing.onCreated(syncFn);
578
+ source.drawing.onModified(syncFn);
579
+ source.drawing.onRemoved(syncFn);
580
+ }
581
+ setupAutoSync(chartA, chartB);
582
+ setupAutoSync(chartB, chartA);
583
+
584
+ // 多Panel绘图工具按钮
585
+ var panelActiveBtn = null;
586
+ document.querySelectorAll('.panel-tool-btn').forEach(function(btn) {
587
+ btn.addEventListener('click', function() {
588
+ var tool = btn.dataset.tool;
589
+ if (chartA.drawing) chartA.drawing.setDrawingTool(tool);
590
+ if (panelActiveBtn) panelActiveBtn.classList.remove('active');
591
+ btn.classList.add('active');
592
+ panelActiveBtn = btn;
593
+ });
594
+ });
595
+ </script>
596
+ </body>
597
+ </html>
package/demo/vite.config.demo.ts ADDED
@@ -0,0 +1,17 @@
1
+ import { defineConfig } from 'vite';
2
+ import react from '@vitejs/plugin-react';
3
+ import { resolve } from 'path';
4
+
5
+ export default defineConfig({
6
+ plugins: [react()],
7
+ root: resolve(__dirname),
8
+ server: {
9
+ port: 5180,
10
+ open: true,
11
+ },
12
+ resolve: {
13
+ alias: {
14
+ '@qlchart': resolve(__dirname, '../src/index.ts'),
15
+ },
16
+ },
17
+ });