Szerkesztő:Bean49/nepessegdiagram.js

Megjegyzés: közzététel után frissítened kell a böngésződ gyorsítótárát, hogy lásd a változásokat.

Firefox / Safari: tartsd lenyomva a Shift gombot és kattints a Frissítés gombra a címsorban, vagy használd a Ctrl–F5 vagy Ctrl–R (Macen ⌘–R) billentyűkombinációt
Google Chrome: használd a Ctrl–Shift–R (Macen ⌘–Shift–R) billentyűkombinációt
Internet Explorer / Edge: tartsd nyomva a Ctrl-t, és kattints a Frissítés gombra, vagy nyomj Ctrl–F5-öt
Opera: Nyomj Ctrl–F5-öt

/*
 * Teszt
 */
mw.hook('wikipage.content').add(function ($content) {
	$content.find(".nepessegdiagram").each(function () {
		var szoveg = this.querySelector("p").textContent;
		var chart = JSON.parse(szoveg);
		var div = $(this);
		div.html('<canvas width="' + (div.width() - 20) + '" height="' + (div.height() - 20) + '" style="padding:10px">Oszlopdiagram</canvas>');
		var c = this.querySelector("canvas");
		var ctx = c.getContext("2d");
		
		ctx.translate(0, c.height);
		ctx.scale(1, -1);
		
		var n = chart.data[0].values.length;
		var m = 20;
		var t = 20;
		var f = 0.2;
		var o = Math.floor((c.width - m * 2) / (n - f));
		var h = Math.floor(o * (1 - f));
		var max = chart.data[0].values.reduce(function (a, b) {
			return Math.max(a, b.amount);
		}, 0);
		
		ctx.save();
		ctx.fillStyle = "steelblue";
		ctx.translate(m, t);
		ctx.scale(1, (c.height - t * 2) / max);
		chart.data[0].values.forEach(function (item, i) {
			ctx.fillRect(o * i, 0, h, item.amount);
		});
		ctx.restore();
		
		ctx.save();
		ctx.fillStyle = "black";
		ctx.textAlign = "center";
		ctx.translate(m, 0);
		ctx.scale(1, -1);
		chart.data[0].values.forEach(function (item, i) {
			ctx.fillText(item.category, o * i + h / 2, 0);
			ctx.fillText(item.amount, o * i + h / 2, -1 * (t + item.amount * (c.height - t * 2) / max + 5));
		});
		ctx.restore();
		
		div.css("visibility", "visible");
	});
});