lightview 1.8.2 → 2.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 (264) hide show
  1. package/.agent/workflows/daisyui-component-migration.md +155 -0
  2. package/.codacy/cli.sh +149 -0
  3. package/.codacy/codacy.yaml +15 -0
  4. package/.github/instructions/codacy.instructions.md +72 -0
  5. package/.wranglerignore +21 -0
  6. package/README.md +1330 -19
  7. package/_headers +4 -0
  8. package/build.js +70 -0
  9. package/components/actions/button.js +151 -0
  10. package/components/actions/dropdown.js +120 -0
  11. package/components/actions/modal.js +146 -0
  12. package/components/actions/swap.js +118 -0
  13. package/components/daisyui.js +288 -0
  14. package/components/data-display/accordion.js +128 -0
  15. package/components/data-display/alert.js +112 -0
  16. package/components/data-display/avatar.js +170 -0
  17. package/components/data-display/badge.js +82 -0
  18. package/components/data-display/card.js +151 -0
  19. package/components/data-display/carousel.js +94 -0
  20. package/components/data-display/chart.js +220 -0
  21. package/components/data-display/chat.js +128 -0
  22. package/components/data-display/collapse.js +103 -0
  23. package/components/data-display/countdown.js +69 -0
  24. package/components/data-display/diff.js +111 -0
  25. package/components/data-display/kbd.js +65 -0
  26. package/components/data-display/loading.js +75 -0
  27. package/components/data-display/progress.js +79 -0
  28. package/components/data-display/radial-progress.js +88 -0
  29. package/components/data-display/skeleton.js +66 -0
  30. package/components/data-display/stats.js +159 -0
  31. package/components/data-display/table.js +146 -0
  32. package/components/data-display/timeline.js +146 -0
  33. package/components/data-display/toast.js +72 -0
  34. package/components/data-display/tooltip.js +74 -0
  35. package/components/data-input/checkbox.js +253 -0
  36. package/components/data-input/file-input.js +224 -0
  37. package/components/data-input/input.js +264 -0
  38. package/components/data-input/radio.js +338 -0
  39. package/components/data-input/range.js +204 -0
  40. package/components/data-input/rating.js +219 -0
  41. package/components/data-input/select.js +287 -0
  42. package/components/data-input/textarea.js +287 -0
  43. package/components/data-input/toggle.js +201 -0
  44. package/components/index.js +137 -0
  45. package/components/layout/divider.js +72 -0
  46. package/components/layout/drawer.js +142 -0
  47. package/components/layout/footer.js +100 -0
  48. package/components/layout/hero.js +109 -0
  49. package/components/layout/indicator.js +90 -0
  50. package/components/layout/join.js +78 -0
  51. package/components/layout/navbar.js +110 -0
  52. package/components/navigation/breadcrumbs.js +91 -0
  53. package/components/navigation/dock.js +103 -0
  54. package/components/navigation/menu.js +126 -0
  55. package/components/navigation/pagination.js +105 -0
  56. package/components/navigation/steps.js +89 -0
  57. package/components/navigation/tabs.css +177 -0
  58. package/components/navigation/tabs.js +123 -0
  59. package/components/theme/theme-switch.css +65 -0
  60. package/components/theme/theme-switch.js +177 -0
  61. package/docs/about.html +164 -0
  62. package/docs/api/computed.html +184 -0
  63. package/docs/api/effects.html +173 -0
  64. package/docs/api/elements.html +180 -0
  65. package/docs/api/enhance.html +225 -0
  66. package/docs/api/hypermedia.html +165 -0
  67. package/docs/api/index.html +178 -0
  68. package/docs/api/nav.html +18 -0
  69. package/docs/api/signals.html +136 -0
  70. package/docs/api/state.html +217 -0
  71. package/docs/assets/images/logo-favicon.svg +42 -0
  72. package/docs/assets/images/logo-static.svg +40 -0
  73. package/docs/assets/images/logo.svg +66 -0
  74. package/docs/assets/js/examplify.js +395 -0
  75. package/docs/assets/styles/site.css +1102 -0
  76. package/docs/assets/styles/themes.css +236 -0
  77. package/docs/components/accordion.html +439 -0
  78. package/docs/components/alert.html +528 -0
  79. package/docs/components/avatar.html +586 -0
  80. package/docs/components/badge.html +531 -0
  81. package/docs/components/breadcrumbs.html +278 -0
  82. package/docs/components/button.html +579 -0
  83. package/docs/components/card.html +561 -0
  84. package/docs/components/carousel.html +286 -0
  85. package/docs/components/chart-area.html +702 -0
  86. package/docs/components/chart-bar.html +782 -0
  87. package/docs/components/chart-column.html +735 -0
  88. package/docs/components/chart-line.html +794 -0
  89. package/docs/components/chart-pie.html +823 -0
  90. package/docs/components/chart.html +610 -15
  91. package/docs/components/chat.html +547 -0
  92. package/docs/components/checkbox.html +641 -0
  93. package/docs/components/collapse.html +536 -0
  94. package/docs/components/component-nav.html +53 -0
  95. package/docs/components/countdown.html +470 -0
  96. package/docs/components/diff.html +245 -0
  97. package/docs/components/divider.html +240 -0
  98. package/docs/components/dock.html +277 -0
  99. package/docs/components/drawer.html +515 -0
  100. package/docs/components/dropdown.html +479 -0
  101. package/docs/components/file-input.html +591 -0
  102. package/docs/components/footer.html +301 -0
  103. package/docs/components/gallery.html +504 -0
  104. package/docs/components/hero.html +264 -0
  105. package/docs/components/index.css +840 -0
  106. package/docs/components/index.html +735 -0
  107. package/docs/components/indicator.html +342 -0
  108. package/docs/components/input.html +644 -0
  109. package/docs/components/join.html +285 -0
  110. package/docs/components/kbd.html +322 -0
  111. package/docs/components/loading.html +521 -0
  112. package/docs/components/menu.html +461 -0
  113. package/docs/components/modal.html +639 -0
  114. package/docs/components/navbar.html +321 -0
  115. package/docs/components/pagination.html +279 -0
  116. package/docs/components/progress.html +514 -0
  117. package/docs/components/radial-progress.html +434 -0
  118. package/docs/components/radio.html +655 -0
  119. package/docs/components/range.html +611 -0
  120. package/docs/components/rating.html +642 -0
  121. package/docs/components/select.html +696 -0
  122. package/docs/components/sidebar-setup.js +93 -0
  123. package/docs/components/skeleton.html +447 -0
  124. package/docs/components/spinner.html +68 -0
  125. package/docs/components/stats.html +486 -0
  126. package/docs/components/steps.html +356 -0
  127. package/docs/components/swap.html +517 -0
  128. package/docs/components/switch.html +68 -0
  129. package/docs/components/table.html +668 -0
  130. package/docs/components/tabs.html +506 -0
  131. package/docs/components/text-input.html +68 -0
  132. package/docs/components/textarea.html +603 -0
  133. package/docs/components/timeline.html +485 -42
  134. package/docs/components/toast.html +474 -0
  135. package/docs/components/toggle.html +564 -0
  136. package/docs/components/tooltip.html +423 -0
  137. package/docs/examples/getting-started-example.html +40 -0
  138. package/docs/examples/index.html +93 -0
  139. package/docs/getting-started/index.html +739 -0
  140. package/docs/getting-started/reviews.html +23 -0
  141. package/docs/getting-started/reviews.odom +108 -0
  142. package/docs/getting-started/reviews.vdom +84 -0
  143. package/docs/index.html +132 -42
  144. package/docs/playground.html +416 -0
  145. package/docs/router.html +285 -0
  146. package/docs/styles/index.html +190 -0
  147. package/functions/_middleware.js +32 -0
  148. package/index.html +309 -0
  149. package/lightview-router.js +364 -0
  150. package/lightview-x.js +1577 -0
  151. package/lightview.js +659 -1200
  152. package/lightview.js.backup +793 -0
  153. package/middleware/locale.js +25 -0
  154. package/middleware/markdown.js +44 -0
  155. package/middleware/notFound.js +37 -0
  156. package/package.json +27 -41
  157. package/watch.js +92 -0
  158. package/wrangler.toml +12 -0
  159. package/.idea/lightview.iml +0 -12
  160. package/.idea/modules.xml +0 -8
  161. package/.idea/vcs.xml +0 -6
  162. package/LICENSE +0 -21
  163. package/codepen-no-tabs-embed.css +0 -2
  164. package/docs/CNAME +0 -1
  165. package/docs/api.html +0 -674
  166. package/docs/blank.html +0 -10
  167. package/docs/comparedto.html +0 -89
  168. package/docs/components/chart-repl.html +0 -69
  169. package/docs/components/components.js +0 -113
  170. package/docs/components/contents.html +0 -17
  171. package/docs/components/gantt-repl.html +0 -61
  172. package/docs/components/gantt.html +0 -42
  173. package/docs/components/gauge-repl.html +0 -66
  174. package/docs/components/gauge.html +0 -20
  175. package/docs/components/orgchart-repl.html +0 -64
  176. package/docs/components/orgchart.html +0 -41
  177. package/docs/components/repl-as-src.html +0 -17
  178. package/docs/components/repl-repl.html +0 -95
  179. package/docs/components/repl.html +0 -527
  180. package/docs/components/timeline-repl.html +0 -72
  181. package/docs/components.html +0 -14
  182. package/docs/css/highlightjs.min.css +0 -9
  183. package/docs/css/tutorial.css +0 -35
  184. package/docs/examples/anchor.html +0 -11
  185. package/docs/examples/chart.html +0 -34
  186. package/docs/examples/counter.html +0 -26
  187. package/docs/examples/counter.test.mjs +0 -47
  188. package/docs/examples/counter2.html +0 -26
  189. package/docs/examples/directives.html +0 -79
  190. package/docs/examples/foreign.html +0 -50
  191. package/docs/examples/forgeinform.html +0 -98
  192. package/docs/examples/form.html +0 -61
  193. package/docs/examples/gauge.html +0 -18
  194. package/docs/examples/invalid-template-literals.html +0 -44
  195. package/docs/examples/medium/remote.html +0 -60
  196. package/docs/examples/message.html +0 -18
  197. package/docs/examples/nested.html +0 -11
  198. package/docs/examples/object-bound-form.html +0 -34
  199. package/docs/examples/remote-server.js +0 -51
  200. package/docs/examples/remote.html +0 -34
  201. package/docs/examples/remote.json +0 -1
  202. package/docs/examples/scratch.html +0 -69
  203. package/docs/examples/sensors/index.html +0 -44
  204. package/docs/examples/sensors/sensor-server.js +0 -30
  205. package/docs/examples/shared.html +0 -41
  206. package/docs/examples/template.html +0 -33
  207. package/docs/examples/timeline.html +0 -21
  208. package/docs/examples/todo.html +0 -40
  209. package/docs/examples/top.html +0 -10
  210. package/docs/examples/types.html +0 -94
  211. package/docs/examples/xor.html +0 -62
  212. package/docs/examples.html +0 -25
  213. package/docs/javascript/codejar.min.js +0 -8
  214. package/docs/javascript/highlightjs.min.js +0 -1173
  215. package/docs/javascript/isomorphic-git.js +0 -9
  216. package/docs/javascript/json5.min.js +0 -1
  217. package/docs/javascript/lightning-fs.js +0 -1
  218. package/docs/javascript/lightview.js +0 -1285
  219. package/docs/javascript/marked.min.js +0 -6
  220. package/docs/javascript/peerjs.min.js +0 -70
  221. package/docs/javascript/turndown.js +0 -973
  222. package/docs/javascript/types.js +0 -606
  223. package/docs/javascript/utils.js +0 -45
  224. package/docs/lightview.html +0 -63
  225. package/docs/old_index.html +0 -965
  226. package/docs/old_index.md +0 -1132
  227. package/docs/slidein.html +0 -51
  228. package/docs/tutorial/0-getting-started.html +0 -67
  229. package/docs/tutorial/1-intro-to-variables.html +0 -103
  230. package/docs/tutorial/10-template-components.html +0 -80
  231. package/docs/tutorial/11-linked-components.html +0 -76
  232. package/docs/tutorial/12-imported-components.html +0 -67
  233. package/docs/tutorial/13-input-binding.html +0 -94
  234. package/docs/tutorial/14-automatic-variable-creation.html +0 -74
  235. package/docs/tutorial/15-form-binding.html +0 -110
  236. package/docs/tutorial/16-if-directive.html +0 -60
  237. package/docs/tutorial/17-loop-directives.html +0 -83
  238. package/docs/tutorial/18-sanitizing-and-escaping-input.html +0 -79
  239. package/docs/tutorial/2-imported-and-exported-variables.html +0 -80
  240. package/docs/tutorial/3-data-types.html +0 -89
  241. package/docs/tutorial/4-extended-data-types.html +0 -83
  242. package/docs/tutorial/5-extended-functional-types.html +0 -96
  243. package/docs/tutorial/5.1-extended-functional-types.html +0 -79
  244. package/docs/tutorial/5.2-extended-functional-types.html +0 -70
  245. package/docs/tutorial/6-conventional-javascript.html +0 -75
  246. package/docs/tutorial/7-monitoring-with-observers.html +0 -107
  247. package/docs/tutorial/8-event-listeners.html +0 -65
  248. package/docs/tutorial/9-intro-to-components.html +0 -91
  249. package/docs/tutorial/contents.html +0 -32
  250. package/docs/tutorial/my-component.html +0 -29
  251. package/docs/tutorial/remote-value.json +0 -4
  252. package/docs/websiterepl.html +0 -46
  253. package/jest-puppeteer.config.js +0 -5
  254. package/jest.config.json +0 -12
  255. package/lightview.min.js +0 -1
  256. package/lightview_good.js +0 -1267
  257. package/lightview_optimized.js +0 -1274
  258. package/repl_hold.html +0 -320
  259. package/test/basic.html +0 -104
  260. package/test/basic.test.mjs +0 -315
  261. package/test/extended.html +0 -29
  262. package/test/extended.test.mjs +0 -448
  263. package/types.js +0 -607
  264. package/unsplash.key +0 -1
