Misc Chart Improvements

Fixed doughnut chart colour loading issues, added WIP dashboard charts, few other misc changes

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

@@ -60,27 +60,6 @@
         </div>
       </div>
     </div><!--/.col-->
-    <div *ngIf="showCategoryBarChart" class="col-xl-6">
-      <div class="card">
-        <div class="card-block">
-          <div class="row">
-            <div class="col-12">
-              <h4 class="card-title mb-0">Monthly Spending by Category</h4>
-            </div>
-          </div>
-          <div class="chart-wrapper">
-            <canvas baseChart
-            [datasets]="barChartDataCategory"
-            [labels]="barChartLabelsCategory"
-            [options]="barChartOptionsCategory"
-            [legend]="barChartLegendCategory"
-            [chartType]="barChartTypeCategory"
-            (chartHover)="chartHovered($event)"
-            (chartClick)="chartClicked($event)"></canvas>
-          </div>
-        </div>
-      </div>
-    </div><!--/.col-->
     <div class="col-xl-6">
       <div class="card">
         <div class="card-block">
@@ -179,44 +158,5 @@
         </div>
       </div>
     </div><!--/.col-->
-    <div class="col-12">
-      <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]="lineChartData"
-            [labels]="lineChartLabels"
-            [options]="lineChartOptions"
-            [legend]="lineChartLegend"
-            [chartType]="lineChartType"
-            (chartHover)="chartHovered($event)"
-            (chartClick)="chartClicked($event)"></canvas>
-          </div>
-          <div *ngIf="showTotalCategoryList" class="chart-wrapper">
-            <ul class="icons-list">
-              <!-- New loop  -->
-              <li *ngFor="let category of totalCategoryList | slice:0:totalCategoryLimit; let i=index">
-                <i [ngClass]="['icon-' + category.icon, getBootstrapColour(i)]"></i>
-                <div class="desc">
-                  <div class="title">{{ category.category || 'N/A' }}</div>
-                </div>
-                <div class="value">
-                  <div class="small text-muted">Bought</div>
-                  <strong>{{ category.value || 'N/A' }}</strong>
-                </div>
-              </li>
-              <li *ngIf="totalCategoryList.length > totalCategoryLimit && disableCategoryButton == false" class="divider text-center">
-                <button type="button" class="btn btn-sm btn-link text-muted" (click)="categoryLoadMore()"><i class="icon-options"></i></button>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div><!--/.col-->
   </div><!--/.row-->
 </div>

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

