59 lines
1.4 KiB
TypeScript
59 lines
1.4 KiB
TypeScript
import { Component, Input, OnInit } from '@angular/core';
|
|
import { LegendPosition, NgxChartsModule } from '@swimlane/ngx-charts';
|
|
|
|
@Component({
|
|
selector: 'app-horizontal-bar-chart',
|
|
templateUrl: './horizontal-bar-chart.component.html',
|
|
styleUrls: ['./horizontal-bar-chart.component.scss'],
|
|
standalone: true,
|
|
imports: [NgxChartsModule],
|
|
})
|
|
export class HorizontalBarChartComponent implements OnInit {
|
|
// options
|
|
showXAxis: boolean = true;
|
|
showYAxis: boolean = true;
|
|
gradient: boolean = false;
|
|
showLegend: boolean = true;
|
|
showXAxisLabel: boolean = true;
|
|
yAxisLabel: string = 'Country';
|
|
showYAxisLabel: boolean = true;
|
|
xAxisLabel: string = 'Population';
|
|
@Input() view: any;
|
|
@Input() legendPosition = LegendPosition.Below;
|
|
single: any[] = [];
|
|
colorScheme: any = {
|
|
domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
|
|
};
|
|
|
|
constructor() {}
|
|
|
|
ngOnInit() {
|
|
this.single = [
|
|
{
|
|
"name": "Germany",
|
|
"value": 8940000
|
|
},
|
|
{
|
|
"name": "USA",
|
|
"value": 5000000
|
|
},
|
|
{
|
|
"name": "France",
|
|
"value": 7200000
|
|
}
|
|
];
|
|
}
|
|
|
|
onSelect(data: any): void {
|
|
console.log('Item clicked', JSON.parse(JSON.stringify(data)));
|
|
}
|
|
|
|
onActivate(data: any): void {
|
|
console.log('Activate', JSON.parse(JSON.stringify(data)));
|
|
}
|
|
|
|
onDeactivate(data: any): void {
|
|
console.log('Deactivate', JSON.parse(JSON.stringify(data)));
|
|
}
|
|
}
|