-
Notifications
You must be signed in to change notification settings - Fork 0
/
sales-toggle.html
26 lines (24 loc) · 1.15 KB
/
sales-toggle.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<link rel="stylesheet" href="../dist/insighttree.css" />
<label for="id">Node #</label><input id="node" type="number" min="0" max="12" value="2" />
<button type="button" id="collapse">Collapse</button>
<button type="button" id="expand">Expand</button>
<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,
});
const nodeId = document.querySelector("#node");
// Clicking the "expand" button expands the chosen node number
document.querySelector("#expand").addEventListener("click", () => {
tree.toggle(Array.from(document.querySelectorAll(`[data-insight-level]`))[nodeId.value], true);
});
// Clicking the "collapse" button collapses the chosen node number
document.querySelector("#collapse").addEventListener("click", () => {
tree.toggle(Array.from(document.querySelectorAll(`[data-insight-level]`))[nodeId.value], false);
});
</script>