visualifyjs 2.5.3-2.dev → 3.0.0

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 (252) hide show
  1. package/.claude/mem/TIMELINE.md +36 -0
  2. package/.claude/mem/notes/2026-02-11-3d-visualization-docs-fix-external-script-solution.md +24 -0
  3. package/.claude/mem/notes/2026-02-11-3d-visualization-docs-fix-session-summary.md +43 -0
  4. package/.claude/mem/notes/2026-02-11-cli-fix-editor-command-alias.md +26 -0
  5. package/.claude/mem/notes/2026-02-11-phase-3-developer-experience-completed.md +51 -0
  6. package/.claude/mem/notes/2026-02-11-phase-4-web-workers-implementation-complete.md +59 -0
  7. package/.claude/mem/notes/2026-02-11-visualify-phase-2-3d-visualization-complete.md +50 -0
  8. package/.claude/mem/notes/2026-02-11-visualify-phase-2-committed-ready-for-phase-3.md +33 -0
  9. package/.claude/mem/notes/2026-02-11-visualify-phase-3-complete-developer-experience.md +52 -0
  10. package/.claude/mem/notes/2026-02-11-visualify-repository-cleanup-complete.md +28 -0
  11. package/.claude/mem/notes/2026-02-18-codebase-cleanup-docsify-plugin-documentation.md +37 -0
  12. package/.claude/mem/notes/2026-02-19-css-grid-layout-fix-displaycontents-on-vcontroller.md +18 -0
  13. package/.claude/mem/notes/2026-02-19-docsify-plugin-fixes-latex-and-visualify-code-bloc.md +26 -0
  14. package/.claude/mem/notes/2026-02-19-page-mode-docs-update-decisions.md +23 -0
  15. package/.claude/mem/notes/2026-02-19-react-context-infinite-re-render-loop-fix-pattern.md +31 -0
  16. package/.claude/mem/notes/2026-02-19-version-300-bump-and-build-fixes.md +32 -0
  17. package/.claude/mem/notes/2026-02-19-visualify-build-deployment-architecture-bug-fixes.md +25 -0
  18. package/.claude/mem/notes/2026-02-19-visualify-dist-iife-self-contained-build-config.md +30 -0
  19. package/.claude/mem/notes/2026-02-19-visualify-infinite-loop-i18n-fixes.md +31 -0
  20. package/.claude/mem/notes/2026-02-19-visualify-v3-bundle-splitting-docs-restructuring.md +32 -0
  21. package/.claude/mem/notes/2026-02-20-bundle-externalization-final-architecture.md +29 -0
  22. package/.claude/mem/notes/2026-02-20-chromium-page-fix-unstable-keys-and-double-event-b.md +27 -0
  23. package/.claude/mem/notes/2026-02-20-console-cleanup-bundle-optimization-commit.md +20 -0
  24. package/.claude/mem/notes/2026-02-20-dotbio-dot-plot-fix-useeffect-dependency.md +21 -0
  25. package/.claude/mem/notes/2026-02-20-public-folder-cleanup-and-readme-rewrite.md +25 -0
  26. package/.claude/mem/notes/2026-02-20-v300-release-and-beta-channel-strategy.md +29 -0
  27. package/.claude/mem/notes/2026-02-20-visium-background-image-unknown-legend-fix.md +19 -0
  28. package/.claude/mem/notes/2026-02-20-visualify-cdn-loader-bundle-externalization.md +34 -0
  29. package/.claude/mem/sessions/session-2026-02-20-031524.md +54 -0
  30. package/.claude/settings.local.json +21 -0
  31. package/.github/workflows/static.yml.bak +51 -51
  32. package/.sisyphus/boulder.json +65 -0
  33. package/.sisyphus/plans/phase-4-advanced-optimizations.md +217 -0
  34. package/LICENSE +674 -674
  35. package/README.md +94 -59
  36. package/config-overrides.js +31 -31
  37. package/dist/stats.html +4949 -0
  38. package/dist/visualify-3d.esm.js +1 -0
  39. package/dist/visualify-3d.js +1 -0
  40. package/dist/visualify-core.esm.js +1 -0
  41. package/dist/visualify-core.js +1 -0
  42. package/dist/visualify-docs.esm.js +1 -0
  43. package/dist/visualify-docs.js +1 -0
  44. package/dist/visualify-loader.js +1 -0
  45. package/dist/visualify-pages.esm.js +1 -0
  46. package/dist/visualify-pages.js +1 -0
  47. package/dist/visualify-portal.esm.js +1 -0
  48. package/dist/visualify-portal.js +1 -0
  49. package/dist/visualify-shared.js +26571 -0
  50. package/dist/visualify.js +1 -188
  51. package/docs/CHANGELOG.md +148 -0
  52. package/docs/cli/commands.md +513 -0
  53. package/docs/configuration/visualify-json.md +474 -0
  54. package/docs/docs/3d-visualization.md +374 -0
  55. package/docs/docs/CLI.md +303 -34
  56. package/docs/docs/README.md +65 -65
  57. package/docs/docs/Rechart/bar.md +190 -190
  58. package/docs/docs/Rechart/funnel.md +241 -241
  59. package/docs/docs/Rechart/line.md +355 -355
  60. package/docs/docs/Rechart/pie.md +225 -225
  61. package/docs/docs/Rechart/radar.md +253 -253
  62. package/docs/docs/Rechart/scatter.md +298 -298
  63. package/docs/docs/_404.md +51 -51
  64. package/docs/docs/_coverpage.md +11 -11
  65. package/docs/docs/_sidebar.md +54 -44
  66. package/docs/docs/components/dotBio.md +87 -34
  67. package/docs/docs/components/echart.md +171 -82
  68. package/docs/docs/components/html.md +61 -34
  69. package/docs/docs/components/macaron.md +156 -145
  70. package/docs/docs/components/markdown.md +42 -0
  71. package/docs/docs/components/more.md +183 -142
  72. package/docs/docs/components/plotly.md +132 -62
  73. package/docs/docs/components/scatterL.md +171 -70
  74. package/docs/docs/components/visium.md +112 -57
  75. package/docs/docs/configuration.md +121 -121
  76. package/docs/docs/deploy.md +31 -31
  77. package/docs/docs/docsify-plugin.md +655 -0
  78. package/docs/docs/hmr.md +165 -0
  79. package/docs/docs/i18n.md +332 -0
  80. package/docs/docs/log.md +30 -9
  81. package/docs/docs/more-pages.md +23 -23
  82. package/docs/docs/quickstart.md +148 -124
  83. package/docs/docs/rechart-attributes.md +74 -74
  84. package/docs/docs/rechart-basic-usage.md +160 -162
  85. package/docs/docs/theme.md +5 -5
  86. package/docs/docs/typescript.md +306 -0
  87. package/docs/docs/visual-editor.md +359 -0
  88. package/docs/index.html +85 -71
  89. package/docs/manifest.json +23 -23
  90. package/docs/migration/v3-migration.md +392 -0
  91. package/docs/static/css/fluff-stuff.css +169 -169
  92. package/docs/static/css/font-awesome.min.css +4 -4
  93. package/docs/static/css/visualify.css +6 -25
  94. package/docs/static/js/3d-viz-examples.js +181 -0
  95. package/docs/static/js/configuration.js +630 -448
  96. package/docs/static/js/visualify.js +1 -188
  97. package/package.json +106 -84
  98. package/rollup.config.mjs +766 -76
  99. package/src/_css/404.css +115 -115
  100. package/src/_css/App.css +37 -37
  101. package/src/_css/autoSuggestion.css +26 -26
  102. package/src/_css/circular-progress.css +32 -32
  103. package/src/_css/index.css +36 -36
  104. package/src/_css/modern.css +350 -25
  105. package/src/_media/corner.svg +8 -8
  106. package/src/_media/download.svg +3 -3
  107. package/src/_media/logo.svg +14 -14
  108. package/src/_test/App.test.js +15 -15
  109. package/src/_utils/reportWebVitals.js +13 -13
  110. package/src/a11y/README.md +177 -0
  111. package/src/a11y/aria-labels.js +339 -0
  112. package/src/a11y/color-contrast.js +535 -0
  113. package/src/a11y/index.js +197 -0
  114. package/src/a11y/keyboard-nav.js +523 -0
  115. package/src/a11y/styles.css +165 -0
  116. package/src/cli/commands/dev.js +214 -0
  117. package/src/cli/commands/docs.js +521 -0
  118. package/src/cli/commands/edit.js +379 -0
  119. package/src/cli/commands/init.js +213 -0
  120. package/src/cli/commands/portal.js +236 -0
  121. package/src/cli/dev-server.js +530 -0
  122. package/src/cli/hmr.js +456 -0
  123. package/src/cli/index.js +180 -0
  124. package/src/cli/utils/config.js +207 -0
  125. package/src/cli/utils/logger.js +241 -0
  126. package/src/config/defaults.ts +122 -0
  127. package/src/config/index.ts +72 -0
  128. package/src/config/loader.ts +478 -0
  129. package/src/config/schema.ts +227 -0
  130. package/src/config/validator.ts +337 -0
  131. package/src/core/appContext.js +34 -27
  132. package/src/core/components/Bar.js +383 -0
  133. package/src/core/components/Bar3D.js +473 -0
  134. package/src/core/components/LargeDatasetChart.js +296 -0
  135. package/src/core/components/Line3D.js +310 -0
  136. package/src/core/components/Scatter.js +392 -188
  137. package/src/core/components/Scatter3D.js +455 -0
  138. package/src/core/components/ScatterBio.js +601 -572
  139. package/src/core/components/Surface3D.js +326 -0
  140. package/src/core/components/ThreeCustom.js +648 -0
  141. package/src/core/components/ThreeScene.js +459 -0
  142. package/src/core/components/VisiumPlot.js +191 -165
  143. package/src/core/components/browser.js +42 -42
  144. package/src/core/components/dotplot.js +413 -413
  145. package/src/core/components/html.js +29 -29
  146. package/src/core/components/list.js +178 -178
  147. package/src/core/components/macaron.js +206 -201
  148. package/src/core/components/markdown.js +56 -56
  149. package/src/core/components/parser.scatterBio.js +582 -587
  150. package/src/core/components/ratio.js +82 -80
  151. package/src/core/components/scatterL.js +206 -173
  152. package/src/core/components/searchbar.js +156 -131
  153. package/src/core/components/selection.js +310 -193
  154. package/src/core/components/timeline.js +236 -281
  155. package/src/core/components/visium.js +114 -97
  156. package/src/core/data-processor.js +413 -0
  157. package/src/core/fetch/condfetch.js +82 -82
  158. package/src/core/fetch/fetch.js +92 -92
  159. package/src/core/fetch/json.js +29 -29
  160. package/src/core/fetch/vfetch.js +42 -42
  161. package/src/core/hmr-client.js +724 -0
  162. package/src/core/liveEditor.js +44 -44
  163. package/src/core/modules/codeEditorWithPreview.js +104 -104
  164. package/src/core/modules/echarts/common.js +20 -20
  165. package/src/core/modules/echarts/gl.js +228 -0
  166. package/src/core/modules/echarts/presetHandler.js +41 -41
  167. package/src/core/modules/echarts/presets/esodev.chromium.js +172 -172
  168. package/src/core/modules/echarts/presets/esodev.codex.js +130 -130
  169. package/src/core/modules/echarts/presets/esodev.visium.js +123 -123
  170. package/src/core/modules/echarts/presets/mmtrbc.js +186 -186
  171. package/src/core/modules/echarts.js +70 -71
  172. package/src/core/modules/echartsUtils.js +43 -43
  173. package/src/core/modules/echartswitcher.js +227 -152
  174. package/src/core/modules/replotly/presetHandler.js +24 -24
  175. package/src/core/modules/replotly/presets/minimum.js +18 -18
  176. package/src/core/modules/replotly/presets/mmtrbc.dot.js +114 -114
  177. package/src/core/modules/replotly/presets/mmtrbc.violin.js +100 -100
  178. package/src/core/modules/replotly.js +74 -71
  179. package/src/core/modules/threejs/Camera.js +373 -0
  180. package/src/core/modules/threejs/Lighting.js +459 -0
  181. package/src/core/modules/threejs/Renderer.js +364 -0
  182. package/src/core/modules/threejs/Scene.js +266 -0
  183. package/src/core/modules/threejs/index.js +155 -0
  184. package/src/core/pages/404.js +50 -50
  185. package/src/core/pages/error.js +27 -27
  186. package/src/core/pages/jsonPage.js +62 -62
  187. package/src/core/pages/loading.js +44 -44
  188. package/src/core/parser/echart.data.js +204 -183
  189. package/src/core/parser/echart.features.js +125 -125
  190. package/src/core/parser/echart.general.js +147 -147
  191. package/src/core/parser/echart.hilbert.js +57 -57
  192. package/src/core/parser/echart.parser.js +210 -210
  193. package/src/core/parser/echart.series.js +67 -67
  194. package/src/core/parser/echart.types.js +76 -76
  195. package/src/core/parser/plotly.config.js +10 -10
  196. package/src/core/parser/plotly.data.js +132 -132
  197. package/src/core/parser/plotly.layout.js +9 -9
  198. package/src/core/parser/plotly.violin.js +18 -18
  199. package/src/core/recharts.js +361 -62
  200. package/src/core/router/alias.js +49 -49
  201. package/src/core/router/jsonRouter.js +31 -31
  202. package/src/core/themes/modern.js +32 -32
  203. package/src/core/themes/themeSelector.js +33 -33
  204. package/src/core/visualify.js +213 -47
  205. package/src/core/widgets/circularProgress.js +23 -23
  206. package/src/core/widgets/controller.js +116 -83
  207. package/src/core/widgets/errorBoundary.js +36 -36
  208. package/src/core/widgets/footer.js +185 -177
  209. package/src/core/widgets/header.js +238 -234
  210. package/src/core/widgets/layout/Grid.js +31 -31
  211. package/src/core/widgets/layout.js +36 -36
  212. package/src/core/widgets/mapping.js +56 -42
  213. package/src/core/workers/data-worker.js +349 -0
  214. package/src/core/workers/worker-pool.js +396 -0
  215. package/src/docsify/bundle.js +215 -0
  216. package/src/docsify/markdown.js +271 -0
  217. package/src/docsify/plugin.js +268 -0
  218. package/src/editor/README.md +172 -0
  219. package/src/editor/components/ChartBuilder.jsx +341 -0
  220. package/src/editor/components/ChartTypeSidebar.jsx +91 -0
  221. package/src/editor/components/Editor.jsx +367 -0
  222. package/src/editor/components/Preview.jsx +446 -0
  223. package/src/editor/components/PropertyPanel.jsx +468 -0
  224. package/src/editor/components/StatusBar.jsx +85 -0
  225. package/src/editor/context/EditorContext.js +248 -0
  226. package/src/editor/hooks/useDebounce.js +32 -0
  227. package/src/editor/index.js +315 -0
  228. package/src/editor/styles/editor.css +637 -0
  229. package/src/editor/utils/chartValidator.js +263 -0
  230. package/src/entries/charts3d.js +70 -0
  231. package/src/entries/core.js +78 -0
  232. package/src/entries/docs.js +154 -0
  233. package/src/entries/pages.js +93 -0
  234. package/src/entries/portal.js +204 -0
  235. package/src/entries/shared.js +50 -0
  236. package/src/i18n/formatters.js +455 -0
  237. package/src/i18n/index.js +169 -0
  238. package/src/i18n/locales/ar.json +137 -0
  239. package/src/i18n/locales/de.json +137 -0
  240. package/src/i18n/locales/en.json +137 -0
  241. package/src/i18n/locales/es.json +137 -0
  242. package/src/i18n/locales/he.json +137 -0
  243. package/src/i18n/locales/zh.json +137 -0
  244. package/src/i18n/rtl.css +183 -0
  245. package/src/index.js +82 -62
  246. package/src/loader.js +103 -0
  247. package/src/setupTests.js +5 -5
  248. package/tsconfig.json +51 -0
  249. package/types/charts.d.ts +569 -0
  250. package/types/components.d.ts +441 -0
  251. package/types/config.d.ts +199 -0
  252. package/types/index.d.ts +353 -0
