sales-render.html

<link rel="stylesheet" href="../dist/insighttree.css">
<style>
  .insight-current { background-color: gold; }
  .insight-highlight { font-weight: normal; color: red; }
  .insight-toggle:before { content: url('arrow.svg'); }
</style>
<input class="slider" type="range" min="1" max="12" value="4">
<div class="sales-tree"></div>

<script type="module">
  import { insightTree, LEVEL, RANK, GROUP } from "../dist/insighttree.js";
  const data = await fetch("sales-data.json").then(r => r.json())

  const tree = insightTree(".sales-tree", {
    data: data,
    groups: ["city", "product", "channel"],
    metrics: ["sales", "target"],
    impact: ({ sales, target }) => sales - target,
    // Render as a table
    render: (el, { tree }) => el.innerHTML = /* html */ `
      <table>
        <thead><tr><th>#</th><th>Group</th><th>Gap</th><th>Sales</th><th>Target</th></tr></thead>
        <tbody>
          ${tree.map(({ sales, target, ...row }) => /* html */ `
            <tr data-insight-level="${row[LEVEL]}" data-insight-rank="${row[RANK]}">
              <td class="text-end">#${row[RANK]}</th>
              <td style="padding-left:${row[LEVEL] * 1.5}rem">
                <span class="insight-toggle"></span> ${row[GROUP]}
              </td>
              <td class="text-end">${sales - target}</td>
              <td class="text-end">${sales}</td>
              <td class="text-end">${target}</td>
            </tr>`).join("")}
        </tbody>
      </table>`,
  });
  // Show top 4 insights
  tree.update({ rank: 4 })

  document.querySelector('.slider').addEventListener('input', (e) => {
    tree.update({ rank: e.target.value });
  });
</script>