la problemática es la siguiente en angular tengo ciertos datos que me envían desde un endpoint el cual es el siguiente:
la información que trae lo muestro de la siguiente manera:
hasta aquí todo bien lo que necesito es lo siguiente necesito cambiar esos datos para que sea mas entendible para el cliente de esta manera:
este es el servicio para consumir la información del endpoind
export class DashboardService {
constructor(private http: HttpClient, private AuthService: AuthService) {}
//dashboard
getDashboard = (): Promise<any> => {
return this.http
.get<any>(environment.host + 'dashboard', {
headers: this.AuthService.userHeadersJSON(),
})
.toPromise();
};
}
el component.ts en esta parte existe una grafica pero no le tomen inportancia lo que importa es donde se muestran los datos de "productos mas vendidos","top aseguradoras"
constructor(private DashboardService: DashboardService) {}
ngOnInit(): void {
this.DashboardService.getDashboard().then(
({
incomePerMonth,
salesPerMonth,
topInsurances,
topProduct,
topVehicles,
totalIncome,
totalSales,
}: any) => {
let objectIncomePerMonth = { data: [], label: 'Ingresos por mes' };
incomePerMonth.forEach((element) => {
objectIncomePerMonth.data.push(element.total);
this.barChartLabelsIncomePerMonth.push(
this.DiccionarioMeses.filter((e) => e.id === element.month)[0].label
);
});
this.barChartDataIncomePerMonth.push(objectIncomePerMonth);
let objectSalesPerMonth = { data: [], label: 'Ventas por mes' };
salesPerMonth.forEach((element) => {
objectSalesPerMonth.data.push(element.total);
this.barChartLabelsSalesPerMonth.push(
this.DiccionarioMeses.filter((e) => e.id === element.month)[0].label
);
});
this.barChartDataSalesPerMonth.push(objectSalesPerMonth);
this.topProduct = topProduct;
this.topInsurances = topInsurances;
this.topVehicles = topVehicles;
}
);
}
}
y el component.html que es donde pinto los datos que se muestran
<diV class="row" style="margin-top: 10px; margin:20px; ">
<div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12 margins6">
<h3 style="margin-left: 15px">Productos más vistos</h3>
<ol>
<li *ngFor="let producto of topProduct">
{{ producto.product }} {{ producto.provider }}
</li>
</ol>
</div>
<div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12 margins6">
<h3 style="margin-left: 15px">Top aseguradoras</h3>
<ol>
<li *ngFor="let insurances of topInsurances">{{ insurances | uppercase}}</li>
</ol>
</div>
<div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12 margins6">
<h3 style="margin-left: 15px">Top de vehiculos asegurados</h3>
<ol>
<li *ngFor="let vehicles of topVehicles">
{{ vehicles.brand }} {{ vehicles.model }} {{ vehicles.year }}
</li>
</ol>
</div>
</diV>