[home > graphique svg]
This commit is contained in:
Guillaume FAUVET
xdrm-brackets
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/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>
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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