MediaWiki:Gadget-quality-stats-on-cats.js

mw.hook('quality-on-cats').add(function hook_handler() {

const cats = [
  { name: 'done', icon: '⬤', color: '#00a600', title: 'Reviewed', cat: 'Peer Reviewed Articles', },
  { name: 'good', icon: '◕', color: '#FEB', title: 'Complete', cat: 'Articles Awaiting Peer Review', },
  { name: 'part', icon: '◒', color: '#ADD8E6', title: 'Partial',  cat: 'Partially complete articles', },
  { name: 'stub', icon: '◔', color: '#DDD', title: 'Stubs',    cat: 'Stubs', },
  { name: 'ported', icon: '⬤', color: '#ba55d3', title: 'Ported',    cat: 'Ported Articles', },
]

// not on quality cats (pointless)
//if (cats.find(function (cat) { return cat.cat == mw.config.get('wgTitle') })) return
//if (Object.values(cats).includes(mw.config.get('wgTitle'))) return

// only on categories
if (mw.config.get('wgCanonicalNamespace') != 'Category') return

const total = document.querySelectorAll('.quality').length

// only add table when there's quality data
if (total == 0) return;

console.warn('gadget:', 'show-quality-stats')

const table = document.createElement('table')
 table.createCaption().textContent = 'Article Quality'
 table.classList.add('plaintable')
 table.setAttribute('name', 'quality-stats')
const place = document.querySelector('#mw-pages')
 place.insertBefore(table, place.querySelector('p'))

function make_row(title, icon) {
  const head = document.createElement('th')
   head.setAttribute('role', 'row')
   head.textContent = title
  if (icon) {
    const con = document.createElement('span')
     con.style.float = 'right'
     con.innerHTML = icon
    head.append(con)
  }
  const row = table.insertRow()
   row.append(head)
  return row
}

function make_cells(row, sel) {
  const count = document.querySelectorAll(sel).length
  const size = row.insertCell()
   size.textContent = count
  const cent = row.insertCell()
   cent.textContent = (100*(count / total)).toFixed(2) + '%'
  return row
}

/* totals: */{
  const row = make_row('Articles')
   row.setAttribute('name', 'articles')
  const count = row.insertCell()
   count.setAttribute('colspan', '2')
   count.textContent = total
}
/* meta: */{
  const count = document.querySelectorAll('.quality-meta').length
if (count > 0) {
  const row = make_row('Meta Pages')
   row.setAttribute('name', 'meta')
  const size = row.insertCell()
   size.setAttribute('colspan', '2')
   size.textContent = count
}
}
/* redirects: */{
  const count = document.querySelectorAll('.redirect-in-category').length
if (count > 0) {
  const row = make_row('Redirects')
   row.setAttribute('name', 'redirects')
  const size = row.insertCell()
   size.setAttribute('colspan', '2')
   size.textContent = count
}
}
cats.forEach(function (cat){ make_cells(make_row(cat.title, cat.icon), '.quality-'+ cat.name) })

// PIE CHART:
mw.loader.using('ext.gadget.make-pie').then(function make_pie(require) {
// find a place for it
const row = document.querySelector('[name="quality-stats"] [name="articles"]')
const place = row.insertCell()
place.setAttribute('rowspan', row.parentElement.childElementCount)
// 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.querySelectorAll('.quality-' + name).length
  if(!count) return
  pie.add_data_entry(count, name, icon, fill)
}
cats.forEach(function (cat){ add_wedge(cat.name, cat.icon, cat.color) })

pie.render()
}) // END: PIE CHART

})