package/docs/components/chart.html CHANGED
@@ -1,17 +1,612 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Lightview:Component:Chart</title>
6
- <script src="../javascript/json5.min.js"></script>
7
- </head>
8
- <body>
9
- <div id="target"></div>
10
- <script id="lightview">
11
- (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
12
- const {chart} = await import(new URL("./components.js", this.componentBaseURI).href);
13
- chart(self);
1
+ <!-- SEO-friendly SPA Shim -->
2
+ <script src="/lightview-router.js"></script>
3
+ <script>
4
+ if (window.LightviewRouter) {
5
+ LightviewRouter.base('/index.html');
14
6
  }
15
7
  </script>
16
- </body>
17
- </html>
8
+ <script type="module" src="../../components/data-display/chart.js"></script>
9
+
10
+ <!-- Load the page-specific stylesheet -->
11
+ <link rel="stylesheet" href="./index.css">
12
+
13
+ <!-- Gallery Structure -->
14
+ <div class="gallery-page">
15
+ <div class="gallery-layout">
16
+ <!-- Sidebar Overlay -->
17
+ <div id="sidebar-overlay" class="sidebar-overlay"></div>
18
+
19
+ <!-- Sidebar -->
20
+ <div id="gallery-sidebar" class="gallery-sidebar" style="visibility: hidden" src="./component-nav.html"></div>
21
+
22
+ <!-- Main Content -->
23
+ <div id="gallery-main" class="gallery-main">
24
+ <!-- Header Container -->
25
+ <div
26
+ style="position: sticky; top: 0; z-index: 30; background: var(--gallery-surface); border-bottom: 1px solid var(--gallery-border); backdrop-filter: blur(8px);">
27
+ <!-- Breadcrumbs Row -->
28
+ <div style="padding: 0.75rem 1.5rem 0;">
29
+ <script>
30
+ (() => {
31
+ const { Breadcrumbs } = Lightview.tags;
32
+ const breadcrumbs = Breadcrumbs({
33
+ id: 'page-breadcrumbs',
34
+ items: [
35
+ { label: 'Components', href: '/docs/components' },
36
+ { label: 'Chart' }
37
+ ]
38
+ });
39
+ document.currentScript.replaceWith(breadcrumbs.domEl);
40
+ })();
41
+ </script>
42
+ </div>
43
+ <!-- Title Row -->
44
+ <div class="gallery-header"
45
+ style="border-bottom: none; height: auto; padding-top: 0.5rem; padding-bottom: 0.75rem;">
46
+ <button id="toggle-btn" class="toggle-btn" aria-label="Toggle Sidebar">
47
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="toggle-icon"
48
+ style="stroke: currentColor; stroke-width: 2;">
49
+ <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
50
+ <path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7" />
51
+ </svg>
52
+ </button>
53
+ <h1 class="gallery-title">Chart</h1>
54
+ </div>
55
+ </div>
56
+
57
+ <!-- Content -->
58
+ <div class="gallery-content">
59
+ <div class="section-content" style="max-width: 1000px;">
60
+ <p class="text-lg" style="opacity: 0.7; margin-bottom: 1.5rem;">
61
+ Data visualization components powered by <a href="https://chartscss.org/" target="_blank"
62
+ class="link link-primary">Charts.css</a>.
63
+ Use CSS classes to turn your data into beautiful charts.
64
+ </p>
65
+
66
+
67
+
68
+
69
+
70
+ <!-- Bar Chart -->
71
+ <h2 class="text-xl font-bold mb-4 flex items-center gap-2">
72
+ Bar Chart
73
+ <a href="/docs/components/chart-bar" class="info-link" aria-label="View Bar Chart Details">
74
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="info-icon"
75
+ style="stroke: currentColor; stroke-width: 2;">
76
+ <path stroke-linecap="round" stroke-linejoin="round"
77
+ d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
78
+ </svg>
79
+ </a>
80
+ </h2>
81
+ <div class="card bg-base-100 shadow-sm mb-8">
82
+ <div class="card-body">
83
+ <div id="bar-chart-container" style="width: 100%; max-width: 600px; margin: 0 auto;">
84
+ <table
85
+ class="charts-css bar show-labels show-data-on-hover show-primary-axis data-spacing-5">
86
+ <caption>Front-end Frameworks</caption>
87
+ <thead>
88
+ <tr>
89
+ <th scope="col"> Framework </th>
90
+ <th scope="col"> Progress </th>
91
+ </tr>
92
+ </thead>
93
+ <tbody>
94
+ <tr>
95
+ <th scope="row"> React </th>
96
+ <td style="--size: 0.8;"> <span class="data"> 80% </span> <span
97
+ class="tooltip"> React:
98
+ 80% </span> </td>
99
+ </tr>
100
+ <tr>
101
+ <th scope="row"> Vue </th>
102
+ <td style="--size: 0.6;"> <span class="data"> 60% </span> <span
103
+ class="tooltip"> Vue:
104
+ 60% </span> </td>
105
+ </tr>
106
+ <tr>
107
+ <th scope="row"> Svelte </th>
108
+ <td style="--size: 0.4;"> <span class="data"> 40% </span> <span
109
+ class="tooltip"> Svelte:
110
+ 40% </span> </td>
111
+ </tr>
112
+ <tr>
113
+ <th scope="row"> Lightview </th>
114
+ <td style="--size: 1.0; --color: #7480ff;"> <span class="data"> 100% </span>
115
+ <span class="tooltip"> Lightview: 100% </span>
116
+ </td>
117
+ </tr>
118
+ </tbody>
119
+ </table>
120
+ </div>
121
+ <div class="mt-4">
122
+ <pre class="bg-base-300 p-4 rounded-lg text-sm overflow-x-auto"><code>Chart({ type: 'bar', labels: true, dataOnHover: true, primaryAxis: true, spacing: 5, heading: 'Front-end Frameworks' },
123
+ /* Head is for screen reader use and is not visible */
124
+ Chart.Head({},
125
+ Chart.Row({},
126
+ Chart.Label({ scope: 'col' }, 'Framework'),
127
+ Chart.Label({ scope: 'col' }, 'Progress')
128
+ )
129
+ ),
130
+ Chart.Body({},
131
+ Chart.Row({},
132
+ Chart.Label({}, 'React'),
133
+ Chart.Data({ value: 0.8, tooltip: 'React: 80%' }, $('span', { class: 'data' }, '80%'))
134
+ ),
135
+ Chart.Row({},
136
+ Chart.Label({}, 'Vue'),
137
+ Chart.Data({ value: 0.6, tooltip: 'Vue: 60%' }, $('span', { class: 'data' }, '60%'))
138
+ ),
139
+ Chart.Row({},
140
+ Chart.Label({}, 'Svelte'),
141
+ Chart.Data({ value: 0.4, tooltip: 'Svelte: 40%' }, $('span', { class: 'data' }, '40%'))
142
+ ),
143
+ Chart.Row({},
144
+ Chart.Label({}, 'Lightview'),
145
+ Chart.Data({ value: 1.0, color: '#7480ff', tooltip: 'Lightview: 100%' }, $('span', { class: 'data' }, '100%'))
146
+ )
147
+ )
148
+ )</code></pre>
149
+ </div>
150
+ </div>
151
+ </div>
152
+
153
+ <!-- Column Chart -->
154
+ <h2 class="text-xl font-bold mb-4 flex items-center gap-2">
155
+ Column Chart
156
+ <a href="/docs/components/chart-column" class="info-link"
157
+ aria-label="View Column Chart Details">
158
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="info-icon"
159
+ style="stroke: currentColor; stroke-width: 2;">
160
+ <path stroke-linecap="round" stroke-linejoin="round"
161
+ d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
162
+ </svg>
163
+ </a>
164
+ </h2>
165
+ <div class="card bg-base-100 shadow-sm mb-8">
166
+ <div class="card-body">
167
+ <div id="column-chart-container"
168
+ style="width: 100%; max-width: 600px; height: 300px; margin: 0 auto;">
169
+ <table
170
+ class="charts-css column show-labels show-primary-axis data-spacing-10 show-heading">
171
+ <caption>Monthly Revenue</caption>
172
+ <thead>
173
+ <tr>
174
+ <th scope="col"> Month </th>
175
+ <th scope="col"> Revenue </th>
176
+ </tr>
177
+ </thead>
178
+ <tbody>
179
+ <tr>
180
+ <th scope="row"> Jan </th>
181
+ <td style="--size: 0.2;"> <span class="data"> $20K </span> </td>
182
+ </tr>
183
+ <tr>
184
+ <th scope="row"> Feb </th>
185
+ <td style="--size: 0.4;"> <span class="data"> $40K </span> </td>
186
+ </tr>
187
+ <tr>
188
+ <th scope="row"> Mar </th>
189
+ <td style="--size: 0.6;"> <span class="data"> $60K </span> </td>
190
+ </tr>
191
+ <tr>
192
+ <th scope="row"> Apr </th>
193
+ <td style="--size: 0.8;"> <span class="data"> $80K </span> </td>
194
+ </tr>
195
+ <tr>
196
+ <th scope="row"> May </th>
197
+ <td style="--size: 0.5;"> <span class="data"> $50K </span> </td>
198
+ </tr>
199
+ </tbody>
200
+ </table>
201
+ </div>
202
+ <div class="mt-4">
203
+ <pre class="bg-base-300 p-4 rounded-lg text-sm overflow-x-auto"><code>Chart({ type: 'column', labels: true, primaryAxis: true, spacing: 10, heading: 'Monthly Revenue' },
204
+ /* Head is for screen reader use and is not visible */
205
+ Chart.Head({},
206
+ Chart.Row({},
207
+ Chart.Label({ scope: 'col' }, 'Month'),
208
+ Chart.Label({ scope: 'col' }, 'Revenue')
209
+ )
210
+ ),
211
+ Chart.Body({},
212
+ Chart.Row({},
213
+ Chart.Label({}, 'Jan'),
214
+ Chart.Data({ value: 0.2 }, $('span', { class: 'data' }, '$20K'))
215
+ ),
216
+ Chart.Row({},
217
+ Chart.Label({}, 'Feb'),
218
+ Chart.Data({ value: 0.4 }, $('span', { class: 'data' }, '$40K'))
219
+ ),
220
+ Chart.Row({},
221
+ Chart.Label({}, 'Mar'),
222
+ Chart.Data({ value: 0.6 }, $('span', { class: 'data' }, '$60K'))
223
+ ),
224
+ Chart.Row({},
225
+ Chart.Label({}, 'Apr'),
226
+ Chart.Data({ value: 0.8 }, $('span', { class: 'data' }, '$80K'))
227
+ ),
228
+ Chart.Row({},
229
+ Chart.Label({}, 'May'),
230
+ Chart.Data({ value: 0.5 }, $('span', { class: 'data' }, '$50K'))
231
+ )
232
+ )
233
+ )</code></pre>
234
+ </div>
235
+ </div>
236
+ </div>
237
+
238
+ <!-- Line Chart -->
239
+ <h2 class="text-xl font-bold mb-4 flex items-center gap-2">
240
+ Line Chart
241
+ <a href="/docs/components/chart-line" class="info-link" aria-label="View Line Chart Details">
242
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="info-icon"
243
+ style="stroke: currentColor; stroke-width: 2;">
244
+ <path stroke-linecap="round" stroke-linejoin="round"
245
+ d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
246
+ </svg>
247
+ </a>
248
+ </h2>
249
+ <div class="card bg-base-100 shadow-sm mb-8">
250
+ <div class="card-body">
251
+ <div id="line-chart-container"
252
+ style="width: 100%; max-width: 600px; height: 300px; margin: 0 auto;">
253
+ <table
254
+ class="charts-css line show-heading show-labels show-primary-axis show-10-secondary-axes">
255
+ <caption>Growth Trajectory</caption>
256
+ <thead>
257
+ <tr>
258
+ <th scope="col"> Year </th>
259
+ <th scope="col"> Value </th>
260
+ </tr>
261
+ </thead>
262
+ <tbody>
263
+ <tr>
264
+ <th scope="row"> 2018 </th>
265
+ <td style="--start: 0.1; --size: 0.3;"> <span class="data"> 30% </span>
266
+ </td>
267
+ </tr>
268
+ <tr>
269
+ <th scope="row"> 2019 </th>
270
+ <td style="--start: 0.3; --size: 0.5;"> <span class="data"> 50% </span>
271
+ </td>
272
+ </tr>
273
+ <tr>
274
+ <th scope="row"> 2020 </th>
275
+ <td style="--start: 0.5; --size: 0.4;"> <span class="data"> 40% </span>
276
+ </td>
277
+ </tr>
278
+ <tr>
279
+ <th scope="row"> 2021 </th>
280
+ <td style="--start: 0.4; --size: 0.8;"> <span class="data"> 80% </span>
281
+ </td>
282
+ </tr>
283
+ <tr>
284
+ <th scope="row"> 2022 </th>
285
+ <td style="--start: 0.8; --size: 0.9;"> <span class="data"> 90% </span>
286
+ </td>
287
+ </tr>
288
+ </tbody>
289
+ </table>
290
+ </div>
291
+ <div class="mt-4">
292
+ <pre class="bg-base-300 p-4 rounded-lg text-sm overflow-x-auto"><code>Chart({ type: 'line', heading: 'Growth Trajectory', labels: true, primaryAxis: true, secondaryAxis: true },
293
+ /* Head is for screen reader use and is not visible */
294
+ Chart.Head({},
295
+ Chart.Row({},
296
+ Chart.Label({ scope: 'col' }, 'Year'),
297
+ Chart.Label({ scope: 'col' }, 'Value')
298
+ )
299
+ ),
300
+ Chart.Body({},
301
+ Chart.Row({},
302
+ Chart.Label({}, '2018'),
303
+ Chart.Data({ start: 0.1, value: 0.3 }, $('span', { class: 'data' }, '30%'))
304
+ ),
305
+ Chart.Row({},
306
+ Chart.Label({}, '2019'),
307
+ Chart.Data({ start: 0.3, value: 0.5 }, $('span', { class: 'data' }, '50%'))
308
+ ),
309
+ Chart.Row({},
310
+ Chart.Label({}, '2020'),
311
+ Chart.Data({ start: 0.5, value: 0.4 }, $('span', { class: 'data' }, '40%'))
312
+ ),
313
+ Chart.Row({},
314
+ Chart.Label({}, '2021'),
315
+ Chart.Data({ start: 0.4, value: 0.8 }, $('span', { class: 'data' }, '80%'))
316
+ ),
317
+ Chart.Row({},
318
+ Chart.Label({}, '2022'),
319
+ Chart.Data({ start: 0.8, value: 0.9 }, $('span', { class: 'data' }, '90%'))
320
+ )
321
+ )
322
+ )</code></pre>
323
+ </div>
324
+ </div>
325
+ </div>
326
+
327
+ <!-- Area Chart -->
328
+ <h2 class="text-xl font-bold mb-4 flex items-center gap-2">
329
+ Area Chart
330
+ <a href="/docs/components/chart-area" class="info-link" aria-label="View Area Chart Details">
331
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="info-icon"
332
+ style="stroke: currentColor; stroke-width: 2;">
333
+ <path stroke-linecap="round" stroke-linejoin="round"
334
+ d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
335
+ </svg>
336
+ </a>
337
+ </h2>
338
+ <div class="card bg-base-100 shadow-sm mb-8">
339
+ <div class="card-body">
340
+ <div id="area-chart-container"
341
+ style="width: 100%; max-width: 600px; height: 300px; margin: 0 auto;">
342
+ <table class="charts-css area show-labels show-primary-axis">
343
+ <caption>Server Load</caption>
344
+ <thead>
345
+ <tr>
346
+ <th scope="col"> Time </th>
347
+ <th scope="col"> Load </th>
348
+ </tr>
349
+ </thead>
350
+ <tbody>
351
+ <tr>
352
+ <th scope="row"> 00:00 </th>
353
+ <td style="--start: 0.2; --size: 0.4;"></td>
354
+ </tr>
355
+ <tr>
356
+ <th scope="row"> 04:00 </th>
357
+ <td style="--start: 0.4; --size: 0.8;"></td>
358
+ </tr>
359
+ <tr>
360
+ <th scope="row"> 08:00 </th>
361
+ <td style="--start: 0.8; --size: 0.6;"></td>
362
+ </tr>
363
+ <tr>
364
+ <th scope="row"> 12:00 </th>
365
+ <td style="--start: 0.6; --size: 0.9;"></td>
366
+ </tr>
367
+ <tr>
368
+ <th scope="row"> 16:00 </th>
369
+ <td style="--start: 0.9; --size: 0.5;"></td>
370
+ </tr>
371
+ </tbody>
372
+ </table>
373
+ </div>
374
+ <div class="mt-4">
375
+ <pre class="bg-base-300 p-4 rounded-lg text-sm overflow-x-auto"><code>Chart({ type: 'area', labels: true, primaryAxis: true, heading: 'Server Load' },
376
+ /* Head is for screen reader use and is not visible */
377
+ Chart.Head({},
378
+ Chart.Row({},
379
+ Chart.Label({ scope: 'col' }, 'Time'),
380
+ Chart.Label({ scope: 'col' }, 'Load')
381
+ )
382
+ ),
383
+ Chart.Body({},
384
+ Chart.Row({},
385
+ Chart.Label({}, '00:00'),
386
+ Chart.Data({ start: 0.2, value: 0.4 })
387
+ ),
388
+ Chart.Row({},
389
+ Chart.Label({}, '04:00'),
390
+ Chart.Data({ start: 0.4, value: 0.8 })
391
+ ),
392
+ Chart.Row({},
393
+ Chart.Label({}, '08:00'),
394
+ Chart.Data({ start: 0.8, value: 0.6 })
395
+ ),
396
+ Chart.Row({},
397
+ Chart.Label({}, '12:00'),
398
+ Chart.Data({ start: 0.6, value: 0.9 })
399
+ ),
400
+ Chart.Row({},
401
+ Chart.Label({}, '16:00'),
402
+ Chart.Data({ start: 0.9, value: 0.5 })
403
+ )
404
+ )
405
+ )</code></pre>
406
+ </div>
407
+ </div>
408
+ </div>
409
+
410
+ <!-- Pie Chart -->
411
+ <h2 class="text-xl font-bold mb-4 flex items-center gap-2">
412
+ Pie Chart
413
+ <a href="/docs/components/chart-pie" class="info-link" aria-label="View Pie Chart Details">
414
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="info-icon"
415
+ style="stroke: currentColor; stroke-width: 2;">
416
+ <path stroke-linecap="round" stroke-linejoin="round"
417
+ d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
418
+ </svg>
419
+ </a>
420
+ </h2>
421
+ <div class="card bg-base-100 shadow-sm mb-8">
422
+ <div class="card-body">
423
+ <div id="pie-chart-container"
424
+ style="width: 100%; max-width: 300px; margin: 0 auto; aspect-ratio: 1 / 1;">
425
+ <table class="charts-css pie show-labels data-spacing-2">
426
+ <caption>Browser Market Share</caption>
427
+ <thead>
428
+ <tr>
429
+ <th scope="col"> Browser </th>
430
+ <th scope="col"> Share </th>
431
+ </tr>
432
+ </thead>
433
+ <tbody>
434
+ <tr>
435
+ <th scope="row"> Chrome </th>
436
+ <td style="--start: 0.0; --end: 0.6; --color: #4CAF50;"> <span class="data">
437
+ 60%
438
+ </span> </td>
439
+ </tr>
440
+ <tr>
441
+ <th scope="row"> Firefox </th>
442
+ <td style="--start: 0.6; --end: 0.85; --color: #F44336;"> <span
443
+ class="data"> 25%
444
+ </span> </td>
445
+ </tr>
446
+ <tr>
447
+ <th scope="row"> Safari </th>
448
+ <td style="--start: 0.85; --end: 1.0; --color: #2196F3;"> <span
449
+ class="data"> 15%
450
+ </span> </td>
451
+ </tr>
452
+ </tbody>
453
+ </table>
454
+ </div>
455
+ <p class="text-sm opacity-70 mt-4">
456
+ <strong>Note:</strong> For Pie charts, use <code>--start</code> and <code>--end</code>
457
+ (not <code>--size</code>).
458
+ Each segment's <code>--start</code> should equal the previous segment's
459
+ <code>--end</code>.
460
+ The <code>--end</code> value is <code>--start</code> plus the segment's proportion (0.0
461
+ to 1.0).
462
+ </p>
463
+ <div class="mt-4">
464
+ <pre class="bg-base-300 p-4 rounded-lg text-sm overflow-x-auto"><code>Chart({ type: 'pie', labels: true, spacing: 2, heading: 'Browser Market Share' },
465
+ Chart.Body({},
466
+ Chart.Row({},
467
+ Chart.Label({}, 'Chrome'),
468
+ Chart.Data({ start: 0.0, end: 0.6, color: '#4CAF50' }, $('span', { class: 'data' }, '60%'))
469
+ ),
470
+ Chart.Row({},
471
+ Chart.Label({}, 'Firefox'),
472
+ Chart.Data({ start: 0.6, end: 0.85, color: '#F44336' }, $('span', { class: 'data' }, '25%'))
473
+ ),
474
+ Chart.Row({},
475
+ Chart.Label({}, 'Safari'),
476
+ Chart.Data({ start: 0.85, end: 1.0, color: '#2196F3' }, $('span', { class: 'data' }, '15%'))
477
+ )
478
+ )
479
+ )</code></pre>
480
+ </div>
481
+ </div>
482
+ </div>
483
+
484
+ <!-- Props Table -->
485
+ <h2 class="text-xl font-bold mb-4">Props</h2>
486
+ <div class="overflow-x-auto mb-8">
487
+ <table class="table table-zebra">
488
+ <thead>
489
+ <tr>
490
+ <th>Prop</th>
491
+ <th>Type</th>
492
+ <th>Default</th>
493
+ <th>Description</th>
494
+ </tr>
495
+ </thead>
496
+ <tbody>
497
+ <tr>
498
+ <td><code>type</code></td>
499
+ <td>string</td>
500
+ <td>'bar'</td>
501
+ <td>Type of chart: 'bar', 'column', 'line', 'area', 'pie'</td>
502
+ </tr>
503
+ <tr>
504
+ <td><code>heading</code></td>
505
+ <td>string</td>
506
+ <td>-</td>
507
+ <td>Caption for the chart table</td>
508
+ </tr>
509
+ <tr>
510
+ <td><code>labels</code></td>
511
+ <td>boolean</td>
512
+ <td>false</td>
513
+ <td>Show axis labels (.show-labels)</td>
514
+ </tr>
515
+ <tr>
516
+ <td><code>dataOnHover</code></td>
517
+ <td>boolean</td>
518
+ <td>false</td>
519
+ <td>Show data tooltip on hover (.show-data-on-hover)</td>
520
+ </tr>
521
+ <tr>
522
+ <td><code>primaryAxis</code></td>
523
+ <td>boolean</td>
524
+ <td>false</td>
525
+ <td>Show primary axis lines (.show-primary-axis)</td>
526
+ </tr>
527
+ <tr>
528
+ <td><code>secondaryAxis</code></td>
529
+ <td>boolean|string</td>
530
+ <td>false</td>
531
+ <td>Show secondary axes lines (.show-10-secondary-axes or custom class)</td>
532
+ </tr>
533
+ <tr>
534
+ <td><code>spacing</code></td>
535
+ <td>number</td>
536
+ <td>-</td>
537
+ <td>Gap between data points (1-20) (.data-spacing-N)</td>
538
+ </tr>
539
+ <tr>
540
+ <td><code>reverse</code></td>
541
+ <td>boolean</td>
542
+ <td>false</td>
543
+ <td>Reverse chart orientation (.reverse)</td>
544
+ </tr>
545
+ <tr>
546
+ <td><code>multiple</code></td>
547
+ <td>boolean</td>
548
+ <td>false</td>
549
+ <td>Enable multiple datasets mode (.multiple)</td>
550
+ </tr>
551
+ <tr>
552
+ <td><code>stacked</code></td>
553
+ <td>boolean</td>
554
+ <td>false</td>
555
+ <td>Enable stacked mode for bar/column charts (.stacked)</td>
556
+ </tr>
557
+ </tbody>
558
+ </table>
559
+ </div>
560
+
561
+ <h3 class="text-lg font-bold mb-4">Chart.Data Props</h3>
562
+ <p class="mb-4 opacity-70">Properties available for the <code>Chart.Data</code> subcomponent.</p>
563
+ <div class="overflow-x-auto mb-8">
564
+ <table class="table table-zebra">
565
+ <thead>
566
+ <tr>
567
+ <th>Prop</th>
568
+ <th>Type</th>
569
+ <th>Description</th>
570
+ </tr>
571
+ </thead>
572
+ <tbody>
573
+ <tr>
574
+ <td><code>value</code> (or <code>size</code>)</td>
575
+ <td>number</td>
576
+ <td>Value of the data point (0.0 - 1.0). Maps to <code>--size</code>. <strong>Use
577
+ for bar,
578
+ column, line, and area charts.</strong></td>
579
+ </tr>
580
+ <tr>
581
+ <td><code>start</code></td>
582
+ <td>number</td>
583
+ <td>Start position (0.0 - 1.0). Used for stacked bars, line/area charts, and pie
584
+ segments.
585
+ Maps to
586
+ <code>--start</code>.
587
+ </td>
588
+ </tr>
589
+ <tr>
590
+ <td><code>end</code></td>
591
+ <td>number</td>
592
+ <td>End position (0.0 - 1.0). Maps to <code>--end</code>. <strong>Required for pie
593
+ charts instead of <code>value</code>.</strong></td>
594
+ </tr>
595
+ <tr>
596
+ <td><code>color</code></td>
597
+ <td>string</td>
598
+ <td>CSS color value for the data segment. Maps to <code>--color</code>.</td>
599
+ </tr>
600
+ <tr>
601
+ <td><code>tooltip</code></td>
602
+ <td>string</td>
603
+ <td>Text to display in the standard tooltip span.</td>
604
+ </tr>
605
+ </tbody>
606
+ </table>
607
+ </div>
608
+ </div>
609
+ </div>
610
+ </div>
611
+ </div>
612
+ </div>