Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
lga
crater-ui
Commits
8720f3ae
Commit
8720f3ae
authored
Jan 28, 2022
by
Lionel DURAND
Browse files
Livraison master Janvier
parents
0421ac41
2f355625
Changes
63
Hide whitespace changes
Inline
Side-by-side
README.md
View file @
8720f3ae
...
...
@@ -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
...
...
src/apex-crater.js
deleted
100644 → 0
View file @
0421ac41
// 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
+
"
m²
"
}
}
},
};
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
+
"
m²
"
}
}
},
};
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
+
"
m²
"
}
}
},
};
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
+
"
m²
"
}
}
},
};
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
))
{