Commit d3a444d6 authored by Jenkins's avatar Jenkins
Browse files

Merge commit '0707d6e3'

parents a741970b 0707d6e3
......@@ -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",
......
......@@ -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();
......
......@@ -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;
}
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