package/docs/docs/rechart-basic-usage.md CHANGED
@@ -1,162 +1,160 @@
1
- <script defers>
2
- let ex1 = {
3
- title: 'The Popular Web frameworks Before 2017',
4
- subtitle: 'GitHub New Star Number',
5
- type: 'bar',
6
- data: {
7
- 'Vue': [3000, 3500, 3900, 3100, 3200, 3100, 3600, 3300, 3600, 3400, 3100, 3000],
8
- 'React': [4000, 4500, 4900, 4300, 4400, 4300, 4800, 4500, 4800, 4600, 4300, 4000],
9
- 'Angular': [827, 949, 1400, 1000, 884, 911, 983, 989, 925, 1100, 1200, 930, ],
10
- },
11
- xAxis: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
12
- };
13
- const app = new $visualify.Recharts(ex1).mount('#example1');
14
- let ex2 = structuredClone(ex1);
15
- ex2.overrides= {
16
- series: [{
17
- type: 'line',
18
- smooth: true
19
- }, ]
20
- };
21
- const app2 = new $visualify.Recharts(ex2).mount('#example2');
22
- </script>
23
-
24
- # Visualify.Recharts
25
-
26
- `Visualify.Recharts` is a component library built on `React` and `ECharts` to solve
27
- the hassle of complex ECharts configuration items and data conversion. When
28
- generating an ECharts chart, users only need to care about **data** and
29
- **configuration items**, or even no configuration items, to generate a default
30
- chart. `ReCharts` helps you build charts **quickly** and **efficiently**.
31
-
32
- ## Quick Start
33
-
34
- <details open>
35
-
36
- <summary>Recharts stands for React-Echarts, in order to use Recharts, you can follow
37
- these steps.</summary>
38
-
39
- Insert the `visualify` script in your `index.html` file.
40
-
41
- ```html
42
- <head>
43
- ...
44
- <script src="https://visualify.pharmacy.arizona.edu/dist/visualify.js"></script>
45
- </head>
46
- ```
47
-
48
- Initilaize the `visualify` object in your `index.html` file.
49
-
50
- ```html
51
- $visualify = {
52
- mode: 'charts',
53
- }
54
- ```
55
-
56
- Use the `Recharts` object in your `index.html` file.
57
-
58
- ```html
59
- <div id="example1"></div>
60
- <script>
61
- new $visualify.Recharts( config... ).mount('#example1');
62
- </script>
63
- ```
64
-
65
- </details>
66
-
67
- ## Example of Recharts
68
-
69
- <!-- tabs:start -->
70
-
71
- #### **Output**
72
-
73
- <div id="example1">Here is the example of bar chart by using Recharts to show 2017 top popular frames. </div>
74
-
75
- #### **HTML**
76
-
77
- <pre data-lang="html">
78
- <code class="lang-html">
79
- &lt;div id=&quot;example1&quot;&gt;Example 1&lt;/div&gt;
80
- const app = new $visualify.Recharts({
81
- title: 'The Popular Web frameworks Before 2017',
82
- subtitle: 'GitHub New Star Number',
83
- type: 'bar',
84
- data: {
85
- 'Vue': [3000, 3500, 3900, 3100, 3200, 3100, 3600, 3300, 3600, 3400, 3100, 3000],
86
- 'React': [4000, 4500, 4900, 4300, 4400, 4300, 4800, 4500, 4800, 4600, 4300, 4000],
87
- 'Angular': [827, 949, 1400, 1000, 884, 911, 983, 989, 925, 1100, 1200, 930, ],
88
- },
89
- xAxis: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
90
- });
91
- app.mount('#example1');
92
- </code>
93
- </pre>
94
-
95
- <!-- tabs:end -->
96
-
97
- ## Advanced Usage
98
-
99
- ### Hybird Types & Smooth & More options
100
-
101
- 'Rechart' support hybird types such as `line` , `bar` , `scatter` , and more
102
- types by setting `type` as array of types, also for the `smooth`.
103
-
104
- ```html
105
- {
106
- ...
107
- type: ['line', 'bar']
108
- smooth: [true, false]
109
- }
110
- ```
111
-
112
- More options can be found in the [Attributes](rechart-attributes).
113
-
114
- ### Overrides Configuration
115
-
116
- The **preset** configuration in `Recharts` can be overridden to match the
117
- original `Echarts` configuration. For example, we can set `smooth` to `true` in
118
- `series`.
119
-
120
- ```html
121
- {
122
- ...
123
- overrides: {
124
- series: [{
125
- type: 'line',
126
- smooth: true
127
- }, ]
128
- },
129
- }
130
- ```
131
-
132
- More advanced usage can be found in the
133
- [Echarts documentation](https://echarts.apache.org/en/index.html).
134
-
135
- <!-- tabs:start -->
136
-
137
- #### **Output**
138
-
139
- <div id="example2">Example 2</div>
140
-
141
- #### **HTML**
142
-
143
- <pre data-lang="html">
144
- <code class="lang-html">
145
- const app = new $visualify.Recharts({
146
- ...
147
- overrides: {
148
- series: [{
149
- type: 'line',
150
- smooth: true
151
- }, ]
152
- },
153
- }).mount('#example1');
154
- </code>
155
- <button class="docsify-copy-code-button">
156
- <span class="label">Copy to clipboard</span>
157
- <span class="error">Error</span>
158
- <span class="success">Copied</span>
159
- </button>
160
- </pre>
161
-
162
- <!-- tabs:end -->
1
+ # Charts
2
+
3
+ Visualify's charting engine is built on `React` and `ECharts` to simplify complex chart configuration. You only need to provide **data** and minimal **options** to generate interactive charts.
4
+
5
+ ## Quick Start
6
+
7
+ The easiest way to create charts is using ` ```visualify ` code blocks in your Docsify markdown:
8
+
9
+ <pre lang="markdown">
10
+ ```visualify
11
+ {
12
+ "type": "bar",
13
+ "title": "My Chart",
14
+ "data": {
15
+ "categories": ["A", "B", "C"],
16
+ "series": [{ "name": "Data", "data": [10, 20, 30] }]
17
+ }
18
+ }
19
+ ```
20
+ </pre>
21
+
22
+ See the [Docsify Plugin](/docsify-plugin.md) documentation for full setup instructions.
23
+
24
+ ## Example: Bar Chart
25
+
26
+ ```visualify
27
+ {
28
+ "type": "bar",
29
+ "title": "The Popular Web Frameworks Before 2017",
30
+ "subtitle": "GitHub New Star Number",
31
+ "data": {
32
+ "categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"],
33
+ "series": [
34
+ {
35
+ "name": "Vue",
36
+ "data": [3000, 3500, 3900, 3100, 3200, 3100, 3600, 3300, 3600, 3400, 3100, 3000]
37
+ },
38
+ {
39
+ "name": "React",
40
+ "data": [4000, 4500, 4900, 4300, 4400, 4300, 4800, 4500, 4800, 4600, 4300, 4000]
41
+ },
42
+ {
43
+ "name": "Angular",
44
+ "data": [827, 949, 1400, 1000, 884, 911, 983, 989, 925, 1100, 1200, 930]
45
+ }
46
+ ]
47
+ }
48
+ }
49
+ ```
50
+
51
+ ## Data Formats
52
+
53
+ ### Structured Format (Recommended)
54
+
55
+ The structured format separates categories and series explicitly:
56
+
57
+ ```json
58
+ {
59
+ "type": "line",
60
+ "data": {
61
+ "categories": ["Jan", "Feb", "Mar"],
62
+ "series": [
63
+ { "name": "Sales", "data": [100, 200, 150] },
64
+ { "name": "Costs", "data": [80, 120, 90] }
65
+ ]
66
+ }
67
+ }
68
+ ```
69
+
70
+ ### Flat Object Format
71
+
72
+ The flat format uses keys as series names (legacy, still supported):
73
+
74
+ ```json
75
+ {
76
+ "type": "line",
77
+ "data": {
78
+ "Sales": [100, 200, 150],
79
+ "Costs": [80, 120, 90]
80
+ },
81
+ "xAxis": ["Jan", "Feb", "Mar"]
82
+ }
83
+ ```
84
+
85
+ ## Hybrid Types & Smooth
86
+
87
+ Support hybrid types such as `line`, `bar`, `scatter` by setting `type` as an array:
88
+
89
+ ```visualify
90
+ {
91
+ "type": ["line", "bar"],
92
+ "title": "Hybrid Chart: Line + Bar",
93
+ "smooth": [true, false],
94
+ "data": {
95
+ "categories": ["Jan", "Feb", "Mar", "Apr", "May"],
96
+ "series": [
97
+ { "name": "Revenue", "data": [3000, 3500, 3900, 3100, 3200], "smooth": true },
98
+ { "name": "Orders", "data": [200, 250, 280, 220, 240] }
99
+ ]
100
+ }
101
+ }
102
+ ```
103
+
104
+ More options can be found in the [Attributes](/rechart-attributes.md).
105
+
106
+ ## Overrides Configuration
107
+
108
+ The preset configuration can be overridden to match the original ECharts configuration. For example, setting `smooth` on specific series:
109
+
110
+ ```visualify
111
+ {
112
+ "type": "bar",
113
+ "title": "The Popular Web Frameworks Before 2017",
114
+ "data": {
115
+ "categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"],
116
+ "series": [
117
+ { "name": "Vue", "data": [3000, 3500, 3900, 3100, 3200, 3100, 3600, 3300, 3600, 3400, 3100, 3000] },
118
+ { "name": "React", "data": [4000, 4500, 4900, 4300, 4400, 4300, 4800, 4500, 4800, 4600, 4300, 4000] },
119
+ { "name": "Angular", "data": [827, 949, 1400, 1000, 884, 911, 983, 989, 925, 1100, 1200, 930] }
120
+ ]
121
+ },
122
+ "overrides": {
123
+ "series": [{ "type": "line", "smooth": true }]
124
+ }
125
+ }
126
+ ```
127
+
128
+ More advanced usage can be found in the [ECharts documentation](https://echarts.apache.org/en/index.html).
129
+
130
+ ## Programmatic API
131
+
132
+ For advanced use cases, you can create charts programmatically using JavaScript:
133
+
134
+ ```html
135
+ <head>
136
+ <script src="https://unpkg.com/visualify@latest/dist/visualify.js"></script>
137
+ </head>
138
+ ```
139
+
140
+ Initialize and mount:
141
+
142
+ ```javascript
143
+ // Initialize Visualify in charts mode
144
+ window.$visualify = { mode: 'charts' };
145
+
146
+ // Create and mount a chart
147
+ const chart = new $visualify.Recharts({
148
+ title: 'My Chart',
149
+ type: 'bar',
150
+ data: {
151
+ 'Series A': [10, 20, 30],
152
+ 'Series B': [15, 25, 35],
153
+ },
154
+ xAxis: ['Jan', 'Feb', 'Mar'],
155
+ }).mount('#my-chart');
156
+ ```
157
+
158
+ ```html
159
+ <div id="my-chart"></div>
160
+ ```
package/docs/docs/theme.md CHANGED
@@ -1,5 +1,5 @@
1
- # Theme
2
-
3
- ## Modern
4
-
5
- The modern theme is a modern, responsive theme that is based on the [Bootstrap](https://getbootstrap.com/) framework. It is a clean, modern and professional theme that is suitable for a wide range of applications.
1
+ # Theme
2
+
3
+ ## Modern
4
+
5
+ The modern theme is a modern, responsive theme that is based on the [Bootstrap](https://getbootstrap.com/) framework. It is a clean, modern and professional theme that is suitable for a wide range of applications.
package/docs/docs/typescript.md ADDED
@@ -0,0 +1,306 @@
1
+ # TypeScript Migration Guide
2
+
3
+ Visualify.js provides first-class TypeScript support with comprehensive type definitions for all chart configurations and APIs.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm install visualify
9
+ npm install --save-dev @types/react @types/react-dom
10
+ ```
11
+
12
+ ## Type Definitions
13
+
14
+ ### Chart Configuration Types
15
+
16
+ ```typescript
17
+ import { ChartConfig, ChartType, AxisConfig, DataSeries } from 'visualify';
18
+
19
+ // Basic chart configuration
20
+ const config: ChartConfig = {
21
+ type: 'line' as ChartType,
22
+ title: 'Sales Overview',
23
+ data: {
24
+ categories: ['Jan', 'Feb', 'Mar'],
25
+ series: [{
26
+ name: 'Revenue',
27
+ data: [120, 200, 150]
28
+ }]
29
+ },
30
+ xAxis: {
31
+ type: 'category',
32
+ name: 'Month'
33
+ } as AxisConfig,
34
+ yAxis: {
35
+ type: 'value',
36
+ name: 'Amount ($)'
37
+ } as AxisConfig
38
+ };
39
+ ```
40
+
41
+ ### Component Props
42
+
43
+ ```typescript
44
+ import { RechartsProps, ChartComponent } from 'visualify';
45
+
46
+ interface MyChartProps extends RechartsProps {
47
+ customTitle?: string;
48
+ onDataSelect?: (data: DataPoint) => void;
49
+ }
50
+
51
+ const MyChart: React.FC<MyChartProps> = ({ config, style, onDataSelect }) => {
52
+ return (
53
+ <ChartComponent
54
+ config={config}
55
+ style={style}
56
+ onClick={onDataSelect}
57
+ />
58
+ );
59
+ };
60
+ ```
61
+
62
+ ### 3D Chart Types
63
+
64
+ ```typescript
65
+ import { Scatter3DConfig, Bar3DConfig, Surface3DConfig } from 'visualify';
66
+
67
+ const scatter3D: Scatter3DConfig = {
68
+ type: 'scatter3d',
69
+ data: {
70
+ x: [1, 2, 3],
71
+ y: [4, 5, 6],
72
+ z: [7, 8, 9]
73
+ },
74
+ xAxis3D: { name: 'X', type: 'value' },
75
+ yAxis3D: { name: 'Y', type: 'value' },
76
+ zAxis3D: { name: 'Z', type: 'value' },
77
+ grid3D: {
78
+ viewControl: { autoRotate: true }
79
+ }
80
+ };
81
+ ```
82
+
83
+ ## Generic Types
84
+
85
+ ### Data Types
86
+
87
+ ```typescript
88
+ import { ChartData, DataPoint, SeriesData } from 'visualify';
89
+
90
+ // Typed data points
91
+ interface SalesData extends DataPoint {
92
+ date: string;
93
+ revenue: number;
94
+ units: number;
95
+ }
96
+
97
+ const salesData: ChartData<SalesData> = {
98
+ categories: ['Q1', 'Q2', 'Q3'],
99
+ series: [{
100
+ name: 'Sales',
101
+ data: [
102
+ { date: '2024-01', revenue: 10000, units: 100 },
103
+ { date: '2024-02', revenue: 15000, units: 150 }
104
+ ]
105
+ }]
106
+ };
107
+ ```
108
+
109
+ ### Event Handlers
110
+
111
+ ```typescript
112
+ import { ChartEvent, ChartEventHandler } from 'visualify';
113
+
114
+ const handleClick: ChartEventHandler = (event: ChartEvent) => {
115
+ console.log('Clicked:', event.dataIndex, event.seriesIndex);
116
+ };
117
+
118
+ const handleHover = (event: ChartEvent<{ value: number; name: string }>) => {
119
+ console.log('Hovering over:', event.data.name);
120
+ };
121
+ ```
122
+
123
+ ## Configuration Interfaces
124
+
125
+ ### Complete Chart Configuration
126
+
127
+ ```typescript
128
+ import {
129
+ VisualifyConfig,
130
+ ThemeConfig,
131
+ AnimationConfig,
132
+ TooltipConfig
133
+ } from 'visualify';
134
+
135
+ const fullConfig: VisualifyConfig = {
136
+ type: 'bar',
137
+ title: {
138
+ text: 'Annual Report',
139
+ subtext: '2024',
140
+ left: 'center'
141
+ },
142
+ theme: {
143
+ color: ['#5470c6', '#91cc75', '#fac858'],
144
+ backgroundColor: '#fff'
145
+ } as ThemeConfig,
146
+ animation: {
147
+ duration: 1000,
148
+ easing: 'cubicOut'
149
+ } as AnimationConfig,
150
+ tooltip: {
151
+ trigger: 'axis',
152
+ formatter: (params) => {
153
+ return `${params[0].name}: ${params[0].value}`;
154
+ }
155
+ } as TooltipConfig,
156
+ data: {
157
+ categories: ['A', 'B', 'C'],
158
+ series: [{
159
+ name: 'Series 1',
160
+ data: [120, 200, 150]
161
+ }]
162
+ }
163
+ };
164
+ ```
165
+
166
+ ## Utility Types
167
+
168
+ ### Chart Type Union
169
+
170
+ ```typescript
171
+ import { ChartType } from 'visualify';
172
+
173
+ type SupportedCharts = Extract<ChartType, 'line' | 'bar' | 'pie'>;
174
+
175
+ function createChart(type: SupportedCharts, data: unknown) {
176
+ // Type-safe chart creation
177
+ }
178
+ ```
179
+
180
+ ### Deep Partial for Configuration
181
+
182
+ ```typescript
183
+ import { DeepPartial, ChartConfig } from 'visualify';
184
+
185
+ // Useful for configuration merging
186
+ type PartialConfig = DeepPartial<ChartConfig>;
187
+
188
+ const overrides: PartialConfig = {
189
+ title: { text: 'Updated Title' },
190
+ // Other partial properties
191
+ };
192
+ ```
193
+
194
+ ## React Integration
195
+
196
+ ### Hook Types
197
+
198
+ ```typescript
199
+ import { useChart, UseChartOptions, UseChartReturn } from 'visualify';
200
+
201
+ const options: UseChartOptions = {
202
+ config: chartConfig,
203
+ onReady: (chart) => {
204
+ console.log('Chart ready');
205
+ },
206
+ onError: (error) => {
207
+ console.error('Chart error:', error);
208
+ }
209
+ };
210
+
211
+ const { chartRef, updateChart, resizeChart }: UseChartReturn = useChart(options);
212
+ ```
213
+
214
+ ### Ref Forwarding
215
+
216
+ ```typescript
217
+ import { ChartRef } from 'visualify';
218
+
219
+ const MyChartComponent = React.forwardRef<ChartRef, ChartProps>(
220
+ (props, ref) => {
221
+ return <Recharts ref={ref} {...props} />;
222
+ }
223
+ );
224
+ ```
225
+
226
+ ## Migration from JavaScript
227
+
228
+ ### Step 1: Add TypeScript Configuration
229
+
230
+ ```json
231
+ {
232
+ "compilerOptions": {
233
+ "target": "ES2020",
234
+ "module": "ESNext",
235
+ "moduleResolution": "node",
236
+ "jsx": "react-jsx",
237
+ "strict": true,
238
+ "esModuleInterop": true,
239
+ "skipLibCheck": true
240
+ }
241
+ }
242
+ ```
243
+
244
+ ### Step 2: Rename Files
245
+
246
+ Rename `.js` files to `.tsx` (for React components) or `.ts` (for utilities).
247
+
248
+ ### Step 3: Add Type Annotations
249
+
250
+ ```typescript
251
+ // Before (JavaScript)
252
+ const config = {
253
+ type: 'line',
254
+ data: { ... }
255
+ };
256
+
257
+ // After (TypeScript)
258
+ import { ChartConfig } from 'visualify';
259
+
260
+ const config: ChartConfig = {
261
+ type: 'line',
262
+ data: { ... }
263
+ };
264
+ ```
265
+
266
+ ### Step 4: Fix Type Errors
267
+
268
+ Common issues during migration:
269
+
270
+ 1. **Implicit any** - Add explicit types or enable `strict: false` temporarily
271
+ 2. **Missing properties** - Use `Partial<T>` for incremental configurations
272
+ 3. **Event types** - Cast event handlers to expected types
273
+
274
+ ## Best Practices
275
+
276
+ 1. **Use strict mode** - Enable `strict: true` in tsconfig.json
277
+ 2. **Define custom types** - Extend Visualify interfaces for your data
278
+ 3. **Type event handlers** - Avoid implicit `any` in callbacks
279
+ 4. **Leverage generics** - Use generic types for reusable components
280
+
281
+ ## Troubleshooting
282
+
283
+ ### Type Definitions Not Found
284
+
285
+ ```bash
286
+ # Ensure types are installed
287
+ npm install --save-dev @types/visualify
288
+
289
+ # Or add to tsconfig.json
290
+ {
291
+ "compilerOptions": {
292
+ "typeRoots": ["./node_modules/@types", "./types"]
293
+ }
294
+ }
295
+ ```
296
+
297
+ ### Strict Type Errors
298
+
299
+ Use type assertions sparingly:
300
+
301
+ ```typescript
302
+ const config = {
303
+ type: 'custom' as unknown as ChartType,
304
+ // ...
305
+ };
306
+ ```