Affichage graphique au changement de page

**Whisper40** · 09/01/2021, 12h22

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

**krakatoa** · 09/01/2021, 12h33

ce que tu as mis dans le constructor met le dans ngOnInit()

**Whisper40** · 09/01/2021, 12h43

Résultat strictement identique

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
103
104
105
106
107
108
 
 
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.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;}}
              },
            },
          ],
        },
      };
    });
 
    this.getHistoryOfContainers();
  }
 
  constructor(private theme: NbThemeService, private dataService: RestApiService) {    
 
 
  }
 
  ngOnDestroy(): void {
    this.themeSubscription.unsubscribe();
  }
}

**Whisper40** · 09/01/2021, 12h50

Après tests, le problème se produit uniquement si la data provient de l'API. Le problème n'apparait pas avec de la data locale .
En mettant par example : data: [1,0,0,0,0,0,0,0,0,0,0,0],
Il y a toujours de la data qui s'affiche au load de la page

EDIT : EN plus de ça, lors du changement de couleur du theme, la data disparait tout simplement..

**krakatoa** · 09/01/2021, 13h25

est ce que sur chartjs il existe une fonction : refresh ou reload ou reset ou init ....
pour indiquer à chartjs de rafraichir le graphique à la fin de la récupération des données via l'API

peut être
https://www.chartjs.org/docs/latest/...api.html#reset

**Whisper40** · 09/01/2021, 13h27

Oui elle existe cette fonction, mais je ne vois pas du tout comment l'appliquer dans mon cas..
https://www.chartjs.org/docs/latest/...s/updates.html

Le problème d'affichage et de changement de theme à pour cause ce truc d'update, la data de base se load bien..

Affichage graphique au changement de page

Angular

Vue hybride

Discussions similaires

Partager

Partager