ZF - svg bar

by PhilQ

HTML

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<script type="text/x-template" id="graph-bar-template">
	<svg :width="w" :height="h" xmlns="http://www.w3.org/2000/svg">
		<defs>

			<linearGradient id="gradientwhite" x1="0%" y1="0%" x2="100%" y2="0%">
				<stop offset="25%" stop-color="#ffffff" stop-opacity="0.2" />
				<stop offset="75%" stop-color="#ffffff" stop-opacity="0" />
			</linearGradient>
			<svg id="gradRectWhite">
				<rect id="useCircle" x="0" y="0" width="100%" height="100%" fill="url(#gradientwhite)" />
			</svg>
			
			<linearGradient id="gradientblack" x1="0%" y1="0%" x2="100%" y2="0%">
				<stop offset="25%" stop-color="#000000" stop-opacity="0" />
				<stop offset="75%" stop-color="#000000" stop-opacity="0.5" />
			</linearGradient>
			<svg id="gradRectBlack">
				<rect x="0" y="0" width="100%" height="100%" fill="url(#gradientblack)" />
			</svg>

			<filter id="bar_off" filterUnits="objectBoundingBox" x="-50%" y="-50%" width="200%" height="200%">

				<!-- Inset glow -->
				<feFlood result="insetglowFloodOut" flood-color="#ffffff" flood-opacity="1" />
				<feComposite result="insetglowCutOut" in="insetglowFloodOut" in2="SourceAlpha" operator="out" />
				<feOffset result="insetglowOffsetOut" in="insetglowCutOut" dx="1" dy="1" />
				<feGaussianBlur result="insetglowBlurOut" in="insetglowOffsetOut" stdDeviation="0" />
				<feComponentTransfer result="insetglowOpacityOut" in="insetglowBlurOut">
					<feFuncA type="linear" slope="0.2"/>
				</feComponentTransfer>
				<feComposite result="insetglowCompositeOut" in="insetglowOpacityOut" in2="SourceAlpha" operator="in" />
				<feBlend result="insetglowBlendOut" in="SourceGraphic" in2="insetglowCompositeOut" mode="lighten" />

				<!-- Inset shadow -->
				<feFlood result="insetshadowFloodOut" flood-color="#000000" flood-opacity="1" />
				<feComposite result="insetshadowCutOut" in="insetshadowFloodOut" in2="SourceAlpha" operator="out" />
				<feOffset...

SCSS

svg {
	//background: rgba(255,0,0, 0.5);
	//border: 1px solid rgba(0,0,0, 1);
}
.graph-bar {
	.x-label, .y-label {
		fill: #000;
		font-family: "Verdana";
		font-size: 12px;
	}
	.x-scale-label, .y-scale-label {
		fill: #888;
		font-family: "Verdana";
		font-size: 10px;
	}

	.graph-bar-group {
		rect {
			position: relative;
		}
		.off {
			z-index: 1;
			display: inline;
		}
		.on {
			z-index: 2;
			display: none;
		}

		&:hover {
			text {
				fill: #000;
			}
			.off {
				display: none;
			}
			.on {
				display: inline;
			}
		}
	}
	.value-label {
		font-family: "Verdana";
		font-size: 11px;
	}
}

JavaScript

// The raw data to observe
var chartdata = {
    w: 8,
    h: 4,
	blocksize: 0,
	rotate: false,
	margin: {
		around: 35,
		outer: 20,
    	inner: 5,
    },
    stroke: 0,
	stacked: false,
	percentage: false,
	axes: {
		x: {
			label: "Mening",
			//min_value: "",
			//max_value: "",
			label_size: 25,
			scale_size: 20,
		},
		y: {
			label: "Aantal",
			min_value: "0",
			//max_value: "100",
			label_size: 25,
			scale_size: 20,
		},
	},
	values: [
		{ label: 'Stelling 1', color: '#cccccc', values: [
			{ label: 'Zeer oneens', color: '#B71C1C', value: 14 },
			{ label: 'Oneens', color: '#E53935', value: 6 },
			{ label: 'Eens', color: '#43A047', value: 4 },
			{ label: 'Zeer eens', color: '#1B5E20', value: 5 },
		] },
		{ label: 'Stelling 2', color: '#cccccc', values: [
			{ label: 'Zeer oneens', color: '#B71C1C', value: 5 },
			{ label: 'Oneens', color: '#E53935', value: 0 },
			{ label: 'Eens', color: '#43A047', value: 0 },
			{ label: 'Zeer eens', color: '#1B5E20', value: 0 },
		] },
		{ label: 'Stelling 3', color: '#cccccc', values: [
			{ label: 'Zeer oneens', color: '#B71C1C', value: 31 },
			{ label: 'Oneens', color: '#E53935', value: 56 },
			{ label: 'Neutraal', color: '#eeeeee', value: 21 },
			{ label: 'Eens', color: '#43A047', value: 82 },
			{ label: 'Zeer eens', color: '#1B5E20', value: 4 },
		] },
    ],
};


// A resusable polygon graph component
Vue.component('graph-bar', {
    props: ['chartdata','size'],
    template: '#graph-bar-template',
    computed: {
		w: function () {
			return Math.max(0, Math.round(this.size * this.chartdata.w));
		},
    	h: function () {
			return Math.max(0, Math.round(this.size * this.chartdata.h));
		},

		font_base: function () {
			return Math.round(this.size*0.05);
		},

		graph_w: function () {
			var w = this.w - (1*this.chartdata.margin.around);
			w -= ((this.chartdata.rotate) ? (this.chartdata.axes.x.label_size + this.chartdata.axes.x.scale_size) : (this.chartdata.axes.y.label_size +...