sales-leafs.html

<link rel="stylesheet" href="../dist/insighttree.css" />
<input id="rank" type="range" min="1" max="200" value="0" />
<div class="sales-tree"></div>

<script type="module">
  import { insightTree } 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,
  });
  // Show first deep insight
  tree.update({ rank: 0 }, { leaf: true });
  document.querySelector("#rank").addEventListener("input", (e) => {
    tree.update({ rank: +e.target.value }, { leaf: true });
  });
</script>