lightview 2.3.7 → 2.4.4
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.
- package/.gemini/CODE_ANALYSIS_AND_IMPROVEMENT_PLAN.md +56 -0
- package/AI-GUIDANCE.md +259 -0
- package/README.md +35 -0
- package/components/data-display/diff.js +36 -4
- package/docs/api/hypermedia.html +75 -5
- package/docs/api/index.html +3 -3
- package/docs/api/nav.html +0 -16
- package/docs/articles/html-vs-json-partials.md +102 -0
- package/docs/articles/lightview-vs-htmx.md +610 -0
- package/docs/benchmarks/tagged-fragment.js +36 -0
- package/docs/cdom.html +6 -5
- package/docs/components/chart.html +157 -210
- package/docs/components/component-nav.html +1 -1
- package/docs/components/diff.html +33 -21
- package/docs/components/gallery.html +107 -4
- package/docs/components/index.css +18 -3
- package/docs/components/index.html +20 -9
- package/docs/dom-benchmark.html +644 -0
- package/docs/getting-started/index.html +2 -2
- package/docs/hypermedia/index.html +391 -0
- package/docs/hypermedia/nav.html +17 -0
- package/docs/index.html +128 -18
- package/index.html +59 -10
- package/lightview-all.js +223 -67
- package/lightview-cdom.js +1 -2
- package/lightview-x.js +144 -13
- package/lightview.js +85 -277
- package/package.json +2 -2
- package/src/lightview-cdom.js +1 -5
- package/src/lightview-x.js +158 -27
- package/src/lightview.js +94 -60
- package/1769196538097-package.json +0 -43
- package/build_tmp/lightview-router.js +0 -185
- package/build_tmp/lightview-x.js +0 -1608
- package/build_tmp/lightview.js +0 -932
- package/docs/articles/calculator-no-javascript-hackernoon.md +0 -283
- package/docs/articles/calculator-no-javascript.md +0 -290
- package/docs/articles/part1-reference.md +0 -236
- package/lightview.js.bak +0 -1
- package/test-xpath.html +0 -63
- package/test_error.txt +0 -0
- package/test_output.txt +0 -0
- package/test_output_full.txt +0 -0
|
@@ -71,54 +71,41 @@
|
|
|
71
71
|
<h2 class="text-xl font-bold mb-4 flex items-center gap-2">
|
|
72
72
|
Bar Chart
|
|
73
73
|
<a href="/docs/components/chart-bar" class="info-link" aria-label="View Bar Chart Details">
|
|
74
|
-
<
|
|
75
|
-
style="
|
|
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>
|
|
74
|
+
<span class="info-icon-char"
|
|
75
|
+
style="font-size: 1.2rem; font-weight: bold; font-style: normal;">ⓘ</span>
|
|
79
76
|
</a>
|
|
80
77
|
</h2>
|
|
81
78
|
<div class="card bg-base-100 shadow-sm mb-8">
|
|
82
79
|
<div class="card-body">
|
|
83
80
|
<div id="bar-chart-container" style="width: 100%; max-width: 600px; margin: 0 auto;">
|
|
84
|
-
<
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
40% </span> </td>
|
|
110
|
-
</tr>
|
|
111
|
-
<tr>
|
|
112
|
-
<th scope="row"> Lightview </th>
|
|
113
|
-
<td style="--size: 1.0; --color: #7480ff;"> <span class="data"> 100% </span>
|
|
114
|
-
<span class="tooltip"> Lightview: 100% </span>
|
|
115
|
-
</td>
|
|
116
|
-
</tr>
|
|
117
|
-
</tbody>
|
|
118
|
-
</table>
|
|
81
|
+
<div class="chart-placeholder"
|
|
82
|
+
style="height: 200px; display: flex; align-items: center; justify-content: center; background: var(--gallery-bg-alt); border-radius: 8px; opacity: 0.5;">
|
|
83
|
+
Loading Chart...
|
|
84
|
+
</div>
|
|
85
|
+
<script>
|
|
86
|
+
(function () {
|
|
87
|
+
const run = () => {
|
|
88
|
+
const code = document.getElementById('code-bar-chart').textContent;
|
|
89
|
+
const script = document.createElement('script');
|
|
90
|
+
script.type = 'module';
|
|
91
|
+
script.textContent = `
|
|
92
|
+
await import('/components/data-display/chart.js');
|
|
93
|
+
const { tags } = Lightview;
|
|
94
|
+
const { Chart, span } = tags; const chart =`
|
|
95
|
+
+ code +
|
|
96
|
+
`; document.getElementById('bar-chart-container').replaceChildren(chart.domEl)`;
|
|
97
|
+
document.body.appendChild(script);
|
|
98
|
+
};
|
|
99
|
+
if (document.readyState === 'loading') {
|
|
100
|
+
window.addEventListener('load', run);
|
|
101
|
+
} else {
|
|
102
|
+
run();
|
|
103
|
+
}
|
|
104
|
+
})();
|
|
105
|
+
</script>
|
|
119
106
|
</div>
|
|
120
107
|
<div class="mt-4">
|
|
121
|
-
<pre class="bg-base-300 p-4 rounded-lg text-sm overflow-x-auto"><code>Chart({ type: 'bar', labels: true, dataOnHover: true, primaryAxis: true, heading: 'Front-end Frameworks' },
|
|
108
|
+
<pre class="bg-base-300 p-4 rounded-lg text-sm overflow-x-auto"><code id="code-bar-chart">Chart({ type: 'bar', labels: true, dataOnHover: true, primaryAxis: true, heading: 'Front-end Frameworks' },
|
|
122
109
|
/* Head is for screen reader use and is not visible */
|
|
123
110
|
Chart.Head({},
|
|
124
111
|
Chart.Row({},
|
|
@@ -129,19 +116,19 @@
|
|
|
129
116
|
Chart.Body({},
|
|
130
117
|
Chart.Row({},
|
|
131
118
|
Chart.Label({}, 'React'),
|
|
132
|
-
Chart.Data({ value: 0.8, tooltip: 'React: 80%' },
|
|
119
|
+
Chart.Data({ value: 0.8, tooltip: 'React: 80%' }, span({ class: 'data' }, '80%'))
|
|
133
120
|
),
|
|
134
121
|
Chart.Row({},
|
|
135
122
|
Chart.Label({}, 'Vue'),
|
|
136
|
-
Chart.Data({ value: 0.6, tooltip: 'Vue: 60%' },
|
|
123
|
+
Chart.Data({ value: 0.6, tooltip: 'Vue: 60%' }, span({ class: 'data' }, '60%'))
|
|
137
124
|
),
|
|
138
125
|
Chart.Row({},
|
|
139
126
|
Chart.Label({}, 'Svelte'),
|
|
140
|
-
Chart.Data({ value: 0.4, tooltip: 'Svelte: 40%' },
|
|
127
|
+
Chart.Data({ value: 0.4, tooltip: 'Svelte: 40%' }, span({ class: 'data' }, '40%'))
|
|
141
128
|
),
|
|
142
129
|
Chart.Row({},
|
|
143
130
|
Chart.Label({}, 'Lightview'),
|
|
144
|
-
Chart.Data({ value: 1.0, color: '#7480ff', tooltip: 'Lightview: 100%' },
|
|
131
|
+
Chart.Data({ value: 1.0, color: '#7480ff', tooltip: 'Lightview: 100%' }, span({ class: 'data' }, '100%'))
|
|
145
132
|
)
|
|
146
133
|
)
|
|
147
134
|
)</code></pre>
|
|
@@ -154,51 +141,42 @@
|
|
|
154
141
|
Column Chart
|
|
155
142
|
<a href="/docs/components/chart-column" class="info-link"
|
|
156
143
|
aria-label="View Column Chart Details">
|
|
157
|
-
<
|
|
158
|
-
style="
|
|
159
|
-
<path stroke-linecap="round" stroke-linejoin="round"
|
|
160
|
-
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
161
|
-
</svg>
|
|
144
|
+
<span class="info-icon-char"
|
|
145
|
+
style="font-size: 1.2rem; font-weight: bold; font-style: normal;">ⓘ</span>
|
|
162
146
|
</a>
|
|
163
147
|
</h2>
|
|
164
148
|
<div class="card bg-base-100 shadow-sm mb-8">
|
|
165
149
|
<div class="card-body">
|
|
166
150
|
<div id="column-chart-container"
|
|
167
151
|
style="width: 100%; max-width: 600px; height: 300px; margin: 0 auto;">
|
|
168
|
-
<
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
<tr>
|
|
194
|
-
<th scope="row"> May </th>
|
|
195
|
-
<td style="--size: 0.5;"> <span class="data"> $50K </span> </td>
|
|
196
|
-
</tr>
|
|
197
|
-
</tbody>
|
|
198
|
-
</table>
|
|
152
|
+
<div class="chart-placeholder"
|
|
153
|
+
style="height: 300px; display: flex; align-items: center; justify-content: center; background: var(--gallery-bg-alt); border-radius: 8px; opacity: 0.5;">
|
|
154
|
+
Loading Chart...
|
|
155
|
+
</div>
|
|
156
|
+
<script>
|
|
157
|
+
(function () {
|
|
158
|
+
const run = () => {
|
|
159
|
+
const code = document.getElementById('code-column-chart').textContent;
|
|
160
|
+
const script = document.createElement('script');
|
|
161
|
+
script.type = 'module';
|
|
162
|
+
script.textContent = `
|
|
163
|
+
await import('/components/data-display/chart.js');
|
|
164
|
+
const { tags } = Lightview;
|
|
165
|
+
const { Chart, span } = tags; const chart =`
|
|
166
|
+
+ code +
|
|
167
|
+
`; document.getElementById('column-chart-container').replaceChildren(chart.domEl)`;
|
|
168
|
+
document.body.appendChild(script);
|
|
169
|
+
};
|
|
170
|
+
if (document.readyState === 'loading') {
|
|
171
|
+
window.addEventListener('load', run);
|
|
172
|
+
} else {
|
|
173
|
+
run();
|
|
174
|
+
}
|
|
175
|
+
})();
|
|
176
|
+
</script>
|
|
199
177
|
</div>
|
|
200
178
|
<div class="mt-4">
|
|
201
|
-
<pre class="bg-base-300 p-4 rounded-lg text-sm overflow-x-auto"><code>Chart({ type: 'column', labels: true, primaryAxis: true, heading: 'Monthly Revenue' },
|
|
179
|
+
<pre class="bg-base-300 p-4 rounded-lg text-sm overflow-x-auto"><code id="code-column-chart">Chart({ type: 'column', labels: true, primaryAxis: true, heading: 'Monthly Revenue' },
|
|
202
180
|
/* Head is for screen reader use and is not visible */
|
|
203
181
|
Chart.Head({},
|
|
204
182
|
Chart.Row({},
|
|
@@ -209,23 +187,23 @@
|
|
|
209
187
|
Chart.Body({},
|
|
210
188
|
Chart.Row({},
|
|
211
189
|
Chart.Label({}, 'Jan'),
|
|
212
|
-
Chart.Data({ value: 0.2 },
|
|
190
|
+
Chart.Data({ value: 0.2 }, span({ class: 'data' }, '$20K'))
|
|
213
191
|
),
|
|
214
192
|
Chart.Row({},
|
|
215
193
|
Chart.Label({}, 'Feb'),
|
|
216
|
-
Chart.Data({ value: 0.4 },
|
|
194
|
+
Chart.Data({ value: 0.4 }, span({ class: 'data' }, '$40K'))
|
|
217
195
|
),
|
|
218
196
|
Chart.Row({},
|
|
219
197
|
Chart.Label({}, 'Mar'),
|
|
220
|
-
Chart.Data({ value: 0.6 },
|
|
198
|
+
Chart.Data({ value: 0.6 }, span({ class: 'data' }, '$60K'))
|
|
221
199
|
),
|
|
222
200
|
Chart.Row({},
|
|
223
201
|
Chart.Label({}, 'Apr'),
|
|
224
|
-
Chart.Data({ value: 0.8 },
|
|
202
|
+
Chart.Data({ value: 0.8 }, span({ class: 'data' }, '$80K'))
|
|
225
203
|
),
|
|
226
204
|
Chart.Row({},
|
|
227
205
|
Chart.Label({}, 'May'),
|
|
228
|
-
Chart.Data({ value: 0.5 },
|
|
206
|
+
Chart.Data({ value: 0.5 }, span({ class: 'data' }, '$50K'))
|
|
229
207
|
)
|
|
230
208
|
)
|
|
231
209
|
)</code></pre>
|
|
@@ -237,57 +215,42 @@
|
|
|
237
215
|
<h2 class="text-xl font-bold mb-4 flex items-center gap-2">
|
|
238
216
|
Line Chart
|
|
239
217
|
<a href="/docs/components/chart-line" class="info-link" aria-label="View Line Chart Details">
|
|
240
|
-
<
|
|
241
|
-
style="
|
|
242
|
-
<path stroke-linecap="round" stroke-linejoin="round"
|
|
243
|
-
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
244
|
-
</svg>
|
|
218
|
+
<span class="info-icon-char"
|
|
219
|
+
style="font-size: 1.2rem; font-weight: bold; font-style: normal;">ⓘ</span>
|
|
245
220
|
</a>
|
|
246
221
|
</h2>
|
|
247
222
|
<div class="card bg-base-100 shadow-sm mb-8">
|
|
248
223
|
<div class="card-body">
|
|
249
224
|
<div id="line-chart-container"
|
|
250
225
|
style="width: 100%; max-width: 600px; height: 300px; margin: 0 auto;">
|
|
251
|
-
<
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
<tr>
|
|
277
|
-
<th scope="row"> 2021 </th>
|
|
278
|
-
<td style="--start: 0.4; --size: 0.8;"> <span class="data"> 80% </span>
|
|
279
|
-
</td>
|
|
280
|
-
</tr>
|
|
281
|
-
<tr>
|
|
282
|
-
<th scope="row"> 2022 </th>
|
|
283
|
-
<td style="--start: 0.8; --size: 0.9;"> <span class="data"> 90% </span>
|
|
284
|
-
</td>
|
|
285
|
-
</tr>
|
|
286
|
-
</tbody>
|
|
287
|
-
</table>
|
|
226
|
+
<div class="chart-placeholder"
|
|
227
|
+
style="height: 300px; display: flex; align-items: center; justify-content: center; background: var(--gallery-bg-alt); border-radius: 8px; opacity: 0.5;">
|
|
228
|
+
Loading Chart...
|
|
229
|
+
</div>
|
|
230
|
+
<script>
|
|
231
|
+
(function () {
|
|
232
|
+
const run = () => {
|
|
233
|
+
const code = document.getElementById('code-line-chart').textContent;
|
|
234
|
+
const script = document.createElement('script');
|
|
235
|
+
script.type = 'module';
|
|
236
|
+
script.textContent = `
|
|
237
|
+
await import('/components/data-display/chart.js');
|
|
238
|
+
const { tags } = Lightview;
|
|
239
|
+
const { Chart, span } = tags; const chart =`
|
|
240
|
+
+ code +
|
|
241
|
+
`; document.getElementById('line-chart-container').replaceChildren(chart.domEl)`;
|
|
242
|
+
document.body.appendChild(script);
|
|
243
|
+
};
|
|
244
|
+
if (document.readyState === 'loading') {
|
|
245
|
+
window.addEventListener('load', run);
|
|
246
|
+
} else {
|
|
247
|
+
run();
|
|
248
|
+
}
|
|
249
|
+
})();
|
|
250
|
+
</script>
|
|
288
251
|
</div>
|
|
289
252
|
<div class="mt-4">
|
|
290
|
-
<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, secondaryAxesCount: 4 },
|
|
253
|
+
<pre class="bg-base-300 p-4 rounded-lg text-sm overflow-x-auto"><code id="code-line-chart">Chart({ type: 'line', heading: 'Growth Trajectory', labels: true, primaryAxis: true, secondaryAxesCount: 4 },
|
|
291
254
|
/* Head is for screen reader use and is not visible */
|
|
292
255
|
Chart.Head({},
|
|
293
256
|
Chart.Row({},
|
|
@@ -298,23 +261,23 @@
|
|
|
298
261
|
Chart.Body({},
|
|
299
262
|
Chart.Row({},
|
|
300
263
|
Chart.Label({}, '2018'),
|
|
301
|
-
Chart.Data({ start: 0.1, value: 0.3 },
|
|
264
|
+
Chart.Data({ start: 0.1, value: 0.3 }, span({ class: 'data' }, '30%'))
|
|
302
265
|
),
|
|
303
266
|
Chart.Row({},
|
|
304
267
|
Chart.Label({}, '2019'),
|
|
305
|
-
Chart.Data({ start: 0.3, value: 0.5 },
|
|
268
|
+
Chart.Data({ start: 0.3, value: 0.5 }, span({ class: 'data' }, '50%'))
|
|
306
269
|
),
|
|
307
270
|
Chart.Row({},
|
|
308
271
|
Chart.Label({}, '2020'),
|
|
309
|
-
Chart.Data({ start: 0.5, value: 0.4 },
|
|
272
|
+
Chart.Data({ start: 0.5, value: 0.4 }, span({ class: 'data' }, '40%'))
|
|
310
273
|
),
|
|
311
274
|
Chart.Row({},
|
|
312
275
|
Chart.Label({}, '2021'),
|
|
313
|
-
Chart.Data({ start: 0.4, value: 0.8 },
|
|
276
|
+
Chart.Data({ start: 0.4, value: 0.8 }, span({ class: 'data' }, '80%'))
|
|
314
277
|
),
|
|
315
278
|
Chart.Row({},
|
|
316
279
|
Chart.Label({}, '2022'),
|
|
317
|
-
Chart.Data({ start: 0.8, value: 0.9 },
|
|
280
|
+
Chart.Data({ start: 0.8, value: 0.9 }, span({ class: 'data' }, '90%'))
|
|
318
281
|
)
|
|
319
282
|
)
|
|
320
283
|
)</code></pre>
|
|
@@ -326,51 +289,42 @@
|
|
|
326
289
|
<h2 class="text-xl font-bold mb-4 flex items-center gap-2">
|
|
327
290
|
Area Chart
|
|
328
291
|
<a href="/docs/components/chart-area" class="info-link" aria-label="View Area Chart Details">
|
|
329
|
-
<
|
|
330
|
-
style="
|
|
331
|
-
<path stroke-linecap="round" stroke-linejoin="round"
|
|
332
|
-
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
333
|
-
</svg>
|
|
292
|
+
<span class="info-icon-char"
|
|
293
|
+
style="font-size: 1.2rem; font-weight: bold; font-style: normal;">ⓘ</span>
|
|
334
294
|
</a>
|
|
335
295
|
</h2>
|
|
336
296
|
<div class="card bg-base-100 shadow-sm mb-8">
|
|
337
297
|
<div class="card-body">
|
|
338
298
|
<div id="area-chart-container"
|
|
339
299
|
style="width: 100%; max-width: 600px; height: 300px; margin: 0 auto;">
|
|
340
|
-
<
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
<tr>
|
|
366
|
-
<th scope="row"> 16:00 </th>
|
|
367
|
-
<td style="--start: 0.9; --size: 0.5;"></td>
|
|
368
|
-
</tr>
|
|
369
|
-
</tbody>
|
|
370
|
-
</table>
|
|
300
|
+
<div class="chart-placeholder"
|
|
301
|
+
style="height: 300px; display: flex; align-items: center; justify-content: center; background: var(--gallery-bg-alt); border-radius: 8px; opacity: 0.5;">
|
|
302
|
+
Loading Chart...
|
|
303
|
+
</div>
|
|
304
|
+
<script>
|
|
305
|
+
(function () {
|
|
306
|
+
const run = () => {
|
|
307
|
+
const code = document.getElementById('code-area-chart').textContent;
|
|
308
|
+
const script = document.createElement('script');
|
|
309
|
+
script.type = 'module';
|
|
310
|
+
script.textContent = `
|
|
311
|
+
await import('/components/data-display/chart.js');
|
|
312
|
+
const { tags } = Lightview;
|
|
313
|
+
const { Chart, span } = tags; const chart =`
|
|
314
|
+
+ code +
|
|
315
|
+
`; document.getElementById('area-chart-container').replaceChildren(chart.domEl)`;
|
|
316
|
+
document.body.appendChild(script);
|
|
317
|
+
};
|
|
318
|
+
if (document.readyState === 'loading') {
|
|
319
|
+
window.addEventListener('load', run);
|
|
320
|
+
} else {
|
|
321
|
+
run();
|
|
322
|
+
}
|
|
323
|
+
})();
|
|
324
|
+
</script>
|
|
371
325
|
</div>
|
|
372
326
|
<div class="mt-4">
|
|
373
|
-
<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' },
|
|
327
|
+
<pre class="bg-base-300 p-4 rounded-lg text-sm overflow-x-auto"><code id="code-area-chart">Chart({ type: 'area', labels: true, primaryAxis: true, heading: 'Server Load' },
|
|
374
328
|
/* Head is for screen reader use and is not visible */
|
|
375
329
|
Chart.Head({},
|
|
376
330
|
Chart.Row({},
|
|
@@ -409,46 +363,39 @@
|
|
|
409
363
|
<h2 class="text-xl font-bold mb-4 flex items-center gap-2">
|
|
410
364
|
Pie Chart
|
|
411
365
|
<a href="/docs/components/chart-pie" class="info-link" aria-label="View Pie Chart Details">
|
|
412
|
-
<
|
|
413
|
-
style="
|
|
414
|
-
<path stroke-linecap="round" stroke-linejoin="round"
|
|
415
|
-
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
416
|
-
</svg>
|
|
366
|
+
<span class="info-icon-char"
|
|
367
|
+
style="font-size: 1.2rem; font-weight: bold; font-style: normal;">ⓘ</span>
|
|
417
368
|
</a>
|
|
418
369
|
</h2>
|
|
419
370
|
<div class="card bg-base-100 shadow-sm mb-8">
|
|
420
371
|
<div class="card-body">
|
|
421
372
|
<div id="pie-chart-container"
|
|
422
373
|
style="width: 100%; max-width: 300px; margin: 0 auto; aspect-ratio: 1 / 1;">
|
|
423
|
-
<
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
</span> </td>
|
|
449
|
-
</tr>
|
|
450
|
-
</tbody>
|
|
451
|
-
</table>
|
|
374
|
+
<div class="chart-placeholder"
|
|
375
|
+
style="height: 300px; display: flex; align-items: center; justify-content: center; background: var(--gallery-bg-alt); border-radius: 8px; opacity: 0.5;">
|
|
376
|
+
Loading Chart...
|
|
377
|
+
</div>
|
|
378
|
+
<script>
|
|
379
|
+
(function () {
|
|
380
|
+
const run = () => {
|
|
381
|
+
const code = document.getElementById('code-pie-chart').textContent;
|
|
382
|
+
const script = document.createElement('script');
|
|
383
|
+
script.type = 'module';
|
|
384
|
+
script.textContent = `
|
|
385
|
+
await import('/components/data-display/chart.js');
|
|
386
|
+
const { tags } = Lightview;
|
|
387
|
+
const { Chart, span } = tags; const chart =`
|
|
388
|
+
+ code +
|
|
389
|
+
`; document.getElementById('pie-chart-container').replaceChildren(chart.domEl)`;
|
|
390
|
+
document.body.appendChild(script);
|
|
391
|
+
};
|
|
392
|
+
if (document.readyState === 'loading') {
|
|
393
|
+
window.addEventListener('load', run);
|
|
394
|
+
} else {
|
|
395
|
+
run();
|
|
396
|
+
}
|
|
397
|
+
})();
|
|
398
|
+
</script>
|
|
452
399
|
</div>
|
|
453
400
|
<p class="text-sm opacity-70 mt-4">
|
|
454
401
|
<strong>Note:</strong> For Pie charts, use <code>--start</code> and <code>--end</code>
|
|
@@ -459,19 +406,19 @@
|
|
|
459
406
|
to 1.0).
|
|
460
407
|
</p>
|
|
461
408
|
<div class="mt-4">
|
|
462
|
-
<pre class="bg-base-300 p-4 rounded-lg text-sm overflow-x-auto"><code>Chart({ type: 'pie', labels: true, heading: 'Browser Market Share', secondaryAxesCount: 4 },
|
|
409
|
+
<pre class="bg-base-300 p-4 rounded-lg text-sm overflow-x-auto"><code id="code-pie-chart">Chart({ type: 'pie', labels: true, heading: 'Browser Market Share', secondaryAxesCount: 4 },
|
|
463
410
|
Chart.Body({},
|
|
464
411
|
Chart.Row({},
|
|
465
412
|
Chart.Label({}, 'Chrome'),
|
|
466
|
-
Chart.Data({ start: 0.0, end: 0.6, color: '#4CAF50' },
|
|
413
|
+
Chart.Data({ start: 0.0, end: 0.6, color: '#4CAF50' }, span({ class: 'data' }, '60%'))
|
|
467
414
|
),
|
|
468
415
|
Chart.Row({},
|
|
469
416
|
Chart.Label({}, 'Firefox'),
|
|
470
|
-
Chart.Data({ start: 0.6, end: 0.85, color: '#F44336' },
|
|
417
|
+
Chart.Data({ start: 0.6, end: 0.85, color: '#F44336' }, span({ class: 'data' }, '25%'))
|
|
471
418
|
),
|
|
472
419
|
Chart.Row({},
|
|
473
420
|
Chart.Label({}, 'Safari'),
|
|
474
|
-
Chart.Data({ start: 0.85, end: 1.0, color: '#2196F3' },
|
|
421
|
+
Chart.Data({ start: 0.85, end: 1.0, color: '#2196F3' }, span({ class: 'data' }, '15%'))
|
|
475
422
|
)
|
|
476
423
|
)
|
|
477
424
|
)</code></pre>
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
const sidebarLinks = [
|
|
17
17
|
'Accordion', 'Alert', 'Avatar', 'Badge', 'Breadcrumbs', 'Button', 'Card',
|
|
18
18
|
'Carousel', 'Chart', 'Chart Area', 'Chart Bar', 'Chart Column', 'Chart Line', 'Chart Pie',
|
|
19
|
-
'Chat', 'Checkbox', 'Collapse', 'Countdown', 'Diff',
|
|
19
|
+
'Chat', 'Checkbox', 'Collapse', 'Countdown', // 'Diff',
|
|
20
20
|
'Divider', 'Dock', 'Drawer', 'Dropdown', 'File Input', 'Footer', 'Hero',
|
|
21
21
|
'Indicator', 'Input', 'Join', 'Kbd', 'Loading', 'Menu', 'Modal', 'Navbar',
|
|
22
22
|
'Pagination', 'Progress', 'Radial Progress', 'Radio', 'Range', 'Rating',
|