Commit e50c0d20 authored by Jenkins's avatar Jenkins
Browse files

Merge commit '5caae463'

parents e2e92090 5caae463
<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>
......@@ -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){
......
<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>
......
......@@ -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);
}
});
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment