Diferencia entre revisiones de «MediaWiki:Gadget-ec-make-pie.js»

De La Coppermind
Ir a la navegación Ir a la búsqueda
m (try that)
m (tweak size)
 
(No se muestran 7 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
///# show graphs on editors corner
///# show graphs on editors corner


mw.hook( 'wikipage.content' ).add(function () {
mw.hook( 'wikipage.content' ).add(function make_pie() {
if (mw.config.get('wgPageName') != "Coppermind:Editor's_Corner") return
if (mw.config.get('wgPageName') != "Coppermind:Editor's_Corner") return
console.warn('gadget:', 'ec-make-pie')
console.warn('gadget:', 'ec-make-pie')


const radius = 200
const cats = {
stub: 'Stubs',
const font_size = 10
part: 'Partially complete articles',
good: 'Articles nearing completion',
done: 'Complete articles',
}


// PIE CHART:
const graph_data = {
mw.loader.using('ext.gadget.make-pie').then(function make_pie(require) {
version: 2,
// find a place for it
width: radius * 2, height: radius * 2,
const place = document.querySelector('.infobox td').parentElement.insertCell(0)
data: [ { name: 'X', values: [ /*{ label: '', count: 0, color: '', }*/ ], transforms: [ { type: 'pie', field: 'count', }, ], } ],
place.rowSpan = 2
marks: [
place.setAttribute('style', 'max-width: 50mm; min-width: 50mm; vertical-align: middle;')
{
document.querySelector('.infobox th').colSpan += 1
type: 'arc',
// make the pie
from: { data: 'X', },
const make = require('ext.gadget.make-pie');
properties: { enter: {
const pie = make('test', 75)// TODO: what radius?
x: { field: { group: 'width', }, mult: .5, },
place.append(pie)
y: { field: { group: 'height',}, mult: .5, },
// fill in the data
startAngle: { field: 'layout_start', }, endAngle: { field: 'layout_end', },
function add_wedge(name, icon, fill) {
innerRadius: { value: 0, }, outerRadius: { value: radius, },
const count = +document.querySelector('[title="Category:'+ cats[name] +'"]').textContent
fill: { field: 'color', }, stroke: { value: 'black', },
if(!count) return
}, },
pie.add_data_entry(count, name, icon, fill)
},
{
type: 'text',
from: { data: 'X', },
properties: { enter: {
x: { field: { group: 'width', }, mult: .5, },
y: { field: { group: 'height',}, mult: .5, },
radius: { value: radius, },
theta: { value: 'layout_mid', },
fill: { value: 'white', },
align: { value: 'center', }, baseline: { value: 'middle', },
text: { field: 'label', }, fontWeight: { value: 'bold', }, fontSize: { value: font_size, },
}, },
},
],
}
}
add_wedge('done', '⬤', '#DFD')
// FIXME: get json from /wiki/MediaWiki:Gadget-ec-make-pie-status.json'
add_wedge('good', '◕', '#FEB')

add_wedge('part', '◒', 'white')
// fill it with article counts
add_wedge('stub', '◔', '#DDD')
graph_data.data[0].values.push({
pie.render()
label: 'Complete',
}) // END: PIE CHART
count: +document.querySelector('[title="Category:Complete articles"]').textContent,
color: 'green',
})
graph_data.data[0].values.push({
label: 'Pending',
count: +document.querySelector('[title="Category:Articles nearing completion"]').textContent,
color: 'blue',
})
graph_data.data[0].values.push({
label: 'Partial',
count: +document.querySelector('[title="Category:Partially complete articles"]').textContent,
color: 'yellow',
})
graph_data.data[0].values.push({
label: 'Stub',
count: +document.querySelector('[title="Category:Stubs"]').textContent,
color: 'grey',
})

// find render spot
const render_spot = document.createElement('div')
const stats_table = document.querySelector('.infobox')
stats_table.parentElement.insertBefore(render_spot, stats_table)

// load renderer
mw.loader.using('ext.graph.vega2').then(function () {

console.debug('gadget:', 'make-pie', 'start-render', arguments)
console.debug('gadget:', 'make-pie', 'data:', graph_data.data[0].values, graph_data)

// attempt to render
mw.drawVegaGraph( render_spot, graph_data, function () {

console.warn('gadget:', 'make-pie', 'done', arguments)


});
});


// done
// done

Revisión actual - 14:09 15 abr 2020

///# show graphs on editors corner

mw.hook( 'wikipage.content' ).add(function make_pie() {
  if (mw.config.get('wgPageName') != "Coppermind:Editor's_Corner") return
  console.warn('gadget:', 'ec-make-pie')

const cats = {
  stub: 'Stubs',
  part: 'Partially complete articles',
  good: 'Articles nearing completion',
  done: 'Complete articles',
}

// PIE CHART:
mw.loader.using('ext.gadget.make-pie').then(function make_pie(require) {
// find a place for it
const place = document.querySelector('.infobox td').parentElement.insertCell(0)
place.rowSpan = 2
place.setAttribute('style', 'max-width: 50mm; min-width: 50mm; vertical-align: middle;')
document.querySelector('.infobox th').colSpan += 1
// make the pie
const make = require('ext.gadget.make-pie');
const pie = make('test', 75)// TODO: what radius?
place.append(pie)
// fill in the data
function add_wedge(name, icon, fill) {
  const count = +document.querySelector('[title="Category:'+ cats[name] +'"]').textContent
  if(!count) return
  pie.add_data_entry(count, name, icon, fill)
}
add_wedge('done', '⬤', '#DFD')
add_wedge('good', '◕', '#FEB')
add_wedge('part', '◒', 'white')
add_wedge('stub', '◔', '#DDD')
pie.render()
}) // END: PIE CHART


// done
});