Unfished Graph sections

Part 2

src/app/dashboard/add-data.component.html

@@ -29,19 +29,19 @@
             <div class="col-md-9">
               <div class="input-group">
                 <input type="checkbox" class="mr-auto" [(ngModel)]="essentialPurchase" (ngModelChange)="transactionFormValidate()">
-              </div>
                 <span class="help-block">Tick if the purchase is deemed an essential purchase for budgeting purposes.</span>
               </div>
             </div>
+          </div>
           <div class="form-group row">
             <label class="col-md-3 form-control-label" for="text-input">Recurring Purchase</label>
             <div class="col-md-9">
               <div class="input-group">
                 <input type="checkbox" class="mr-auto" [(ngModel)]="recurringPurchase" (ngModelChange)="transactionFormValidate()">
-              </div>
                 <span class="help-block">Tick if the purchase frequently recurs, such as monthly.</span>
               </div>
             </div>
+          </div>
           <div *ngIf="recurringPurchase" class="form-group row">
             <label class="col-md-3 form-control-label" for="text-input"><strong>Recurring Period</strong></label>
             <div class="col-md-9">

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

@@ -179,21 +179,21 @@
         </div>
       </div>
     </div><!--/.col-->
-    <div class="col-xl-6">
+    <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>
+              <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]="barChartDataCategory"
+            [datasets]="lineChartData"
-            [labels]="barChartLabelsCategory"
+            [labels]="lineChartLabels"
-            [options]="barChartOptionsCategory"
+            [options]="lineChartOptions"
-            [legend]="barChartLegendCategory"
+            [legend]="lineChartLegend"
-            [chartType]="barChartTypeCategory"
+            [chartType]="lineChartType"
             (chartHover)="chartHovered($event)"
             (chartClick)="chartClicked($event)"></canvas>
           </div>

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

@@ -115,6 +115,82 @@ 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.html

@@ -11,4 +11,89 @@
     </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]="lineChartData"
+        [labels]="lineChartLabels"
+        [options]="lineChartOptions"
+        [legend]="lineChartLegend"
+        [chartType]="lineChartType"
+        (chartHover)="chartHovered($event)"
+        (chartClick)="chartClicked($event)"></canvas>
+      </div>
+    </div>
+</div>
+<div class=row>
+  <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 Purchases by Category</h4>
+          </div><!--/.col-->
+        </div><!--/.row-->
+        <div class="chart-wrapper">
+          <canvas baseChart class="chart"
+            [datasets]="barChartDataCategory"
+            [labels]="barChartLabelsCategory"
+            [options]="barChartOptionsCategory"
+            [legend]="barChartLegendCategory"
+            [chartType]="barChartTypeCategory"
+            (chartHover)="chartHovered($event)"
+            (chartClick)="chartClicked($event)"></canvas>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-xl-6">
+    <div class="card">
+      <div class="card-block">
+        <div class="row">
+          <div class="col-12">
+            <h4 class="card-title mb-0">No. of Essential Purchases</h4>
+          </div>
+        </div>
+        <div class="chart-wrapper">
+          <canvas baseChart class="chart"
+          [datasets]="barChartDataEssential"
+          [labels]="barChartLabelsEssential"
+          [options]="barChartOptionsEssential"
+          [chartType]="barChartTypeEssential"
+          (chartHover)="chartHovered($event)"
+          (chartClick)="chartClicked($event)"></canvas>
+        </div>
+      </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 mb-0">Weekly Spending by Category</h4>
+            </div>
+          </div>
+          <div class="chart-wrapper">
+            <canvas baseChart class="chart"
+              [datasets]="doughnutChartDataCategory"
+              [labels]="doughnutChartLabelsCategory"
+              [options]="doughnutChartOptionsCategory"
+              [legend]="chartLegend"
+              [chartType]="chartType"
+              (chartHover)="chartHovered($event)"
+              (chartClick)="chartClicked($event)"></canvas>
+          </div>
+        </div>
+      </div>
+  </div>
+    <div class="col-xl-6">
+      <panel-pie></panel-pie>
+    </div>
 </div>

src/app/dashboard/dashboard.component.ts

@@ -3,6 +3,7 @@ import {Router, NavigationEnd} from "@angular/router";
 import { GraphWidget } from '../widgets/graph-widget.component';
 import { OrgBarSnippetComponent } from '../snippets/org-snippet-bar.component';
 import { GraphPanel } from '../panels/graph-panel.component';
+import { PiePanel } from '../panels/pie-panel.component';
 import { DataType } from '../shared/data-types.enum';
 import { environment } from '../../environments/environment';
 
@@ -61,4 +62,5 @@ export class DashboardComponent {
       });
     }
   }
+
 }

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

@@ -1,31 +1,11 @@
 <script src="node_modules/chart.js/src/chart.js"></script>
-<!--
-  <div class="form-group row">
-    <div class="card-block">
-        <div class="row">
-          <div class="col-12">
-            <h4 class="card-title mb-0">Spend by Industrial Sector</h4>
-          </div>
-        </div>
-        <div style="display: block">
-            <canvas baseChart
-              [datasets]="sampleBubbleChartData"
-              [options]="sampleBubbleChartOptions"
-              [colors]="sampleBubbleChartColors"
-              [legend]="sampleBubbleChartLegend"
-              [chartType]="sampleBubbleChartType">
-            </canvas>
-          </div>
-      </div>
-  </div>
-</div>-->
 <div class="animated fadeIn">
   <!-- <div class="form-group row"> -->
     <div class="card">
       <div class="card-block">
           <div class="row">
             <div class="col-12">
