|
|
|
@ -7,19 +7,27 @@ require('./gauge-linear.css');
|
|
|
|
|
export class GaugeLinear extends Widget { |
|
|
|
|
private gaugeValue: Pipe<number>; |
|
|
|
|
private gaugeMaxValue: number; |
|
|
|
|
private unit: string; |
|
|
|
|
private decimals: number; |
|
|
|
|
|
|
|
|
|
private bars: SVGRectElement[] = []; |
|
|
|
|
private valueElement: HTMLElement; |
|
|
|
|
private integralValueElement: HTMLElement; |
|
|
|
|
private decimalValueElement: HTMLElement; |
|
|
|
|
|
|
|
|
|
constructor(vnode: any) { |
|
|
|
|
super(vnode); |
|
|
|
|
|
|
|
|
|
this.gaugeValue = vnode.attrs.gaugeValue || new Pipe(0.0); |
|
|
|
|
this.gaugeMaxValue = vnode.attrs.gaugeMaxValue || 1.0; |
|
|
|
|
this.unit = vnode.attrs.unit || ''; |
|
|
|
|
this.decimals = vnode.attrs.decimals || 0; |
|
|
|
|
|
|
|
|
|
this.gaugeValue.onChange(() => this.updateGauge()); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
view(vnode: m.Vnode<{}, {}>): m.Children { |
|
|
|
|
return <div class="widget gauge-linear" style={'flex: ' + this.widgetWidth}> |
|
|
|
|
<p><span class="value"></span><span class="unit">W</span></p> |
|
|
|
|
<p><span class="integral-value"></span><span class="decimal-value"></span><span class="unit">{this.unit}</span></p> |
|
|
|
|
<svg> |
|
|
|
|
</svg> |
|
|
|
|
</div>; |
|
|
|
@ -62,7 +70,12 @@ export class GaugeLinear extends Widget {
|
|
|
|
|
|
|
|
|
|
updateGauge() { |
|
|
|
|
let value = Math.max(0.0, Math.min(this.gaugeMaxValue, this.gaugeValue.get())); |
|
|
|
|
this.valueElement.innerText = value.toFixed(0); |
|
|
|
|
|
|
|
|
|
let integralValue = Math.floor(value); |
|
|
|
|
let decimalValue = value - integralValue; |
|
|
|
|
|
|
|
|
|
this.integralValueElement.innerText = integralValue.toFixed(0); |
|
|
|
|
this.decimalValueElement.innerText = this.decimals > 0 ? decimalValue.toFixed(this.decimals).substr(1) : ''; |
|
|
|
|
|
|
|
|
|
let ratio = value / this.gaugeMaxValue; |
|
|
|
|
let numBars = this.bars.length; |
|
|
|
@ -77,7 +90,8 @@ export class GaugeLinear extends Widget {
|
|
|
|
|
let svgElement: SVGElement = vnode.dom.querySelector('svg'); |
|
|
|
|
this.createSvg(svgElement); |
|
|
|
|
|
|
|
|
|
this.valueElement = vnode.dom.querySelector('span.value'); |
|
|
|
|
this.integralValueElement = vnode.dom.querySelector('span.integral-value'); |
|
|
|
|
this.decimalValueElement = vnode.dom.querySelector('span.decimal-value'); |
|
|
|
|
|
|
|
|
|
this.updateGauge(); |
|
|
|
|
} |
|
|
|
|