Events can have a duration instead of an instantaneous timestamp.
This story shows two different types of events with duration: phone calls directed from the caller to the recipient, and web meetings involving many people.
See also:
import { createTimeline } from "kronograph";
import { entities, events, entityTypes, eventTypes } from "./data";
document.fonts.load('900 16px "Font Awesome 5 Free"');
document.fonts.ready.then(() => {
const timeline = createTimeline("my-timeline");
timeline.set({
entities,
events,
entityTypes,
eventTypes,
});
timeline.fit();
});export const events = {
event0: {
type: "phone",
entityIds: ["Mable Williamson Sr.", "Felipe Morissette"],
time: {
start: Date.UTC(2021, 0, 3, 13, 31, 48),
end: Date.UTC(2021, 0, 3, 14, 21, 8),
},
},
event1: {
type: "webMeeting",
entityIds: [
"Guy Kihn",
"Santos Hills",
"Sue O'Hara III",
"Marshall Kerluke",
"Cesar Hodkiewicz",
],
time: {
start: Date.UTC(2021, 0, 3, 14, 36, 6),
end: Date.UTC(2021, 0, 3, 15, 15, 36),
},
},
event2: {
type: "phone",
entityIds: ["Blake Harris", "Santos Hills"],
time: {
start: Date.UTC(2021, 0, 3, 12, 46, 4),
end: Date.UTC(2021, 0, 3, 13, 46, 4),
},
},
event3: {
type: "phone",
entityIds: ["Evan Schumm III", "Dr. Edmund Greenfelder"],
time: {
start: Date.UTC(2021, 0, 3, 9, 39, 52),
end: Date.UTC(2021, 0, 3, 10, 24, 12),
},
},
event4: {
type: "phone",
entityIds: ["Guy Kihn", "Dr. Edmund Greenfelder"],
time: {
start: Date.UTC(2021, 0, 3, 11, 36),
end: Date.UTC(2021, 0, 3, 12, 32),
},
},
event5: {
type: "phone",
entityIds: ["Felipe Morissette", "Rolando Schulist III"],
time: {
start: Date.UTC(2021, 0, 3, 9, 26, 24),
end: Date.UTC(2021, 0, 3, 10, 39, 24),
},
},
event6: {
type: "webMeeting",
entityIds: ["Willie Wisozk", "Cesar Hodkiewicz", "Mable Williamson Sr."],
time: {
start: Date.UTC(2021, 0, 3, 10, 50),
end: Date.UTC(2021, 0, 3, 12, 0, 40),
},
},
};
export const entities = {
"Evan Schumm III": {},
"Mable Williamson Sr.": {},
"Blake Harris": {},
"Guy Kihn": {},
"Dr. Edmund Greenfelder": {},
"Felipe Morissette": {},
"Santos Hills": {},
"Sue O'Hara III": {},
"Marshall Kerluke": {},
"Willie Wisozk": {},
"Cesar Hodkiewicz": {},
"Rolando Schulist III": {},
};
export const eventTypes = {
webMeeting: {
showArrows: false,
color: "#f86868",
fontIcon: {
text: "\u{f03d}",
fontFamily: "Font Awesome 5 Free",
fontWeight: 900,
scale: 1.2,
dx: 2,
dy: 5,
},
},
phone: {
color: "#f7d06e",
fontIcon: {
text: "\u{f095}",
fontFamily: "Font Awesome 5 Free",
fontWeight: 900,
scale: 1.2,
dx: 0,
dy: 0,
},
},
};
export const entityTypes = { default: { lineWidth: 0.5 } };<!doctype html>
<html>
<head>
<link rel="stylesheet" href="@ci/theme/kg/css/examples.css" />
</head>
<body>
<div id="my-timeline" style="height: 100vh"></div>
<script type="module" src="./code.js"></script>
</body>
</html>import React, { useState, useEffect } from "react";
import { createRoot } from "react-dom/client";
import Timeline from "kronograph/react/Timeline";
import { entities, events, entityTypes, eventTypes } from "./data";
export const Demo = () => {
const [fontsReady, setFontsReady] = useState(false);
useEffect(() => {
document.fonts.load('900 16px "Font Awesome 5 Free"');
document.fonts.ready.then(() => {
setFontsReady(true);
});
}, []);
if (!fontsReady) {
return null;
}
return (
<Timeline
entityTypes={entityTypes}
eventTypes={eventTypes}
entities={entities}
events={events}
/>
);
};
const root = createRoot(document.getElementById("my-timeline"));
root.render(<Demo />);export const events = {
event0: {
type: "phone",
entityIds: ["Mable Williamson Sr.", "Felipe Morissette"],
time: {
start: Date.UTC(2021, 0, 3, 13, 31, 48),
end: Date.UTC(2021, 0, 3, 14, 21, 8),
},
},
event1: {
type: "webMeeting",
entityIds: [
"Guy Kihn",
"Santos Hills",
"Sue O'Hara III",
"Marshall Kerluke",
"Cesar Hodkiewicz",
],
time: {
start: Date.UTC(2021, 0, 3, 14, 36, 6),
end: Date.UTC(2021, 0, 3, 15, 15, 36),
},
},
event2: {
type: "phone",
entityIds: ["Blake Harris", "Santos Hills"],
time: {
start: Date.UTC(2021, 0, 3, 12, 46, 4),
end: Date.UTC(2021, 0, 3, 13, 46, 4),
},
},
event3: {
type: "phone",
entityIds: ["Evan Schumm III", "Dr. Edmund Greenfelder"],
time: {
start: Date.UTC(2021, 0, 3, 9, 39, 52),
end: Date.UTC(2021, 0, 3, 10, 24, 12),
},
},
event4: {
type: "phone",
entityIds: ["Guy Kihn", "Dr. Edmund Greenfelder"],
time: {
start: Date.UTC(2021, 0, 3, 11, 36),
end: Date.UTC(2021, 0, 3, 12, 32),
},
},
event5: {
type: "phone",
entityIds: ["Felipe Morissette", "Rolando Schulist III"],
time: {
start: Date.UTC(2021, 0, 3, 9, 26, 24),
end: Date.UTC(2021, 0, 3, 10, 39, 24),
},
},
event6: {
type: "webMeeting",
entityIds: ["Willie Wisozk", "Cesar Hodkiewicz", "Mable Williamson Sr."],
time: {
start: Date.UTC(2021, 0, 3, 10, 50),
end: Date.UTC(2021, 0, 3, 12, 0, 40),
},
},
};
export const entities = {
"Evan Schumm III": {},
"Mable Williamson Sr.": {},
"Blake Harris": {},
"Guy Kihn": {},
"Dr. Edmund Greenfelder": {},
"Felipe Morissette": {},
"Santos Hills": {},
"Sue O'Hara III": {},
"Marshall Kerluke": {},
"Willie Wisozk": {},
"Cesar Hodkiewicz": {},
"Rolando Schulist III": {},
};
export const eventTypes = {
webMeeting: {
showArrows: false,
color: "#f86868",
fontIcon: {
text: "\u{f03d}",
fontFamily: "Font Awesome 5 Free",
fontWeight: 900,
scale: 1.2,
dx: 2,
dy: 5,
},
},
phone: {
color: "#f7d06e",
fontIcon: {
text: "\u{f095}",
fontFamily: "Font Awesome 5 Free",
fontWeight: 900,
scale: 1.2,
dx: 0,
dy: 0,
},
},
};
export const entityTypes = { default: { lineWidth: 0.5 } };<!doctype html>
<html>
<head>
<link rel="stylesheet" href="@ci/theme/kg/css/examples.css" />
</head>
<body>
<div id="my-timeline" style="height: 100vh"></div>
<script type="module" src="./code.jsx"></script>
</body>
</html>