app

www/app.js

@@ -0,0 +1,184 @@
+var dates = ['2026-15', '2026-14', '2026-13', '2026-12', '2026-11', '2026-10']
+
+var parts = [
+  'nieuwe namen',
+  'nieuwe woorden',
+  'personen',
+  'locaties',
+  'organisaties',
+  'andere namen',
+]
+
+var sources = ['Algemeen', 'Groningen', 'Amsterdam', 'Literatuur', 'Vlaanderen']
+
+var data = new Map()
+
+function getJSON(url) {
+  return new Promise(function (resolve, reject) {
+    var xhr = new XMLHttpRequest()
+    xhr.open('get', url, true)
+    xhr.responseType = 'json'
+    xhr.onload = function () {
+      var status = xhr.status
+      if (status == 200) {
+        resolve(xhr.response)
+      } else {
+        reject(status)
+      }
+    }
+    xhr.send()
+  })
+}
+
+async function getData(week) {
+  /*
+  if (data.has(week)) {
+    return
+  }
+  */
+  data[week] = await getJSON('DATA-' + week + '-4.json')
+}
+
+function escape(s) {
+  return s
+    .replace('&', '&')
+    .replace("'", ''')
+    .replace('<', '&lt')
+    .replace('>', '&gt;')
+}
+
+function makeTD(title, values) {
+  const td = document.createElement('td')
+  const h3 = document.createElement('h3')
+  const txt = document.createTextNode(title)
+  h3.appendChild(txt)
+  td.appendChild(h3)
+  const tab = document.createElement('table')
+  console.log(values)
+
+  var max
+  for (var i = 0; i < 20; i++) {
+    var value
+    if (i < values.length) {
+      value = values[i]
+    } else {
+      value = [0, '\xa0', '']
+    }
+    if (i == 0) {
+      max = value[0]
+    }
+    const tr = document.createElement('tr')
+    if (i < values.length) {
+      var t2 = ''
+      if (value[2]) {
+        tr.classList.add('tags')
+        t2 = '<br><small>' + escape(value[2]) + '</small>'
+      }
+      tr.setAttribute(
+        'onmouseover',
+        "tooltip.show('" + value[0] + ' \xa0 ' + escape(value[1]) + t2 + "')",
+      )
+      tr.setAttribute('onmouseout', 'tooltip.hide()')
+    }
+    const td1 = document.createElement('td')
+    const div1 = document.createElement('div')
+    pc = (value[0] / max) * 100
+    div1.style.width = pc + '%'
+    td1.appendChild(div1)
+    tr.appendChild(td1)
+    const td2 = document.createElement('td')
+    const txt2 = document.createTextNode(value[1])
+    td2.appendChild(txt2)
+    tr.appendChild(td2)
+    tab.appendChild(tr)
+  }
+
+  td.appendChild(tab)
+  return td
+}
+
+async function loadSource(source, week) {
+  if (!data.has(week)) {
+    data[week] = await getJSON('DATA-' + week + '-4.json')
+  }
+
+  document.getElementById('subtitle').innerHTML =
+    source + ' — ' + data[week].year + ' week ' + data[week].week
+
+  const d = document.createElement('div')
+  const tab = document.createElement('table')
+  tab.classList.add('outer')
+  tr = document.createElement('tr')
+  parts.forEach(function (part) {
+    var values = data[week][source][part]
+    tr.appendChild(makeTD(part, values))
+  })
+  tab.appendChild(tr)
+  d.appendChild(tab)
+  document.getElementById('data').innerHTML = d.innerHTML
+}
+
+async function loadPart(part, week) {
+  if (!data.has(week)) {
+    data[week] = await getJSON('DATA-' + week + '-4.json')
+  }
+
+  document.getElementById('subtitle').innerHTML =
+    part + ' — ' + data[week].year + ' week ' + data[week].week
+
+  const d = document.createElement('div')
+  const tab = document.createElement('table')
+  tab.classList.add('outer')
+  tr = document.createElement('tr')
+  sources.forEach(function (source) {
+    var values = data[week][source][part]
+    tr.appendChild(makeTD(source, values))
+  })
+  tab.appendChild(tr)
+  d.appendChild(tab)
+  document.getElementById('data').innerHTML = d.innerHTML
+}
+
+async function loadWeken(source, part) {
+  document.getElementById('subtitle').innerHTML = source + ' — ' + part
+
+  const d = document.createElement('div')
+  const tab = document.createElement('table')
+  tab.classList.add('outer')
+  tr = document.createElement('tr')
+
+  for (var i = 0; i < 6; i++) {
+    if (i < dates.length) {
+      var week = dates[i]
+      if (!data.has(week)) {
+        data[week] = await getJSON('DATA-' + week + '-4.json')
+      }
+      var values = data[week][source][part]
+      tr.appendChild(
+        makeTD(data[week].year + ' week ' + data[week].week, values),
+      )
+    }
+  }
+
+  tab.appendChild(tr)
+  d.appendChild(tab)
+  document.getElementById('data').innerHTML = d.innerHTML
+}
+
+function kies() {
+  let source = document.forms['choice']['rSource'].value
+  let part = document.forms['choice']['rPart'].value
+  console.log(source)
+  console.log(part)
+  if ((source == 'alles' || source == '') && (part == 'alles' || part == '')) {
+    alert('Kies een bron en/of een onderdeel')
+  } else if (source == 'alles' || source == '') {
+    loadPart(part, dates[0])
+  } else if (part == 'alles' || part == '') {
+    loadSource(source, dates[0])
+  } else {
+    loadWeken(source, part)
+  }
+}
+
+loadSource('Algemeen', dates[0])