Widget:PlaceNamesCharts: Difference between revisions
From International Robin Hood Bibliography
mNo edit summary |
mNo edit summary |
||
Line 1: | Line 1: | ||
<noinclude><div class="no-img">This widget generates charts on landing pages in the Place-names section of IRHB. It takes no parameters.</div></noinclude><includeonly> | <noinclude><div class="no-img">This widget generates the Google charts on landing pages in the Place-names section of IRHB. It takes no parameters.</div></noinclude><includeonly> | ||
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> | |||
<script> | <script> | ||
(function() { | (function() { | ||
window.IRHB = window.IRHB || {}; | window.IRHB = window.IRHB || {}; | ||
window.IRHB. | window.IRHB.charts = window.IRHB.charts || {}; | ||
window.IRHB.charts.datedItem = false; | |||
window.IRHB.charts.itemWithCentury = false; | |||
window.IRHB.charts.container = false; | |||
window.IRHB.charts.numCharts = 0; | |||
window.IRHB.charts.chartData = window.IRHB.charts.chartData || {}; | |||
window.IRHB.charts.widgets = window.IRHB.charts.widgets || {}; | |||
window.IRHB.charts.googleVersion = "45"; | |||
function resizeChart () { | |||
var | var nCharts = window.IRHB.charts.numCharts; | ||
var cData = window.IRHB.charts.chartData; | |||
for (var i = 0; i < nCharts; i++) { | |||
var elemId = window.IRHB.charts.container[i].id; | |||
if (elemId !== "centuryChart" || window.IRHB.charts.itemWithCentury) { | |||
if (document.getElementById(elemId) && cData[elemId]) { | |||
window.IRHB.charts.widgets[elemId].draw( | |||
cData[elemId], | |||
window.IRHB.charts.options[elemId] | |||
); | |||
) | |||
} | } | ||
} | } | ||
} | |||
if (window.IRHB.charts.datedItem) { | |||
if (document.getElementById("timeline")) { | |||
window.IRHB.charts.widgets["timeline"].draw( | |||
cData["timeline"], | |||
window.IRHB.charts.options["timeline"] | |||
) | |||
} | } | ||
} | } | ||
} | } | ||
if (document.addEventListener) { | |||
window.addEventListener('resize', resizeChart); | |||
} | |||
else if (document.attachEvent) { | |||
window.attachEvent('onresize', resizeChart); | |||
} | |||
else { | |||
window.resize = resizeChart; | |||
} | |||
window.IRHB.charts.options = { | |||
"centuryChart": { | |||
"title": "Centuries", | |||
"titleTextStyle": { | |||
"fontName": "inherit", | |||
"color": '#800000', | |||
"fontSize": 22, | |||
"bold": false | |||
}, | |||
"xLabel": "Century", | |||
"yLabel": "Number", | |||
"height": 500, | |||
"width": "38%", | |||
"chartArea": { | |||
"width": "92%", | |||
"height": "65%", | |||
"left": "35" | |||
}, | |||
"vAxis": {minValue: 0}, | |||
"bar": {groupWidth: "100%"} | |||
}, | |||
"typesChart": { | |||
"title": "Types", | |||
"titleTextStyle": { | |||
"fontName": "inherit", | |||
"color": '#800000', | |||
"fontSize": 22, | |||
"bold": false | |||
}, | |||
"xLabel": "Category", | |||
"yLabel": "Number", | |||
"height": 500, | |||
"width": "38%", | |||
"chartArea": { | |||
"width": "92%", | |||
"height": "65%", | |||
"left": "35" | |||
}, | |||
"vAxis": {minValue: 0}, | |||
"bar": {groupWidth: "100%"} | |||
}, | |||
"interestChart": { | |||
"title": "Interest", | |||
"titleTextStyle": { | |||
"fontName": "inherit", | |||
"color": '#800000', | |||
"fontSize": 22, | |||
"bold": false | |||
}, | |||
"xLabel": "Interest", | |||
"yLabel": "Number", | |||
"height": 500, | |||
"width": "38%", | |||
"chartArea": { | |||
"width": "92%", | |||
"height": "55%", | |||
"left": "35" | |||
}, | |||
"vAxis": {minValue: 0}, | |||
"bar": {groupWidth: "100%"} | |||
}, | |||
"statusChart": { | |||
"chartType": "PieChart", | |||
"title": "Status", | |||
"titleTextStyle": { | |||
"fontName": "inherit", | |||
"color": '#800000', | |||
"fontSize": 22, | |||
"bold": false | |||
}, | |||
"height": 370, | |||
"width": "38%", | |||
"chartArea": { | |||
"width": "92%", | |||
"height": "75%", | |||
"left": "35" | |||
}, | |||
"vAxis": {minValue: 0}, | |||
"bar": {groupWidth: "100%"} | |||
}, | |||
"timeline" : { | |||
"title": "Timeline", | |||
"titleTextStyle": { | |||
"fontName": "inherit", | |||
"color": "#800000", | |||
"fontSize": 22, | |||
"bold": false | |||
}, | |||
"width": "38%", | |||
"height": "1200", | |||
"chartArea": { | |||
'width': '92%', | |||
'height': '85%', | |||
'left': '35' | |||
}, | |||
"colors": null, | |||
"hAxis": { | |||
"title": "", | |||
"minValue": 0, | |||
"format": "####", | |||
"baselineColor": '#cccccc' | |||
}, | |||
"vAxis": { | |||
"title": "", | |||
"textPosition": "out", | |||
"viewWindowMode":'explicit', | |||
"viewWindow": { | |||
"max": null, | |||
"min": null | |||
}, | |||
"ticks": null, | |||
"format": "####" | |||
}, | |||
"legend": "none", | |||
"fontSize": "12", | |||
"axisTitlesPosition": "none" | |||
} | |||
}; | }; | ||
window.IRHB.charts.columnColors = [ "#4d8375", "#82a89e" ]; | |||
var | var getOptions = function(elemId) { | ||
var | var opt = window.IRHB.charts.options[elemId]; | ||
opt.width = opt.width || ""; | |||
if ( | opt.height = opt.height || ""; | ||
var | opt.chartType = opt.chartType || "ColumnChart"; | ||
opt.chartArea = opt.chartArea || {'width': '88%', 'height': '60%'}; | |||
if ( | if (opt.chartType == "ColumnChart") { | ||
opt.bar = { "groupWidth": "95%" }; | |||
opt.legend = { "position": "none" }; | |||
} | |||
opt.titleTextStyle = opt.titleTextStyle || | |||
{ | |||
color: "#800000", fontName: "inherit", | |||
fontSize: 22, bold: false | |||
} | |||
opt.hAxis = { direction: 1, slantedText: true, slantedTextAngle: 90, | |||
textStyle: { fontSize: 11.5 } | |||
}; | |||
opt.colors = window.IRHB.charts.columnColors; | |||
return opt; | |||
} | |||
var showChart = function(elem, data, options) { | |||
var elemId = elem.id; | |||
var chartData = new google.visualization.DataTable(); | |||
chartData.addColumn("string", options.xLabel); | |||
chartData.addColumn("number", options.yLabel); | |||
chartData.addRows(data); | |||
window.IRHB.charts.chartData[elemId] = chartData; | |||
var chart = new google.visualization [ | |||
options.chartType == "ColumnChart" ? "ColumnChart" : "PieChart" | |||
] (elem); | |||
window.IRHB.charts.widgets[elemId] = chart; | |||
chart.draw(chartData, options); | |||
} | |||
var aggregateData = function(resultAr, elemId) { | |||
var aggregate; | |||
if (elemId == "centuryChart") { | |||
aggregate = [ | |||
["14th", 0], | |||
["15th", 0], | |||
["16th", 0], | |||
["17th", 0], | |||
["18th", 0], | |||
["19th", 0], | |||
["20th", 0], | |||
["21st", 0] | |||
]; | |||
} else if (elemId == "typesChart") { | |||
aggregate = [ | |||
["Public house", 0], | |||
["Monument", 0], | |||
["Building", 0], | |||
["Church", 0], | |||
["Prehistoric site", 0], | |||
["Natural feature", 0], | |||
["Settlement", 0], | |||
["Area", 0], | |||
["Thoroughfare", 0], | |||
["Transport", 0], | |||
["Establishment", 0], | |||
["Association", 0], | |||
["Artifact", 0], | |||
["Miscellaneous", 0] | |||
]; | |||
} else if (elemId == "interestChart") { | |||
aggregate = [ | |||
["Robin Hood name", 0], | |||
["Local tradition", 0], | |||
["Literary locale", 0], | |||
["Artifacts", 0], | |||
["Miscellaneous", 0] | |||
]; | |||
} else if (elemId == "statusChart") { | |||
aggregate = [ | |||
["Extant", 0], | |||
["Defunct", 0] | |||
]; | |||
} | |||
var lResultAr = resultAr.length; | |||
if (elemId === "centuryChart") { | |||
for (var i = 0; i < lResultAr; i++) { | |||
if (resultAr[i] !== "") { | |||
window.IRHB.charts.itemWithCentury = true; | |||
break; | |||
} | |||
} | } | ||
} | |||
for (var i = 0; i < lResultAr; i++) { | |||
if ( | var elemresultAr = resultAr[i]; | ||
var lAggregate = aggregate.length; | |||
for (var j = 0; j < lAggregate; j++) { | |||
if (aggregate[j][0] == elemresultAr) { | |||
aggregate[j][1]++; | |||
continue; | |||
} | } | ||
} | } | ||
} | } | ||
} | return aggregate; | ||
} | |||
var prepareContainer = function(elem) { | |||
elem.style.display = "block"; | |||
} | |||
function | var getData = function(elem) { | ||
var | var txt = elem.innerHTML.trim(); | ||
var startTagLgth = "<p>".length; | |||
var endTagPos = txt.indexOf("</p>"); | |||
txt = txt.substring(startTagLgth, endTagPos - 2); | |||
txt = txt.trim(); | |||
txt = "[" + txt + "]"; | |||
var resultAr = JSON.parse(txt); | |||
resultAr = resultAr.sort(); | |||
return resultAr; | |||
} | } | ||
showTimeline = function() { | |||
var t = document.getElementById("timeline"); | |||
if (t) { | |||
var txt = t.innerText || t.textContent; | |||
txt = txt.trim(); | |||
//"¤" and "|" are separators in Template:timeline | |||
var itms = txt.split("|"); | |||
itms.pop(); //Remove empty item after last pipe | |||
var itemsObj = {}; | |||
// | var numItms = itms.length; | ||
( | var minYear = 0; | ||
var maxYear = 0; | |||
for (var i = 0; i < numItms; i++) { | |||
var itemAr = itms[i].split("¤"); | |||
var years = itemAr[1]; | |||
var yearsAr = years.split(", "); | |||
var numYears = yearsAr.length; | |||
{ | for (var j = 0; j < numYears; j++) { | ||
" | //When #ask returns " JL" after the year (e.g.: "1560 JL"), this must be removed: | ||
" | var yearSanitized = yearsAr[j].split(" "); | ||
" | year = yearSanitized[0]; | ||
" | if (year !== "") { | ||
var placeName = itemAr[0]; | |||
var festivals = placeName.indexOf(" festivals"); | |||
if (festivals > -1) { | |||
placeName = placeName.substring(0, festivals); | |||
} | |||
" | var yearNum = year * 1; | ||
if (yearNum < minYear || minYear === 0) { | |||
minYear = yearNum | |||
} | |||
if (yearNum > maxYear) { | |||
maxYear = yearNum | |||
} | |||
if (!itemsObj.hasOwnProperty(year)) { | |||
itemsObj[year] = []; | |||
} | |||
var numItemsYear = itemsObj[year].length; | |||
var curNum = ++numItemsYear; | |||
var bubbleText = year + ". " + placeName; | |||
itemsObj[year].push([ curNum, yearNum, bubbleText ]); | |||
} | } | ||
} | } | ||
} | |||
{ | if (minYear !== 0) {//Only display timeline if dated items found | ||
var showXAxisTicks = false; | |||
window.IRHB.charts.datedItem = true; | |||
var data = new google.visualization.DataTable(); | |||
data.addColumn("number", "Number"); | |||
data.addColumn("number", "Year"); | |||
data.addColumn({type:"string", role:"tooltip"}); | |||
var dataRowsAr = []; | |||
for (var key in itemsObj) { | |||
if (itemsObj.hasOwnProperty(key)) { | |||
dataRowsAr = dataRowsAr.concat(itemsObj[key]); | |||
} | |||
} | |||
var numDataRowsAr = dataRowsAr.length; | |||
var decade = 0; | |||
var xValue = 0; | |||
for (var i = 0; i < numDataRowsAr; i++) { | |||
var yr = dataRowsAr[i][1]; | |||
var yrsAfterDecadeTurn = yr % 10; | |||
var newDecade = yr - yrsAfterDecadeTurn; | |||
if (newDecade !== decade) { | |||
decade = newDecade; | |||
xValue = 1; | |||
} else { | |||
xValue++; | |||
} | |||
if (!showXAxisTicks && xValue > 2) { | |||
showXAxisTicks = true; | |||
} | } | ||
dataRowsAr[i][0] = xValue; | |||
} | } | ||
var lowerMod = minYear % 100; | |||
var lowerCentury = minYear - lowerMod; | |||
var lowerYearsToAdd; | |||
if (lowerMod < 51) { | |||
lowerYearsToAdd = 0; | |||
} else { | |||
lowerYearsToAdd = 50; | |||
} | } | ||
var lowerYear = lowerCentury + lowerYearsToAdd; | |||
var upperMod = maxYear % 100; | |||
var upperCentury = maxYear - upperMod; | |||
var upperYearsToAdd; | |||
if (upperMod <= 50) { | |||
{ | upperYearsToAdd = 50; | ||
} else { | |||
upperYearsToAdd = 100; | |||
} | } | ||
var upperYear = upperCentury + upperYearsToAdd; | |||
var explicitTicks = []; | |||
var ctr = lowerYear; | |||
explicitTicks.push(ctr); | |||
while (true) { | |||
ctr += 50; | |||
if (ctr <= upperYear) { | |||
explicitTicks.push(ctr); | |||
} else { | |||
break; | |||
} | |||
} | } | ||
var options = window.IRHB.charts.options["timeline"]; | |||
options.colors = window.IRHB.charts.columnColors; | |||
if (!showXAxisTicks) { | |||
options.hAxis.textPosition = "none"; | |||
} | } | ||
options.vAxis.viewWindow.max = lowerYear; | |||
options.vAxis.viewWindow.min = upperYear; | |||
options.vAxis.ticks = explicitTicks; | |||
data.addRows(dataRowsAr); | |||
var chart = new google.visualization.ScatterChart(t); | |||
chart.draw(data, options); | |||
window.IRHB.charts.widgets["timeline"] = chart; | |||
window.IRHB.charts.chartData["timeline"] = data; | |||
t.style.display = "block"; | |||
} else { | |||
t.innerHTML = ""; | |||
} | } | ||
var | |||
var setZIndex = false; | |||
var pn = mw.config.get("wgPageName"); | |||
var pnLower = pn.toLowerCase(); | |||
if (pnLower.indexOf("festivals")>-1) { | |||
setZIndex = true; | |||
var | |||
if ( | |||
} else { | } else { | ||
var cats = mw.config.get("wgCategories"); | |||
var numCats = cats.length; | |||
for (var i = 0; i < numCats; i++) { | |||
if (cats[i] === "English counties with festivals") { | |||
setZIndex = true; | |||
break; | |||
} | } | ||
} | } | ||
} | } | ||
if (setZIndex) { | |||
if ( | var d = document.getElementById("timeline"); | ||
d.style.zIndex = 980; | |||
d = document.getElementById("centuryChart"); | |||
d.style.marginTop = "10px"; | |||
d.style.marginBottom = "10px"; | |||
} | } | ||
} | } | ||
} | } | ||
window.IRHB.charts.show = function() { | |||
var charts = window.IRHB.charts.container; | |||
var | var numCharts = window.IRHB.charts.numCharts; | ||
for (var i = 0; i < numCharts; i++) { | |||
var | var data = getData(charts[i]); | ||
var | var elemId = charts[i].id; | ||
//prepareContainer(charts[i]); | |||
if ( | data = aggregateData(data, elemId); | ||
var | if (elemId !== "centuryChart" || window.IRHB.charts.itemWithCentury) { | ||
var options = getOptions(elemId); | |||
showChart(charts[i], data, options); | |||
prepareContainer(charts[i]); | |||
} | } | ||
} | |||
if (!window.IRHB.charts.itemWithCentury) { | |||
var d = document.getElementById("centuryChart"); | |||
if (d) { | |||
d.style.display = "none"; | |||
} | |||
d = document.getElementById("interestChart"); | |||
if (d) { | |||
d.style.marginTop = "5px"; | |||
} | } | ||
} | } | ||
showTimeline(); | |||
if (window.IRHB.charts.datedItem) { | |||
var tl = window.IRHB.charts.widgets["timeline"]; | |||
if (tl) { | |||
google.visualization.events.addListener(tl, 'select', function() { | |||
var selectedItem = tl.getSelection()[0]; | |||
if (selectedItem) { | |||
var yearFullStopSpace = 6; | |||
var placeName = window.IRHB.charts.chartData.timeline.lc[selectedItem.row][2].Df.substring(yearFullStopSpace); | |||
var pathLower = window.location.pathname.toLowerCase(); | |||
if (pathLower.indexOf("festivals") > -1) { | |||
placeName += " festivals"; | |||
} | |||
var newURL = window.location.protocol + "//" + | |||
window.location.host + "/wiki/index.php/" + | |||
encodeURIComponent(placeName); | |||
if ( | window.location = newURL; | ||
} | |||
}); | |||
resizeChart(); | |||
} | |||
} | } | ||
} | } | ||
} | } | ||
window.IRHB.charts.init = function() { | |||
google.charts.load(window.IRHB.charts.googleVersion, {'packages':['corechart']}); | |||
google.charts.setOnLoadCallback(window.IRHB.charts.show); | |||
} | |||
var charts = document.getElementsByClassName("irhbCharts"); | |||
window.IRHB.charts.numCharts = charts.length; | |||
if (window.IRHB.charts.numCharts > 0) { | |||
window.IRHB.charts.container = charts; | |||
google.charts.load(window.IRHB.charts.googleVersion, {packages: ['corechart']}); | |||
google.charts.setOnLoadCallback(window.IRHB.charts.show); | |||
} | |||
})(); | })(); | ||
</script> | </script> | ||
</includeonly> | </includeonly> |
Revision as of 21:33, 12 April 2019
This widget generates the Google charts on landing pages in the Place-names section of IRHB. It takes no parameters.