| |
| class DashboardChartStatusView extends ComponentBase { |
| |
| constructor(metric, chart) |
| { |
| super('chart-status-view'); |
| this._statusEvaluator = new ChartStatusEvaluator(chart, metric); |
| this._renderLazily = new LazilyEvaluatedFunction((status) => { |
| status = status || {}; |
| this.content('current-value').textContent = status.currentValue || ''; |
| this.content('comparison').textContent = status.label || ''; |
| this.content('comparison').className = status.comparison || ''; |
| }); |
| } |
| |
| render() |
| { |
| this._renderLazily.evaluate(this._statusEvaluator.status()); |
| } |
| |
| static htmlTemplate() |
| { |
| return `<span id="current-value"></span> <span id="comparison"></span>`; |
| } |
| |
| static cssTemplate() |
| { |
| return ` |
| :host { |
| display: block; |
| } |
| |
| #comparison { |
| padding-left: 0.5rem; |
| } |
| |
| #comparison.worse { |
| color: #c33; |
| } |
| |
| #comparison.better { |
| color: #33c; |
| }`; |
| } |
| } |