-              <h4 class="card-title mb-0">Spend by Region</h4>
+              <h4 class="card-title mb-0">Spend by Company Type</h4>
               </div>
             </div>
             <div style="display: block">
@@ -35,7 +15,11 @@
                   [colors]="sampleBubbleChartColors"
                   [labels]="bubbleChartLabelsCategory"
                   [legend]="chartLegend"
-                  [chartType]="chartType"> <!--bootstrapColours-->
+                  [chartType]="chartType"
+                  (chartHover)="chartHovered($event)"
+                  (chartClick)="chartClicked($event)">
+
+                   <!--bootstrapColours-->
                 </canvas>
           </div>
         </div>

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

@@ -17,7 +17,7 @@ import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
 @Component({
   templateUrl: 'more-graphs-and-tables.component.html',
 })
-export class MoreStuffComponent implements OnInit {  // if you wanna rename this, replace in all files 'MoreStuffComponent' with desired name and 'more-graphs-and-tables.component' with another desired name
+export class MoreStuffComponent implements OnInit {
 // @Input() public recurList: Array<RecurSupplierData>;
   @Output() public onClick = new EventEmitter();
   @Input() public categories: any;
@@ -43,10 +43,55 @@ export class MoreStuffComponent implements OnInit {  // if you wanna rename this
 
   public chartType = 'bubble';
   public chartLegend = true;
-  public bubbleChartDataCategory: any[] = [];
+  public bubbleChartDataCategory: any[] = [
+    {
+  data: [
+    { x: 10, y: 10, r: 10 },
+    { x: 15, y: 5, r: 15 },
+    { x: 26, y: 12, r: 23 },
+    { x: 7, y: 8, r: 8 },
+  ],
+  label: ["Series A"],
+  backgroundColor: 'green',
+  borderColor: 'blue',
+  hoverBackgroundColor: 'purple',
+  hoverBorderColor: 'red',
+},
+{
+data: [
+  { x: 10, y: 2, r: 10 },
+  { x: 15, y: 1, r: 15 },
+  { x: 26, y: 7, r: 23 },
+  { x: 5, y: 8, r: 8 },
+  ],
+  label: ["Series B"],
+  backgroundColor: 'green',
+  borderColor: 'blue',
+  hoverBackgroundColor: 'purple',
+  hoverBorderColor: 'red',
+},
+
+  ];
   public bubbleChartLabelsCategory: string[] = [];
 
   public bubbleChartOptionsCategory:any = {
+    responsive: true,
+    scales: {
+      xAxes: [
+        {
+          ticks: {
+            min: 0,
+      }
+    }
+  ],
+  yAxes: [
+    {
+      ticks: {
+        min: 0,
+      }
+    }
+  ]
+},
     tooltips: {
       callbacks: {
         label: (tooltip, data) => {
@@ -59,7 +104,13 @@ export class MoreStuffComponent implements OnInit {  // if you wanna rename this
   private setChartData(dataCat: any) {
     // now we just need some data and it will display!
   }
+  public chartClicked({ event, active }: { event: MouseEvent, active: {}[] }): void {
+    console.log(event, active);
+  }
 
+  public chartHovered({ event, active }: { event: MouseEvent, active: {}[] }): void {
+    console.log(event, active);
+  }
   // functions
 
   private tooltipLabelCallback(tooltipItem: any, data: any) {
@@ -70,46 +121,6 @@ export class MoreStuffComponent implements OnInit {  // if you wanna rename this
 
   // SAMPLE chart data
 
-  public sampleBubbleChartOptions: ChartOptions = {
-    responsive: true,
-    scales: {
-      xAxes: [
-        {
-          ticks: {
-            min: 0,
-            max: 30,
-          }
-        }
-      ],
-      yAxes: [
-        {
-          ticks: {
-            min: 0,
-            max: 30,
-          }
-        }
-      ]
-    }
-  };
-  public sampleBubbleChartType: ChartType = 'bubble';
-  public sampleBubbleChartLegend = true;
-
-  public sampleBubbleChartData: ChartDataSets[] = [
-    {
-      data: [
-        { x: 10, y: 10, r: 10 },
-        { x: 15, y: 5, r: 15 },
-        { x: 26, y: 12, r: 23 },
-        { x: 7, y: 8, r: 8 },
-      ],
-      label: 'Series A',
-      backgroundColor: 'green',
-      borderColor: 'blue',
-      hoverBackgroundColor: 'purple',
-      hoverBorderColor: 'red',
-    },
-  ];
-
   public sampleBubbleChartColors: Color[] = [
     {
       backgroundColor: [
@@ -127,4 +138,3 @@ export class MoreStuffComponent implements OnInit {  // if you wanna rename this
     }
   ];
 }
-

src/app/providers/org-graphs.service.ts

@@ -3,7 +3,7 @@ import { ApiService } from './api-service';
 
 @Injectable()
 export class OrgGraphsService {
-  private orgGraphUrl = '/v1/customer/graphs';
+  private orgGraphUrl = '/v1/organisation/graphs';
 
   constructor(private api: ApiService) { }
 

src/scss/bootstrap/_type.scss

@@ -66,6 +66,7 @@ small,
 .small {
   font-size: $small-font-size;
   font-weight: $font-weight-normal;
+  padding-left: 20px;
 }
 
 mark,