A child of God • Trust in «as for me and my family, we will serve the Lord» • Software Developer 💻 • Graphic Designer 😍 • Creative 👌 • Thankful
Public
Edited
Apr 14, 2023
{
try {
const treet = await new mar10.Wunderbaum({
id: "demo",
element: document.querySelector("#demo-tree"),
checkbox: true,
source: [
{
title: "Node 1",
expanded: true,
children: [{ title: "Node 1.1" }, { title: "Node 1.2" }]
},
{ title: "Node 2" }
],
debugLevel: 1,
});
console.log(treet)
} catch (error) {}
}
html`<div id="demo-tree-2"></div>`
tree2 = new mar10.Wunderbaum({
id: "demo1",
element: document.querySelector("#demo-tree-2"),
// header: "Plain Tree",
source:
"https://cdn.jsdelivr.net/gh/mar10/assets@master/wunderbaum/ajax_99k_3_1.json",
debugLevel: 5,
connectTopBreadcrumb: document.getElementById("parentPath"),
checkbox: true,
// minExpandLevel: 1,
types: {},
// init: (e) => {
// // Tree was loaded and rendered. Now set focus:
// const node = e.tree.findFirst("Jumping dopily")
// node.setActive()
// e.tree.setFocus();
// },
});
html`<div id="demo-tree-3" class="wb-skeleton wb-no-select wunderbaum wb-ext-keynav wb-ext-edit wb-ext-filter wb-ext-dnd wb-ext-grid wb-cell-mode wb-fixed-col wb-grid"></div>`
html`<div id="demo-tree-4"></div>`
tree4 = new mar10.Wunderbaum({
id: "demo3",
element: document.querySelector("#demo-tree-4"),
// source: "https://cdn.jsdelivr.net/gh/mar10/assets@master/wunderbaum/ajax_100k_3_1_6.json",
// source: "../assets/ajax_1k_3_54.json",
// Columns- and types-definition are part of the Ajax response:
source: "https://cdn.jsdelivr.net/gh/mar10/assets@master/wunderbaum/ajax_1k_3_54_t_c.json",
debugLevel: 5,
// header: false,
connectTopBreadcrumb: document.getElementById("parentPath"),
// checkbox: true,
// minExpandLevel: 1,
fixedCol: true,
navigationModeOption: "cell",
// edit: {
// trigger: ["clickActive", "F2", "macEnter"],
// select: true,
// beforeEdit: function (e) {
// console.log(e.type, e);
// // return false;
// },
// edit: function (e) {
// console.log(e.type, e);
// },
// apply: function (e) {
// console.log(e.type, e);
// // Simulate async storage that also validates:
// return e.util.setTimeoutPromise(() => {
// e.inputElem.setCustomValidity("");
// if (e.newValue.match(/.*\d.*/)) {
// e.inputElem.setCustomValidity("No numbers please.");
// return false;
// }
// }, 1000);
// },
// },
// filter: {
// connectInput: "input#filterQuery",
// // mode: "dim",
// },
init: (e) => {
// e.tree.setFocus();
},
load: function (e) {
// e.tree.addChildren({ title: "custom1", classes: "wb-error" });
},
// lazyLoad: function (e) {
// console.log(e.type, e);
// // return { url: "../assets/ajax-lazy-products.json" };
// return new Promise((resolve, reject) => {
// setTimeout(() => {
// // reject("Epic fail")
// resolve({ url: "../assets/ajax-lazy-products.json" });
// }, 1500);
// });
// },
change: function (e) {
const info = e.info;
const colId = info.colId;
console.log(e.type, e);
// For demo purposes, simulate a backend delay:
return e.util.setTimeoutPromise(() => {
// Assumption: we named column.id === node.data.NAME
switch (colId) {
case "sale":
case "details":
e.node.data[colId] = e.inputValue;
break;
}
// e.node.setModified()
}, 500);
},
render: function (e) {
// console.log(e.type, e.isNew, e);
const node = e.node;
const util = e.util;
for (const col of Object.values(e.renderColInfosById)) {
// Assumption: we named column.id === node.data.NAME
const val = node.data[col.id];
switch (col.id) {
case "date":
if (val) {
const dt = new Date(val)
col.elem.textContent = dt.toISOString().slice(0, 10);
} else {
col.elem.textContent = "n.a.";
}
break
case "mood":
const map = { "h": "Happy", "s": "Sad" }
col.elem.textContent = map[val] || "";
break
case "price":
col.elem.textContent = "$ " + val.toFixed(2);
break;
case "qty": // thousands separator
col.elem.textContent = val.toLocaleString();
break;
case "details": // text control
if (e.isNew) {
col.elem.innerHTML = "<input type='text'>";
}
util.setValueToElem(col.elem, val);
break;
default:
// Assumption: we named column.id === node.data.NAME
if (typeof val === "boolean") {
col.elem.textContent = val ? "X" : "";
} else {
col.elem.textContent = val;
}
break;
}
}
},
});
mar10 = import("https://cdn.jsdelivr.net/gh/mar10/wunderbaum@main/dist/wunderbaum.esm.min.js")
//import("https://cdn.jsdelivr.net/gh/mar10/wunderbaum/docs/api/assets/main.js")
html`<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.0/font/bootstrap-icons.css" rel="stylesheet" />`
html`<link href="https://cdn.jsdelivr.net/gh/mar10/wunderbaum@main/dist/wunderbaum.css" rel="stylesheet" />`
d3.json("https://cdn.jsdelivr.net/gh/mar10/assets@master/wunderbaum/ajax_99k_3_1.json")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
