sales-style.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 } 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 top 4 insights
  tree.update({ rank: 4 });

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