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/quickstart.md CHANGED
@@ -1,124 +1,148 @@
1
- # Quick start
2
-
3
- It is highly recommended to use `Docisfy` as a document framework and imports
4
- `visualify` to quickly present various diagrams.
5
-
6
- Insert the `visualify` script in your `index.html` file.
7
-
8
- ```html
9
- <head>
10
- ...
11
- <script src="https://cdn.jsdelivr.net/npm/visualifyjs"></script>
12
-
13
- <!-- or -->
14
- <!-- <script src="https://visualify.pharmacy.arizona.edu/dist/visualify.js"></script -->
15
- <!-- or -->
16
- <!-- script src="https://cdn.jsdelivr.net/gh/visualify/visualify.js@release/dist/visualify.js"></script> -->
17
- </head>
18
- ```
19
-
20
- Or install `visualify.cli` globally, which helps initializing and previewing the
21
- website locally.
22
-
23
- ```bash
24
- npm i visualify.cli -g
25
- ```
26
-
27
- ## Initialize
28
-
29
- If you want to write the documentation in the `./docs` subdirectory, you can use
30
- the `init` command.
31
-
32
- ```bash
33
- visualify init ./docs
34
- ```
35
-
36
- or simply run `visualify init`
37
-
38
- ```bash
39
- visualify init
40
- ```
41
-
42
- or anywhere you like.
43
-
44
- ```bash
45
- visualify init <path>
46
- ```
47
-
48
- ## Writing content
49
-
50
- After the `init` is complete, you can see the file list in the `./docs`
51
- subdirectory.
52
-
53
- - `index.html` as the entry file
54
- - `home.jsom` as the home page
55
- - `.nojekyll` prevents GitHub Pages from ignoring files that begin with an
56
- underscore
57
-
58
- You can easily update the documentation in `./docs/home.json`, of course you can
59
- add [more pages](more-pages.md).
60
-
61
- ## Preview your site
62
-
63
- Run the local server with `visualify serve <docs-path>`. You can preview your
64
- site in your browser on `http://localhost:3000`.
65
-
66
- ```bash
67
- visualify serve docs
68
- ```
69
-
70
- ?> For more use cases of `visualify.cli`, head over to the
71
- [CLI documentation](CLI.md).
72
-
73
- ## Manual initialization
74
-
75
- If you don't like `npm` or have trouble installing the tool, you can manually
76
- create `index.html`:
77
-
78
- ```html
79
- <!-- index.html -->
80
-
81
- <!DOCTYPE html>
82
- <html>
83
- <head>
84
- <meta name="viewport" content="width=device-width,initial-scale=1" />
85
- <meta charset="UTF-8" />
86
- </head>
87
- <body>
88
- <div id="root"></div>
89
- <script>
90
- $visualify = {
91
- //...
92
- };
93
- </script>
94
- <script src="https://cdn.jsdelivr.net/npm/visualifyjs"></script>
95
- <!-- or -->
96
- <!-- <script src="https://visualify.pharmacy.arizona.edu/dist/visualify.js"></script> -->
97
- <!-- or -->
98
- <!-- script src="https://cdn.jsdelivr.net/gh/visualify/visualify.js@release/dist/visualify.js"></script> -->
99
- </body>
100
- </html>
101
-
102
- ```
103
-
104
- ### Manually preview your site
105
-
106
- If you have `Node.js` installed on your system, you can easily use it to run a
107
- static server to preview your site.
108
-
109
- ```bash
110
- # install corresponding dependencies
111
- npm install -g serve
112
- serve -s ./docs
113
- ```
114
-
115
- If you have Python installed on your system, you can easily use it to run a
116
- static server to preview your site.
117
-
118
- ```python2
119
- cd docs && python -m SimpleHTTPServer 3000
120
- ```
121
-
122
- ```python3
123
- cd docs && python -m http.server 3000
124
- ```
1
+ # Quick start
2
+
3
+ It is highly recommended to use `Docisfy` as a document framework and imports
4
+ `visualify` to quickly present various diagrams.
5
+
6
+ Insert the `visualify` script in your `index.html` file.
7
+
8
+ **Option 1: Auto-loader (recommended)** — loads CDN dependencies automatically:
9
+
10
+ ```html
11
+ <head>
12
+ ...
13
+ <script src="https://cdn.jsdelivr.net/gh/visualify/visualify.js@release/dist/visualify-loader.js"></script>
14
+ </head>
15
+ ```
16
+
17
+ **Option 2: Manual CDN setup** — for more control over dependency versions:
18
+
19
+ ```html
20
+ <head>
21
+ ...
22
+ <!-- CDN dependencies (required) -->
23
+ <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
24
+ <!-- Optional: only if using plotly charts -->
25
+ <script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
26
+ <!-- Visualify -->
27
+ <script src="https://cdn.jsdelivr.net/npm/visualifyjs"></script>
28
+ </head>
29
+ ```
30
+
31
+ **Beta channel** — get the latest development build:
32
+
33
+ ```html
34
+ <!-- Beta: auto-loader from dev branch -->
35
+ <script src="https://cdn.jsdelivr.net/gh/visualify/visualify.js@dev/dist/visualify-loader.js"></script>
36
+ ```
37
+
38
+ Or install via npm from GitHub:
39
+
40
+ ```bash
41
+ npm install github:visualify/visualify.js#dev
42
+ ```
43
+
44
+ > Beta builds are updated daily on the `dev` branch. For production, use the stable options above.
45
+
46
+ ---
47
+
48
+ Install the CLI globally for initializing and previewing sites locally:
49
+
50
+ ```bash
51
+ npm i visualifyjs -g
52
+ ```
53
+
54
+ ## Initialize
55
+
56
+ If you want to write the documentation in the `./docs` subdirectory, you can use
57
+ the `init` command.
58
+
59
+ ```bash
60
+ visualify init ./docs
61
+ ```
62
+
63
+ or simply run `visualify init`
64
+
65
+ ```bash
66
+ visualify init
67
+ ```
68
+
69
+ or anywhere you like.
70
+
71
+ ```bash
72
+ visualify init <path>
73
+ ```
74
+
75
+ ## Writing content
76
+
77
+ After the `init` is complete, you can see the file list in the `./docs`
78
+ subdirectory.
79
+
80
+ - `index.html` as the entry file
81
+ - `home.jsom` as the home page
82
+ - `.nojekyll` prevents GitHub Pages from ignoring files that begin with an
83
+ underscore
84
+
85
+ You can easily update the documentation in `./docs/home.json`, of course you can
86
+ add [more pages](more-pages.md).
87
+
88
+ ## Preview your site
89
+
90
+ Run the local server with `visualify serve <docs-path>`. You can preview your
91
+ site in your browser on `http://localhost:3000`.
92
+
93
+ ```bash
94
+ visualify serve docs
95
+ ```
96
+
97
+ ?> For more use cases of `visualify.cli`, head over to the
98
+ [CLI documentation](CLI.md).
99
+
100
+ ## Manual initialization
101
+
102
+ If you don't like `npm` or have trouble installing the tool, you can manually
103
+ create `index.html`:
104
+
105
+ ```html
106
+ <!-- index.html -->
107
+
108
+ <!DOCTYPE html>
109
+ <html>
110
+ <head>
111
+ <meta name="viewport" content="width=device-width,initial-scale=1" />
112
+ <meta charset="UTF-8" />
113
+ </head>
114
+ <body>
115
+ <div id="root"></div>
116
+ <script>
117
+ $visualify = {
118
+ //...
119
+ };
120
+ </script>
121
+ <!-- Auto-loader: loads echarts/plotly from CDN automatically -->
122
+ <script src="https://cdn.jsdelivr.net/gh/visualify/visualify.js@release/dist/visualify-loader.js"></script>
123
+ </body>
124
+ </html>
125
+
126
+ ```
127
+
128
+ ### Manually preview your site
129
+
130
+ If you have `Node.js` installed on your system, you can easily use it to run a
131
+ static server to preview your site.
132
+
133
+ ```bash
134
+ # install corresponding dependencies
135
+ npm install -g serve
136
+ serve -s ./docs
137
+ ```
138
+
139
+ If you have Python installed on your system, you can easily use it to run a
140
+ static server to preview your site.
141
+
142
+ ```python2
143
+ cd docs && python -m SimpleHTTPServer 3000
144
+ ```
145
+
146
+ ```python3
147
+ cd docs && python -m http.server 3000
148
+ ```
package/docs/docs/rechart-attributes.md CHANGED
@@ -1,74 +1,74 @@
1
- # Recharts Attributes
2
-
3
- `Rechart` is primarily composed of 4 attribute groups:
4
-
5
- - **Basic** configuration
6
- - **Data** configuration
7
- - **Plugins** configuration
8
- - **Override** configuration.
9
-
10
- ## Basic Configuration
11
-
12
- The basic configuration includes:
13
-
14
- | Attribute | Type | Description | Choice | Default |
15
- | --------------- | ------------ | ----------------------- | -------------------------- | ------- |
16
- | title | string | The main title | User-defined title | - |
17
- | subtitle | string | A secondary title | User-defined subtitle | - |
18
- | width | string | The width dimension | Any valid CSS width value | - |
19
- | height | string | The height dimension | Any valid CSS height value | 400px |
20
- | legend | bool | show or hide legend | True, False | true |
21
- | xAxis | string/false | The xAxis | User-defined xAxis | {} |
22
- | yAxis | string/false | The yAxis | User-defined yAxis | {} |
23
- | tooltip | object | The tooltip | User-defined tooltip | {} |
24
- | xAxisLineshow | bool | show or hide xAxisLines | True, False | true |
25
- | yAxisLineshow | bool | show or hide yAxisLines | True, False | true |
26
- | xAxisLabelShow | bool | show or hide xAxisLabel | True, False | true |
27
- | yAxisLabelShow | bool | show or hide yAxisLabel | True, False | true |
28
- | xAxisLabelColor | string | The xAxisLabelColor | Any valid CSS color value | - |
29
- | yAxisLabelColor | string | The yAxisLabelColor | Any valid CSS color value | - |
30
-
31
- ## Data Configuration
32
-
33
- The data configuration includes:
34
-
35
- | Attribute | Type | Description | Choice | Default |
36
- | --------- | ------------ | ------------------ | ----------------------------------------------------------------------------------------- | --------- |
37
- | data | string | The data | User-defined data | {} |
38
- | type | string/array | The type | 'line', 'bar' | undefined |
39
- | smooth | bool/array | The smooth | True, False, [true, false] | false |
40
- | areaStyle | object | The area style | {},[{color: 'red'},{color: 'blue'}] | {} |
41
- | stack | string/array | The stack | {}, ['Vue', 'React', 'Angular'],{lang: ['Vue', 'React', 'Angular']} | - |
42
- | markArea | object/array | The mark area | {XAxis: [{start: '...', end:'...', name: "..."}, ... ], YAxis: ..., props: ..}, [{}, ...] | - |
43
- | markLine | object/array | The mark line | {data: { name: 'average', type: 'average'}, props: .. }, [{ data: {}, props: ..}, ...] | - |
44
- | peak | bool/string | name of the peak | True, False, user-defined name of the peak | false |
45
- | valley | bool/string | name of the valley | True, False, user-defined name of the valley | false |
46
-
47
- ### Specific Data Configuration for Line Charts
48
-
49
- | Attribute | Type | Description | Choice | Default |
50
- | ---------- | ----------------- | --------------------------- | ----------------------------------------------------------------- | ------- |
51
- | smooth | bool/array | The smooth | True, False, [true, false] | false |
52
- | areaStyle | object | The area style | {},[{color: 'red'},{color: 'blue'}] | {} |
53
- | stack | string/array | The stack | {}, ['x', 'y'],{lang: ['x', 'y', 'z']} | - |
54
- | percentage | bool | The percentage stacked mode | True, False | false |
55
- | steps | bool/string/array | The steps | True, False, 'start', 'middle', 'end', ['start', 'middle', 'end'] | false |
56
-
57
- ### Specific Data Configuration for Bar Charts
58
-
59
- | Attribute | Type | Description | Choice | Default |
60
- | ---------- | ---- | --------------------------- | ----------- | ------- |
61
- | percentage | bool | The percentage stacked mode | True, False | false |
62
-
63
- ## Plugins Configuration
64
-
65
- The plgins configuration includes:
66
-
67
- | Attribute | Type | Description | Choice | Default |
68
- | --------- | ------ | ----------- | -------------------- | ------- |
69
- | plugins | string | The plugins | User-defined plugins | - |
70
-
71
- ## Override Configuration
72
-
73
- configuration to override the encapsulated preset configurations in order to
74
- achieve custom effects.
1
+ # Recharts Attributes
2
+
3
+ `Rechart` is primarily composed of 4 attribute groups:
4
+
5
+ - **Basic** configuration
6
+ - **Data** configuration
7
+ - **Plugins** configuration
8
+ - **Override** configuration.
9
+
10
+ ## Basic Configuration
11
+
12
+ The basic configuration includes:
13
+
14
+ | Attribute | Type | Description | Choice | Default |
15
+ | --------------- | ------------ | ----------------------- | -------------------------- | ------- |
16
+ | title | string | The main title | User-defined title | - |
17
+ | subtitle | string | A secondary title | User-defined subtitle | - |
18
+ | width | string | The width dimension | Any valid CSS width value | - |
19
+ | height | string | The height dimension | Any valid CSS height value | 400px |
20
+ | legend | bool | show or hide legend | True, False | true |
21
+ | xAxis | string/false | The xAxis | User-defined xAxis | {} |
22
+ | yAxis | string/false | The yAxis | User-defined yAxis | {} |
23
+ | tooltip | object | The tooltip | User-defined tooltip | {} |
24
+ | xAxisLineshow | bool | show or hide xAxisLines | True, False | true |
25
+ | yAxisLineshow | bool | show or hide yAxisLines | True, False | true |
26
+ | xAxisLabelShow | bool | show or hide xAxisLabel | True, False | true |
27
+ | yAxisLabelShow | bool | show or hide yAxisLabel | True, False | true |
28
+ | xAxisLabelColor | string | The xAxisLabelColor | Any valid CSS color value | - |
29
+ | yAxisLabelColor | string | The yAxisLabelColor | Any valid CSS color value | - |
30
+
31
+ ## Data Configuration
32
+
33
+ The data configuration includes:
34
+
35
+ | Attribute | Type | Description | Choice | Default |
36
+ | --------- | ------------ | ------------------ | ----------------------------------------------------------------------------------------- | --------- |
37
+ | data | string | The data | User-defined data | {} |
38
+ | type | string/array | The type | 'line', 'bar' | undefined |
39
+ | smooth | bool/array | The smooth | True, False, [true, false] | false |
40
+ | areaStyle | object | The area style | {},[{color: 'red'},{color: 'blue'}] | {} |
41
+ | stack | string/array | The stack | {}, ['Vue', 'React', 'Angular'],{lang: ['Vue', 'React', 'Angular']} | - |
42
+ | markArea | object/array | The mark area | {XAxis: [{start: '...', end:'...', name: "..."}, ... ], YAxis: ..., props: ..}, [{}, ...] | - |
43
+ | markLine | object/array | The mark line | {data: { name: 'average', type: 'average'}, props: .. }, [{ data: {}, props: ..}, ...] | - |
44
+ | peak | bool/string | name of the peak | True, False, user-defined name of the peak | false |
45
+ | valley | bool/string | name of the valley | True, False, user-defined name of the valley | false |
46
+
47
+ ### Specific Data Configuration for Line Charts
48
+
49
+ | Attribute | Type | Description | Choice | Default |
50
+ | ---------- | ----------------- | --------------------------- | ----------------------------------------------------------------- | ------- |
51
+ | smooth | bool/array | The smooth | True, False, [true, false] | false |
52
+ | areaStyle | object | The area style | {},[{color: 'red'},{color: 'blue'}] | {} |
53
+ | stack | string/array | The stack | {}, ['x', 'y'],{lang: ['x', 'y', 'z']} | - |
54
+ | percentage | bool | The percentage stacked mode | True, False | false |
55
+ | steps | bool/string/array | The steps | True, False, 'start', 'middle', 'end', ['start', 'middle', 'end'] | false |
56
+
57
+ ### Specific Data Configuration for Bar Charts
58
+
59
+ | Attribute | Type | Description | Choice | Default |
60
+ | ---------- | ---- | --------------------------- | ----------- | ------- |
61
+ | percentage | bool | The percentage stacked mode | True, False | false |
62
+
63
+ ## Plugins Configuration
64
+
65
+ The plgins configuration includes:
66
+
67
+ | Attribute | Type | Description | Choice | Default |
68
+ | --------- | ------ | ----------- | -------------------- | ------- |
69
+ | plugins | string | The plugins | User-defined plugins | - |
70
+
71
+ ## Override Configuration
72
+
73
+ configuration to override the encapsulated preset configurations in order to
74
+ achieve custom effects.