[home > graphique svg]

This commit is contained in:
Guillaume FAUVET 2018-03-21 18:10:12 +01:00 committed by xdrm-brackets
parent 20a4f86d5c
commit 6e375a8e14
4 changed files with 241 additions and 2 deletions

View File

@ -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>

View File

@ -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');
} }
} }

View File

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

View File

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