import { Component } from '@angular/core';
import { ObserverSize } from '@yelon/abc/observers';
import { ChartEChartsEvent, ChartEChartsModule, ChartEChartsOption } from '@yelon/chart/chart-echarts';
import { NzButtonModule } from 'ng-zorro-antd/button';
@Component({
selector: 'components-observers-basic',
template: `
<div class="mb-md">
<button nz-button (click)="addWidth()">Add width of div element</button>
<button nz-button (click)="reduceWidth()">Reduce width of div element</button>
</div>
<div (observeSize)="echart?.chart?.resize()" [style.width.px]="width">
<chart-echarts #echart [option]="option" (events)="handleEvents($event)" />
</div>
`,
standalone: true,
imports: [NzButtonModule, ChartEChartsModule, ObserverSize]
})
export class ComponentsObserversBasicComponent {
width = 200;
option: ChartEChartsOption = {
tooltip: {
formatter: '{a} <br/>{b} : {c}%'
},
series: [
{
name: 'Pressure',
type: 'gauge',
detail: {
formatter: '{value}'
},
data: [
{
value: 50,
name: 'SCORE'
}
]
}
]
};
handleEvents(ev: ChartEChartsEvent): void {
console.log(ev);
}
addWidth(): void {
this.width += 100;
}
reduceWidth(): void {
this.width -= 100;
}
}