lightview
Version:
Small, simple, powerful web UI and micro front end creation ... Great ideas from Svelte, React, Vue and Riot combined.
44 lines • 1.6 kB
HTML
<html>
<head>
<title>Lightview:Component:Timeline</title>
<script src="../javascript/json5.min.js"></script>
</head>
<body>
<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, {
packages: ["timeline"],
columns: [
{id: "RowLabel", type: "string"},
{id: "BarLabel", type: "string"},
{id: "Start", type: "date"},
{id: "End", type: "date"}
],
type: "Timeline",
optionsTransform(options) {
options = {...options};
if ("showRowLabels" in options) {
options.timeline = {showRowLabels: options.showRowLabels};
}
return options;
},
rowTransform(row, i) {
return row.map((item, index) => {
if (item && (index === 2 || index === 3)) {
const date = new Date(item);
if (!date || typeof (date) !== "object" || !(date instanceof Date)) {
throw new TypeError(`row:${i} col:${index} is not a date`);
}
return date;
}
return item;
})
}
});
}
</script>
</body>
</html>