[home > graphique svg]

public_html/page/home.php

@@ -21,6 +21,7 @@
 		<link rel='stylesheet' type='text/css' href='/css/menu.css'>
 		<link rel='stylesheet' type='text/css' href='/css/header.css'>
 		<link rel='stylesheet' type='text/css' href='/css/container.css'>
+		<link rel='stylesheet' type='text/css' href='/css/container/svg.css'>
 
 	<!-- JS dependencies -->
 	<script type='text/javascript' src='/js/_SERVER.js'></script>

webpack/component/home/page1.vue

@@ -1,6 +1,42 @@
 <template>
 
 	<div id='CONTAINER' class='list'>
+		<svg xmlns="http://www.w3.org/2000/svg">
+			<path
+					:d="'m ' + (gstore.dimensions.padding + gstore.dimensions.text.size) + ',' + (gstore.dimensions.padding) + ' ' +
+						'0,' + (gstore.dimensions.axis.height + gstore.dimensions.padding) + ' ' +
+						(gstore.dimensions.axis.width) + ',0'"></path>
+			<text
+					class="precision"
+					:x="gstore.dimensions.padding + gstore.dimensions.text.size"
+					:y="gstore.dimensions.text.alignV + gstore.dimensions.axis.height + gstore.dimensions.padding">0</text>
+			<template v-for="i in gstore.dimensions.axis.precision">
+				<path
+						class="precision"
+						:d="'m ' + (gstore.dimensions.padding + gstore.dimensions.text.size + (i*gstore.dimensions.axis.width/gstore.dimensions.axis.precision)) + ',' + (gstore.dimensions.padding) + ' ' +
+				  	  '0,' + (gstore.dimensions.axis.height+gstore.dimensions.padding) + ' '"></path>
+				<text
+						class="precision"
+						:x="gstore.dimensions.padding + gstore.dimensions.text.size + (i*gstore.dimensions.axis.width/gstore.dimensions.axis.precision)"
+						:y="gstore.dimensions.text.alignV + gstore.dimensions.axis.height + gstore.dimensions.padding">{{ i*gstore.maxValue/gstore.dimensions.axis.precision }}</text>
+			</template>
+			<template v-for="(value, key, i) in gstore.stats">
+				<text
+						:x="gstore.dimensions.text.size + gstore.dimensions.padding - gstore.dimensions.text.alignH"
+						:y="i*(gstore.dimensions.bin.width + gstore.dimensions.bin.spacing) + gstore.dimensions.padding + gstore.dimensions.text.alignV"
+				>{{ key }}</text>
+				<rect
+				  :class="gstore.colors[i] + ' hiding'"
+				  :x="gstore.dimensions.text.size + gstore.dimensions.padding + 1"
+				  :y="i*(gstore.dimensions.bin.width+gstore.dimensions.bin.spacing) + gstore.dimensions.padding"
+				  :height="gstore.dimensions.bin.width"
+				  :width="gstore.dimensions.bin.margin + (gstore.dimensions.axis.width * value)/gstore.maxValue"
+				  :data-info="value">
+				<title>{{ value }}</title>
+				</rect>
+			</template>
+
+		</svg>
 
 		<section>bla</section>
 		<section>bla</section>
@@ -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');
 		}
 	}
 

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"]);

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
+	}
+}
+