Diferencia entre revisiones de «MediaWiki:Gadget-make-pie.js»
Ir a la navegación
Ir a la búsqueda
m (color me surprised) |
m (-) |
||
Línea 71: | Línea 71: | ||
const total = data.map(function (v) { return v.count }).reduce(function (prev, self) { return prev + self }) |
const total = data.map(function (v) { return v.count }).reduce(function (prev, self) { return prev + self }) |
||
Wedge.start = 3/5 // TODO: change this |
//Wedge.start = 3/5 // TODO: change this |
||
data.forEach(function each_wedge(slice) { |
data.forEach(function each_wedge(slice) { |
||
// setup this wedge |
// setup this wedge |
Revisión del 22:17 16 ago 2019
/// a 2D (x,y) pair function Point() { this.x = 0; this.y = 0; } /// scale the point by @factor Point.prototype.scale = function(factor) { const next = new Point() next.x = this.x * factor next.y = this.y * factor return next } /// determine the point on a unit circle from the passed @turns Point.from_turns = function(turns) { const self = new Point self.x = Math.cos(2 * Math.PI * turns) self.y = Math.sin(2 * Math.PI * turns) return self } const Wedge = { start: 0, turns: 1, /// the point @ start get front() { return Point.from_turns(this.start) }, /// the point @ (start + turns) get after() { return Point.from_turns(this.start + this.turns) }, /// the center of the wedge get middle() { return Point.from_turns(this.start + this.turns / 2) }, /// create a wedge element for a pie chart make: function make_wedge(svg, radius) { // edges of the wedge... wEdges, if you will const p1 = this.front.scale(radius) const p2 = this.after.scale(radius) // parts of the pat const ds = [] // move to origin ds.push(['M', 0, 0]) // draw line to first point ds.push(['L', p1.x, p1.y]) // draw arc to correct point const arc = ['A', radius, radius, 0, ((this.turns) > .5)*1, 1, p2.x, p2.y] ds.push(arc) // draw line to origin ds.push(['L', 0, 0]) console.debug('make-wedge:', 'self:', this, 'points:', [p1, p2], '\tpath:', ds) const self = svg.createElement('path') self.classList.add('wedge') // attach path to element self.setAttribute('d', ds.flat().join(' ')) return self }, } module.exports = function make_pie(name, radius) { // setup element const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg') svg.classList.add('pie-chart') svg.setAttribute('style', 'width: 100%; height: 100%;') // setup svg itself svg.setAttribute('viewBox', [-radius, -radius, 2*radius, 2*radius].join(' ')) svg.setAttribute('name', name) /// help make svg elements svg.createElement = function make_svg_el(tag) { return document.createElementNS(this.namespaceURI, tag) } // setup data addition const data = [] /// add a slice to the pie svg.add_data_entry = function(count, name, label, fill) { data.push({ count: count, name: name, label: label || name, color: fill, }) } /// wedge all the slices into the pie svg.render = function() { console.debug('make-pie:', 'rendering', svg, data) const total = data.map(function (v) { return v.count }).reduce(function (prev, self) { return prev + self }) //Wedge.start = 3/5 // TODO: change this data.forEach(function each_wedge(slice) { // setup this wedge Wedge.turns = slice.count / total // create wedge const el = Wedge.make(svg, radius) el.setAttribute('name', slice.name) el.setAttribute('fill', slice.color) // create label const text = svg.createElement('text') text.classList.add('wedge') text.innerHTML = slice.label const text_pos = Wedge.middle.scale(radius * 2 / 3) text.setAttribute('x', text_pos.x) text.setAttribute('y', text_pos.y) // show on pie svg.appendChild(el) svg.appendChild(text) // setup next Wedge Wedge.start += Wedge.turns }) } return svg }