<section id="charts"></section>

function fetchData() {
  return fetch("/data.json")
    .then((res) => res.json());
}

const charts = document.querySelector("#charts");

async function createChart() {
  const data = await fetchData();

  const chartMarkup = data
    .map((item) => `
      <article data-value="${item.value}">
        <h2>${item.label}</h2>
        <p class="sr-only">${item.value}%</p>
      </article>`
    ).join("");

  charts.setHTML(chartMarkup, { sanitizer });
}
createChart()


const sanitizer = new Sanitizer({
  attributes: ['class'],
});