65 lines
4.4 KiB
Plaintext
65 lines
4.4 KiB
Plaintext
component Chart {
|
|
outputs {
|
|
select(payload: { item: string | number | boolean | null | object; index: number; datasetIndex: number; sourceEvent?: Event })
|
|
dataPointClick(payload: { item: string | number | boolean | null | object; index: number; datasetIndex: number; sourceEvent?: Event })
|
|
legendToggle(payload: { item: string | number | boolean | null | object; index: number; datasetIndex?: number; hidden: boolean; sourceEvent?: Event })
|
|
}
|
|
props {
|
|
title: string = "Chart"
|
|
description: string = ""
|
|
items: unknown[] = []
|
|
data: unknown = undefined
|
|
labels: unknown[] = []
|
|
datasets: unknown[] = []
|
|
options: object = {}
|
|
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 = ""
|
|
}
|
|
functions {
|
|
shared function configText() {
|
|
var chartData = typeof data === "string" ? JSON.parse(data) : data
|
|
return JSON.stringify({ title: title, items: items, data: chartData, labels: labels, datasets: datasets, options: options, type: type || variant, valueKey: valueKey, labelKey: labelKey, showLegend: showLegend, showValues: showValues })
|
|
}
|
|
}
|
|
view {
|
|
<figure {...attrs} data-ui-component="Chart" data-wrnexus-runtime="chartjs" data-chart-config="{configText()}" data-color="{color}" data-size="{size}" class="wrn-chart {class}" @chartselect="output.select(event.detail)" @chartpointclick="output.dataPointClick(event.detail)" @chartlegendtoggle="output.legendToggle(event.detail)" data-wrn-owner="Chart" data-wrn-part="root" data-wrn-component="Chart" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
|
{#if title || description}
|
|
<figcaption class="wrn-chart__header" data-wrn-owner="Chart" data-wrn-part="header" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
|
{#if title}<strong>{title}</strong>{/if}
|
|
{#if description}<span>{description}</span>{/if}
|
|
</figcaption>
|
|
{/if}
|
|
<div class="wrn-chart__stage" style="height:{Math.max(120, height)}px" data-wrn-owner="Chart" data-wrn-part="stage" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
|
|
<canvas data-chart-canvas role="img" aria-label="{title || 'Chart'}" data-wrn-owner="Chart" data-wrn-part="canvas" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">Chart data is available in the table below.</canvas>
|
|
</div>
|
|
<p data-chart-status class="wrn-chart__status" role="status" data-wrn-owner="Chart" data-wrn-part="status" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></p>
|
|
<div data-chart-table class="wrn-chart__accessible" data-wrn-owner="Chart" data-wrn-part="accessible" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"></div>
|
|
<slot />
|
|
</figure>
|
|
}
|
|
style {
|
|
.wrn-chart { --wrn-chart-color:var(--wrn-color-primary); display:grid; gap:0.875rem; min-width:0; margin:0; padding:1rem 1.125rem; border:1px solid var(--wrn-color-border); border-radius:var(--wrn-radius); color:var(--wrn-color-text); background:var(--wrn-color-surface); }
|
|
.wrn-chart[data-color="secondary"] { --wrn-chart-color:var(--wrn-color-secondary); }
|
|
.wrn-chart[data-color="success"] { --wrn-chart-color:var(--wrn-color-success); }
|
|
.wrn-chart[data-color="info"] { --wrn-chart-color:var(--wrn-color-info); }
|
|
.wrn-chart[data-color="warning"] { --wrn-chart-color:var(--wrn-color-warning); }
|
|
.wrn-chart[data-color="danger"] { --wrn-chart-color:var(--wrn-color-danger); }
|
|
.wrn-chart__header { display:grid; gap:0.2rem; }
|
|
.wrn-chart__header > strong { font-size:0.9375rem; font-weight:600; }
|
|
.wrn-chart__header > span,.wrn-chart__status { color:var(--wrn-color-text-muted); font-size:0.8125rem; }
|
|
.wrn-chart__stage { position:relative; min-width:0; width:100%; }
|
|
.wrn-chart__stage canvas { display:block; max-width:100%; }
|
|
.wrn-chart__status { margin:0; }
|
|
.wrn-chart__status:empty { display:none; }
|
|
.wrn-chart__accessible { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
|
|
}
|
|
}
|