add custom charts

jhonacs2 · May 18, 2023 · 32236d7 · 32236d7
1 parent 647f072
commit 32236d7
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 18 deletions.
diff --git a/src/presentation/app/modules/secure/components/charts/donut/donut.component.ts b/src/presentation/app/modules/secure/components/charts/donut/donut.component.ts
@@ -1,4 +1,4 @@
-import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
+import {AfterViewInit, Component, ElementRef, Input, ViewChild} from '@angular/core';
 import {Chart, registerables} from 'chart.js';
 
 Chart.register(...registerables);
@@ -11,26 +11,18 @@ Chart.register(...registerables);
 export class DonutComponent implements AfterViewInit {
   @ViewChild('doughnut') public htmlCanvas!: ElementRef<HTMLCanvasElement>;
 
+  @Input() public label: string[];
+  @Input() public dataset: { backgroundColor: string[]; data: number[]; hoverOffset: number; label: string }[];
+
   constructor() {
+    this.label = [];
+    this.dataset = [];
   }
 
   ngAfterViewInit(): void {
     const dataDonut = {
-      labels: [
-        'Red',
-        'Blue',
-        'Yellow'
-      ],
-      datasets: [{
-        label: 'My First Dataset',
-        data: [300, 50, 100],
-        backgroundColor: [
-          'rgb(255, 99, 132)',
-          'rgb(54, 162, 235)',
-          'rgb(255, 205, 86)'
-        ],
-        hoverOffset: 4
-      }]
+      labels: this.label,
+      datasets: this.dataset,
     };
     new Chart(this.htmlCanvas.nativeElement, {
       type: 'doughnut',

diff --git a/src/presentation/app/modules/secure/views/graphic/graphic.component.html b/src/presentation/app/modules/secure/views/graphic/graphic.component.html
@@ -1,2 +1,23 @@
-<h1>Test Donut</h1>
-<app-donut></app-donut>
+<div class="row">
+  <div class="col-6">
+    <app-donut [label]="labelDonut" [dataset]="dataDonut"></app-donut>
+  </div>
+
+  <div class="col-6">
+    <app-donut [label]="labelDonut" [dataset]="dataDonut"></app-donut>
+
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-6">
+    <app-donut [label]="labelDonut" [dataset]="dataDonut"></app-donut>
+
+  </div>
+
+  <div class="col-6">
+    <app-donut [label]="labelDonut" [dataset]="dataDonut"></app-donut>
+  </div>
+</div>
+
+
diff --git a/src/presentation/app/modules/secure/views/graphic/graphic.component.ts b/src/presentation/app/modules/secure/views/graphic/graphic.component.ts
@@ -1,5 +1,6 @@
 import {Component, OnInit} from '@angular/core';
 import {Router} from '@angular/router';
+import {generateRandomNumber} from '../../../utils/generateRandomNumber.function';
 
 @Component({
   selector: 'app-graphic',
@@ -8,10 +9,35 @@ import {Router} from '@angular/router';
 })
 export class GraphicComponent implements OnInit {
 
+  public labelDonut: string[];
+  public dataDonut: { backgroundColor: string[]; data: number[]; hoverOffset: number; label: string }[];
+
   constructor(private _router: Router) {
+    this.labelDonut = ['Red', 'Blue', 'Yellow'];
+    this.dataDonut = [{
+      label: 'My First Dataset',
+      data: this._generateArrayNumbers(),
+      backgroundColor: [
+        this._generateRandomRgb(),
+        this._generateRandomRgb(),
+        this._generateRandomRgb()
+      ],
+      hoverOffset: 4
+    }];
   }
 
   ngOnInit(): void {
     sessionStorage.setItem('lastRoute', this._router.url);
   }
+
+  private _generateRandomRgb(): string {
+    const r = generateRandomNumber(255);
+    const g = generateRandomNumber(255);
+    const b = generateRandomNumber(255);
+    return `rgb(${r},${g},${b})`;
+  }
+
+  private _generateArrayNumbers(): number[] {
+    return Array.from({length: 3}, () => generateRandomNumber(300));
+  }
 }
diff --git a/src/presentation/app/modules/utils/generateRandomNumber.function.ts b/src/presentation/app/modules/utils/generateRandomNumber.function.ts
@@ -0,0 +1,3 @@
+export function generateRandomNumber(max: number, min: number = 0,): number {
+  return Math.floor(Math.random() * (max - min)) + min;
+}