Merge commit '0707d6e3'

npm-shrinkwrap.json

@@ -3791,6 +3791,11 @@
       "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.9.1.tgz",
       "integrity": "sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w=="
     },
+    "chartjs-plugin-datalabels": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-2.1.0.tgz",
+      "integrity": "sha512-WA6R4saSlY6mnyX78SkbSo2gGc+cj87lFi5zBrsjjYxE76JgXyxHa1OTodVCzRPoqeYJqSEOffeJ/897kRHR6w=="
+    },
     "chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",

package.json

@@ -56,6 +56,7 @@
     "bootstrap": "^4.3.1",
     "bootstrap-slider": "^11.0.2",
     "chart.js": "^3.9.1",
+    "chartjs-plugin-datalabels": "^2.1.0",
     "core-js": "^2.6.10",
     "core-util-is": "^1.0.2",
     "file-saver": "^2.0.2",

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

@@ -12,6 +12,7 @@ import {
 } from '@angular/core';
 import { forkJoin, Subscription } from 'rxjs';
 import Chart from 'chart.js/auto';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
 
 @Component({
   selector: 'alk-chart',
@@ -36,8 +37,20 @@ export class ChartComponent implements OnInit, AfterViewInit, OnDestroy {
 
   private datas = {};
 
-  @Input() height = 250;
-  @Input() width = 800;
+  private labelOnChartParam = {
+    color: '#FFF',
+    anchor: 'center',
+    align: 'end',
+
+    font: {
+      weight: 'bold',
+      size: 16
+    }
+  };
+
+  public height = 250;
+  public width = 800;
+
   @Input() chartData: {[key: string]: number};
   @Input() type: 'pie' | 'bar';
   @Input() labels: {[key: string]: string};
@@ -45,6 +58,8 @@ export class ChartComponent implements OnInit, AfterViewInit, OnDestroy {
   @Input() colors: string[];
   @Input() withAnimation = true;
   @Input() legendClass: string = null;
+  @Input() withValueOnChart = false;
+  @Input() fontStyle: string;
 
   private htmlLegendPlugin = {
     id: 'htmlLegend',
@@ -103,11 +118,12 @@ export class ChartComponent implements OnInit, AfterViewInit, OnDestroy {
         // Text
         const textContainer = document.createElement('p');
         textContainer.style.color = item.color;
+        textContainer.style.textDecoration = item.hidden ? 'line-through' : '';
 
         if(!this.legendClass){
           textContainer.style.margin = '0';
           textContainer.style.padding = '0';
-          textContainer.style.textDecoration = item.hidden ? 'line-through' : '';
+
           textContainer.style['text-transform'] = 'lowercase';
         }
 
@@ -213,6 +229,7 @@ export class ChartComponent implements OnInit, AfterViewInit, OnDestroy {
     const dataSets = this.buildDataSet(this.datas);
 
     const chartRef = new Chart(ctx2d, {
+      plugins: [ChartDataLabels],
       type: 'bar',
 
       data: {
@@ -220,10 +237,12 @@ export class ChartComponent implements OnInit, AfterViewInit, OnDestroy {
         datasets: dataSets
       },
       options: {
+
         animation: this.withAnimation,
         indexAxis: 'x',
         maintainAspectRatio: false,
         plugins: {
+          datalabels: this.withValueOnChart ? this.labelOnChartParam : null,
           htmlLegend: {
             // ID of the container to put the legend in
             containerID: 'legend-container',
@@ -237,7 +256,7 @@ export class ChartComponent implements OnInit, AfterViewInit, OnDestroy {
         responsive: true,
 
       },
-      plugins: [this.htmlLegendPlugin],
+
     }, );
   }
 
@@ -250,9 +269,14 @@ export class ChartComponent implements OnInit, AfterViewInit, OnDestroy {
     const values = Object.values(dataFilter);
 
     // TODO: utilisation d'un service pour construire les différent type de graphs
-    Chart.defaults.font.size = 30;
-    Chart.defaults.font.family = 'font-family: Roboto, sans-serif;';
+    Chart.defaults.font.size = 16;
+    if (this.fontStyle){
+      Chart.defaults.font.family = 'Roboto, sans-serif';
+    }
+
+
     const chatRef = new Chart(ctx2d, {
+      plugins: [ChartDataLabels],
       type: 'pie',
       data: {
         labels,
@@ -267,6 +291,7 @@ export class ChartComponent implements OnInit, AfterViewInit, OnDestroy {
         indexAxis: 'x',
         maintainAspectRatio: false,
         plugins: {
+          datalabels: this.withValueOnChart ? this.labelOnChartParam : null,
           htmlLegend: {
             // ID of the container to put the legend in
             containerID: 'legend-container',
@@ -274,9 +299,7 @@ export class ChartComponent implements OnInit, AfterViewInit, OnDestroy {
           legend: {
             display: true,
             position: 'right',
-            labels: {
-              fontSize: 30
-            }
+
           },
 
         },
@@ -307,7 +330,20 @@ export class ChartComponent implements OnInit, AfterViewInit, OnDestroy {
     return text.charAt(0).toUpperCase() + text.toLowerCase().slice(1);
   }
 
-
+  onAnimationComplete(  event ) {
+    const chart = event.chart;
+    console.log(315, chart.data, chart.ctx, chart.scales.x, chart.scales);
+    //ctx.font = this.scale.font;
+    //ctx.fillStyle = this.scale.textColor;
+    //ctx.textAlign = "center";
+    //ctx.textBaseline = "bottom";
+
+    /*this.chartData.forEach( (dataset) => {
+      dataset.bars.forEach( (bar) => {
+        ctx.fillText(bar.value, bar.x, bar.y - 5);
+      });
+    })*/
+  }
   ngOnDestroy(): void {
     if (this.querySubscription) {
       this.querySubscription.unsubscribe();

projects/visualiseur-core/src/lib/models/option-impression.ts

@@ -9,7 +9,12 @@
  *       templateId: 'graph-recolte',
  *       colors: ['#7845', '#4578'],
  *       labels: {ete2020: 'été 2020', printemps2020: 'printemps 2020', hivers2025: 'hivers 2025'}
- *     }}
+ *     }},
+ *     view:{
+ *       projection: "urn:ogc:def:crs:EPSG::2154",
+ *       center: [563401.85717836,6792415.9857373],
+ *       zoom: 12
+ *     }
  * }
  * ```
  */
@@ -17,6 +22,8 @@ import {OptionChart} from './option-chart';
 import {featureCollection} from './context';
 import Properties = featureCollection.Properties;
 
+
+
 export interface OptionImpression{
   /** Champs afficher dans l'impression */
   fields?: {[key: string]: unknown};
@@ -26,4 +33,14 @@ export interface OptionImpression{
 
   /** correspondance entre l'id des graph dans le template et les champs  */
   graph?: {[key: string]: OptionChart};
+
+  /** Pour centrer la vue de la carte sur un point */
+  view?: ImpressionView;
 }
+
+export interface ImpressionView{
+  center: number[];
+  zoom: number;
+  projection: string;
+}
+