117 lines
6.8 KiB
Plaintext
117 lines
6.8 KiB
Plaintext
component Chart {
|
|
outputs {
|
|
select(payload: { item: object; index: number; sourceEvent?: Event })
|
|
dataPointClick(payload: { item: object; index: number; sourceEvent?: Event })
|
|
legendToggle(payload: { item: object; index: number; hidden: boolean; sourceEvent?: Event })
|
|
}
|
|
|
|
props {
|
|
title: string = "Chart"
|
|
description: string = ""
|
|
items: unknown[] = []
|
|
data: unknown[] = []
|
|
type: string = ""
|
|
valueKey: string = "value"
|
|
labelKey: string = "label"
|
|
height: number = 240
|
|
showLegend: boolean = true
|
|
showValues: boolean = true
|
|
size: string = "default"
|
|
color: string = "primary"
|
|
variant: string = "bar"
|
|
class: string = ""
|
|
}
|
|
|
|
state hiddenIndexes = []
|
|
|
|
functions {
|
|
shared function chartData() { return data.length ? data : items }
|
|
shared function linePoints() { return chartData().map(function (item, index) { return (barX(index) + barWidth() / 2) + "," + barY(item) }).join(" ") }
|
|
shared function numericValue(item) { return Math.max(0, Number(item[valueKey]) || 0) }
|
|
shared function maximumValue() {
|
|
return Math.max(1, ...chartData().map(function (item) { return numericValue(item) }))
|
|
}
|
|
shared function isHidden(index) { return hiddenIndexes.includes(index) }
|
|
shared function barWidth() { return chartData().length ? Math.max(4, 400 / chartData().length) : 400 }
|
|
shared function barX(index) { return 50 + index * (500 / Math.max(1, chartData().length)) }
|
|
shared function barHeight(item) { return numericValue(item) / maximumValue() * 160 }
|
|
shared function barY(item) { return 200 - barHeight(item) }
|
|
|
|
client function selectPoint(item, index, sourceEvent) {
|
|
output.dataPointClick({ item: item, index: index, sourceEvent: sourceEvent })
|
|
output.select({ item: item, index: index, sourceEvent: sourceEvent })
|
|
}
|
|
|
|
client function toggleLegend(item, index, sourceEvent, next) {
|
|
next = hiddenIndexes.slice()
|
|
if (next.includes(index)) {
|
|
next = next.filter(function (value) { return value !== index })
|
|
} else {
|
|
next.push(index)
|
|
}
|
|
hiddenIndexes = next
|
|
output.legendToggle({ item: item, index: index, hidden: next.includes(index), sourceEvent: sourceEvent })
|
|
}
|
|
}
|
|
|
|
view {
|
|
<figure {...attrs} data-ui-component="Chart" data-variant='{variant}' class='wrn-chart {class}'>
|
|
{#if title || description}
|
|
<figcaption class="wrn-chart__header">
|
|
{#if title}<strong>{title}</strong>{/if}
|
|
{#if description}<span>{description}</span>{/if}
|
|
</figcaption>
|
|
{/if}
|
|
{#if (type || variant) === "line"}
|
|
<svg class="wrn-chart__line" viewBox="0 0 600 240" role="img" aria-label="{title}" style="height:{height}px"><polyline points="{linePoints()}" fill="none" stroke="var(--wrn-color-primary)" stroke-width="3" /></svg>
|
|
<div class="wrn-chart__point-labels">{#each chartData() as item, index}<button type="button" @click="selectPoint(item, index, event)">{item[labelKey]} · {numericValue(item)}</button>{/each}</div>
|
|
{:else}
|
|
<div class="wrn-chart__columns" style="height:{height}px" role="group" aria-label="{title}">
|
|
{#each chartData() as item, index}<button type="button" class="wrn-chart__column" data-hidden="{hiddenIndexes.includes(index)}" aria-label="{item[labelKey] + ': ' + numericValue(item)}" @click="selectPoint(item, index, event)">
|
|
{#if showValues}<span>{numericValue(item)}</span>{/if}
|
|
<svg viewBox="0 0 60 160" preserveAspectRatio="none" aria-hidden="true" style="height:{numericValue(item) / maximumValue() * Math.max(60, height - 60)}px"><rect x="0" y="0" width="60" height="160" rx="3" fill="var(--wrn-color-primary)" /></svg>
|
|
<small>{item[labelKey]}</small>
|
|
</button>{/each}
|
|
</div>
|
|
{/if}
|
|
{#if showLegend}
|
|
<div class="wrn-chart__legend" aria-label="Chart legend">
|
|
{#each chartData() as item, index}
|
|
<button type="button" aria-pressed='{isHidden(index) ? "false" : "true"}' @click='toggleLegend(item, index, event)'>
|
|
<span aria-hidden="true"></span>{item[labelKey]}
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
<slot />
|
|
</figure>
|
|
}
|
|
|
|
style {
|
|
.wrn-chart__columns { display:flex; align-items:flex-end; gap:clamp(.5rem,2vw,1.5rem); padding:.5rem; border-bottom:1px solid var(--wrn-color-border); }
|
|
.wrn-chart__column { display:flex; flex:1; min-width:0; flex-direction:column; align-items:center; gap:.6rem; padding:0; border:0; background:transparent; color:var(--wrn-color-text); font:inherit; font-size:.8rem; cursor:pointer; }
|
|
.wrn-chart__column svg { width:100%; max-width:5rem; min-height:1px; }
|
|
.wrn-chart__column small { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--wrn-color-muted); }
|
|
.wrn-chart__column[data-hidden="true"] { opacity:.2; }
|
|
.wrn-chart__line { width:100%; display:block; }
|
|
.wrn-chart__point-labels { display:flex; justify-content:space-around; gap:.5rem; flex-wrap:wrap; }
|
|
.wrn-chart__point-labels button { border:0; background:transparent; color:var(--wrn-color-muted); font:inherit; font-size:.8rem; cursor:pointer; }
|
|
|
|
.wrn-chart { display: grid; gap: 1rem; min-width: 0; margin: 0; padding: 1rem; border: 1px solid var(--wrn-color-border); border-radius: var(--wrn-radius); color: var(--wrn-color-text); background: var(--wrn-color-surface); box-shadow: var(--wrn-shadow-1); }
|
|
.wrn-chart__header { display: grid; gap: 0.2rem; }
|
|
.wrn-chart__header > span { color: var(--wrn-color-muted); font-size: 0.8rem; }
|
|
.wrn-chart__plot { display: block; width: 100%; min-height: 12rem; overflow: visible; }
|
|
.wrn-chart__axis { stroke: var(--wrn-color-border); stroke-width: 0.5; }
|
|
.wrn-chart__bar { fill: var(--wrn-color-primary); cursor: pointer; transition: opacity var(--wrn-motion-fast), transform var(--wrn-motion-fast); transform-box: fill-box; transform-origin: bottom; }
|
|
.wrn-chart__bar:hover { opacity: 0.82; transform: scaleY(1.02); }
|
|
.wrn-chart__bar:focus-visible { outline: 1.5px solid var(--wrn-color-focus); outline-offset: 1px; }
|
|
.wrn-chart__plot g[data-hidden="true"] { opacity: 0.18; pointer-events: none; }
|
|
.wrn-chart__value, .wrn-chart__label { fill: var(--wrn-color-text); font-size: 11px; text-anchor: middle; }
|
|
.wrn-chart__label { fill: var(--wrn-color-muted); }
|
|
.wrn-chart__legend { display: flex; flex-wrap: wrap; gap: 0.5rem; }
|
|
.wrn-chart__legend button { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.5rem; border: 1px solid var(--wrn-color-border); border-radius: 999px; color: var(--wrn-color-text); background: transparent; font: inherit; font-size: 0.75rem; cursor: pointer; }
|
|
.wrn-chart__legend button > span { width: 0.65rem; height: 0.65rem; border-radius: 0.2rem; background: var(--wrn-color-primary); }
|
|
.wrn-chart__legend button[aria-pressed="false"] { opacity: 0.5; }
|
|
}
|
|
}
|