visualifyjs 2.5.3 → 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 -193
  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 -0
  63. package/docs/docs/_404.md +51 -51
  64. package/docs/docs/_coverpage.md +11 -11
  65. package/docs/docs/_sidebar.md +54 -43
  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 -123
  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 -1
  81. package/docs/docs/more-pages.md +23 -23
  82. package/docs/docs/quickstart.md +148 -119
  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 -579
  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 -143
  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,119 +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://visualify.pharmacy.arizona.edu/dist/visualify.js"></script>
12
- <!-- or -->
13
- <!-- script src="https://cdn.jsdelivr.net/npm/visualifyjs"></!-- -->
14
- </head>
15
- ```
16
-
17
- Or install `visualify.cli` globally, which helps initializing and previewing the
18
- website locally.
19
-
20
- ```bash
21
- npm i visualify.cli -g
22
- ```
23
-
24
- ## Initialize
25
-
26
- If you want to write the documentation in the `./docs` subdirectory, you can use
27
- the `init` command.
28
-
29
- ```bash
30
- visualify init ./docs
31
- ```
32
-
33
- or simply run `visualify init`
34
-
35
- ```bash
36
- visualify init
37
- ```
38
-
39
- or anywhere you like.
40
-
41
- ```bash
42
- visualify init <path>
43
- ```
44
-
45
- ## Writing content
46
-
47
- After the `init` is complete, you can see the file list in the `./docs`
48
- subdirectory.
49
-
50
- - `index.html` as the entry file
51
- - `home.jsom` as the home page
52
- - `.nojekyll` prevents GitHub Pages from ignoring files that begin with an
53
- underscore
54
-
55
- You can easily update the documentation in `./docs/home.json`, of course you can
56
- add [more pages](more-pages.md).
57
-
58
- ## Preview your site
59
-
60
- Run the local server with `visualify serve <docs-path>`. You can preview your
61
- site in your browser on `http://localhost:3000`.
62
-
63
- ```bash
64
- visualify serve docs
65
- ```
66
-
67
- ?> For more use cases of `visualify.cli`, head over to the
68
- [CLI documentation](CLI.md).
69
-
70
- ## Manual initialization
71
-
72
- If you don't like `npm` or have trouble installing the tool, you can manually
73
- create `index.html`:
74
-
75
- ```html
76
- <!-- index.html -->
77
-
78
- <!DOCTYPE html>
79
- <html>
80
- <head>
81
- <meta name="viewport" content="width=device-width,initial-scale=1" />
82
- <meta charset="UTF-8" />
83
- </head>
84
- <body>
85
- <div id="root"></div>
86
- <script>
87
- $visualify = {
88
- //...
89
- };
90
- </script>
91
- <script src="https://visualify.pharmacy.arizona.edu/dist/visualify.js"></script>
92
- <!-- or -->
93
- <!-- script src="https://cdn.jsdelivr.net/npm/visualifyjs"></!-- -->
94
- </body>
95
- </html>
96
-
97
- ```
98
-
99
- ### Manually preview your site
100
-
101
- If you have `Node.js` installed on your system, you can easily use it to run a
102
- static server to preview your site.
103
-
104
- ```bash
105
- # install corresponding dependencies
106
- npm install -g serve
107
- serve -s ./docs
108
- ```
109
-
110
- If you have Python installed on your system, you can easily use it to run a
111
- static server to preview your site.
112
-
113
- ```python2
114
- cd docs && python -m SimpleHTTPServer 3000
115
- ```
116
-
117
- ```python3
118
- cd docs && python -m http.server 3000
119
- ```
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.