Merge commit '0d9bcc41'

projects/visualiseur-core/src/lib/chart/chart.component.ts

@@ -11,7 +11,7 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 import { forkJoin, Subscription } from 'rxjs';
-import Chart from 'chart.js/auto';
+import Chart, {FontSpec} from 'chart.js/auto';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
 
 @Component({
@@ -41,10 +41,11 @@ export class ChartComponent implements OnInit, AfterViewInit, OnDestroy {
     color: '#FFF',
     anchor: 'center',
     align: 'end',
-
+    offset: 4,
+    clamp: true,
+    formatter: (value) => this.formatDataLabel(value),
     font: {
       weight: 'bold',
-      size: 16
     }
   };
 
@@ -59,7 +60,8 @@ export class ChartComponent implements OnInit, AfterViewInit, OnDestroy {
   @Input() withAnimation = true;
   @Input() legendClass: string = null;
   @Input() withValueOnChart = false;
-  @Input() fontStyle: string;
+  @Input() font: FontSpec = {family: 'Roboto, sans-serif', size: 16};
+  @Input() locale: string = null;
 
   protected htmlLegendPlugin = {
     id: 'htmlLegend',
@@ -140,6 +142,18 @@ export class ChartComponent implements OnInit, AfterViewInit, OnDestroy {
   };
 
   ngOnInit(): void {
+    // TODO: utilisation d'un service pour construire les différent type de graphs
+    Chart.defaults.font = Object.assign(Chart.defaults.font, this.font);
+    Chart.defaults.set('plugins.datalabels', {
+      font: Chart.defaults.font
+    });
+
+
+    if ( this.locale) {
+      Chart.defaults.locale = this.locale;
+    }
+
+
     if (!this.colors || !(this.colors instanceof Array) || this.colors.length === 0) {
       this.colors = this.colorDefault;
     }
@@ -203,6 +217,7 @@ export class ChartComponent implements OnInit, AfterViewInit, OnDestroy {
         }
       }
     });
+
     this.colors = newColor;
     return retour;
   }
@@ -229,20 +244,33 @@ export class ChartComponent implements OnInit, AfterViewInit, OnDestroy {
     const dataSets = this.buildDataSet(this.datas);
 
     this.labelOnChartParam.align = 'end';
-    this.labelOnChartParam.anchor = 'center';
+    this.labelOnChartParam.anchor = 'end';
+    this.labelOnChartParam.offset = -6;
     this.labelOnChartParam.color = 'black';
     this.labelOnChartParam.font.weight = 'normal';
 
+
+
+    const maxY = this.calculAxeX();
+
     const chartRef = new Chart(ctx2d, {
       plugins: [ChartDataLabels, this.htmlLegendPlugin],
       type: 'bar',
-
       data: {
         labels: [''],
         datasets: dataSets
       },
       options: {
+        scales: {
+          y: {
+            max: maxY,
+            ticks: {
+              // forces step size to be 50 units
+              stepSize: Math.ceil(maxY / 3)
+            }
+          },
 
+        },
         animation: this.withAnimation,
         indexAxis: 'x',
         maintainAspectRatio: false,
@@ -273,13 +301,6 @@ export class ChartComponent implements OnInit, AfterViewInit, OnDestroy {
     const labels = Object.keys(dataFilter);
     const values = Object.values(dataFilter);
 
-    // TODO: utilisation d'un service pour construire les différent type de graphs
-    Chart.defaults.font.size = 16;
-    if (this.fontStyle){
-      Chart.defaults.font.family = 'Roboto, sans-serif';
-    }
-
-
     const chatRef = new Chart(ctx2d, {
       plugins: [ChartDataLabels],
       type: 'pie',
@@ -329,10 +350,26 @@ export class ChartComponent implements OnInit, AfterViewInit, OnDestroy {
     return listContainer;
   }
 
-  capitalizeFirstLetter(text: string): string {
+  protected capitalizeFirstLetter(text: string): string {
     return text.charAt(0).toUpperCase() + text.toLowerCase().slice(1);
   }
 
+  /**
+   *
+   * Calcul d'une marge pour l'axe X supérieur de 10% par rapport à la valeur max de chartData
+   * @protected
+   */
+  protected calculAxeX(): number{
+    const max = Math.max(...Object.values(this.chartData));
+
+    return ( Math.ceil( ( max * 0.1 ) ) + max);
+  }
+
+  protected formatDataLabel(value: number){
+    console.log(value, value.toLocaleString(Chart.defaults.locale), this.locale, Chart.defaults.locale );
+    return value.toLocaleString(Chart.defaults.locale);
+  }
+
   ngOnDestroy(): void {
     if (this.querySubscription) {
       this.querySubscription.unsubscribe();

projects/visualiseur-core/src/lib/pipes/information-sheet-filter.pipe.ts

 import { Pipe, PipeTransform } from '@angular/core';
-import {toFixed} from 'ol/math';
 
 @Pipe({
   name: 'informationSheetFilter'
@@ -16,9 +15,13 @@ export class InformationSheetFilterPipe implements PipeTransform {
     } else if (value === true || value === false) {
       return value ? 'Oui' : 'Non';
     } else if (isFinite(value as number)) {
+      if (typeof value === 'string'){
+        value = parseFloat(value);
+      }
       if (digit || digit === 0) {
-        value = toFixed(value as number, digit);
+        value = parseFloat( (value).toFixed(digit));
       }
+
       return value.toLocaleString(local);
     } else {
       return value;