Diferencia entre revisiones de «MediaWiki:Gadget-ec-make-pie.js»
Ir a la navegación
Ir a la búsqueda
m (+) |
m (try this) |
||
Línea 5: | Línea 5: | ||
console.warn('gadget:', 'ec-make-pie') |
console.warn('gadget:', 'ec-make-pie') |
||
const radius = 200 |
|||
⚫ | |||
const font_size = 10 |
|||
const graph_data = { |
|||
version: 2, |
|||
data: { name: 'X', values: [ /*{ label: '', count: 0, color: '', }*/ ], transforms: [ { type: 'pie', field: 'count', }, ], }, |
|||
marks: { |
|||
{ |
|||
type: 'arc', |
|||
from: { data: 'X', }, |
|||
properties: { enter: { |
|||
x: { field: { group: 'width', }, mult: .5, }, |
|||
y: { field: { group: 'height',}, mult: .5, }, |
|||
startAngle: { field: 'layout_start', }, endAngle: { field: 'layout_end', }, |
|||
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, }, |
|||
theta: { value: 'layout_mid', }, |
|||
fill: { value: 'white', }, |
|||
align: { value: 'center', }, baseline: { value: 'middle', }, |
|||
text: { field: 'label', }, fontWeight: { value: 'bold', }, fotnSize: { value: font_size, } |
|||
}, }, |
|||
}, |
|||
}, |
|||
} |
|||
⚫ | |||
// fill it with article counts |
// fill it with article counts |
||
graph_data.data.values.push({ |
|||
label: '', |
|||
count: 1, |
|||
color: 'blue', |
|||
}) |
|||
⚫ | |||
const render_spot = document.createElement('div') |
|||
const stats_header = document.querySelector('#Coppermind_Stats'). |
|||
stats_header.insertBefore(render_spot, stats_header.firstElementChild) |
|||
// load renderer |
|||
⚫ | |||
// attempt to render |
|||
mw.drawVegaGraph( render_spot, graph_data, function () { |
|||
console.warn('gadget:', 'make-pie', 'done') |
|||
⚫ | |||
⚫ | |||
⚫ | |||
}); |
|||
// mw.drawVegaGraph( parent-element, graph-data, console.warn ); |
|||
⚫ | |||
// done |
|||
}); |
}); |
Revisión del 19:16 2 ago 2019
///# show graphs on editors corner mw.hook( 'wikipage.content' ).add(function () { if (mw.config.get('wgPageName') != "Coppermind:Editor's_Corner") return console.warn('gadget:', 'ec-make-pie') const radius = 200 const font_size = 10 const graph_data = { version: 2, data: { name: 'X', values: [ /*{ label: '', count: 0, color: '', }*/ ], transforms: [ { type: 'pie', field: 'count', }, ], }, marks: { { type: 'arc', from: { data: 'X', }, properties: { enter: { x: { field: { group: 'width', }, mult: .5, }, y: { field: { group: 'height',}, mult: .5, }, startAngle: { field: 'layout_start', }, endAngle: { field: 'layout_end', }, 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, }, theta: { value: 'layout_mid', }, fill: { value: 'white', }, align: { value: 'center', }, baseline: { value: 'middle', }, text: { field: 'label', }, fontWeight: { value: 'bold', }, fotnSize: { value: font_size, } }, }, }, }, } // FIXME: get json from /wiki/MediaWiki:Gadget-ec-make-pie-status.json' // fill it with article counts graph_data.data.values.push({ label: '', count: 1, color: 'blue', }) // find render spot const render_spot = document.createElement('div') const stats_header = document.querySelector('#Coppermind_Stats'). stats_header.insertBefore(render_spot, stats_header.firstElementChild) // load renderer mw.loader.load('ext.graph.vega2').then(function () { // attempt to render mw.drawVegaGraph( render_spot, graph_data, function () { console.warn('gadget:', 'make-pie', 'done') }); }); // done });