import { createTimeline } from "kronograph";
import data from "./data";
const timeline = createTimeline("my-timeline");
timeline.set(data);
timeline.fit();
const orderingSelect = document.getElementById("ordering-select");
orderingSelect.addEventListener("change", (e) => {
timeline.setOrdering(e.target.value);
});export default {
entities: {
"smith-johnathan-151": {
label: "John Smith",
},
"west-josephine-126": {
label: "Josephine West",
},
"mckenzie-andrew-048": {
label: "Andrew McKenzie",
},
"roberts-nathaniel-023": {
label: "Nathan Roberts",
},
"baxter-eleanor-004": {
label: "Ella Baxter",
},
},
events: {
"email 1": {
entityIds: ["smith-johnathan-151", "roberts-nathaniel-023"],
time: 1755161340000,
},
"email 2": {
entityIds: ["smith-johnathan-151", "baxter-eleanor-004"],
time: 1755161760000,
},
"email 3": {
entityIds: ["smith-johnathan-151", "west-josephine-126"],
time: 1755162120000,
},
"email 4": {
entityIds: ["smith-johnathan-151", "west-josephine-126"],
time: 1755163620000,
},
"email 5": {
entityIds: ["baxter-eleanor-004", "roberts-nathaniel-023"],
time: 1755166800000,
},
"email 6": {
entityIds: ["roberts-nathaniel-023", "smith-johnathan-151"],
time: 1755167400000,
},
"email 7": {
entityIds: ["smith-johnathan-151", "west-josephine-126"],
time: 1755167640000,
},
"email 8": {
entityIds: ["west-josephine-126", "smith-johnathan-151"],
time: 1755168000000,
},
"email 9": {
entityIds: ["smith-johnathan-151", "west-josephine-126"],
time: 1755168660000,
},
"email 10": {
entityIds: ["west-josephine-126", "smith-johnathan-151"],
time: 1755173100000,
},
"email 11": {
entityIds: ["smith-johnathan-151", "west-josephine-126"],
time: 1755182220000,
},
"email 12": {
entityIds: ["baxter-eleanor-004", "west-josephine-126"],
time: 1755187620000,
},
"email 13": {
entityIds: ["west-josephine-126", "roberts-nathaniel-023"],
time: 1755193320000,
},
"email 14": {
entityIds: ["mckenzie-andrew-048", "west-josephine-126"],
time: 1755177120000,
},
"email 15": {
entityIds: ["mckenzie-andrew-048", "baxter-eleanor-004"],
time: 1755171600000,
},
},
};<!doctype html>
<html>
<head>
<link rel="stylesheet" href="@ci/theme/kg/css/examples.css" />
</head>
<body>
<div class="story">
<div class="story__timeline" id="my-timeline"></div>
<div class="story__controls story__controls--row">
<div class="stack">
<div class="story__controls__item">
<label for="ordering-select">Ordering</label>
<select id="ordering-select" class="select story__controls__item__child--flex-2">
<option value="alphabetical">Alphabetical</option>
<option value="firstevent">First event</option>
<option value="lastevent">Last event</option>
<option value="keyorder">Key order</option>
<option value="shorteneventlines" selected>Shorten event lines</option>
</select>
</div>
</div>
</div>
</div>
<script type="module" src="./code.js"></script>
</body>
</html>import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import Timeline from "kronograph/react/Timeline";
import data from "./data";
const { entities, events } = data;
export const Demo = () => {
const [ordering, setOrdering] = useState("shorteneventlines");
return (
<div className="story">
<Timeline
className="story__timeline"
entities={entities}
events={events}
ordering={ordering}
/>
<div className="story__controls story__controls--row">
<div className="stack">
<div className="story__controls__item">
<label htmlFor="ordering-select">Ordering</label>
<select
id="ordering-select"
className="select story__controls__item__child--flex-2"
defaultValue={"shorteneventlines"}
onChange={(e) => {
setOrdering(e.target.value);
}}
>
<option value="alphabetical">Alphabetical</option>
<option value="firstevent">First event</option>
<option value="lastevent">Last event</option>
<option value="keyorder">Key order</option>
<option value="shorteneventlines">Shorten event lines</option>
</select>
</div>
</div>
</div>
</div>
);
};
const root = createRoot(document.getElementById("my-timeline"));
root.render(<Demo />);export default {
entities: {
"smith-johnathan-151": {
label: "John Smith",
},
"west-josephine-126": {
label: "Josephine West",
},
"mckenzie-andrew-048": {
label: "Andrew McKenzie",
},
"roberts-nathaniel-023": {
label: "Nathan Roberts",
},
"baxter-eleanor-004": {
label: "Ella Baxter",
},
},
events: {
"email 1": {
entityIds: ["smith-johnathan-151", "roberts-nathaniel-023"],
time: 1755161340000,
},
"email 2": {
entityIds: ["smith-johnathan-151", "baxter-eleanor-004"],
time: 1755161760000,
},
"email 3": {
entityIds: ["smith-johnathan-151", "west-josephine-126"],
time: 1755162120000,
},
"email 4": {
entityIds: ["smith-johnathan-151", "west-josephine-126"],
time: 1755163620000,
},
"email 5": {
entityIds: ["baxter-eleanor-004", "roberts-nathaniel-023"],
time: 1755166800000,
},
"email 6": {
entityIds: ["roberts-nathaniel-023", "smith-johnathan-151"],
time: 1755167400000,
},
"email 7": {
entityIds: ["smith-johnathan-151", "west-josephine-126"],
time: 1755167640000,
},
"email 8": {
entityIds: ["west-josephine-126", "smith-johnathan-151"],
time: 1755168000000,
},
"email 9": {
entityIds: ["smith-johnathan-151", "west-josephine-126"],
time: 1755168660000,
},
"email 10": {
entityIds: ["west-josephine-126", "smith-johnathan-151"],
time: 1755173100000,
},
"email 11": {
entityIds: ["smith-johnathan-151", "west-josephine-126"],
time: 1755182220000,
},
"email 12": {
entityIds: ["baxter-eleanor-004", "west-josephine-126"],
time: 1755187620000,
},
"email 13": {
entityIds: ["west-josephine-126", "roberts-nathaniel-023"],
time: 1755193320000,
},
"email 14": {
entityIds: ["mckenzie-andrew-048", "west-josephine-126"],
time: 1755177120000,
},
"email 15": {
entityIds: ["mckenzie-andrew-048", "baxter-eleanor-004"],
time: 1755171600000,
},
},
};<!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>