26 lines
1.2 KiB
TypeScript
26 lines
1.2 KiB
TypeScript
import { html, type TemplateResult } from '@design.estate/dees-element';
|
|
import type { DeesChartArea } from './component.js';
|
|
|
|
export const renderChartArea = (component: DeesChartArea): TemplateResult => {
|
|
return html`
|
|
<div class="mainbox">
|
|
<div class="chartTitle">${component.label}</div>
|
|
<div class="chartContainer"></div>
|
|
${component.seriesStats.length > 0 ? html`
|
|
<div class="statsBar">
|
|
${component.seriesStats.map(s => html`
|
|
<div class="statsSeries">
|
|
<span class="statsColor" style="background:${s.color}"></span>
|
|
<span class="statsName">${s.name}</span>
|
|
<span class="statsItem">latest <strong>${component.yAxisFormatter(s.latest)}</strong></span>
|
|
<span class="statsItem">min <strong>${component.yAxisFormatter(s.min)}</strong></span>
|
|
<span class="statsItem">max <strong>${component.yAxisFormatter(s.max)}</strong></span>
|
|
<span class="statsItem">avg <strong>${component.yAxisFormatter(s.avg)}</strong></span>
|
|
</div>
|
|
`)}
|
|
</div>
|
|
` : ''}
|
|
</div>
|
|
`;
|
|
};
|