Affichage graphique au changement de page

Version imprimable

1 pièce(s) jointe(s)

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:

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:

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:

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 :)

09/01/2021, 12h33
krakatoa

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

Résultat strictement identique :(

Code:

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();
  }
}

09/01/2021, 12h50
Whisper40

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..
09/01/2021, 13h25
krakatoa

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
09/01/2021, 13h27
Whisper40

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..

Solution (l'update de la chart) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
import { ChartComponent } from 'angular2-chartjs';
 
<chart #chart1 type="bar" [data]="data" [options]="options"></chart>
 
 @ViewChild('chart1') chart1: ChartComponent; 
 
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;
      this.chart1.chart.update(); //new
 
    });    
  }

Lors du changement de thème je rappel désormais ma function qui get la data de l'API. (si tu vois mieux n'hésite pas à me dire)

Source : https://github.com/emn178/angular2-chartjs/issues/33

merci :)

nomrmalement on utilise : new chart(

Code:

1
2
 
 this.linechart = new Chart('linechart', {

exemple:

Code:

1
2
3
4
 
<div class="plot">
  <canvas id="linechart"></canvas>
</div>

Code:

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
 
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs';
import { MeasurementService } from '../shared/measurement.service';
import { Chart } from 'chart.js';
 
@Component({
  selector: 'tl-measurement',
  templateUrl: './measurement.component.html',
  styleUrls: ['./measurement.component.css']
})
export class MeasurementComponent implements OnInit {
 
  measurements:Observable<any>;
  displayedColumns: string[] = ['timestamp', 'temperature'];
  location:string;
  linechart = [];
  labels = [];
  values = [];
 
  constructor(private measurementService:MeasurementService, private route:ActivatedRoute) { }
 
  ngOnInit(): void {
    this.measurements = this.measurementService.getMeasurements(parseInt(this.route.snapshot.paramMap.get('stationId')));
    this.measurements.subscribe(r => this.location = r[0].station.location);
    this.measurements.subscribe(r => {
      for(let i=0;i<r.length;i++) {
        this.labels.push(new Date(r[i].timestamp*1000).toLocaleString("en-US"));
        this.values.push(r[i].temperature);
      }
      this.linechart = new Chart('linechart', {
        type: 'line',
        data: {
          labels: this.labels,
          datasets: [{
            label: "Temperature [*C]",
            data: this.values,
            fill: false,
            lineTension: 0.5,
            borderColor: "green",
            borderWidth: 4
          }]
        },
        options: {
          title: {
            text: "Temperatures chart",
            display: true
          },
        },
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      });
    });
  }
}

essaye ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
constructor(private ref: ChangeDetectorRef) {
}
 
 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;
 
 
      this.ref.detectChanges();        // ici --------------------------------------
    });    
  }

09/01/2021, 13h46
Whisper40

J'ai suivi l'implémentation qu'ils donnaient dans le template en adaptant un minimum pour mes besoins.

Le detectChanges n'a eut aucune conséquence
09/01/2021, 14h35
krakatoa

et avec new Chart(..) ?
09/01/2021, 14h36
Whisper40

Je préfère ne pas passer avec ça, ça me fait inclure un composant externe au template, je veux les limiter au max :)
09/01/2021, 14h39
dukoid

vu que tu utilises le package chartjs, les graphiques s'affichent donc le package tu l'as chargé et utilisé donc je ne vois pas ce que ça change

peux tu expliquer ce point ?
09/01/2021, 14h43
Whisper40

J'utilise "angular2-chartjs", ça me ferais inclure un autre "js" dans la page si j'inclus import { Chart } from 'chart.js' non ?
09/01/2021, 14h44
dukoid

dans le composant: chart
tu fais un ngOnChange pour détecter le changement de valeur de : @Input() data
donc dans le ngOnChanges() tu lances un : this.ref.detectChange()

peut être .... sans stackblitz je ne peux pas essayer
10/01/2021, 10h43
Whisper40

Ta proposition n'a pas fonctionné de mon côté, mais franchement la solution trouvée me convient trés bien, je vais mettre en résolu :)
Merci à vous