Custom CMS Bar-Chart

 
<style>
	.na_chart_ui_control.is--active {
  	color: #ffff;
  }
  .na_chart_ui_control.is--active:hover {
  	background-color: #5762d5;
  }
</style>

<script>
window.Webflow ||= [];
window.Webflow.push(() => {
  const container = document.querySelector('[data-chart="list"]');
  if (!container) return;

  const items = container.querySelectorAll('[data-chart="item"]');
  if (!items.length) return;

  const rawData = Array.from(items).map((item) => {
    const value = parseFloat(item.getAttribute("data-chart-value")) || 0;
    const dateStr = item.getAttribute("data-chart-date");
    const date = new Date(dateStr);
    return { date, value };
  });
  let drillLevel = 1;

  const formatLabel = (date, level) => {
    if (level === 0) return date.getFullYear().toString();
    if (level === 1)
      return date.toLocaleString("en-US", { month: "short", year: "numeric" });
    if (level === 2)
      return date.toLocaleDateString("de-DE", {
        day: "2-digit",
        month: "2-digit",
        year: "2-digit",
      });
  };

  const getKey = (date, level) => {
    if (level === 0) return `${date.getFullYear()}`;
    if (level === 1)
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
        2,
        "0"
      )}`;
    if (level === 2)
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
        2,
        "0"
      )}-${String(date.getDate()).padStart(2, "0")}`;
  };

  const aggregateData = (level) => {
    const grouped = {};
    rawData.forEach(({ date, value }) => {
      if (isNaN(date)) return;
      const key = getKey(date, level);
      grouped[key] = (grouped[key] || 0) + value;
    });
    return grouped;
  };

  const renderChart = (playAnimation = true) => {
    const aggregated = aggregateData(drillLevel);
    const values = Object.values(aggregated);
    const maxValue = Math.max(...values);
    if (maxValue === 0) return;

    const sortedKeys = Object.keys(aggregated).sort();

    sortedKeys.forEach((key, index) => {
      const totalValue = aggregated[key];
      const heightPercent = (totalValue / maxValue) * 100;

      const item = items[index];
      if (!item) return;

      const bar = item.querySelector('[data-chart="bar"]');
      if (bar) bar.style.height = `${heightPercent}%`;

      item.setAttribute("data-chart-date", key);
      item.setAttribute("data-chart-value", totalValue);

      const parts = key.split("-");
      let date;
      if (drillLevel === 0) date = new Date(parseInt(parts[0]), 0, 1);
      else if (drillLevel === 1)
        date = new Date(parseInt(parts[0]), parseInt(parts[1]) - 1, 1);
      else
        date = new Date(
          parseInt(parts[0]),
          parseInt(parts[1]) - 1,
          parseInt(parts[2])
        );

      const labelEl = item.querySelector('[data-chart="label"]');
      if (labelEl) labelEl.textContent = formatLabel(date, drillLevel);

      const valueEl = item.querySelector('[data-chart="value"]');
      if (valueEl) valueEl.textContent = totalValue.toLocaleString("en-US");

      item.style.display = "";

      if (playAnimation) {
        const animationName = item.getAttribute("data-chart-animation");
        if (animationName) {
          try {
            const wfIx = Webflow.require("ix3");
            wfIx.emit(animationName);
          } catch (err) {}
        }
      }
    });

    for (let i = sortedKeys.length; i < items.length; i++) {
      items[i].style.display = "none";
    }

    updateControls();
  };

  const updateControls = () => {
    const upBtn = document.querySelector('[data-chart-control="drill-up"]');
    const downBtn = document.querySelector('[data-chart-control="drill-down"]');

    if (upBtn) {
      upBtn.setAttribute("aria-label", "drill up");
      if (drillLevel > 0) upBtn.classList.add("is--active");
      else upBtn.classList.remove("is--active");
    }

    if (downBtn) {
      downBtn.setAttribute("aria-label", "drill down");
      if (drillLevel < 2) downBtn.classList.add("is--active");
      else downBtn.classList.remove("is--active");
    }
  };
  renderChart(true);

  const controls = document.querySelectorAll("[data-chart-control]");
  controls.forEach((btn) => {
    btn.addEventListener("click", () => {
      const action = btn.getAttribute("data-chart-control");
      if (action === "drill-down" && drillLevel < 2) {
        drillLevel++;
        renderChart(true);
      } else if (action === "drill-up" && drillLevel > 0) {
        drillLevel--;
        renderChart(true);
      }
    });
  });
});
</script>