https://wiki.runerealm.org/index.php?action=history&feed=atom&title=MediaWiki%3AGadget-Charts-core.js
MediaWiki:Gadget-Charts-core.js - Revision history
2026-04-20T16:07:29Z
Revision history for this page on the wiki
MediaWiki 1.41.1
https://wiki.runerealm.org/index.php?title=MediaWiki:Gadget-Charts-core.js&diff=39026&oldid=prev
Alex at 16:14, 17 October 2024
2024-10-17T16:14:48Z
<p></p>
<a href="https://wiki.runerealm.org/index.php?title=MediaWiki:Gadget-Charts-core.js&diff=39026&oldid=38895">Show changes</a>
Alex
https://wiki.runerealm.org/index.php?title=MediaWiki:Gadget-Charts-core.js&diff=38895&oldid=prev
Alex at 16:12, 17 October 2024
2024-10-17T16:12:28Z
<p></p>
<a href="https://wiki.runerealm.org/index.php?title=MediaWiki:Gadget-Charts-core.js&diff=38895&oldid=839">Show changes</a>
Alex
https://wiki.runerealm.org/index.php?title=MediaWiki:Gadget-Charts-core.js&diff=839&oldid=prev
Alex: Created page with "var DARKMODE_TEXT = (($('body.wgl-theme-browntown').length) ? '#f4eaea' : '#cbd9f4'); function RSWChart(i, dataElement) { var self = this; this.is_error = false; this.index = i; function error(t) { dataElement.removeClass('rsw-chartjs-config').addClass("rsw-chart-parsed rsw-chart-error").text(t); self.is_error = true; } function parseData() { console.log('parsing data for ' + self.index); if (self.is_error) retur..."
2024-10-13T00:28:06Z
<p>Created page with "var DARKMODE_TEXT = (($('body.wgl-theme-browntown').length) ? '#f4eaea' : '#cbd9f4'); function RSWChart(i, dataElement) { var self = this; this.is_error = false; this.index = i; function error(t) { dataElement.removeClass('rsw-chartjs-config').addClass("rsw-chart-parsed rsw-chart-error").text(t); self.is_error = true; } function parseData() { console.log('parsing data for ' + self.index); if (self.is_error) retur..."</p>
<p><b>New page</b></p><div>var DARKMODE_TEXT = (($('body.wgl-theme-browntown').length) ? '#f4eaea' : '#cbd9f4');<br />
<br />
function RSWChart(i, dataElement) {<br />
var self = this;<br />
this.is_error = false;<br />
this.index = i;<br />
<br />
function error(t) {<br />
dataElement.removeClass('rsw-chartjs-config').addClass("rsw-chart-parsed rsw-chart-error").text(t);<br />
self.is_error = true;<br />
}<br />
<br />
function parseData() {<br />
console.log('parsing data for ' + self.index);<br />
if (self.is_error) return;<br />
var c = {};<br />
console.log(dataElement.text());<br />
try {<br />
var txt = dataElement.text();<br />
txt = txt.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/=/g, '&equals;').replace(/\\/g, '&bsol;').replace(/\//g, '&sol;');<br />
return JSON.parse(txt);<br />
} catch (e) {<br />
error("Failed to parse JSON. " + e.name + ": " + e.message);<br />
}<br />
}<br />
<br />
function addFunctions() {<br />
var opts = self.config.options;<br />
if (opts.tooltips.format == "skillingSuccess") {<br />
opts.tooltips.callbacks = opts.tooltips.callbacks || {}<br />
opts.tooltips.callbacks.label = function(tooltipItem) {<br />
var label = tooltipItem.dataset.label.trim() || '';<br />
if (label) {<br />
label += ': ';<br />
}<br />
label += "Level: " + tooltipItem.label + "; Chance: ";<br />
label += (tooltipItem.dataPoint.y * 100).toFixed(2) + "%";<br />
return label;<br />
}<br />
} else if (opts.tooltips.format=="harvestLives") {<br />
opts.tooltips.callbacks = opts.tooltips.callbacks || {}<br />
opts.tooltips.callbacks.label = function(tooltipItem) {<br />
var label = tooltipItem.dataset.label.trim() || '';<br />
if (label) {<br />
label += ': ';<br />
}<br />
label += "Level: " + tooltipItem.label + "; Yield: ";<br />
label += tooltipItem.dataPoint.y.toFixed(2);<br />
return label;<br />
}<br />
}<br />
<br />
if (opts.scales.y.ticks.format == "percent") {<br />
opts.scales.y.ticks.callback = function(value) {<br />
return Math.round(value * 100) + "%"<br />
}<br />
}<br />
<br />
opts.datasetsPerGroup = opts.datasetsPerGroup || 1;<br />
if (opts.datasetsPerGroup !== 1) {<br />
opts.tooltips.filter = function(tooltipItem) {<br />
return tooltipItem.datasetIndex % opts.datasetsPerGroup == 0 || tooltipItem.dataIndex > 0;<br />
}<br />
<br />
opts.legend = opts.legend || {};<br />
opts.legend.labels = opts.legend.labels || {};<br />
opts.legend.labels.filter = function(legendItem, data) {<br />
return legendItem.datasetIndex % 3 == 0;<br />
}<br />
<br />
opts.legend.onClick = function(e, legendItem) {<br />
var index = legendItem.datasetIndex;<br />
<br />
var ci = this.chart;<br />
[<br />
ci.getDatasetMeta(index - index % 3 + 0),<br />
ci.getDatasetMeta(index - index % 3 + 1),<br />
ci.getDatasetMeta(index - index % 3 + 2)<br />
].forEach(function(meta) {<br />
meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;<br />
});<br />
ci.update();<br />
};<br />
}<br />
<br />
var legendIconWidth = 25;<br />
var legendIconHeight = 25;<br />
var legendIconBorder = 2;<br />
self.config.data.datasets.forEach(function(dataset, i) {<br />
if (i % opts.datasetsPerGroup == 0 && dataset.pointStyleImg !== undefined) {<br />
opts.legend = opts.legend || {};<br />
opts.legend.labels = opts.legend.labels || {};<br />
opts.legend.labels.usePointStyle = true;<br />
opts.legend.labels.font = opts.legend.labels.font || {};<br />
opts.legend.labels.font.size = 14;<br />
var baseColor = dataset.baseColor || dataset.borderColor;<br />
var canvas = document.createElement("canvas")<br />
canvas.width = legendIconWidth;<br />
canvas.height = legendIconHeight;<br />
var myctx = canvas.getContext("2d");<br />
myctx.fillStyle = baseColor;<br />
myctx.fillRect(0, 0, canvas.width, canvas.height);<br />
myctx.fillStyle = "white";<br />
myctx.fillRect(legendIconBorder, legendIconBorder, canvas.width - 2 * legendIconBorder, canvas.height - 2 * legendIconBorder);<br />
var colorData = myctx.getImageData(0, 0, 1, 1).data;<br />
var translColor = "rgba(" + colorData[0] + ", " + colorData[1] + ", " + colorData[2] + ", 0.15)";<br />
myctx.fillStyle = translColor;<br />
myctx.fillRect(0, 0, canvas.width, canvas.height);<br />
var image = new Image()<br />
image.src = rs.getFileURLCached(dataset.pointStyleImg);<br />
image.crossOrigin = "anonymous"<br />
image.onload = function() {<br />
var imgSize = legendIconWidth - legendIconBorder * 2;<br />
var imgScale = Math.min(1.0, imgSize/image.width, imgSize/image.height);<br />
var imgWidth = imgScale * image.width;<br />
var imgHeight = imgScale * image.height<br />
myctx.drawImage(image, (legendIconWidth - imgWidth)/2, (legendIconHeight - imgHeight)/2, imgWidth, imgHeight);<br />
}<br />
dataset.pointStyle = canvas;<br />
<br />
for (var j = 0; j < opts.datasetsPerGroup; j++) {<br />
self.config.data.datasets[i + j].borderColor = baseColor;<br />
self.config.data.datasets[i + j].backgroundColor = translColor;<br />
self.config.data.datasets[i + j].hoverBorderColor = baseColor;<br />
self.config.data.datasets[i + j].hoverBackgroundColor = translColor;<br />
self.config.data.datasets[i + j].hoverRadius = 0;<br />
if (j == 0) {<br />
self.config.data.datasets[i+j].borderColor = translColor;<br />
self.config.data.datasets[i+j].hoverBorderColor = translColor;<br />
}<br />
}<br />
}<br />
})<br />
}<br />
<br />
function makeChart() {<br />
console.log('making chart for ' + self.index);<br />
if (self.is_error) return;<br />
<br />
var canvas = $('<canvas class="rsw-chartjs-canvas">');<br />
canvas.attr('id', 'rsw-chartjs-chart-' + self.index);<br />
dataElement.empty().append(canvas).removeClass('rsw-chartjs-config').addClass("rsw-chart-parsed");<br />
self.chart = new Chart(canvas, self.config);<br />
}<br />
this.config = parseData();<br />
addFunctions()<br />
makeChart();<br />
self.chart.update();<br />
}<br />
<br />
function init() {<br />
console.log('chart init');<br />
// force all text to be darkmode happy by default<br />
if ($('body.wgl-theme-dark').length || $('body.wgl-theme-browntown').length) {<br />
Chart.defaults.font.color = DARKMODE_TEXT;<br />
Chart.defaults.color = 'rgba(255,255,255,0.1)';<br />
Chart.defaults.scale.gridLines.color = 'rgba(255,255,255,0.1)';<br />
}<br />
//other defaults<br />
Chart.defaults.plugins['legend'].labels.usePointStyle = true;<br />
<br />
window.charts = [];<br />
$('.rsw-chartjs-config').each(function(i, e) {<br />
console.log('creating chart ' + i);<br />
window.charts.push(new RSWChart(i, $(e)));<br />
});<br />
window.RSWChart = RSWChart;<br />
}<br />
<br />
function addHook() {<br />
mw.hook('rscalc.submit').add(init);<br />
if (!window.charts) {<br />
init();<br />
}<br />
}<br />
<br />
$.when($.ready, $.getScript("https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-beta/chart.min.js")).then(addHook, function() {<br />
console.error("Failed to load chart.js");<br />
});</div>
Alex