ptut-vhost/webpack/component/home/page1.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>