ptut-vhost/webpack/component/home/page1.vue

84 lines
2.9 KiB
Vue

<template>
<div id='CONTAINER' class='list'>
<svg xmlns="http://www.w3.org/2000/svg" :viewBox="gstore.viewBox">
<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
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>{{ (gstore.titles && gstore.titles[key]) ? value + ' ' + gstore.titles[key] : value }}</title>
</rect>
</template>
</template>
</svg>
<section>bla</section>
<section>bla</section>
<hr>
<section>bla</section>
<section>bla</section>
<section>bla</section>
<section>bla</section>
<h1>Some Title</h1>
<section>bla</section>
<section>bla</section>
<section>bla</section>
<section>bla</section>
<h1>Some Title</h1>
<section>bla</section>
<section>bla</section>
</div>
</template>
<script>
export default {
name: 'CONTAINER_PAGE1',
data(){
return {
gstore: gstore.get
}
}
}
window.onload = function() {
let allRect = document.getElementsByTagName('rect');
for (let rect of allRect) {
rect.classList.remove('hiding');
}
}
</script>