84 lines
2.9 KiB
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> |