[home > graphique svg]
This commit is contained in:
parent
20a4f86d5c
commit
6e375a8e14
|
@ -21,6 +21,7 @@
|
||||||
<link rel='stylesheet' type='text/css' href='/css/menu.css'>
|
<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/header.css'>
|
||||||
<link rel='stylesheet' type='text/css' href='/css/container.css'>
|
<link rel='stylesheet' type='text/css' href='/css/container.css'>
|
||||||
|
<link rel='stylesheet' type='text/css' href='/css/container/svg.css'>
|
||||||
|
|
||||||
<!-- JS dependencies -->
|
<!-- JS dependencies -->
|
||||||
<script type='text/javascript' src='/js/_SERVER.js'></script>
|
<script type='text/javascript' src='/js/_SERVER.js'></script>
|
||||||
|
|
|
@ -1,6 +1,42 @@
|
||||||
<template>
|
<template>
|
||||||
|
|
||||||
<div id='CONTAINER' class='list'>
|
<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>
|
||||||
<section>bla</section>
|
<section>bla</section>
|
||||||
|
@ -30,7 +66,17 @@
|
||||||
export default {
|
export default {
|
||||||
name: 'CONTAINER_PAGE1',
|
name: 'CONTAINER_PAGE1',
|
||||||
data(){
|
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');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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"]);
|
|
@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue