Adding new chart and fixing stuff

src/app/dashboard/dashboard.component.html

@@ -18,40 +18,19 @@
           <h4 class="card-title float-left mb-0">Spend by company and Industrial sector</h4>
         </div><!--/.col-->
       </div><!--/.row-->
-      <!-- <div class="chart-wrapper">
+      <div class="chart-wrapper">
         <canvas baseChart class="chart"
-        [datasets]="lineChartData"
+        [datasets]="lineChartDataSector"
-        [labels]="lineChartLabels"
+        [labels]="lineChartLabelsSector"
-        [options]="lineChartOptions"
+        [options]="lineChartOptionsSector"
-        [legend]="lineChartLegend"
+        [legend]="lineChartLegendSector"
-        [chartType]="lineChartType"
+        [chartType]="lineChartTypeSector"
         (chartHover)="chartHovered($event)"
         (chartClick)="chartClicked($event)"></canvas>
-      </div> -->
+      </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">

src/app/dashboard/dashboard.component.ts

@@ -128,7 +128,63 @@ export class DashboardComponent {
   public barChartDataCategory:any[]=[];
   public barChartLabelsCategory:string[] = [];
 
-
+  public lineChartDataSector: ChartDataSets[] = [
+    { data: [], label: '' },
+  ];
+  public lineChartLabelsSector: Label[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July','August','September','October','November','December'];
+  public lineChartOptionsSector: (ChartOptions & { annotation: any }) = {
+    responsive: true,
+    scales: {
+      // We use this empty structure as a placeholder for dynamic theming.
+      xAxes: [{}],
+      yAxes: [{}]
+    },
+    annotation: {
+      annotations: [
+        {
+          type: 'line',
+          mode: 'vertical',
+          scaleID: 'x-axis-0',
+          value: 'March',
+          borderColor: 'orange',
+          borderWidth: 2,
+          label: {
+            enabled: true,
+            fontColor: 'orange',
+            content: 'LineAnno'
+          }
+        },
+      ],
+    },
+  };
+  public lineChartColorsSector: 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 lineChartLegendSector = true;
+  public lineChartTypeSector = 'line';
 
   weekPurchaseList = {
     first: 0,
@@ -160,7 +216,7 @@ export class DashboardComponent {
       result => {
         this.setWeekPurchaseList(result.weeks);
         this.setWeekData(result);
-        this.setChartData(result.data.cat_total);
+        this.setChartDataCat(result.data.cat_total);
         this.totalCategoryList = result.data.cat_list;
         if (this.totalCategoryList) {
           this.showTotalCategoryList = true;
@@ -180,7 +236,7 @@ export class DashboardComponent {
     );
   }
 
-  private setChartData(dataCat: any) {
+  private setChartDataCat(dataCat: any) {
     this.barChartLabelsCategory = Object.keys(dataCat);
     let barChartDataCategoryInitial = Object.keys(dataCat).map(key => dataCat[key]);
     this.barChartDataCategory = [
@@ -198,6 +254,24 @@ export class DashboardComponent {
     }
   }
 
+  private setChartDataSector(dataSec: any) {
+    this.barChartLabelsCategory = Object.keys(dataSec);
+    let lineChartDataSectorInitial = Object.keys(dataSec).map(key => dataSec[key]);
+    this.lineChartDataSector = [
+      {data: barChartDataCategoryInitial, label: 'Series A'},
+    ];
+    this.showCategoryBarChart = true;
+    if (this.weekList1) {
+      let doughnutChartDataCategoryInitial = this.weekList1.map(function(a) {return a.value;});
+      this.doughnutChartDataCategory = [
+        {data: doughnutChartDataCategoryInitial, label: 'Series A'},
+      ];
+      // setTimeout is currently a workaround for ng2-charts labels
+      setTimeout(() => this.doughnutChartLabelsCategory = this.weekList1.map(function(a) {return a.category;}), 0);
+      this.showCategoryDoughnutChart = true;
+    }
+  }
+
   private setDate () {
     this.myWeek1 = moment().startOf('isoWeek').format('YYYY-MM-DD');
   }

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

@@ -42,17 +42,6 @@ export class OrgPiePanel implements OnInit {
     setTimeout(() => this.doughnutChartLabelsLocal = Object.keys(dataLocal), 0);
   }
 
-  // convert Hex to RGBA
-  public convertHex(hex: string, opacity: number) {
-    hex = hex.replace('#', '');
-    const r = parseInt(hex.substring(0, 2), 16);
-    const g = parseInt(hex.substring(2, 4), 16);
-    const b = parseInt(hex.substring(4, 6), 16);
-
-    const rgba = 'rgba(' + r + ', ' + g + ', ' + b + ', ' + opacity / 100 + ')';
-    return rgba;
-  }
-
   // events
   public chartClicked(e: any): void {
   }