Chart Labels and clean up

Added axis labels and cleaned up charts a little.

src/app/dashboard/dashboard-customer.component.ts

@@ -35,7 +35,7 @@ export class DashboardCustomerComponent implements OnInit {
   public bootstrapColours: string[] = ['bg-primary', 'bg-secondary', 'bg-success',
 'bg-danger', 'bg-warning', 'bg-info'];
 
-  public chartType = 'doughnut';
+  public chartType = 'bar';
   public chartLegend = true;
   public doughnutChartDataCategory: any[] = [];
   public doughnutChartLabelsCategory: string[] = [];
@@ -69,10 +69,19 @@ export class DashboardCustomerComponent implements OnInit {
       responsive: true,
       scales:{
           xAxes:[{
-              stacked:true
+            scaleLabel: {
+              display:true,
+              labelString: 'Category'
+            },
+              stacked:true,
+
           }],
           yAxes:[{
-              stacked:true
+            scaleLabel: {
+              display:true,
+              labelString: 'Organisation purchase amount'
+            },
+              stacked:true,
           }]
       }
     };

src/app/dashboard/dashboard.component.html

@@ -11,25 +11,6 @@
     </div><!--/.col-->
   </div><!--/.row-->
   <panel-graph></panel-graph>
-  <div class="card">
-    <div class="card-block">
-      <div class="row">
-        <div class="col-12">
-          <h4 class="card-title float-left mb-0">Spend by company and Industrial sector</h4>
-        </div><!--/.col-->
-      </div><!--/.row-->
-      <div class="chart-wrapper">
-        <canvas baseChart class="chart"
-        [datasets]="lineChartDataSector"
-        [labels]="lineChartLabelsSector"
-        [options]="lineChartOptionsSector"
-        [legend]="lineChartLegendSector"
-        [chartType]="lineChartTypeSector"
-        (chartHover)="chartHovered($event)"
-        (chartClick)="chartClicked($event)"></canvas>
-      </div>
-    </div>
-</div>
 <div class=row>
   <div class="col-xl-6">
     <div class="card">
@@ -51,6 +32,28 @@
       </div>
     </div>
   </div><!--/.col-->
+  <div class="col-xl-6">
+    <div class="card">
+      <div class="card-block">
+        <div class="row">
+          <div class="col-12">
+            <h4 class="card-title float-left mb-0">All Organisation Purchases by Category</h4>
+          </div><!--/.col-->
+        </div><!--/.row-->
+        <div class="chart-wrapper">
+          <canvas baseChart class="chart"
+          [datasets]="barChartDataCategory"
+          [labels]="barChartLabelsCategory"
+          [options]="barChartOptionsCategory"
+          [colors]="barChartColoursCategory"
+          [legend]="barChartLegendCategory"
+          [chartType]="barChartTypeCategory"
+          (chartHover)="chartHovered($event)"
+          (chartClick)="chartClicked($event)"></canvas>
+        </div>
+      </div>
+    </div>
+  </div><!--/.col-->
   <div  *ngIf="showCategoryDoughnutChart" class="col-xl-6">
     <div class="card">
         <div class="card-block">

src/app/dashboard/dashboard.component.ts

@@ -46,9 +46,9 @@ export class DashboardComponent {
     },
     {
       type: 'graph',
-      name: 'sales_last_365_days',
+      name: 'sales_all',
       icon: 'icon-diamond',
-      title: 'Sales Last Year',
+      title: 'All Sales',
       dataType: DataType.currency,
     },
     {
@@ -65,8 +65,8 @@ export class DashboardComponent {
     },
     {
       type: 'graph',
-      name: 'purchases_last_365_days;',
+      name: 'purchases_all;',
-      title: 'Purchases Last Year',
+      title: 'All Purchases',
       dataType: DataType.currency,
     },
   ];
@@ -76,7 +76,7 @@ export class DashboardComponent {
   public bootstrapColours: string[] = ['bg-primary', 'bg-secondary', 'bg-success',
 'bg-danger', 'bg-warning', 'bg-info'];
 
-  public chartType = 'doughnut';
+  public chartType = 'pie';
   public chartLegend = true;
   public doughnutChartDataCategory: any[] = [];
   public doughnutChartLabelsCategory: string[] = [];
@@ -118,6 +118,21 @@ export class DashboardComponent {
       }
     };
   public barChartTypeEssential:string = 'horizontalBar';
+  public barChartColoursCategory: any[] = [
+    {
+      backgroundColor:[
+        'red',
+        'green',
+        'blue',
+        'purple',
+        'yellow',
+        'brown',
+        'magenta',
+        'cyan',
+        'orange',
+        'pink'
+      ]
+    }];
 
   public barChartOptionsCategory:any = {
     scaleShowVerticalLines: false,

src/app/dashboard/more-graphs-and-tables.component.html

@@ -3,7 +3,7 @@
     <div class="card-block">
       <div class="row">
         <div class="col-12">
-          <h4 class="card-title mb-0">Spend by Company Type</h4>
+          <h4 class="card-title mb-0">Spend amount and number of purchases by supplier name</h4>
         </div>
       </div>
       <div>

src/app/dashboard/more-graphs-and-tables.component.ts

@@ -85,9 +85,18 @@ export class MoreStuffComponent implements OnInit {
         type: 'time',
         time: {
           unit: 'month'
+        },
+        scaleLabel:{
+          display:true,
+          labelString:'Date'
         }
       }],
-      yAxes: []
+      yAxes: [{
+        scaleLabel: {
+          display:true,
+          labelString:'Number of purchases'
+        }
+      }]
     },
     tooltips: {
       callbacks: {
@@ -133,7 +142,7 @@ export class MoreStuffComponent implements OnInit {
   public yearSpendChartData: any[] = [
     {
       data: [],
-      label: ["Value"],
+      label: ["Value £"],
       fill: false,
       borderColor: 'red',
       hoverBackgroundColor: '#ffa1b5',
@@ -157,6 +166,10 @@ export class MoreStuffComponent implements OnInit {
         type: 'time',
         time: {
           unit: 'month'
+        },
+        scaleLabel: {
+          display:true,
+          labelString: 'Date'
         }
       }],
       yAxes: [
@@ -238,8 +251,18 @@ export class MoreStuffComponent implements OnInit {
     //maintainAspectRatio: false,
     responsive: true,
     scales: {
-      xAxes: [],
+      xAxes: [{
-      yAxes: []
+        scaleLabel: {
+          display:true,
+          labelString: 'Spend amount £'
+        }
+      }],
+      yAxes: [{
+        scaleLabel: {
+          display:true,
+          labelString: 'Supplier Names'
+        }
+      }]
     },
   };
   public supplierMonthChartLabels: string[] = [];

src/app/panels/pie-panel.component.html

@@ -9,6 +9,7 @@
       <canvas baseChart class="chart"
       [data]="doughnutChartDataLocal"
       [labels]="doughnutChartLabelsLocal"
+      [colors]="doughnutChartColors"
       [legend]="chartLegend"
       [chartType]="chartType"
       (chartHover)="chartHovered($event)"

src/app/panels/pie-panel.component.ts

@@ -16,6 +16,19 @@ export class PiePanel implements OnInit {
   public chartLegend = true;
   public doughnutChartDataLocal: number[] = [];
   public doughnutChartLabelsLocal: string[] = [];
+  public doughnutChartColors: any[] = [{ backgroundColor: [
+    'red',
+    'green',
+    'blue',
+    'purple',
+    'yellow',
+    'brown',
+    'magenta',
+    'cyan',
+    'orange',
+    'pink'
+  ]
+ }];
 
   constructor(
     private api: ApiService,