graphics

mvdornellas · Mar 18, 2021 · f6df0be · f6df0be
1 parent 566f6a0
commit f6df0be
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 136 deletions.
diff --git a/src/app/company/components/compliance/compliance.component.html b/src/app/company/components/compliance/compliance.component.html
@@ -57,7 +57,7 @@
                                         <div>
                                             <p style="text-align: center; font-size: medium;">{{$index + 1}} - {{standard.value.name}} </p>
                                             <div style="padding-bottom: 10px;">
-                                                <star-rating size="medium" [readOnly]="complianceAssessed" [disabled]="complianceAssessed" starRatingSpeed="noticeable" (starClickChange)="ratingChange($event, $index)" [rating]="standard.value.rating" labelPosition="right" starRatingSizes="small" [numOfStars]="10" labelText="{{form.controls['standards'].controls[$index].value.rating}}" ></star-rating>
+                                                <star-rating size="medium" [readOnly]="complianceAssessed"  starRatingSpeed="noticeable" (starClickChange)="ratingChange($event, $index)" [rating]="standard.value.rating" labelPosition="right" starRatingSizes="small" numOfStars="10" labelText="{{form.controls['standards'].controls[$index].value.rating}}" ></star-rating>
                                                 <mat-error *ngIf="form.controls['standards'].controls[$index].controls['rating'].touched && form.controls['standards'].controls[$index].controls['rating'].hasError('required')">
                                                     Nota de avaliação é <strong>obrigatório</strong>
                                                 </mat-error>

diff --git a/src/app/company/components/table/compliance-rating.html b/src/app/company/components/table/compliance-rating.html
@@ -3,6 +3,6 @@
     <h2 *ngIf="standards.length > 0" style="text-align: center; padding-top: 10px;"><b>{{company.name}}</b></h2>
     <a *ngFor="let standard of standards" href="#" mat-list-item (click)="openLink($event)">
       <span mat-line>{{standard.name}}</span>
-      <star-rating class="rating" starRatingSizes="large" [rating]="standard.rating" [readOnly]="true" numOfStars="10" > </star-rating> 
+      <star-rating class="rating" size="medium" [rating]="standard.rating" [readOnly]="true" numOfStars="10" labelText="{{standard.rating}}" labelPosition="right" > </star-rating> 
     </a>
 </mat-nav-list>
diff --git a/src/app/company/services/company.service.ts b/src/app/company/services/company.service.ts
@@ -13,6 +13,7 @@ export type CompanyModel = {
     standards?: Array<{
         id: string,
         name: string
+        rating: number
     }>
     complianceAssessed?: boolean
     token?: string
@@ -31,16 +32,4 @@ export class CompanyService {
         const { data, success } = await this.client.get<BaseResponse<Array<CompanyModel>>>(`companies`).toPromise();
         return data;
     }
-
-    get(id: number): CompanyModel {
-        return {
-            id: '8q397323',
-            name: 'Marcos teste',
-            cnpj: 239892392,
-            email: '[email protected]',
-            endHire: '7689732',
-            startHire: '2828923',
-            standards: [{id: 'NR-1', name: 'TESTE NR-1'  }, {id: 'NR-2', name: 'TESTE NR-2' }],
-        };
-    }
 }
