Remove unused titles on Chart and convert barchart to pie

apps/angular/projects/ordering/src/pages/dashboard/components/order-status-chart/order-status-chart.component.html

@@ -9,8 +9,9 @@
   </div>
   <div class="card-body" >
     <abp-chart
-      type="bar"
+      type="pie"
       [data]="chartData"
+      [options]="options"
       [responsive]="true"
     ></abp-chart>
   </div>

apps/angular/projects/ordering/src/pages/dashboard/components/order-status-chart/order-status-chart.component.ts

@@ -8,18 +8,31 @@ import { OrderStatusDto } from '../../../../lib/proxy/orders';
 export class OrderStatusChartComponent {
   @Input()
   set data(value: OrderStatusDto[]) {
-    this.chartData.labels = [...value.map(x => x.orderStatus)];
+    const filtered = value.filter(x => x.countOfStatusOrder > 0);
     this.chartData.datasets = [
       {
-        label: 'Order Statuses',
+        data: [...filtered.map(x => x.countOfStatusOrder)],
-        data: [...value.map(x => x.countOfStatusOrder)],
         backgroundColor: ['#fdcb6e', '#0984e3', '#ff7675'],
       },
     ];
+    this.chartData.labels = [...filtered.map(x => x.orderStatus)];
   }
 
   chartData = {
     labels: [],
     datasets: [],
   };
+
+  options = {
+    plugins: {
+      title: {
+        display: false,
+        text: '',
+        fontSize: 16,
+      },
+      legend: {
+        position: 'bottom',
+      },
+    },
+  };
 }

apps/angular/projects/ordering/src/pages/dashboard/components/payments-chart/payments-chart.component.ts

@@ -10,7 +10,6 @@ export class PaymentsChartComponent {
   set data(value: PaymentDto[]) {
     this.chartData.datasets = [
       {
-        label: 'Order Statuses',
         data: [...value.map(x => x.rateOfPaymentMethod)],
         backgroundColor: ['#fdcb6e', '#0984e3', '#ff7675'],
       },
@@ -26,9 +25,7 @@ export class PaymentsChartComponent {
   options = {
     plugins: {
       title: {
-        display: true,
+        display: false,
-        text: 'Payment Methods',
-        fontSize: 16,
       },
       legend: {
         position: 'bottom',