+
@@ -30,7 +66,17 @@
export default {
name: 'CONTAINER_PAGE1',
data(){
- return { gstore: gstore.get }
+ return {
+ gstore: gstore.get
+ }
+ }
+ }
+
+ window.onload = function() {
+ let allRect = document.getElementsByTagName('rect');
+
+ for (let rect of allRect) {
+ rect.classList.remove('hiding');
}
}
diff --git a/webpack/data/home.js b/webpack/data/home.js
index 8fe87e0..3e45aa0 100644
--- a/webpack/data/home.js
+++ b/webpack/data/home.js
@@ -1 +1,67 @@
-gstore.add('blo', 12);
+
+/* (1) Load statistics
+---------------------------------------------------------*/
+/* (1) Initialize list */
+gstore.add('stats', []);
+gstore.add('dimensions', null);
+
+/* (2) Get statistics */
+api.call('GET department/stats', {}, function(rs) {
+
+ // {1} If error -> abort //
+ if (rs.error !== 0) {
+ return console.log('No formation found, error: ' + rs.error);
+ }
+
+ let maxValue = null;
+ let maxKeyLength = null;
+ let data = {};
+ let map = {
+ "potentiel" : "Heures dûes",
+ "sous_service" : "Heures à faire",
+ "heures_comp" : "Heures comp.",
+ "heures_vacataire" : "Heures vacataires",
+ "heures_exterieur" : "Heures extérieurs",
+ "heures_ue_desactive" : "Heures UE annulées",
+ "nbr_ue_desactive" : "Nombre d'UE annulées"
+ };
+
+ for (let stat in rs.data) {
+ maxValue = rs.data[stat] > maxValue ? rs.data[stat] : maxValue;
+ maxKeyLength = stat.length > maxKeyLength ? stat.length : maxKeyLength;
+
+ data[map[stat]] = Math.round(rs.data[stat] * 100) / 100;
+ }
+
+ gstore.get.stats = data;
+ gstore.get.dimensions = {
+ padding: 5,
+ text: {
+ size: maxKeyLength * 9.5,
+ alignH: 5,
+ alignV: 20,
+ },
+ bin: {
+ count: Object.keys(gstore.get.stats).length,
+ width: 30,
+ spacing: 15,
+ margin: 5
+ }
+ };
+
+ if (maxValue != null) {
+ let magnitude = Math.pow(10, maxValue.length-1)/2; // ordre de grandeur du nombre
+ maxValue = Math.round(
+ ((gstore.get.dimensions.bin.margin/100)+1) // on rajoute la marge afin qu'un "bin" ne dépasse jamais sur la droite
+ * maxValue / magnitude ) * magnitude;
+ }
+
+ gstore.get.maxValue = maxValue;
+ gstore.get.dimensions.axis = {
+ height: (gstore.get.dimensions.bin.count*gstore.get.dimensions.bin.width) + ((gstore.get.dimensions.bin.count)*gstore.get.dimensions.bin.spacing),
+ width: 500,
+ precision: 4
+ };
+});
+
+gstore.add('colors', ["blue", "yellow", "green", "red", "purple", "lightblue", "lightred", "lightyellow", "lightgreen", "lightpurple"]);
\ No newline at end of file
diff --git a/webpack/scss/container/svg.scss b/webpack/scss/container/svg.scss
new file mode 100644
index 0000000..160ba7b
--- /dev/null
+++ b/webpack/scss/container/svg.scss
@@ -0,0 +1,126 @@
+/* COULEUR POUR LE GRAPH SVG */
+$svg-blue: #3366CC;
+$svg-red: #DC3912;
+$svg-yellow: #FF9900;
+$svg-green: #109618;
+$svg-purple: #990099;
+$svg-lightblue: #0099C6;
+$svg-lightred: #DD4477;
+$svg-lightyellow: #F1CA3A;
+$svg-lightgreen: #AAAA11;
+$svg-lightpurple: #994499;
+
+svg {
+
+ width: 50em;
+ height: 20em;
+ margin: 10px;
+ -webkit-touch-callout: none; /* iOS Safari */
+ -webkit-user-select: none; /* Safari */
+ -moz-user-select: none; /* Firefox */
+ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
+
+ path {
+ fill: none;
+ fill-rule: evenodd;
+
+ stroke: rgb(0, 0, 0);
+ stroke-width: 1px;
+ stroke-linecap: butt;
+ stroke-linejoin: miter;
+ stroke-opacity: 1;
+
+ &.precision {
+ stroke-width: 0.2px;
+ }
+ }
+
+ rect.hiding {
+ width: 0;
+ }
+
+ rect {
+ transition: width 0.75s;
+ cursor: pointer;
+
+ color: rgb(0, 0, 0);
+ clip-rule: nonzero;
+ display: inline;
+ overflow: visible;
+ visibility: visible;
+ opacity: 1;
+ isolation: auto;
+ mix-blend-mode: normal;
+
+ color-interpolation: sRGB;
+ color-interpolation-filters: linearRGB;
+
+ fill-opacity: 1;
+ fill-rule: nonzero;
+
+ stroke: none;
+ stroke-width: 1px;
+ stroke-linecap: butt;
+ stroke-linejoin: miter;
+ stroke-miterlimit: 4;
+ stroke-dasharray: none;
+ stroke-dashoffset: 0;
+ stroke-opacity: 1;
+
+ color-rendering: auto;
+ image-rendering: auto;
+ shape-rendering: auto;
+ text-rendering: auto;
+ }
+
+ text {
+ text-anchor: end;
+
+ &.precision {
+ text-anchor: middle;
+ fill: #666666;
+ font-size: 13px;
+ }
+ }
+
+ .blue {
+ fill: $svg-blue
+ }
+
+ .red {
+ fill: $svg-red
+ }
+
+ .yellow {
+ fill: $svg-yellow
+ }
+
+ .green {
+ fill: $svg-green
+ }
+
+ .purple {
+ fill: $svg-purple
+ }
+
+ .lightblue {
+ fill: $svg-lightblue
+ }
+
+ .lightred {
+ fill: $svg-lightred
+ }
+
+ .lightyellow {
+ fill: $svg-lightyellow
+ }
+
+ .lightgreen {
+ fill: $svg-lightgreen
+ }
+
+ .lightpurple {
+ fill: $svg-lightpurple
+ }
+}
+