You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
189 lines
8.3 KiB
189 lines
8.3 KiB
<script lang="ts">
|
|
import { BarSegment, type ChartCategory } from '$uix/eidos/components/chart';
|
|
import { compileMorfo } from '$uix/morfo';
|
|
import { chartMorfo } from '@/uix/morfo/components/chart';
|
|
|
|
type Tab = 'live' | 'examples' | 'api' | 'morfo' | 'recipe' | 'a11y';
|
|
let tab = $state<Tab>('live');
|
|
|
|
const data: ChartCategory[] = [
|
|
{ label: 'Direct', value: 38 },
|
|
{ label: 'Organic', value: 27 },
|
|
{ label: 'Referral', value: 18 },
|
|
{ label: 'Social', value: 12 },
|
|
{ label: 'Email', value: 5 }
|
|
];
|
|
const status: ChartCategory[] = [
|
|
{ label: 'Healthy', value: 72, color: 'affirm' },
|
|
{ label: 'Degraded', value: 21, color: 'risk' },
|
|
{ label: 'Down', value: 7, color: 'threat' }
|
|
];
|
|
|
|
let legend = $state(true);
|
|
let showTooltip = $state(true);
|
|
|
|
const compiled = compileMorfo(chartMorfo);
|
|
const partsList = $derived([...compiled.parts.byKebab.values()]);
|
|
|
|
const snippet = $derived(
|
|
[
|
|
"<script lang='ts'>",
|
|
" import { BarSegment } from '$uix/eidos/components/chart';",
|
|
'</' + 'script>',
|
|
'',
|
|
'<BarSegment',
|
|
' data={channels}',
|
|
!legend && ' legend={false}',
|
|
!showTooltip && ' tooltip={false}',
|
|
'/>'
|
|
]
|
|
.filter(Boolean)
|
|
.join('\n')
|
|
);
|
|
</script>
|
|
|
|
<div data-uix-canvas-inner>
|
|
<header>
|
|
<div data-uix-eyebrow>Charts · Bar segment</div>
|
|
<h1 data-uix-page-title>Bar segment</h1>
|
|
<p data-uix-page-lede>
|
|
A single horizontal bar split into proportional segments (parts of a whole), with an optional
|
|
legend and a themed hover tooltip. Pure HTML/CSS, themed per segment; values formatted through the
|
|
locale-aware engine. Chakra bar-segment style.
|
|
</p>
|
|
<div data-uix-page-meta>
|
|
<span data-uix-meta-pill><span data-uix-meta-key>render</span>html · 0-dep</span>
|
|
<span data-uix-meta-pill><span data-uix-meta-key>family</span>chart</span>
|
|
<span data-uix-meta-pill><span data-uix-meta-key>segments</span>{data.length}</span>
|
|
<span data-uix-meta-pill><span data-uix-meta-key>whole</span>100%</span>
|
|
</div>
|
|
</header>
|
|
|
|
<div data-uix-stage>
|
|
<div data-uix-stage-area style="max-inline-size: 520px;">
|
|
<BarSegment {data} {legend} tooltip={showTooltip} />
|
|
</div>
|
|
<div data-uix-stage-trace>
|
|
<span data-uix-stage-trace-key>renders</span>
|
|
<span><span data-uix-stage-trace-event>{data.length} segments</span> · hover for label · value · %</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div data-uix-tabs role="tablist">
|
|
<button data-uix-tab data-active={tab === 'live'} onclick={() => (tab = 'live')}>Live</button>
|
|
<button data-uix-tab data-active={tab === 'examples'} onclick={() => (tab = 'examples')}>Examples</button>
|
|
<button data-uix-tab data-active={tab === 'api'} onclick={() => (tab = 'api')}>API</button>
|
|
<button data-uix-tab data-active={tab === 'morfo'} onclick={() => (tab = 'morfo')}>
|
|
<span data-uix-layer-badge="morfo">morfo</span>
|
|
<span data-uix-tab-count>{partsList.length}p</span>
|
|
</button>
|
|
<button data-uix-tab data-active={tab === 'recipe'} onclick={() => (tab = 'recipe')}>Recipe</button>
|
|
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
|
|
</div>
|
|
|
|
{#if tab === 'live'}
|
|
<section data-uix-section>
|
|
<h2 data-uix-section-title>Controls</h2>
|
|
<p data-uix-section-desc>Pure <span data-uix-layer-badge="eidos">eidos</span> display — every control changes the live chart above. Hover a segment for the tooltip.</p>
|
|
<div data-uix-controls>
|
|
<label data-uix-control>
|
|
<span data-uix-control-label>legend</span>
|
|
<span data-uix-switch><input type="checkbox" bind:checked={legend} /><span data-uix-switch-label>{legend ? 'on' : 'off'}</span></span>
|
|
</label>
|
|
<label data-uix-control>
|
|
<span data-uix-control-label>tooltip</span>
|
|
<span data-uix-switch><input type="checkbox" bind:checked={showTooltip} /><span data-uix-switch-label>{showTooltip ? 'on' : 'off'}</span></span>
|
|
</label>
|
|
</div>
|
|
<div data-uix-code>
|
|
<div data-uix-code-head>
|
|
<span data-uix-layer-badge="eidos">eidos</span>
|
|
<span>BarSegment</span>
|
|
<span data-uix-code-lang>svelte</span>
|
|
</div>
|
|
<pre><code>{snippet}</code></pre>
|
|
</div>
|
|
</section>
|
|
{/if}
|
|
|
|
{#if tab === 'examples'}
|
|
<section data-uix-section>
|
|
<h2 data-uix-section-title>Examples</h2>
|
|
<p data-uix-section-desc>Default, no legend, and explicit intent colours.</p>
|
|
<div data-uix-stage-area style="display: flex; flex-direction: column; gap: 1.5rem; max-inline-size: 520px;">
|
|
<div><div data-uix-control-label style="margin-bottom: 0.5rem;">Traffic channels</div><BarSegment {data} /></div>
|
|
<div><div data-uix-control-label style="margin-bottom: 0.5rem;">No legend</div><BarSegment {data} legend={false} /></div>
|
|
<div><div data-uix-control-label style="margin-bottom: 0.5rem;">Service health (intent colours)</div><BarSegment data={status} /></div>
|
|
</div>
|
|
</section>
|
|
{/if}
|
|
|
|
{#if tab === 'api'}
|
|
<section data-uix-section>
|
|
<h2 data-uix-section-title>API reference</h2>
|
|
<div data-uix-table-wrap>
|
|
<table data-uix-table>
|
|
<thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Description</th></tr></thead>
|
|
<tbody>
|
|
<tr><td class="name">data</td><td class="type">{`{ label, value, color? }[]`}</td><td class="default empty">—</td><td>Segments; <code>color</code> is a ColorRole.</td></tr>
|
|
<tr><td class="name">legend</td><td class="type">boolean</td><td class="default">true</td><td>Show the legend below the bar.</td></tr>
|
|
<tr><td class="name">tooltip</td><td class="type">boolean</td><td class="default">true</td><td>Show the themed hover tooltip.</td></tr>
|
|
<tr><td class="name">format</td><td class="type">{`(v: number) => string`}</td><td class="default empty">—</td><td>Value formatter (defaults to the locale-aware number format).</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
{/if}
|
|
|
|
{#if tab === 'morfo'}
|
|
<section data-uix-section>
|
|
<h2 data-uix-section-title><span data-uix-layer-badge="morfo">morfo</span> · chart family contract</h2>
|
|
<p data-uix-section-desc>Bar segment is a pure HTML/CSS sub-surface of the <code>chart</code> family (<code>scope:['eidos']</code>, 0 events) — it emits its own <code>data-chart-bar-segment-*</code> structure, not the SVG plotting parts below. The shared family contract:</p>
|
|
<div data-uix-table-wrap>
|
|
<table data-uix-table>
|
|
<thead><tr><th>Part</th><th>Marker</th><th>Element</th><th>Role</th><th>Optional</th></tr></thead>
|
|
<tbody>
|
|
{#each partsList as part}
|
|
<tr><td class="name">{part.kebab}</td><td><code data-uix-part-marker>[{part.marker}]</code></td><td class="type"><{part.defaultElement}></td><td class="type">{part.role ?? '—'}</td><td class="default">{part.optional ? 'yes' : 'no'}</td></tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
{/if}
|
|
|
|
{#if tab === 'recipe'}
|
|
<section data-uix-section>
|
|
<h2 data-uix-section-title>Eidos recipe</h2>
|
|
<p data-uix-section-desc>Global theme tokens; the tooltip reuses the chart's <code>--chart-tooltip-*</code> surface so it matches every other chart.</p>
|
|
<div data-uix-table-wrap>
|
|
<table data-uix-table>
|
|
<thead><tr><th>Surface</th><th>Token</th></tr></thead>
|
|
<tbody>
|
|
<tr><td class="name">segment fill</td><td class="type">var(--color-{'{'}role{'}'}-solid) per segment</td></tr>
|
|
<tr><td class="name">dim (non-hovered)</td><td class="type">opacity var(--opacity-scrim)</td></tr>
|
|
<tr><td class="name">track height / radius</td><td class="type">var(--control-height-sm) / var(--radius-md)</td></tr>
|
|
<tr><td class="name">tooltip</td><td class="type">var(--chart-tooltip-bg / -border / -shadow)</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
{/if}
|
|
|
|
{#if tab === 'a11y'}
|
|
<section data-uix-section>
|
|
<h2 data-uix-section-title>Accessibility</h2>
|
|
<div data-uix-table-wrap>
|
|
<table data-uix-table>
|
|
<thead><tr><th>Element</th><th>Role / attribute</th><th>Notes</th></tr></thead>
|
|
<tbody>
|
|
<tr><td class="name">segment</td><td class="type">decorative</td><td>Width is visual; the legend carries label · value · %.</td></tr>
|
|
<tr><td class="name">legend</td><td class="type">text</td><td>Read in order; the value + percentage are the accessible content.</td></tr>
|
|
</tbody>
|
|
</table>
|
|
<p data-uix-section-desc style="margin-top: 0.75rem;">The hover tooltip is a pointer affordance; the legend is the keyboard / screen-reader equivalent.</p>
|
|
</div>
|
|
</section>
|
|
{/if}
|
|
</div>
|