Merge commit '5caae463'

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

 <canvas id="appChart" [width]="width" [height]="height" #appChart></canvas>
-<div id="containerID" #containerID style="width: 800px;"></div>
+<div id="legend-container-{{legendId}}" #containerID style="width: 800px;"></div>

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

@@ -21,7 +21,7 @@ import ChartDataLabels from 'chartjs-plugin-datalabels';
   encapsulation: ViewEncapsulation.None
 })
 export class ChartComponent implements OnInit, AfterViewInit, OnDestroy {
-  constructor() { }
+
 
   @ViewChildren('appChart') queryAppChart: QueryList<ElementRef>;
   @ViewChild('appChart') appChart: ElementRef;
@@ -46,12 +46,15 @@ export class ChartComponent implements OnInit, AfterViewInit, OnDestroy {
     formatter: (value) => this.formatDataLabel(value),
     font: {
       weight: 'bold',
-    }
+    },
+
   };
 
   public height = 250;
   public width = 800;
 
+  public legendId = null;
+
   @Input() chartData: {[key: string]: number};
   @Input() type: 'pie' | 'bar';
   @Input() labels: {[key: string]: string};
@@ -62,6 +65,11 @@ export class ChartComponent implements OnInit, AfterViewInit, OnDestroy {
   @Input() withValueOnChart = false;
   @Input() font: FontSpec = {family: 'Roboto, sans-serif', size: 16};
   @Input() locale: string = null;
+  @Input() angleValueOnChart = 0;
+
+  constructor() {
+    this.legendId = Math.ceil(Math.random() * (9999 - 1000) + 1000);
+  }
 
   protected htmlLegendPlugin = {
     id: 'htmlLegend',
@@ -126,12 +134,9 @@ export class ChartComponent implements OnInit, AfterViewInit, OnDestroy {
         if (!this.legendClass){
           textContainer.style.margin = '0';
           textContainer.style.padding = '0';
-
-          textContainer.style['text-transform'] = 'lowercase';
         }
 
-
-        const text = document.createTextNode(item.text);
+        const text = document.createTextNode(this.capitalizeFirstLetter(item.text));
         textContainer.appendChild(text);
 
         li.appendChild(boxSpan);
@@ -142,6 +147,7 @@ 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', {
@@ -248,10 +254,15 @@ export class ChartComponent implements OnInit, AfterViewInit, OnDestroy {
     this.labelOnChartParam.offset = -6;
     this.labelOnChartParam.color = 'black';
     this.labelOnChartParam.font.weight = 'normal';
+    let maxY = this.calculAxeX();
+
+    if (this.angleValueOnChart){
+      maxY = this.calculAxeX(0.25);
+      this.labelOnChartParam = Object.assign({rotation: this.angleValueOnChart}, this.labelOnChartParam);
+    }
 
 
 
-    const maxY = this.calculAxeX();
 
     const chartRef = new Chart(ctx2d, {
       plugins: [ChartDataLabels, this.htmlLegendPlugin],
@@ -320,7 +331,7 @@ export class ChartComponent implements OnInit, AfterViewInit, OnDestroy {
           datalabels: this.withValueOnChart ? this.labelOnChartParam : null,
           htmlLegend: {
             // ID of the container to put the legend in
-            containerID: 'legend-container',
+            containerID: 'legend-container-' + this.legendId
           },
           legend: {
             display: true,
@@ -359,10 +370,10 @@ export class ChartComponent implements OnInit, AfterViewInit, OnDestroy {
    * Calcul d'une marge pour l'axe X supérieur de 10% par rapport à la valeur max de chartData
    * @protected
    */
-  protected calculAxeX(): number{
+  protected calculAxeX(marge: number = 0.1): number{
     const max = Math.max(...Object.values(this.chartData));
 
-    return ( Math.ceil( ( max * 0.1 ) ) + max);
+    return ( Math.ceil( ( max * marge) ) + max);
   }
 
   protected formatDataLabel(value: number){

projects/visualiseur-core/src/lib/layers-legend/layer-legend-lite/layer-legend-lite.component.html

 <div class="d-flex flex-column">
   <header class="sidebar-header" *ngIf="rootLayerGroup && (mode === 'Couches' || mode === 'Légende')">
     <h4 class="px-2 m-0 my-1">
-      <span *ngIf="mode === 'Légende'">
+      <span *ngIf="showLegendTitle" >
         <ng-container i18n="@@layerLegendModeLegend">Légende</ng-container>
       </span>
     </h4>

projects/visualiseur-core/src/lib/layers-legend/layer-legend-lite/layer-legend-lite.component.ts

@@ -33,6 +33,8 @@ export class LayerLegendLiteComponent extends  LayersLegendComponent implements
 
   moveMap = false;
 
+  @Input() showLegendTitle: false;
+
   constructor(
     public mapService: MapService,
     public coreService: VisualiseurCoreService,
@@ -99,6 +101,7 @@ export class LayerLegendLiteComponent extends  LayersLegendComponent implements
    *
    */
   private allLayerLegendInArray(rootLayerGroup: LayerGroup): void {
+
     rootLayerGroup.getLayers().forEach(layer => {
       if (layer.get('class') === 'LayerGroup') {
         this.allLayerLegendInArray(layer as LayerGroup);
@@ -110,6 +113,7 @@ export class LayerLegendLiteComponent extends  LayersLegendComponent implements
         const copyLegends = tabLegends.map(legend => Object.assign({layer}, legend));
 
         this.legends = this.legends.concat(copyLegends);
+        console.log(114, this.legends);
       }
     });
   }