lightview
Version:
A reactive UI library with features of Bau, Juris, and HTMX plus safe LLM UI generation
557 lines (541 loc) • 30.3 kB
HTML
<!-- SEO-friendly SPA Shim -->
<script src="/lightview-router.js"></script>
<script>
if (globalThis.LightviewRouter) {
LightviewRouter.base('/index.html');
}
</script>
<script type="module" src="../../components/data-display/chart.js"></script>
<!-- Load the page-specific stylesheet -->
<link rel="stylesheet" href="./index.css">
<!-- Gallery Structure -->
<div class="gallery-page">
<div class="gallery-layout">
<!-- Sidebar Overlay -->
<div id="sidebar-overlay" class="sidebar-overlay"></div>
<!-- Sidebar -->
<div id="gallery-sidebar" class="gallery-sidebar" style="visibility: hidden" src="./component-nav.html"></div>
<!-- Main Content -->
<div id="gallery-main" class="gallery-main">
<!-- Header Container -->
<div
style="position: sticky; top: 0; z-index: 30; background: var(--gallery-surface); border-bottom: 1px solid var(--gallery-border); backdrop-filter: blur(8px);">
<!-- Breadcrumbs Row -->
<div style="padding: 0.75rem 1.5rem 0;">
<script>
(() => {
const { Breadcrumbs } = Lightview.tags;
const breadcrumbs = Breadcrumbs({
id: 'page-breadcrumbs',
items: [
{ label: 'Components', href: '/docs/components' },
{ label: 'Chart' }
]
});
document.currentScript.replaceWith(breadcrumbs.domEl);
})();
</script>
</div>
<!-- Title Row -->
<div class="gallery-header"
style="border-bottom: none; height: auto; padding-top: 0.5rem; padding-bottom: 0.75rem;">
<button id="toggle-btn" class="toggle-btn" aria-label="Toggle Sidebar">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="toggle-icon"
style="stroke: currentColor; stroke-width: 2;">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
<path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7" />
</svg>
</button>
<h1 class="gallery-title">Chart</h1>
</div>
</div>
<!-- Content -->
<div class="gallery-content">
<div class="section-content" style="max-width: 1000px;">
<p class="text-lg" style="opacity: 0.7; margin-bottom: 1.5rem;">
Data visualization components powered by <a href="https://chartscss.org/" target="_blank"
class="link link-primary">Charts.css</a>.
Use CSS classes to turn your data into beautiful charts.
</p>
<!-- Bar Chart -->
<h2 class="text-xl font-bold mb-4 flex items-center gap-2">
Bar Chart
<a href="/docs/components/chart-bar" class="info-link" aria-label="View Bar Chart Details">
<span class="info-icon-char"
style="font-size: 1.2rem; font-weight: bold; font-style: normal;">ⓘ</span>
</a>
</h2>
<div class="card bg-base-100 shadow-sm mb-8">
<div class="card-body">
<div id="bar-chart-container" style="width: 100%; max-width: 600px; margin: 0 auto;">
<div class="chart-placeholder"
style="height: 200px; display: flex; align-items: center; justify-content: center; background: var(--gallery-bg-alt); border-radius: 8px; opacity: 0.5;">
Loading Chart...
</div>
<script>
(function () {
const run = () => {
const code = document.getElementById('code-bar-chart').textContent;
const script = document.createElement('script');
script.type = 'module';
script.textContent = `
await import('/components/data-display/chart.js');
const { tags } = Lightview;
const { Chart, span } = tags; const chart =`
+ code +
`; document.getElementById('bar-chart-container').replaceChildren(chart.domEl)`;
document.body.appendChild(script);
};
if (document.readyState === 'loading') {
window.addEventListener('load', run);
} else {
run();
}
})();
</script>
</div>
<div class="mt-4">
<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' },
/* Head is for screen reader use and is not visible */
Chart.Head({},
Chart.Row({},
Chart.Label({ scope: 'col' }, 'Framework'),
Chart.Label({ scope: 'col' }, 'Progress')
)
),
Chart.Body({},
Chart.Row({},
Chart.Label({}, 'React'),
Chart.Data({ value: 0.8, tooltip: 'React: 80%' }, span({ class: 'data' }, '80%'))
),
Chart.Row({},
Chart.Label({}, 'Vue'),
Chart.Data({ value: 0.6, tooltip: 'Vue: 60%' }, span({ class: 'data' }, '60%'))
),
Chart.Row({},
Chart.Label({}, 'Svelte'),
Chart.Data({ value: 0.4, tooltip: 'Svelte: 40%' }, span({ class: 'data' }, '40%'))
),
Chart.Row({},
Chart.Label({}, 'Lightview'),
Chart.Data({ value: 1.0, color: '#7480ff', tooltip: 'Lightview: 100%' }, span({ class: 'data' }, '100%'))
)
)
)</code></pre>
</div>
</div>
</div>
<!-- Column Chart -->
<h2 class="text-xl font-bold mb-4 flex items-center gap-2">
Column Chart
<a href="/docs/components/chart-column" class="info-link"
aria-label="View Column Chart Details">
<span class="info-icon-char"
style="font-size: 1.2rem; font-weight: bold; font-style: normal;">ⓘ</span>
</a>
</h2>
<div class="card bg-base-100 shadow-sm mb-8">
<div class="card-body">
<div id="column-chart-container"
style="width: 100%; max-width: 600px; height: 300px; margin: 0 auto;">
<div class="chart-placeholder"
style="height: 300px; display: flex; align-items: center; justify-content: center; background: var(--gallery-bg-alt); border-radius: 8px; opacity: 0.5;">
Loading Chart...
</div>
<script>
(function () {
const run = () => {
const code = document.getElementById('code-column-chart').textContent;
const script = document.createElement('script');
script.type = 'module';
script.textContent = `
await import('/components/data-display/chart.js');
const { tags } = Lightview;
const { Chart, span } = tags; const chart =`
+ code +
`; document.getElementById('column-chart-container').replaceChildren(chart.domEl)`;
document.body.appendChild(script);
};
if (document.readyState === 'loading') {
window.addEventListener('load', run);
} else {
run();
}
})();
</script>
</div>
<div class="mt-4">
<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' },
/* Head is for screen reader use and is not visible */
Chart.Head({},
Chart.Row({},
Chart.Label({ scope: 'col' }, 'Month'),
Chart.Label({ scope: 'col' }, 'Revenue')
)
),
Chart.Body({},
Chart.Row({},
Chart.Label({}, 'Jan'),
Chart.Data({ value: 0.2 }, span({ class: 'data' }, '$20K'))
),
Chart.Row({},
Chart.Label({}, 'Feb'),
Chart.Data({ value: 0.4 }, span({ class: 'data' }, '$40K'))
),
Chart.Row({},
Chart.Label({}, 'Mar'),
Chart.Data({ value: 0.6 }, span({ class: 'data' }, '$60K'))
),
Chart.Row({},
Chart.Label({}, 'Apr'),
Chart.Data({ value: 0.8 }, span({ class: 'data' }, '$80K'))
),
Chart.Row({},
Chart.Label({}, 'May'),
Chart.Data({ value: 0.5 }, span({ class: 'data' }, '$50K'))
)
)
)</code></pre>
</div>
</div>
</div>
<!-- Line Chart -->
<h2 class="text-xl font-bold mb-4 flex items-center gap-2">
Line Chart
<a href="/docs/components/chart-line" class="info-link" aria-label="View Line Chart Details">
<span class="info-icon-char"
style="font-size: 1.2rem; font-weight: bold; font-style: normal;">ⓘ</span>
</a>
</h2>
<div class="card bg-base-100 shadow-sm mb-8">
<div class="card-body">
<div id="line-chart-container"
style="width: 100%; max-width: 600px; height: 300px; margin: 0 auto;">
<div class="chart-placeholder"
style="height: 300px; display: flex; align-items: center; justify-content: center; background: var(--gallery-bg-alt); border-radius: 8px; opacity: 0.5;">
Loading Chart...
</div>
<script>
(function () {
const run = () => {
const code = document.getElementById('code-line-chart').textContent;
const script = document.createElement('script');
script.type = 'module';
script.textContent = `
await import('/components/data-display/chart.js');
const { tags } = Lightview;
const { Chart, span } = tags; const chart =`
+ code +
`; document.getElementById('line-chart-container').replaceChildren(chart.domEl)`;
document.body.appendChild(script);
};
if (document.readyState === 'loading') {
window.addEventListener('load', run);
} else {
run();
}
})();
</script>
</div>
<div class="mt-4">
<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 },
/* Head is for screen reader use and is not visible */
Chart.Head({},
Chart.Row({},
Chart.Label({ scope: 'col' }, 'Year'),
Chart.Label({ scope: 'col' }, 'Value')
)
),
Chart.Body({},
Chart.Row({},
Chart.Label({}, '2018'),
Chart.Data({ start: 0.1, value: 0.3 }, span({ class: 'data' }, '30%'))
),
Chart.Row({},
Chart.Label({}, '2019'),
Chart.Data({ start: 0.3, value: 0.5 }, span({ class: 'data' }, '50%'))
),
Chart.Row({},
Chart.Label({}, '2020'),
Chart.Data({ start: 0.5, value: 0.4 }, span({ class: 'data' }, '40%'))
),
Chart.Row({},
Chart.Label({}, '2021'),
Chart.Data({ start: 0.4, value: 0.8 }, span({ class: 'data' }, '80%'))
),
Chart.Row({},
Chart.Label({}, '2022'),
Chart.Data({ start: 0.8, value: 0.9 }, span({ class: 'data' }, '90%'))
)
)
)</code></pre>
</div>
</div>
</div>
<!-- Area Chart -->
<h2 class="text-xl font-bold mb-4 flex items-center gap-2">
Area Chart
<a href="/docs/components/chart-area" class="info-link" aria-label="View Area Chart Details">
<span class="info-icon-char"
style="font-size: 1.2rem; font-weight: bold; font-style: normal;">ⓘ</span>
</a>
</h2>
<div class="card bg-base-100 shadow-sm mb-8">
<div class="card-body">
<div id="area-chart-container"
style="width: 100%; max-width: 600px; height: 300px; margin: 0 auto;">
<div class="chart-placeholder"
style="height: 300px; display: flex; align-items: center; justify-content: center; background: var(--gallery-bg-alt); border-radius: 8px; opacity: 0.5;">
Loading Chart...
</div>
<script>
(function () {
const run = () => {
const code = document.getElementById('code-area-chart').textContent;
const script = document.createElement('script');
script.type = 'module';
script.textContent = `
await import('/components/data-display/chart.js');
const { tags } = Lightview;
const { Chart, span } = tags; const chart =`
+ code +
`; document.getElementById('area-chart-container').replaceChildren(chart.domEl)`;
document.body.appendChild(script);
};
if (document.readyState === 'loading') {
window.addEventListener('load', run);
} else {
run();
}
})();
</script>
</div>
<div class="mt-4">
<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' },
/* Head is for screen reader use and is not visible */
Chart.Head({},
Chart.Row({},
Chart.Label({ scope: 'col' }, 'Time'),
Chart.Label({ scope: 'col' }, 'Load')
)
),
Chart.Body({},
Chart.Row({},
Chart.Label({}, '00:00'),
Chart.Data({ start: 0.2, value: 0.4 })
),
Chart.Row({},
Chart.Label({}, '04:00'),
Chart.Data({ start: 0.4, value: 0.8 })
),
Chart.Row({},
Chart.Label({}, '08:00'),
Chart.Data({ start: 0.8, value: 0.6 })
),
Chart.Row({},
Chart.Label({}, '12:00'),
Chart.Data({ start: 0.6, value: 0.9 })
),
Chart.Row({},
Chart.Label({}, '16:00'),
Chart.Data({ start: 0.9, value: 0.5 })
)
)
)</code></pre>
</div>
</div>
</div>
<!-- Pie Chart -->
<h2 class="text-xl font-bold mb-4 flex items-center gap-2">
Pie Chart
<a href="/docs/components/chart-pie" class="info-link" aria-label="View Pie Chart Details">
<span class="info-icon-char"
style="font-size: 1.2rem; font-weight: bold; font-style: normal;">ⓘ</span>
</a>
</h2>
<div class="card bg-base-100 shadow-sm mb-8">
<div class="card-body">
<div id="pie-chart-container"
style="width: 100%; max-width: 300px; margin: 0 auto; aspect-ratio: 1 / 1;">
<div class="chart-placeholder"
style="height: 300px; display: flex; align-items: center; justify-content: center; background: var(--gallery-bg-alt); border-radius: 8px; opacity: 0.5;">
Loading Chart...
</div>
<script>
(function () {
const run = () => {
const code = document.getElementById('code-pie-chart').textContent;
const script = document.createElement('script');
script.type = 'module';
script.textContent = `
await import('/components/data-display/chart.js');
const { tags } = Lightview;
const { Chart, span } = tags; const chart =`
+ code +
`; document.getElementById('pie-chart-container').replaceChildren(chart.domEl)`;
document.body.appendChild(script);
};
if (document.readyState === 'loading') {
window.addEventListener('load', run);
} else {
run();
}
})();
</script>
</div>
<p class="text-sm opacity-70 mt-4">
<strong>Note:</strong> For Pie charts, use <code>--start</code> and <code>--end</code>
(not <code>--size</code>).
Each segment's <code>--start</code> should equal the previous segment's
<code>--end</code>.
The <code>--end</code> value is <code>--start</code> plus the segment's proportion (0.0
to 1.0).
</p>
<div class="mt-4">
<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 },
Chart.Body({},
Chart.Row({},
Chart.Label({}, 'Chrome'),
Chart.Data({ start: 0.0, end: 0.6, color: '#4CAF50' }, span({ class: 'data' }, '60%'))
),
Chart.Row({},
Chart.Label({}, 'Firefox'),
Chart.Data({ start: 0.6, end: 0.85, color: '#F44336' }, span({ class: 'data' }, '25%'))
),
Chart.Row({},
Chart.Label({}, 'Safari'),
Chart.Data({ start: 0.85, end: 1.0, color: '#2196F3' }, span({ class: 'data' }, '15%'))
)
)
)</code></pre>
</div>
</div>
</div>
<!-- Props Table -->
<h2 class="text-xl font-bold mb-4">Props</h2>
<div class="overflow-x-auto mb-8">
<table class="table table-zebra">
<thead>
<tr>
<th>Prop</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>type</code></td>
<td>string</td>
<td>'bar'</td>
<td>Type of chart: 'bar', 'column', 'line', 'area', 'pie'</td>
</tr>
<tr>
<td><code>heading</code></td>
<td>string</td>
<td>-</td>
<td>Caption for the chart table</td>
</tr>
<tr>
<td><code>labels</code></td>
<td>boolean</td>
<td>false</td>
<td>Show axis labels (.show-labels)</td>
</tr>
<tr>
<td><code>dataOnHover</code></td>
<td>boolean</td>
<td>false</td>
<td>Show data tooltip on hover (.show-data-on-hover)</td>
</tr>
<tr>
<td><code>primaryAxis</code></td>
<td>boolean</td>
<td>false</td>
<td>Show primary axis lines (.show-primary-axis)</td>
</tr>
<tr>
<td><code>secondaryAxis</code></td>
<td>boolean|string</td>
<td>false</td>
<td>Show 10 secondary axes lines if true (or custom class)</td>
</tr>
<tr>
<td><code>secondaryAxesCount</code></td>
<td>number</td>
<td>-</td>
<td>Number of secondary axes lines (1-10)</td>
</tr>
<tr>
<td><code>reverse</code></td>
<td>boolean</td>
<td>false</td>
<td>Reverse chart orientation (.reverse)</td>
</tr>
<tr>
<td><code>multiple</code></td>
<td>boolean</td>
<td>false</td>
<td>Enable multiple datasets mode (.multiple)</td>
</tr>
<tr>
<td><code>stacked</code></td>
<td>boolean</td>
<td>false</td>
<td>Enable stacked mode for bar/column charts (.stacked)</td>
</tr>
</tbody>
</table>
</div>
<h3 class="text-lg font-bold mb-4">Chart.Data Props</h3>
<p class="mb-4 opacity-70">Properties available for the <code>Chart.Data</code> subcomponent.</p>
<div class="overflow-x-auto mb-8">
<table class="table table-zebra">
<thead>
<tr>
<th>Prop</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>value</code> (or <code>size</code>)</td>
<td>number</td>
<td>Value of the data point (0.0 - 1.0). Maps to <code>--size</code>. <strong>Use
for bar,
column, line, and area charts.</strong></td>
</tr>
<tr>
<td><code>start</code></td>
<td>number</td>
<td>Start position (0.0 - 1.0). Used for stacked bars, line/area charts, and pie
segments.
Maps to
<code>--start</code>.
</td>
</tr>
<tr>
<td><code>end</code></td>
<td>number</td>
<td>End position (0.0 - 1.0). Maps to <code>--end</code>. <strong>Required for pie
charts instead of <code>value</code>.</strong></td>
</tr>
<tr>
<td><code>color</code></td>
<td>string</td>
<td>CSS color value for the data segment. Maps to <code>--color</code>.</td>
</tr>
<tr>
<td><code>tooltip</code></td>
<td>string</td>
<td>Text to display in the standard tooltip span.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>