Merge commit 'c3385e9f'

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

@@ -63,7 +63,7 @@ export class ChartComponent implements OnInit, AfterViewInit, OnDestroy {
 
   private htmlLegendPlugin = {
     id: 'htmlLegend',
-    afterUpdate:  (chart, args, options) => {
+    afterUpdate:  (chart) => {
       const ul = this.getOrCreateLegendList();
 
       // Remove old legend items
@@ -76,7 +76,8 @@ export class ChartComponent implements OnInit, AfterViewInit, OnDestroy {
 
       items.forEach(item => {
         const li = document.createElement('li');
-        if(this.legendClass){
+
+        if (this.legendClass){
           li.classList.add(this.legendClass);
         }
         else{
@@ -107,7 +108,7 @@ export class ChartComponent implements OnInit, AfterViewInit, OnDestroy {
         boxSpan.style.borderColor = item.strokeStyle;
         boxSpan.style.borderWidth = item.lineWidth + 'px';
 
-        if(!this.legendClass){
+        if (!this.legendClass){
           boxSpan.style.display = 'inline-block';
           boxSpan.style.height = '20px';
           boxSpan.style.marginRight = '10px';
@@ -120,7 +121,7 @@ export class ChartComponent implements OnInit, AfterViewInit, OnDestroy {
         textContainer.style.color = item.color;
         textContainer.style.textDecoration = item.hidden ? 'line-through' : '';
 
-        if(!this.legendClass){
+        if (!this.legendClass){
           textContainer.style.margin = '0';
           textContainer.style.padding = '0';
 
@@ -139,7 +140,6 @@ export class ChartComponent implements OnInit, AfterViewInit, OnDestroy {
   };
 
   ngOnInit(): void {
-    console.log(this.height, 99);
     if (!this.colors || !(this.colors instanceof Array) || this.colors.length === 0) {
       this.colors = this.colorDefault;
     }
@@ -229,7 +229,7 @@ export class ChartComponent implements OnInit, AfterViewInit, OnDestroy {
     const dataSets = this.buildDataSet(this.datas);
 
     const chartRef = new Chart(ctx2d, {
-      plugins: [ChartDataLabels],
+      plugins: [ChartDataLabels, this.htmlLegendPlugin],
       type: 'bar',
 
       data: {
@@ -303,9 +303,7 @@ export class ChartComponent implements OnInit, AfterViewInit, OnDestroy {
           },
 
         },
-
         responsive: true,
-
       },
     });
   }
@@ -330,20 +328,6 @@ 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();