Discussion :

[Whisper40]

Bonjour à tous

J'ai sur une page "DashBoard" un graphique de type Bar basé sur "chartjs".
Lorsque je lance le dashboard, le graphique se dessine sans problème, par contre si je vais sur une autre page et que je revient sur le dashboard, le graphique ne se dessine pas.

Important : La data est pourtant bien là ! car lorsque je clique sur "ne pas afficher tel ou tel status", le graphique se dessine..
Je ne peux pas fournir de stackblitz pour ce cas de figure..


chartjs-bar.component.ts

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import { AfterViewInit, Component, OnDestroy, OnInit } from '@angular/core';
import { NbThemeService, NbColorHelper } from '@nebular/theme';
import { RestApiService } from '../../../shared/rest-api/rest-api.service';
 
@Component({
  selector: 'ngx-chartjs-bar',
  template: `
    <chart type="bar" [data]="data" [options]="options"></chart>
  `,
})
export class ChartjsBarComponent implements OnDestroy, OnInit, AfterViewInit {
  data: any;
  options: any;
  themeSubscription: any;
 
  getHistoryOfContainers(): any{
    this.dataService.getHistoryOfContainerDeployment().subscribe((res)=>{
      this.data.labels = res.labels;     
      this.data.datasets[0].data = res.running;
      this.data.datasets[1].data = res.paused;
      this.data.datasets[2].data = res.stopped;
      this.data.datasets[3].data = res.failed;
    });    
  }
 
  ngOnInit() {
    console.log("passé"); // s'affiche à chaque chargement de page.
    this.getHistoryOfContainers();
  }
 
  constructor(private theme: NbThemeService, private dataService: RestApiService) {    
 
    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
 
      const colors: any = config.variables;
      const chartjs: any = config.variables.chartjs;      
 
      this.data = {
        labels: ['Loading...','Loading...','Loading...','Loading...','Loading...','Loading...','Loading...', 'Loading...', 'Loading...', 'Loading...', 'Loading...', 'Loading...'],
        datasets: [{
          data: [0,0,0,0,0,0,0,0,0,0,0,0],
          label: 'Running',
          backgroundColor: NbColorHelper.hexToRgbA(colors.success, 0.8),
        }, {
          data: [0,0,0,0,0,0,0,0,0,0,0,0],
          label: 'Paused',
          backgroundColor: NbColorHelper.hexToRgbA(colors.warning, 0.8),
        },
        {
          data: [0,0,0,0,0,0,0,0,0,0,0,0],
          label: 'Stopped',
          backgroundColor: NbColorHelper.hexToRgbA(colors.dangerLight, 0.8),
        },
        {
          data: [0,0,0,0,0,0,0,0,0,0,0,0],
          label: 'Failed',
          backgroundColor: NbColorHelper.hexToRgbA(colors.danger, 0.8),
        }],
      };
 
      this.options = {
        maintainAspectRatio: false,
        responsive: true,
        legend: {
          labels: {
            fontColor: chartjs.textColor,
          },
        },
        scales: {
          xAxes: [
            {
              gridLines: {
                display: false,
                color: chartjs.axisLineColor,
              },
              ticks: {
                fontColor: chartjs.textColor,
              },
            },
          ],
          yAxes: [
            {
              gridLines: {
                display: true,
                color: chartjs.axisLineColor,
              },
              ticks: {
                fontColor: chartjs.textColor,
                beginAtZero: true,
                callback: function(value) {if (value % 1 === 0) {return value;}}
              },
            },
          ],
        },
      };
    });
  }
 
  ngOnDestroy(): void {
    this.themeSubscription.unsubscribe();
  }
}

chartjs.component.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="row">
  <div class="col-lg-12">
    <nb-card>
      <nb-card-header>
        <i class="ion-cube"></i>
        <span class="title"> Evolution du nombre de conteneurs au cours du temps</span>
      </nb-card-header>
      <nb-card-body>
        <ngx-chartjs-bar></ngx-chartjs-bar>
      </nb-card-body>
    </nb-card>
  </div>
</div>

chartjs.component.ts

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
import { Component } from '@angular/core';
 
@Component({
  selector: 'ngx-chartjs',
  styleUrls: ['./chartjs.component.scss'],
  templateUrl: './chartjs.component.html',
})
export class ChartjsComponent {}

Si jamais vous avez une idée d'ou ça peut venir