lightview
Version:
Small, simple, powerful web UI and micro front end creation ... Great ideas from Svelte, React, Vue and Riot combined.
41 lines • 1.56 kB
HTML
<html>
<head>
<title>Lightview:Component:OrgChart</title>
<script src="../javascript/json5.min.js"></script>
</head>
<body>
<link id="load-css-2" rel="stylesheet" type="text/css" href="https://www.gstatic.com/charts/51/css/orgchart/orgchart.css">
<div id="target"></div>
<script id="lightview">
(document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
const {chart} = await import(new URL("./components.js", this.componentBaseURI).href);
chart(self, {
options: {allowHtml: true, allowCollapse: true},
packages: ["orgchart"],
columns: [
{label: "Name", type: "string"},
{label: "Manager", type: "string"},
{label: "Tooltip", type: "string"}
],
type: "OrgChart",
// 4 columns in definition data name,title,manager,tooltip
rowTransform(row) {
return row.reduce((row, item, index) => {
item ||= "";
if (index === 1) {
row[0] = {
v: row[0],
f: `<div style="text-align:center;">${row[0]}<div style="font-style:italic">${item}</div></div>`
}
} else {
row.push(item);
}
return row;
}, []);
}
});
}
</script>
</body>
</html>