How to use @hpcc-js/timeline - 2 common examples
To help you get started, we’ve selected a few @hpcc-js/timeline examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
hpcc-systems / Visualization / tests / test-timeline / src / timeline.spec.ts View on Github 
describe(`${item.prototype.constructor.name}`, () => {
if (item.prototype instanceof Class) {
classDef("timeline", item);
}
if (item.prototype instanceof HTMLWidget || item.prototype instanceof SVGWidget) {
switch (item.prototype.constructor) {
case MiniGantt:
render(new MiniGantt()
.timePattern("%Y-%m-%dT%H:%M:%S.%LZ")
.tickFormat("%H:%M")
.data([
["Start", "2016-07-01T09:12:15.0Z"],
["item-1", "2016-07-01T09:10:00.0Z", "2016-07-01T09:45:00.0Z"],
["item-2", "2016-07-01T11:00:00.0Z", "2016-07-01T12:00:00.0Z"],
["item-3", "2016-07-01T09:20:00.0Z", "2016-07-01T12:20:00.0Z"],
["item-3a", "2016-07-01T09:21:00.0Z", "2016-07-01T12:11:00.0Z"],
["item-3b", "2016-07-01T09:22:00.0Z", "2016-07-01T12:12:00.0Z"],
["item-3c", "2016-07-01T09:23:00.0Z", "2016-07-01T12:13:00.0Z"],
["item-3d", "2016-07-01T09:24:00.0Z", "2016-07-01T12:14:00.0Z"],
["item-3e", "2016-07-01T09:25:00.0Z", "2016-07-01T12:15:00.0Z"],
["item-4", "2016-07-01T09:15:00.0Z", "2016-07-01T12:20:00.0Z"],
["item-6", "2016-07-01T10:00:00.0Z", "2016-07-01T10:50:00.0Z"],
["item-7", "2016-07-01T10:30:01.0Z", "2016-07-01T10:40:00.0Z"],
["10 O'Clock", "2016-07-01T10:00:00.0Z"],import { MiniGantt } from "@hpcc-js/timeline";
new MiniGantt()
.target("target")
.columns(["Label", "start", "end"])
.data(random_datetime_ranges(10).concat(random_datetime_events(1)))
.timePattern("%Y-%m-%dT%H:%M:%S.%LZ")
.render()
;
function random_datetime_string() {
const yyyy = 2004 + Math.floor(Math.random() * 2);
const mm = 1 + Math.floor(Math.random() * 12);
const dd = 1 + Math.floor(Math.random() * 28);
const hh = 1 + Math.floor(Math.random() * 23);
const min = 1 + Math.floor(Math.random() * 59);
const sec = 0 + Math.floor(Math.random() * 59);
return `${yyyy}-${mm < 10 ? '0' + mm : mm}-${dd < 10 ? '0' + dd : dd}T${hh < 10 ? '0' + hh : hh}:${min < 10 ? '0' + min : min}:${sec < 10 ? '0' + sec : sec}.0Z`;
