Commit 8720f3ae authored by Lionel DURAND's avatar Lionel DURAND
Browse files

Livraison master Janvier

parents 0421ac41 2f355625
......@@ -32,7 +32,7 @@ Remarque :
Pour lancer les tests cypress :
* lancer les tests en mode interactif dans l'app cypress `npm run cypress:test:app-mode:local`
* lancer les tests dans un shell en ligne de commande `npm run cypress:test:app-mode:local:local`
* lancer les tests dans un shell en ligne de commande `npm run cypress:test:shell-mode:local`
## 4) Builder l'application en local et exécuter le build
......
// Config par defaut pour chartjs
// Chart.defaults.global.defaultFontFamily = getVariableCss('--base-font-family');
// Chart.defaults.global.defaultFontColor = 'black';
// Chart.defaults.global.defaultFontSize = 14;
// Chart.defaults.global.legend!.display = false;
// // Pas possible de positionner ChartAnimationOptions à false...
// // @ts-ignore
// Chart.defaults.global.animation = false;
// Chart.defaults.global.responsive = true;
// const ASPECT_RATIO_PAR_DEFAUT = 1.5;
// const ASPECT_RATIO_ECRAN_MOBILE = 1;
// Chart.defaults.global.aspectRatio = document.documentElement.clientWidth > 550 ? ASPECT_RATIO_PAR_DEFAUT : ASPECT_RATIO_ECRAN_MOBILE;
// // A tester : devicePixelRatio permettrait de jouer sur la netteté des légendes qui sont floues si on laisse à 1 (mais pas évident quand on teste)
// Chart.defaults.global.devicePixelRatio = 1;
// Chart.defaults.global.legend!.labels!.fontSize = 14;
//
// Apex.
// Chart.defaults.global.legend!.display = false;
// Chart.defaults.global.defaultFontFamily = getVariableCss('--base-font-family');
// Chart.defaults.global.defaultFontColor = 'black';
// Chart.defaults.global.defaultFontSize = 14;
let apexConfigChart = {
chart: {
height: 350,
// width: 500,
fontFamily: "lato, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,'Helvetica Neue', sans-serif",
foreColor: "#000",
toolbar: {show: false}
}
}
let apexConfigCouleurs = {
colors: ["#3DCB9B99"]
}
let apexConfigDataLabels = {
dataLabels: {
// style: {
// fontSize: "24px",
// fontFamily: "lato, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,\n" +
// " 'Helvetica Neue', sans-serif",
// fontWeight: "bold",
// colors: ["#FF3233"]
// }
enabled: false
}
}
let apexFontStyleConfig = {
fontSize: "14px",
colors: ["#000"],
fontFamily: "lato, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,\n" +
" 'Helvetica Neue', sans-serif",
// fontWeight: "bold",
// cssClass: "apexcharts-xaxis-label"
}
let apexAxisConfig = {
xaxis: {
labels: { style: apexFontStyleConfig}
},
yaxis: {
labels: {style: apexFontStyleConfig}
}
}
let apexStatesConfig = {
states: {
hover: {
filter: {
type: 'darken',
value: 0.50,
}
}
}
}
let apexTitleConfig = {
title: {
align: 'center',
// margin: 10,
// offsetX: 0,
// offsetY: 0,
// floating: false,
style: {
fontSize: "14px",
colors: ["#000"],
fontFamily: "lato, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,\n" +
" 'Helvetica Neue', sans-serif",
fontWeight: "bold",
// cssClass: "apexcharts-xaxis-label"
},
}
}
let apexGridConfig = {
grid: {
show: true,
borderColor: '#DDD',
position: 'back',
xaxis: {
lines: {
show: true
}
},
yaxis: {
lines: {
show: true
}
},
}
}
let apexConfig = {
...apexConfigChart,
...apexConfigCouleurs,
...apexConfigDataLabels,
...apexAxisConfig,
...apexStatesConfig,
...apexTitleConfig,
...apexGridConfig
}
function creerHistogrammeSimple() {
var options_locales = {
series: [],
chart: {
type: "bar",
height: 350
},
title: {
text: "Histogramme vertical simple",
style: apexFontStyleConfig
},
yaxis: {
title: {
text: 'Surface Agricole par habitant (m²)',
style: {
color: undefined,
fontSize: '12px',
fontFamily: 'Helvetica, Arial, sans-serif',
fontWeight: 600,
cssClass: 'apexcharts-xaxis-title',
},
},
},
tooltip: {
y: {
formatter: function (val) {
return val + ""
}
}
},
};
let options = merger(apexConfig, options_locales);
// let options = {...apexConfig, ...options_locales};
var series_histo = [{
name: "Surface Agricole par habitant (m²)",
data: [
{
x: "Toul",
y: 729
},
{
x: "CC Terres Touloises",
y: 4433
},
{
x: "Meurthe- et-Moselle",
y: 3663
},
{
x: "Grand Est",
y: 5301
},
{
x: "France",
y: 3871
}
]
}];
var chart = new ApexCharts(document.querySelector("#histogramme-simple"), options);
chart.render();
chart.updateSeries(series_histo);
}
function creerHistogrammeHorizontal(id) {
var options_locales = {
series: [],
chart: {
type: "bar",
height: 350
},
plotOptions: {
bar: {
horizontal: true,
}
},
title: {
text: "Histogramme horizontal simple",
style: apexFontStyleConfig
},
yaxis: {
title: {
text: undefined,
},
},
tooltip: {
y: {
formatter: function (val) {
return val + ""
}
}
},
};
let options = merger(apexConfig, options_locales);
// let options = {...apexConfig, ...options_locales};
var series_histo = [{
name: "Surface Agricole par habitant (m²)",
data: [
{
x: "Toul",
y: 729
},
{
x: "CC Terres Touloises",
y: 4433
},
{
x: "Meurthe- et-Moselle",
y: 3663
},
{
x: "Grand Est",
y: 5301
},
{
x: "France",
y: 3871
}
]
}];
var chart = new ApexCharts(document.querySelector(id), options);
chart.render();
chart.updateSeries(series_histo);
}
function creerHistogrammeHorizontalDouble(id1, id2) {
var options_locales1 = {
series: [],
chart: {
id: "c1",
group: "horizontal",
type: "bar",
height: 350,
width: 500
},
plotOptions: {
bar: {
horizontal: true,
}
},
xaxis: {
categories: [ "Moins de 20 ha", "De 20 a 50ha", "De 50 a 100 ha", "De 100 à 200 ha", "Plus de 200 ha" ],
// label: {
// show: false,
// minWidth: 150,
// maxWidth: 150,
// align: 'center'
// },
show: true
},
yaxis: {
title: {
text: undefined,
},
label: {
show: false,
minWidth: 150,
maxWidth: 150,
align: 'center'
},
show: true,
reversed: true,
// show: false
},
tooltip: {
y: {
formatter: function (val) {
return val + ""
}
}
},
};
var options_locales2 = {
series: [],
chart: {
id: "c2",
group: "horizontal",
type: "bar",
height: 350,
width: 400
},
plotOptions: {
bar: {
horizontal: true,
}
},
xaxis: {
categories: [ "Moins de 20 ha", "De 20 a 50ha", "De 50 a 100 ha", "De 100 à 200 ha", "Plus de 200 ha" ],
// label: {
// show: true,
// minWidth: 150,
// maxWidth: 150,
// align: 'center'
// },
// // reversed: false,
},
yaxis: {
// // title: {
// // text: "test yaxis",
// // },
// label: {
// show: true,
// minWidth: 150,
// maxWidth: 150,
// align: 'center'
// },
// // reversed: false,
show: false
},
tooltip: {
y: {
formatter: function (val) {
return val + ""
}
}
},
};
let options1 = merger(apexConfig, options_locales1);
let options2 = merger(apexConfig, options_locales2);
var series1 = [{
name: "Nb d'exploitations",
data: [
{
x: "Toul",
y: 729
},
{
x: "CC Terres Touloises",
y: 4433
},
{
x: "Meurthe- et-Moselle",
y: 3663
},
{
x: "Grand Est",
y: 5301
},
{
x: "France",
y: 3871
}
]
}];
var series2 = [{
name: "SAU totale (ha)",
data: [
{
x: "Toul",
y: 729
},
{
x: "CC Terres Touloises",
y: 4433
},
{
x: "Meurthe- et-Moselle",
y: 3663
},
{
x: "Grand Est",
y: 5301
},
{
x: "France",
y: 3871
}
]
}];
var chart = new ApexCharts(document.querySelector(id1), options1);
chart.render();
chart.updateSeries(series1);
var chart = new ApexCharts(document.querySelector(id2), options2);
chart.render();
chart.updateSeries(series2);
}
function creerHistogrammeVerticalDoubleEchelle(id) {
var options_locales = {
series: [],
chart: {
height: 350,
type: "line",
stacked: false,
},
title: {
text: "Histogramme vertical double echelle",
style: apexFontStyleConfig
},
colors: ["#008FFB", "#00E396"],
stroke: {
width: [0, 0]
},
// plotOptions: {
// bar: {
// horizontal: true,
// }
// },
xaxis: {
categories: [ ["Moins", "de 20ha"], ["De 20 à", "50ha"], ["De 50 à", "100 ha"], ["De 100 à", "200 ha"], ["Plus de", "200 ha"]],
// label: {
// show: false,
// minWidth: 150,
// maxWidth: 150,
// align: 'center'
// },
// rotate: 0
tooltip: false
},
yaxis: [
{
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: '#008FFB'
},
labels: {
style: {
colors: '#008FFB',
}
},
title: {
text: "Nombre d'exploitations",
style: {
color: '#008FFB',
}
},
// tooltip: {
// enabled: true
// }
},
{
seriesName: "Surface totale (ha)",
opposite: true,
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: '#00E396'
},
labels: {
style: {
colors: '#00E396',
}
},
title: {
text: "Surface totale (ha)",
style: {
color: '#00E396',
}
},
},
],
// tooltip: {
// fixed: {
// enabled: true,
// position: 'topLeft', // topRight, topLeft, bottomRight, bottomLeft
// offsetY: 30,
// offsetX: 60
// },
// },
legend: {
horizontalAlign: 'left',
offsetX: 40
}
};
let options = merger(apexConfig, options_locales);
var series = [
{name: "Nb d'exploitations",
type: 'column',
colors: ["#147"],
data: [ 35, 12, 8, 6, 2]},
{name: "Surface totale (ha)",
type: 'column',
data: [ 32, 55, 83, 99, 75]},
];
var chart = new ApexCharts(document.querySelector(id), options);
chart.render();
chart.updateSeries(series);
}
function creerHistogrammeGroupesEmpiles() {
var options_locales = {
series: [{
name: "Production",
data: [44, 0, 41, 0, 22, 0]
}, {
name: "Besoins alimentation humaine",
data: [0, 32, 0, 52, 0, 43]
}, {
name: "Besoins alimentation animale",
data: [0, 17, 0, 9, 0, 11]
}],
chart: {
type: "bar",
height: 350,
stacked: true
},
colors: ["#333111", "#999222", "#FF4466"],
plotOptions: {
bar: {
horizontal: false
}
},
stroke: {
width: 1,
colors: ["#fff"]
},
title: {
text: "Histogramme empilé et groupé"
},
xaxis: {
categories: ["Céréales", "Céréales", "Oléoprotéagineux", "Oléoprotéagineux", "Fourrages", "Fourrages"],
// labels: {
// formatter: function(val) {
// return val + "K";
// }
// }
},
yaxis: {
title: {
text: undefined
}
},
tooltip: {
y: {
formatter: function(val) {
return val + "K";
}
}
},
fill: {
opacity: 1
},
legend: {
position: "top",
horizontalAlign: "left",
offsetX: 40
}
};
let options = merger(apexConfig, options_locales);
var chart = new ApexCharts(document.querySelector("#histogramme-groupes-empiles"), options);
chart.render();
chart.updateSeries(series);
}
creerHistogrammeSimple();
creerHistogrammeHorizontal("#histogramme-horizontal")
creerHistogrammeVerticalDoubleEchelle("#histogramme-vertical-double-echelle")
creerHistogrammeHorizontalDouble("#histogramme-double-a", "#histogramme-double-b")
creerHistogrammeGroupesEmpiles();
/**
* Simple object check.
* @param item
* @returns {boolean}
*/
function isObject(item) {
return (item && typeof item === 'object' && !Array.isArray(item));
}
function mergeDeep(target, ...sources) {
if (!sources.length) return target;
const source = sources.shift();
if (isObject(target) && isObject(source)) {