diff --git a/src/app/dashboard/dashboard.component.css b/src/app/dashboard/dashboard.component.css
@@ -1,17 +1 @@
-.dashboard-card {
-  position: absolute;
-  top: 15px;
-  left: 15px;
-  right: 15px;
-  bottom: 15px;
-}
-
-.more-button {
-  position: absolute;
-  top: 5px;
-  right: 10px;
-}
-
-.dashboard-card-content {
-  text-align: center;
-}
+.ngx-charts, text { fill: #e0e0e0; }
diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
@@ -1,39 +1,40 @@
-<!-- <div class="grid-container">
-  <mat-grid-list cols="2" rowHeight="350px">
-    <mat-grid-tile [colspan]="2" [rowspan]="1">
-      <mat-card class="dashboard-card">
-        <mat-card-header>
-          <mat-card-title>
-            TESTE
-            <button mat-icon-button class="more-button" [matMenuTriggerFor]="menu" aria-label="Toggle menu">
-              <mat-icon>more_vert</mat-icon>
-            </button>
-            <mat-menu #menu="matMenu" xPosition="before">
-              <button mat-menu-item>Expand</button>
-              <button mat-menu-item>Remove</button>
-            </mat-menu>
-          </mat-card-title>
-        </mat-card-header>
-        <mat-card-content class="dashboard-card-content">
-        -->
-          <ngx-charts-bar-vertical-2d 
-          [view]="view"
-          [results]="multi"
-          [gradient]="gradient"
-          [xAxis]="showXAxis"
-          [yAxis]="showYAxis"
-          [legend]="showLegend"
-          [showXAxisLabel]="showXAxisLabel"
-          [showYAxisLabel]="showYAxisLabel"
-          [xAxisLabel]="xAxisLabel"
-          [yAxisLabel]="yAxisLabel"
-          [legendTitle]="legendTitle"
-          (select)="onSelect($event)"
-          (activate)="onActivate($event)"
-          (deactivate)="onDeactivate($event)">
-        </ngx-charts-bar-vertical-2d>
-        <!-- </mat-card-content>
-      </mat-card>
-    </mat-grid-tile>
-  </mat-grid-list>
-</div> -->
+<div class="flexbox-parent">
+  <mat-card style="display: flex;">
+    <mat-card-header>
+      <mat-card-title>
+        Gráfico de Conformidade
+      </mat-card-title>
+    </mat-card-header>
+
+    <mat-card-content>
+      <ngx-charts-bar-vertical-2d *ngIf="multi && multi.length > 0; else teste"
+        [view]="view"
+        [results]="multi"
+        [gradient]="gradient"
+        [scheme]="colorScheme"
+        [xAxis]="showXAxis"
+        [yAxis]="showYAxis"
+        [legend]="showLegend"
+        [showXAxisLabel]="showXAxisLabel"
+        [showYAxisLabel]="showYAxisLabel"
+        [xAxisLabel]="xAxisLabel"
+        [yAxisLabel]="yAxisLabel"
+        [legendTitle]="legendTitle"
+        [maxXAxisTickLength]="maxXAxisTickLength"
+        [maxYAxisTickLength]="maxYAxisTickLength"
+        [legendPosition]="legendPosition"
+        (select)="onSelect($event)"
+        (activate)="onActivate($event)"
+        (deactivate)="onDeactivate($event)">
+      </ngx-charts-bar-vertical-2d>
+
+      <ng-template #teste>
+        <p style="text-align: center; font-size:medium; padding-top: 20px;"><b>Carregando informações...</b></p>
+      </ng-template>
+    </mat-card-content>
+
+  </mat-card>
+
+</div>
+
+
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts
@@ -1,87 +1,59 @@
-import { Component } from '@angular/core';
-
-export let multi = [
-  {
-    name: 'NR1',
-    series: [
-      {
-        name: 'AMBEV',
-        value: 7
-      },
-      {
-        name: 'IFOOD',
-        value: 1
-      }
-    ]
-  },
-
-  {
-    name: 'NR2',
-    series: [
-      {
-        name: 'AMBEV',
-        value: 7
-      },
-      {
-        name: 'IFOOD',
-        value: 5
-      }
-    ]
-  },
-
-  {
-    name: 'NR3',
-    series: [
-      {
-        name: 'AMBEV',
-        value: 3
-      },
-      {
-        name: 'IFOOD',
-        value: 10
-      }
-    ]
-  },
-  {
-    name: 'NR4',
-    series: [
-      {
-        name: 'STEFANINI',
-        value: 1
-      },
-      {
-        name: 'DEXTRA',
-        value: 2
-      }
-    ]
-  }
-];
-
-
+import { Component, OnInit } from '@angular/core';
+import { CompanyService } from '../company/services/company.service';
 
 @Component({
   selector: 'app-dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.css']
 })
-export class DashboardComponent {
+export class DashboardComponent implements OnInit {
 
   multi: any[];
-  view: any[] = [800, 400];
+  view: any[] = [1980, 600];
 
   // options
   showXAxis = true;
   showYAxis = true;
   gradient = true;
   showLegend = true;
   showXAxisLabel = true;
-  xAxisLabel = 'Normas Técnicas';
+  xAxisLabel = 'Consultorias e Acessorias';
   showYAxisLabel = true;
   yAxisLabel = 'Nota de Conformidade';
-  legendTitle = 'Consultorias e Acessorias';
+  legendTitle = 'Normas Técnicas';
+  maxXAxisTickLength = 16;
+  maxYAxisTickLength = 10;
+  legendPosition = 'right';
+
+  colorScheme = {
+    domain: ['#FF8A80',
+    '#EA80FC',
+    '#8C9EFF',
+    '#80D8FF',
+    '#A7FFEB',
+    '#CCFF90',
+    '#FFFF8D',
+    '#FF9E80']
+  };
+
+  constructor(private companyService: CompanyService) {
+  }
 
-  constructor() {
-    Object.assign(this, { multi });
+  async ngOnInit(): Promise<void> {
+    const companies = await this.companyService.getAll();
+    this.multi = companies
+    .filter(a => a.standards.some(b => b.rating > 0))
+    .map(company => {
+      return {
+          name: company.name,
+          series: company.standards.map(standard => {
+            return {
+              name: `${standard.id} - ${standard.name}`,
+              value: standard.rating
+            };
+          })
+        };
+    });
   }
 
  onSelect(data): void {