[page.home] {fix} affichage sur réponse de l'API

This commit is contained in:
Guillaume FAUVET 2018-03-28 11:32:59 +02:00
parent 1997af49f4
commit eaa2bc65e0
1 changed files with 30 additions and 29 deletions

View File

@ -2,40 +2,41 @@
<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) + ' ' +
<template v-if="gstore.dimensions">
<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
<text
class="precision"
:d="'m ' + (gstore.dimensions.padding + gstore.dimensions.text.size + (i*gstore.dimensions.axis.width/gstore.dimensions.axis.precision)) + ',' + (gstore.dimensions.padding) + ' ' +
: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>
<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>
</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>