Diferencia entre revisiones de «MediaWiki:Gadget-ec-make-pie.js»
Ir a la navegación
Ir a la búsqueda
m (+fn names) |
m (try this) |
||
Línea 5: | Línea 5: | ||
console.warn('gadget:', 'ec-make-pie') |
console.warn('gadget:', 'ec-make-pie') |
||
const |
const cats = { |
||
stub: 'Stubs', |
|||
const font_size = 10 |
|||
part: 'Partially complete articles', |
|||
good: 'Articles nearing completion', |
|||
⚫ | |||
⚫ | |||
// PIE CHART: |
|||
const graph_data = { |
|||
⚫ | |||
version: 2, |
|||
// find a place for it |
|||
width: radius * 2, height: radius * 2, |
|||
⚫ | |||
data: [ { name: 'X', values: [ /*{ label: '', count: 0, color: '', }*/ ], transform: [ { type: 'pie', field: 'count', }, ], } ], |
|||
// make the pie |
|||
marks: [ |
|||
const make = require('ext.gadget.make-pie'); |
|||
{ |
|||
const pie = make('test', 75)// TODO: what radius? |
|||
type: 'arc', |
|||
place.append(pie) |
|||
from: { data: 'X', }, |
|||
// fill in the data |
|||
properties: { enter: { |
|||
function add_wedge(name, icon, fill) { |
|||
x: { field: { group: 'width', }, mult: .5, }, |
|||
⚫ | |||
y: { field: { group: 'height',}, mult: .5, }, |
|||
if(!count) return |
|||
startAngle: { field: 'layout_start', }, endAngle: { field: 'layout_end', }, |
|||
pie.add_data_entry(count, name, icon, fill) |
|||
innerRadius: { value: 0, }, outerRadius: { value: radius, }, |
|||
fill: { field: 'color', }, stroke: { value: 'white', }, |
|||
}, }, |
|||
}, |
|||
{ |
|||
type: 'text', |
|||
from: { data: 'X', }, |
|||
properties: { enter: { |
|||
x: { field: { group: 'width', }, mult: .5, }, |
|||
y: { field: { group: 'height',}, mult: .5, }, |
|||
radius: { value: radius * 2/3, }, |
|||
theta: { field: '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() |
|||
⚫ | |||
}) // 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', |
|||
⚫ | |||
color: 'grey', |
|||
}) |
|||
// find render spot |
|||
const render_spot = document.createElement('div') |
|||
⚫ | |||
stats_table.parentElement.insertBefore(render_spot, stats_table) |
|||
// load renderer |
|||
⚫ | |||
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 plotted() { |
|||
console.warn('gadget:', 'make-pie', 'done', arguments) |
|||
}); |
|||
}); |
|||
// done |
// done |
Revisión del 20:57 14 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').createCaption() // 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 });