@@ -116,81 +116,6 @@ export class DashboardCustomerComponent implements OnInit {
   totalCategoryLimit: number = 10;
   totalCategoryList: any[]=[];
 
-  public lineChartData: ChartDataSets[] = [
-    { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
-    { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' },
-    { data: [180, 480, 770, 90, 1000, 270, 400], label: 'Series C', yAxisID: 'y-axis-1' }
-  ];
-  public lineChartLabels: Label[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July','August','September','October','November','December'];
-  public lineChartOptions: (ChartOptions & { annotation: any }) = {
-    responsive: true,
-    scales: {
-      // We use this empty structure as a placeholder for dynamic theming.
-      xAxes: [{}],
-      yAxes: [
-        {
-          id: 'y-axis-0',
-          position: 'left',
-        },
-        {
-          id: 'y-axis-1',
-          position: 'right',
-          gridLines: {
-            color: 'rgba(255,0,0,0.3)',
-          },
-          ticks: {
-            fontColor: 'red',
-          }
-        }
-      ]
-    },
-    annotation: {
-      annotations: [
-        {
-          type: 'line',
-          mode: 'vertical',
-          scaleID: 'x-axis-0',
-          value: 'March',
-          borderColor: 'orange',
-          borderWidth: 2,
-          label: {
-            enabled: true,
-            fontColor: 'orange',
-            content: 'LineAnno'
-          }
-        },
-      ],
-    },
-  };
-  public lineChartColors: Color[] = [
-    { // grey
-      backgroundColor: 'rgba(148,159,177,0.2)',
-      borderColor: 'rgba(148,159,177,1)',
-      pointBackgroundColor: 'rgba(148,159,177,1)',
-      pointBorderColor: '#fff',
-      pointHoverBackgroundColor: '#fff',
-      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
-    },
-    { // dark grey
-      backgroundColor: 'rgba(77,83,96,0.2)',
-      borderColor: 'rgba(77,83,96,1)',
-      pointBackgroundColor: 'rgba(77,83,96,1)',
-      pointBorderColor: '#fff',
-      pointHoverBackgroundColor: '#fff',
-      pointHoverBorderColor: 'rgba(77,83,96,1)'
-    },
-    { // red
-      backgroundColor: 'rgba(255,0,0,0.3)',
-      borderColor: 'red',
-      pointBackgroundColor: 'rgba(148,159,177,1)',
-      pointBorderColor: '#fff',
-      pointHoverBackgroundColor: '#fff',
-      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
-    }
-  ];
-  public lineChartLegend = true;
-  public lineChartType = 'line';
-
 
   // Graph widgets
   public widgetList = [

src/app/dashboard/dashboard.component.ts

@@ -44,6 +44,13 @@ export class DashboardComponent {
       title: 'Sales Last 30 Days',
       dataType: DataType.currency,
     },
+    {
+      type: 'graph',
+      name: 'sales_last_365_days',
+      icon: 'icon-diamond',
+      title: 'Sales Last Year',
+      dataType: DataType.currency,
+    },
     {
       type: 'graph',
       name: 'purchases_last_7_days',
@@ -56,6 +63,12 @@ export class DashboardComponent {
       title: 'Purchases Last 30 Days',
       dataType: DataType.currency,
     },
+    {
+      type: 'graph',
+      name: 'purchases_last_365_days;',
+      title: 'Purchases Last Year',
+      dataType: DataType.currency,
+    },
   ];
 
   disableCategoryButton: boolean = false;

src/app/dashboard/dashboard.routing.ts

@@ -95,7 +95,7 @@ const routes: Routes = [
       {
         path: 'more-graphs-and-tables',
         component: MoreStuffComponent,
-        data: { title: 'More Stuff'}
+        data: { title: 'Infographics'}
       }
     ],
   }

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

@@ -10,7 +10,6 @@
         <canvas baseChart
                 [datasets]="supplierBubbleChartData"
                 [options]="supplierBubbleChartOptions"
-                [colors]="sampleColours"
                 [labels]="supplierBubbleChartLabels"
                 [legend]="showLegend"
                 [chartType]="supplierBubbleChartType">
@@ -22,14 +21,13 @@
     <div class="card-block">
       <div class="row">
         <div class="col-12">
-          <h4 class="card-title mb-0">Last 12 months</h4>
+          <h4 class="card-title mb-0">Spend amount and number of organisations</h4>
         </div>
       </div>
       <div>
         <canvas baseChart
                 [datasets]="yearSpendChartData"
                 [options]="yearSpendChartOptions"
-                [colors]="yearSpendChartColors"
                 [labels]="yearSpendChartLabels"
                 [legend]="showLegend"
                 [chartType]="yearSpendChartType">
@@ -40,15 +38,23 @@
   <div class="card">
     <div class="card-block">
       <div class="row">
-        <div class="col-12">
+        <div class="col-sm-5">
           <h4 class="card-title mb-0">Supplier Spend History</h4>
         </div>
+        <div class="col-sm-7 hidden-sm-down">
+          <div class="btn-toolbar float-right" role="toolbar" aria-label="Toolbar with button groups">
+            <div class="btn-group mr-3" data-toggle="buttons" aria-label="First group">
+              <button class="btn btn-outline-secondary active" onclick="newGroup()"> New Group
+              </button>
+            </div>
+          </div>
+        </div>
       </div>
       <div>
         <canvas baseChart #supplierChart
                 [datasets]="supplierMonthChartData"
                 [options]="supplierMonthChartOptions"
-                [colors]="sampleColours"
+                [colors]="supplierMonthChartColours"
                 [labels]="supplierMonthChartLabels"
                 [legend]="showLegend"
                 [chartType]="supplierMonthChartType">

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

@@ -72,10 +72,9 @@ export class MoreStuffComponent implements OnInit {
     {
       data: [],
       label: ["Spend"],
-      backgroundColor: 'green',
       borderColor: 'blue',
-      hoverBackgroundColor: 'purple',
+      hoverBackgroundColor: 'blue',
-      hoverBorderColor: 'red',
+      hoverBorderColor: 'blue',
     },
   ];
   public supplierBubbleChartLabels: string[] = [];
@@ -137,8 +136,8 @@ export class MoreStuffComponent implements OnInit {
       label: ["Value"],
       fill: false,
       borderColor: 'red',
+      hoverBackgroundColor: '#ffa1b5',
       hoverBorderColor: 'red',
-      hoverBackgroundColor: 'red',
       yAxisID: 'y-value',
     },
     {
@@ -146,7 +145,7 @@ export class MoreStuffComponent implements OnInit {
       label: ["Count"],
       fill: false,
       borderColor: 'blue',
-      hoverBackgroundColor: 'blue',
+      hoverBackgroundColor: '#52afed',
       hoverBorderColor: 'blue',
       yAxisID: 'y-count',
     },
@@ -169,16 +168,8 @@ export class MoreStuffComponent implements OnInit {
   public yearSpendChartColors: Color[] = [
     {
       backgroundColor: [
-        'red',
+        '#ffa1b5',
-        'green',
+        '#52afed'
-        'blue',
-        'purple',
-        'yellow',
-        'brown',
-        'magenta',
-        'cyan',
-        'orange',
-        'pink'
       ]
     }
   ];
@@ -204,14 +195,19 @@ export class MoreStuffComponent implements OnInit {
           half.push(item.half_total);
           quarter.push(item.quarter_total);
         });
-        this.supplierMonthChartData[0].data = quarter.slice(0,10);
+        this.supplierMonthChartData[0].data = quarter.slice(0,15);
-        this.supplierMonthChartData[1].data = half.slice(0,10);
+        this.supplierMonthChartData[1].data = half.slice(0,15);
-        this.supplierMonthChartData[2].data = year.slice(0,10);
+        this.supplierMonthChartData[2].data = year.slice(0,15);
-        this.supplierMonthChartLabels = labels.slice(0,10);
+        this.supplierMonthChartLabels = labels.slice(0,15);
       }
     )
   }
-
+  public newGroup() {
+        this.supplierMonthChartData[0].data = quarter.slice(0,15);
+        this.supplierMonthChartData[1].data = half.slice(0,15);
+        this.supplierMonthChartData[2].data = year.slice(0,15);
+        this.supplierMonthChartLabels = labels.slice(0,15);
+      }
   public supplierMonthChartData: any[] = [
     {
       data: [],
@@ -225,17 +221,17 @@ export class MoreStuffComponent implements OnInit {
       data: [],
       label: ["6 Month"],
       fill: false,
-      borderColor: 'red',
+      borderColor: 'blue',
-      hoverBorderColor: 'red',
+      hoverBorderColor: 'blue',
-      hoverBackgroundColor: 'red',
+      hoverBackgroundColor: 'blue',
     },
     {
       data: [],
       label: ["12 Month"],
       fill: false,
-      borderColor: 'red',
+      borderColor: 'orange',
-      hoverBorderColor: 'red',
+      hoverBorderColor: 'orange',
-      hoverBackgroundColor: 'red',
+      hoverBackgroundColor: 'orange',
     },
   ];
   public supplierMonthChartOptions: any = {

src/app/layouts/full-layout.component.html

@@ -38,6 +38,14 @@
             </div>
           </a>
         </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/more-graphs-and-tables']">
+            <div class="row no-gutters align-items-center">
+              <div class="col-2"><i class="icon-map"></i></div>
+              <div class="col-10">Infographics</div>
+            </div>
+          </a>
+        </li>
         <li class="nav-item">
           <a class="nav-link" routerLinkActive="active" [routerLink]="['/add-data']">
             <div class="row no-gutters align-items-center">
@@ -102,14 +110,6 @@
               </div>
             </a>
           </li>
-          <li class="nav-item">
-            <a class="nav-link" routerLinkActive="active" [routerLink]="['/more-graphs-and-tables']">
-              <div class="row no-gutters align-items-center">
-                <div class="col-2"><i class="icon-map"></i></div>
-                <div class="col-10">Bubble Charts</div>
-              </div>
-            </a>
-          </li>
           <li  *ngIf="accountType == 'organisation'" class="nav-item">
             <a class="nav-link" routerLinkActive="active" [routerLink]="['/payroll-log']">
               <div class="row no-gutters align-items-center">

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

@@ -7,8 +7,7 @@
         <div class="col-sm-7 hidden-sm-down">
           <div class="btn-toolbar float-right" role="toolbar" aria-label="Toolbar with button groups">
             <div class="btn-group mr-3" data-toggle="buttons" aria-label="First group">
-              <label class="btn btn-outline-secondary active">
+              <label class="btn btn-outline-secondary active"> Week
-                <input type="radio" name="options" id="option2" checked> Week
               </label>
             </div>
           </div>

src/app/panels/org-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/org-pie-panel.component.ts

@@ -15,6 +15,37 @@ export class OrgPiePanel implements OnInit {
   public chartType = 'doughnut';
   public chartLegend = true;
   public doughnutChartDataLocal: number[] = [];
+  public doughnutChartColors: any[] = [
+    {
+       backgroundColor: [
+         'red',
+         'green',
+         'pink',
+         'purple',
+         'yellow',
+         'brown',
+         'magenta',
+         'cyan',
+         'orange',
+         'blue'
+    ]
+  },
+  {
+    borderColor: [
+      'red',
+      'green',
+      'pink',
+      'purple',
+      'yellow',
+      'brown',
+      'magenta',
+      'cyan',
+      'orange',
+      'blue'
+    ]
+  }
+];
+
   public doughnutChartLabelsLocal: string[] = [];
 
   constructor(