|
|
|
@ -14,14 +14,25 @@ |
|
|
|
/// limitations under the License.
|
|
|
|
///
|
|
|
|
|
|
|
|
import { ChangeDetectorRef, Component, Input, OnInit, TemplateRef } from '@angular/core'; |
|
|
|
import { |
|
|
|
AfterViewInit, |
|
|
|
ChangeDetectorRef, |
|
|
|
Component, |
|
|
|
ElementRef, |
|
|
|
Input, |
|
|
|
OnDestroy, |
|
|
|
OnInit, |
|
|
|
Renderer2, |
|
|
|
TemplateRef, |
|
|
|
ViewChild |
|
|
|
} from '@angular/core'; |
|
|
|
import { WidgetContext } from '@home/models/widget-component.models'; |
|
|
|
import { formatValue, isDefinedAndNotNull } from '@core/utils'; |
|
|
|
import { DatePipe } from '@angular/common'; |
|
|
|
import { |
|
|
|
backgroundStyle, |
|
|
|
ColorProcessor, |
|
|
|
ComponentStyle, DateFormatProcessor, |
|
|
|
ComponentStyle, |
|
|
|
DateFormatProcessor, |
|
|
|
getDataKey, |
|
|
|
getLabel, |
|
|
|
getSingleTsValue, |
|
|
|
@ -32,13 +43,24 @@ import { |
|
|
|
import { valueCardDefaultSettings, ValueCardLayout, ValueCardWidgetSettings } from './value-card-widget.models'; |
|
|
|
import { WidgetComponent } from '@home/components/widget/widget.component'; |
|
|
|
import { Observable } from 'rxjs'; |
|
|
|
import { ResizeObserver } from '@juggle/resize-observer'; |
|
|
|
|
|
|
|
const squareLayoutSize = 160; |
|
|
|
const squareLayoutPadding = 48; |
|
|
|
const horizontalLayoutHeight = 80; |
|
|
|
|
|
|
|
@Component({ |
|
|
|
selector: 'tb-value-card-widget', |
|
|
|
templateUrl: './value-card-widget.component.html', |
|
|
|
styleUrls: ['./value-card-widget.component.scss'] |
|
|
|
}) |
|
|
|
export class ValueCardWidgetComponent implements OnInit { |
|
|
|
export class ValueCardWidgetComponent implements OnInit, AfterViewInit, OnDestroy { |
|
|
|
|
|
|
|
@ViewChild('valueCardPanel', {static: false}) |
|
|
|
valueCardPanel: ElementRef<HTMLElement>; |
|
|
|
|
|
|
|
@ViewChild('valueCardContent', {static: false}) |
|
|
|
valueCardContent: ElementRef<HTMLElement>; |
|
|
|
|
|
|
|
settings: ValueCardWidgetSettings; |
|
|
|
|
|
|
|
@ -73,11 +95,13 @@ export class ValueCardWidgetComponent implements OnInit { |
|
|
|
backgroundStyle: ComponentStyle = {}; |
|
|
|
overlayStyle: ComponentStyle = {}; |
|
|
|
|
|
|
|
private panelResize$: ResizeObserver; |
|
|
|
|
|
|
|
private horizontal = false; |
|
|
|
private decimals = 0; |
|
|
|
private units = ''; |
|
|
|
|
|
|
|
constructor(private date: DatePipe, |
|
|
|
constructor(private renderer: Renderer2, |
|
|
|
private widgetComponent: WidgetComponent, |
|
|
|
private cd: ChangeDetectorRef) { |
|
|
|
} |
|
|
|
@ -122,6 +146,29 @@ export class ValueCardWidgetComponent implements OnInit { |
|
|
|
this.overlayStyle = overlayStyle(this.settings.background.overlay); |
|
|
|
} |
|
|
|
|
|
|
|
public ngAfterViewInit() { |
|
|
|
if (this.settings.autoScale) { |
|
|
|
if (!this.horizontal) { |
|
|
|
this.renderer.setStyle(this.valueCardContent.nativeElement, 'width', squareLayoutSize + 'px'); |
|
|
|
} |
|
|
|
const height = this.horizontal ? horizontalLayoutHeight : squareLayoutSize; |
|
|
|
this.renderer.setStyle(this.valueCardContent.nativeElement, 'height', height + 'px'); |
|
|
|
this.renderer.setStyle(this.valueCardContent.nativeElement, 'overflow', 'visible'); |
|
|
|
this.renderer.setStyle(this.valueCardContent.nativeElement, 'position', 'absolute'); |
|
|
|
this.panelResize$ = new ResizeObserver(() => { |
|
|
|
this.onResize(); |
|
|
|
}); |
|
|
|
this.panelResize$.observe(this.valueCardPanel.nativeElement); |
|
|
|
this.onResize(); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
ngOnDestroy() { |
|
|
|
if (this.panelResize$) { |
|
|
|
this.panelResize$.disconnect(); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
public onInit() { |
|
|
|
const borderRadius = this.ctx.$widgetElement.css('borderRadius'); |
|
|
|
this.overlayStyle = {...this.overlayStyle, ...{borderRadius}}; |
|
|
|
@ -146,4 +193,22 @@ export class ValueCardWidgetComponent implements OnInit { |
|
|
|
this.dateColor.update(value); |
|
|
|
this.cd.detectChanges(); |
|
|
|
} |
|
|
|
|
|
|
|
private onResize() { |
|
|
|
const panelWidth = this.valueCardPanel.nativeElement.getBoundingClientRect().width - squareLayoutPadding; |
|
|
|
const panelHeight = this.valueCardPanel.nativeElement.getBoundingClientRect().height - (this.horizontal ? 0 : squareLayoutPadding); |
|
|
|
let scale: number; |
|
|
|
if (!this.horizontal) { |
|
|
|
const size = Math.min(panelWidth, panelHeight); |
|
|
|
scale = size / squareLayoutSize; |
|
|
|
} else { |
|
|
|
const targetWidth = panelWidth; |
|
|
|
const aspect = Math.min(panelHeight / targetWidth, 0.25); |
|
|
|
const targetHeight = targetWidth * aspect; |
|
|
|
scale = targetHeight / horizontalLayoutHeight; |
|
|
|
const width = targetWidth / scale; |
|
|
|
this.renderer.setStyle(this.valueCardContent.nativeElement, 'width', width + 'px'); |
|
|
|
} |
|
|
|
this.renderer.setStyle(this.valueCardContent.nativeElement, 'transform', `scale(${scale})`); |
|
|
|
} |
|
|
|
} |
|
|
|
|
Igor Kulikov
3 years ago