<commit_before>document.addEventListener('DOMContentLoaded', () => {
  readData(() => {
    console.log("loaded")
  })
})
<commit_msg>feat(index): add sidebar checkbox based on data loaded<commit_after>import './assets/app.scss'
const d3 = require('d3')

document.addEventListener('DOMContentLoaded', () => {
  readData((data) => {
    const fields = getDataFields(data)
    renderSideBar(fields)
  })
})

function readData(callback) {
  const data = [
    {
      status: 200,
      gender: "Male"
    },
    {
      status: 422,
      gender: "Female"
    }
  ]

  if(callback) {
    callback(data)
  }
}

function getDataFields(data) {
  return Object.keys(data[0])
}

function renderSideBar(fields) {
  const sidebar = d3.select(".sidebar");
  sidebar
    .selectAll("input")
    .data(fields)
    .enter()
    .append("label")
      .attr("for", (d) => d)
      .text((d) => d)
    .append("input")
      .attr("checked", true)
      .attr("type", "checkbox")
      .attr("id", (d) => d)
      .on("click", (d) => console.log(`Pressed ${d}`))
}
{'fraction_non_alphanumeric': 0.18970448045757865, 'fraction_numerical': 0.009532888465204958, 'mean_word_length': 2.9923954372623576, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 11, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1143245', 'n_tokens_mistral': 372, 'n_tokens_neox': 358, 'n_words': 66}