dashboard like, dislike

src/app/components/dashboard/dashboard.component.ts

 import { Component, OnInit } from '@angular/core';
-import * as chartData from '../../shared/data/chart';
-import { doughnutData, pieData } from '../../shared/data/chart';
 
 @Component({
   selector: 'app-dashboard',
@@ -8,73 +6,42 @@ import { doughnutData, pieData } from '../../shared/data/chart';
   styleUrls: ['./dashboard.component.scss']
 })
 export class DashboardComponent implements OnInit {
-  public doughnutData = doughnutData;
-  public pieData = pieData;
-  constructor() {
-    Object.assign(this, { doughnutData, pieData })
-  }
-
-  // doughnut 2
-  public view = chartData.view;
-  public doughnutChartColorScheme = chartData.doughnutChartcolorScheme;
-  public doughnutChartShowLabels = chartData.doughnutChartShowLabels;
-  public doughnutChartGradient = chartData.doughnutChartGradient;
-  public doughnutChartTooltip = chartData.doughnutChartTooltip;
-
-  public chart5 = chartData.chart5;
-
-
-  // lineChart
-  public lineChartData = chartData.lineChartData;
-  public lineChartLabels = chartData.lineChartLabels;
-  public lineChartOptions = chartData.lineChartOptions;
-  public lineChartColors = chartData.lineChartColors;
-  public lineChartLegend = chartData.lineChartLegend;
-  public lineChartType = chartData.lineChartType;
-
-  // lineChart
-  public smallLineChartData = chartData.smallLineChartData;
-  public smallLineChartLabels = chartData.smallLineChartLabels;
-  public smallLineChartOptions = chartData.smallLineChartOptions;
-  public smallLineChartColors = chartData.smallLineChartColors;
-  public smallLineChartLegend = chartData.smallLineChartLegend;
-  public smallLineChartType = chartData.smallLineChartType;
-
-  // lineChart
-  public smallLine2ChartData = chartData.smallLine2ChartData;
-  public smallLine2ChartLabels = chartData.smallLine2ChartLabels;
-  public smallLine2ChartOptions = chartData.smallLine2ChartOptions;
-  public smallLine2ChartColors = chartData.smallLine2ChartColors;
-  public smallLine2ChartLegend = chartData.smallLine2ChartLegend;
-  public smallLine2ChartType = chartData.smallLine2ChartType;
-
-  // lineChart
-  public smallLine3ChartData = chartData.smallLine3ChartData;
-  public smallLine3ChartLabels = chartData.smallLine3ChartLabels;
-  public smallLine3ChartOptions = chartData.smallLine3ChartOptions;
-  public smallLine3ChartColors = chartData.smallLine3ChartColors;
-  public smallLine3ChartLegend = chartData.smallLine3ChartLegend;
-  public smallLine3ChartType = chartData.smallLine3ChartType;
-
-  // lineChart
-  public smallLine4ChartData = chartData.smallLine4ChartData;
-  public smallLine4ChartLabels = chartData.smallLine4ChartLabels;
-  public smallLine4ChartOptions = chartData.smallLine4ChartOptions;
-  public smallLine4ChartColors = chartData.smallLine4ChartColors;
-  public smallLine4ChartLegend = chartData.smallLine4ChartLegend;
-  public smallLine4ChartType = chartData.smallLine4ChartType;
-
-  public chart3 = chartData.chart3;
+  likesCount: number = 0;
+  incidentsCount: number = 0;
+  dislikesCount: number = 0;
 
+  constructor() { }
 
+  ngOnInit() {
+  }
 
-  // events
-  public chartClicked(e: any): void {
+  updateStats() {
+    const totalResponses = this.likesCount + this.dislikesCount;
+    const likesPercentage = totalResponses > 0 ? ((this.likesCount / totalResponses) * 100).toFixed(1) : '0';
+    const dislikesPercentage = totalResponses > 0 ? ((this.dislikesCount / totalResponses) * 100).toFixed(1) : '0';
+
+    const likesCountElem = document.getElementById('likesCount');
+    const dislikesCountElem = document.getElementById('dislikesCount');
+    const likesPercentageElem = document.getElementById('likesPercentage');
+    const dislikesPercentageElem = document.getElementById('dislikesPercentage');
+    const incidentsCountElem = document.getElementById('incidentsCount');
+
+    if (likesCountElem && dislikesCountElem && likesPercentageElem && dislikesPercentageElem && incidentsCountElem) {
+      likesCountElem.textContent = this.likesCount.toString();
+      dislikesCountElem.textContent = this.dislikesCount.toString();
+      likesPercentageElem.textContent = `(${likesPercentage}%)`;
+      dislikesPercentageElem.textContent = `(${dislikesPercentage}%)`;
+      incidentsCountElem.textContent = (this.likesCount + this.dislikesCount).toString();
     }
-  public chartHovered(e: any): void {
   }
 
-  ngOnInit() {
+  handleResponse(response: string) {
+    this.incidentsCount++;
+    if (response === 'like') {
+      this.likesCount++;
+    } else if (response === 'dislike') {
+      this.dislikesCount++;
+    }
+    this.updateStats();
   }
-
 }

src/app/shared/components/breadcrumb/breadcrumb.component.html

@@ -4,7 +4,7 @@
             <div class="col-lg-6">
                 <div class="page-header-left">
                     <h3>{{title}}
-                        <small>Multikart Admin panel</small>
+                        <small>SDN Controller panel</small>
                     </h3>
                 </div>
             </div>

src/app/shared/components/sidebar/sidebar.component.html

 <div class="main-header-left d-none d-lg-block">
   <div class="logo-wrapper"><a [routerLink]="'/dashboard/default'"><img class="blur-up lazyloaded"
-        src="assets/images/dashboard/multikart-logo.png" alt=""></a></div>
+        src="assets/images/dashboard/SDNC Scanning 1.jpg" alt=""></a></div>
 </div>
 <div class="sidebar custom-scrollbar">
   <div class="sidebar-user text-center">
     <div><img class="img-60 rounded-circle" src="assets/images/dashboard/man.png" alt="#">
     </div>
-    <h6 class="mt-3 f-14">JOHN</h6>
-    <p>general manager.</p>
+    <h6 class="mt-3 f-14">Imesh Dilshan</h6>
+    <p>User</p>
   </div>
   <ul class="sidebar-menu">
     <li *ngFor="let menuItem of menuItems" [ngClass]="{active: menuItem.active}">