Click a heatmap cell to reveal the events that make up that cell.
Click the revealed event to hide it again.
See also:
Click a heatmap cell to reveal the events that make up that cell.
Click the revealed event to hide it again.
See also:
import { createTimeline } from "kronograph";
import data from "./data";
const timeline = createTimeline("my-timeline");
let isHeatmapMode = false;
function handleClick({ targetType, subItem, eventIds }) {
if ((targetType === "event" || targetType === "eventSummary") && isHeatmapMode) {
const subtracted = timeline.reveal().filter((v) => !eventIds.includes(v));
timeline.reveal(subtracted);
} else if (targetType === "cell" && subItem !== undefined) {
const revealedEventIds = timeline.reveal();
const hasUnrevealed = eventIds.some((ev) => !revealedEventIds.includes(ev));
eventIds.forEach((ev) => {
const isRevealed = revealedEventIds.includes(ev);
if (hasUnrevealed && !isRevealed) {
revealedEventIds.push(ev);
}
});
timeline.reveal(revealedEventIds);
}
}
const timelineOptions = {
events: {
heatmapThreshold: 20,
},
};
timeline.on("click", handleClick);
timeline.on("draw", () => {
const visibleEvents = Object.keys(timeline.getInRangeItems().events);
isHeatmapMode = visibleEvents.length > timeline.options().events.heatmapThreshold;
});
timeline.options(timelineOptions);
timeline.set(data);
timeline.fit();export default {
entities: {
"Harvey Korbin": {
color: "#76b7b2",
type: "default",
},
"Better Life Bank": {
color: "#f28e2c",
type: "default",
},
"Gustav Christin": {
color: "#4e79a7",
type: "default",
},
"AJR Investments": {
color: "#59a14f",
type: "default",
},
"Anne-Sophie Nicolas": {
color: "#e15759",
type: "default",
},
},
events: {
event001: {
entityIds: {
from: "Harvey Korbin",
to: "Better Life Bank",
},
data: {
amount: 500,
},
time: 1703861977000,
},
event002: {
entityIds: {
from: "Harvey Korbin",
to: "Better Life Bank",
},
data: {
amount: 5000,
},
time: 1728566968000,
},
event003: {
entityIds: {
from: "Harvey Korbin",
to: "Better Life Bank",
},
data: {
amount: 256,
},
time: 1728998968000,
},
event004: {
entityIds: {
from: "Harvey Korbin",
to: "Better Life Bank",
},
data: {
amount: 800,
},
time: 1729776568000,
},
event005: {
entityIds: {
from: "Harvey Korbin",
to: "Better Life Bank",
},
data: {
amount: 900,
},
time: 1730726968000,
},
event01: {
entityIds: {
from: "Harvey Korbin",
to: "Better Life Bank",
},
data: {
amount: 50000,
},
time: 1704380377000,
},
event02: {
entityIds: {
from: "Harvey Korbin",
to: "Better Life Bank",
},
data: {
amount: 50000,
},
time: 1705503577000,
},
event04: {
entityIds: {
from: "Harvey Korbin",
to: "Better Life Bank",
},
data: {
amount: 50000,
},
time: 1707317977000,
},
event05: {
entityIds: {
from: "Better Life Bank",
to: "Gustav Christin",
},
data: {
amount: 75000,
},
time: 1707990456000,
},
event06: {
entityIds: {
from: "Better Life Bank",
to: "Gustav Christin",
},
data: {
amount: 75000,
},
time: 1709027256000,
},
event07: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 10000,
},
time: 1704448603000,
},
event08: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 10000,
},
time: 1709027256000,
},
event09: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 10000,
},
time: 1707127003000,
},
event10: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 10000,
},
time: 1709632603000,
},
event11: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 10000,
},
time: 1712311003000,
},
event12: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 10000,
},
time: 1714903003000,
},
event13: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 10000,
},
time: 1717581403000,
},
event14: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 10000,
},
time: 1720173403000,
},
event15: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 10000,
},
time: 1722851803000,
},
event16: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 10000,
},
time: 1725530203000,
},
event17: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 10000,
},
time: 1728122203000,
},
event18: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 10000,
},
time: 1730800603000,
},
event19: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 10000,
},
time: 1733392603000,
},
event20: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 10000,
},
time: 1738749403000,
},
event21: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 10000,
},
time: 1743847003000,
},
event22: {
entityIds: {
from: "AJR Investments",
to: "Anne-Sophie Nicolas",
},
data: {
amount: 150000,
},
time: 1749117403000,
},
event101: {
entityIds: ["Harvey Korbin"],
data: {
amount: 500,
},
time: 1715004727000,
},
event110: {
entityIds: ["Harvey Korbin"],
data: {
amount: 850,
},
time: 1717683127000,
},
event120: {
entityIds: ["Harvey Korbin"],
data: {
amount: 300,
},
time: 1728223927000,
},
event130: {
entityIds: ["Harvey Korbin"],
data: {
amount: 2500,
},
time: 1733494327000,
},
event140: {
entityIds: ["Harvey Korbin"],
data: {
amount: 1000,
},
time: 1741270327000,
},
event150: {
entityIds: ["Harvey Korbin"],
data: {
amount: 5000,
},
time: 1720275127000,
},
event160: {
entityIds: {
from: "Harvey Korbin",
to: "Better Life Bank",
},
data: {
amount: 3000,
},
time: 1725631927000,
},
event170: {
entityIds: {
from: "Harvey Korbin",
to: "Better Life Bank",
},
data: {
amount: 450,
},
time: 1715004727000,
},
event171: {
entityIds: {
from: "Harvey Korbin",
to: "Better Life Bank",
},
data: {
amount: 3400,
},
time: 1704550327000,
},
event172: {
entityIds: {
from: "Harvey Korbin",
to: "Better Life Bank",
},
data: {
amount: 349,
},
time: 1712412727000,
},
event173: {
entityIds: {
from: "Better Life Bank",
to: "Harvey Korbin",
},
data: {
amount: 700,
},
time: 1733494327000,
},
event174: {
entityIds: {
from: "Better Life Bank",
to: "Harvey Korbin",
},
data: {
amount: 1100,
},
time: 1736172727000,
},
event175: {
entityIds: {
from: "Better Life Bank",
to: "Gustav Christin",
},
data: {
amount: 2400,
},
time: 1704150327000,
},
event176: {
entityIds: {
from: "Better Life Bank",
to: "Gustav Christin",
},
data: {
amount: 2000,
},
time: 1713683127000,
},
event177: {
entityIds: {
from: "Better Life Bank",
to: "Gustav Christin",
},
data: {
amount: 800,
},
time: 1748223927000,
},
event178: {
entityIds: {
from: "Better Life Bank",
to: "Gustav Christin",
},
data: {
amount: 800,
},
time: 1739851127000,
},
event179: {
entityIds: {
from: "Better Life Bank",
to: "Gustav Christin",
},
data: {
amount: 400,
},
time: 1720275127000,
},
event180: {
entityIds: {
from: "Better Life Bank",
to: "Gustav Christin",
},
data: {
amount: 700,
},
time: 1721743927000,
},
event181: {
entityIds: {
from: "Better Life Bank",
to: "Gustav Christin",
},
data: {
amount: 200,
},
time: 1722435127000,
},
event182: {
entityIds: ["Better Life Bank"],
data: {
amount: 450,
},
time: 1714572727000,
},
event1821: {
entityIds: ["Better Life Bank"],
data: {
amount: 900,
},
time: 1733059768000,
},
event1822: {
entityIds: ["Better Life Bank"],
data: {
amount: 2300,
},
time: 1733405368000,
},
event1823: {
entityIds: ["Better Life Bank"],
data: {
amount: 900,
},
time: 1735565368000,
},
event1824: {
entityIds: ["Better Life Bank"],
data: {
amount: 700,
},
time: 1731590968000,
},
event1825: {
entityIds: ["Better Life Bank"],
data: {
amount: 60,
},
time: 1723642168000,
},
event1826: {
entityIds: ["Better Life Bank"],
data: {
amount: 200,
},
time: 1723901368000,
},
event1827: {
entityIds: ["Better Life Bank"],
data: {
amount: 500,
},
time: 1727789368000,
},
event1828: {
entityIds: ["Better Life Bank"],
data: {
amount: 700,
},
time: 1728566968000,
},
event1829: {
entityIds: ["Better Life Bank"],
data: {
amount: 1000,
},
time: 1730381368000,
},
event183: {
entityIds: ["Better Life Bank"],
data: {
amount: 2000,
},
time: 1708175167000,
},
event184: {
entityIds: ["Better Life Bank"],
data: {
amount: 2500,
},
time: 1708175167000,
},
event185: {
entityIds: {
from: "Better Life Bank",
to: "Gustav Christin",
},
data: {
amount: 990,
},
time: 1709643967000,
},
event186: {
entityIds: {
from: "Better Life Bank",
to: "Gustav Christin",
},
data: {
amount: 4000,
},
time: 1733058367000,
},
event187: {
entityIds: {
from: "Better Life Bank",
to: "Gustav Christin",
},
data: {
amount: 2000,
},
time: 1733835967000,
},
event188: {
entityIds: {
from: "Better Life Bank",
to: "Gustav Christin",
},
data: {
amount: 2000,
},
time: 1731243967000,
},
event190: {
entityIds: ["Better Life Bank"],
data: {
amount: 500,
},
time: 1718024767000,
},
event189: {
entityIds: ["Better Life Bank"],
data: {
amount: 800,
},
time: 1719752767000,
},
event191: {
entityIds: ["Better Life Bank"],
data: {
amount: 800,
},
time: 1725023167000,
},
event192: {
entityIds: ["Better Life Bank"],
data: {
amount: 900,
},
time: 1722863167000,
},
event193: {
entityIds: ["Better Life Bank"],
data: {
amount: 600,
},
time: 1712322367000,
},
event194: {
entityIds: ["Better Life Bank"],
data: {
amount: 500,
},
time: 1710335167000,
},
event195: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 200,
},
time: 1710335167000,
},
event196: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 500,
},
time: 1718283967000,
},
event197: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 1000,
},
time: 1723554367000,
},
event198: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 200,
},
time: 1734095167000,
},
event199: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 200,
},
time: 1736773567000,
},
event200: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 2000,
},
time: 1739451967000,
},
event201: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 3000,
},
time: 1704114367000,
},
event202: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 2300,
},
time: 1706706367000,
},
event203: {
entityIds: ["AJR Investments"],
data: {
amount: 800,
},
time: 1717160767000,
},
event204: {
entityIds: ["AJR Investments"],
data: {
amount: 50,
},
time: 1721048767000,
},
event205: {
entityIds: ["AJR Investments"],
data: {
amount: 100,
},
time: 1721059567000,
},
event206: {
entityIds: ["AJR Investments"],
data: {
amount: 200,
},
time: 1721063167000,
},
event207: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 10,
},
time: 1729011967000,
},
event208: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 200,
},
time: 1729184767000,
},
event209: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 4000,
},
time: 1729443967000,
},
event210: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 200,
},
time: 1742144767000,
},
event211: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 300,
},
time: 1742835967000,
},
event212: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 500,
},
time: 1748365567000,
},
event213: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 134,
},
time: 1748970367000,
},
event214: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 600,
},
time: 1743699967000,
},
event215: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 990,
},
time: 1745168767000,
},
event216: {
entityIds: {
from: "AJR Investments",
to: "Anne-Sophie Nicolas",
},
data: {
amount: 500,
},
time: 1712077567000,
},
event217: {
entityIds: {
from: "AJR Investments",
to: "Anne-Sophie Nicolas",
},
data: {
amount: 3400,
},
time: 1719939967000,
},
event218: {
entityIds: {
from: "AJR Investments",
to: "Anne-Sophie Nicolas",
},
data: {
amount: 1100,
},
time: 1722618367000,
},
event219: {
entityIds: {
from: "AJR Investments",
to: "Anne-Sophie Nicolas",
},
data: {
amount: 2000,
},
time: 1727888767000,
},
event220: {
entityIds: {
from: "AJR Investments",
to: "Anne-Sophie Nicolas",
},
data: {
amount: 1500,
},
time: 1733159167000,
},
event221: {
entityIds: ["Anne-Sophie Nicolas"],
data: {
amount: 600,
},
time: 1715840568000,
},
event222: {
entityIds: ["Anne-Sophie Nicolas"],
data: {
amount: 1600,
},
time: 1717840568000,
},
event223: {
entityIds: ["Anne-Sophie Nicolas"],
data: {
amount: 300,
},
time: 1719840568000,
},
event224: {
entityIds: ["Anne-Sophie Nicolas"],
data: {
amount: 5000,
},
time: 1704115768000,
},
event225: {
entityIds: ["Anne-Sophie Nicolas"],
data: {
amount: 1000,
},
time: 1711978168000,
},
event226: {
entityIds: ["Anne-Sophie Nicolas"],
data: {
amount: 334,
},
time: 1719840568000,
},
event227: {
entityIds: ["Anne-Sophie Nicolas"],
data: {
amount: 600,
},
time: 1724595768000,
},
event228: {
entityIds: ["Anne-Sophie Nicolas"],
data: {
amount: 600,
},
time: 1713619768000,
},
event229: {
entityIds: ["Anne-Sophie Nicolas"],
data: {
amount: 700,
},
time: 1713792568000,
},
event230: {
entityIds: ["Anne-Sophie Nicolas"],
data: {
amount: 700,
},
time: 1714397368000,
},
event231: {
entityIds: ["Anne-Sophie Nicolas"],
data: {
amount: 300,
},
time: 1714829368000,
},
event232: {
entityIds: ["Anne-Sophie Nicolas"],
data: {
amount: 500,
},
time: 1722778168000,
},
event233: {
entityIds: ["Anne-Sophie Nicolas"],
data: {
amount: 800,
},
time: 1723469368000,
},
event234: {
entityIds: ["Anne-Sophie Nicolas"],
data: {
amount: 1300,
},
time: 1726147768000,
},
event235: {
entityIds: ["Anne-Sophie Nicolas"],
data: {
amount: 2500,
},
time: 1726406968000,
},
event236: {
entityIds: ["Anne-Sophie Nicolas"],
data: {
amount: 700,
},
time: 1742045368000,
},
event237: {
entityIds: ["Anne-Sophie Nicolas"],
data: {
amount: 900,
},
time: 1740922168000,
},
event238: {
entityIds: ["Anne-Sophie Nicolas"],
data: {
amount: 700,
},
time: 1743168568000,
},
event239: {
entityIds: ["Anne-Sophie Nicolas"],
data: {
amount: 4000,
},
time: 1743427768000,
},
},
eventTypes: {
default: {
lineWidth: 2,
color: "entity",
},
},
};<!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, useRef } from "react";
import { createRoot } from "react-dom/client";
import Timeline from "kronograph/react/Timeline";
import data from "./data";
const options = {
events: {
heatmapThreshold: 20,
},
};
export const Demo = () => {
const timelineRef = useRef(null);
const [revealedEventIds, setRevealedEventIds] = useState([]);
const [isHeatmapMode, setIsHeatmapMode] = useState(false);
return (
<div className="story">
<Timeline
className="story__timeline"
entities={data.entities}
ref={timelineRef}
events={data.events}
eventTypes={data.eventTypes}
options={options}
reveal={revealedEventIds}
onTimelineDraw={() => {
const visibleEvents = Object.keys(timelineRef.current.getInRangeItems().events);
setIsHeatmapMode(visibleEvents.length > options.events.heatmapThreshold);
}}
onTimelineClick={({ targetType, subItem, eventIds }) => {
if ((targetType === "event" || targetType === "eventSummary") && isHeatmapMode) {
const subtracted = revealedEventIds.filter((v) => !eventIds.includes(v));
setRevealedEventIds(subtracted);
} else if (targetType === "cell" && subItem !== undefined) {
const hasUnrevealed = eventIds.some((ev) => !revealedEventIds.includes(ev));
const newEvents = [];
eventIds.forEach((ev) => {
const isRevealed = revealedEventIds.includes(ev);
if (hasUnrevealed && !isRevealed) {
newEvents.push(ev);
}
});
setRevealedEventIds(revealedEventIds.concat(newEvents));
}
}}
/>
</div>
);
};
const root = createRoot(document.getElementById("my-timeline"));
root.render(<Demo />);export default {
entities: {
"Harvey Korbin": {
color: "#76b7b2",
type: "default",
},
"Better Life Bank": {
color: "#f28e2c",
type: "default",
},
"Gustav Christin": {
color: "#4e79a7",
type: "default",
},
"AJR Investments": {
color: "#59a14f",
type: "default",
},
"Anne-Sophie Nicolas": {
color: "#e15759",
type: "default",
},
},
events: {
event001: {
entityIds: {
from: "Harvey Korbin",
to: "Better Life Bank",
},
data: {
amount: 500,
},
time: 1703861977000,
},
event002: {
entityIds: {
from: "Harvey Korbin",
to: "Better Life Bank",
},
data: {
amount: 5000,
},
time: 1728566968000,
},
event003: {
entityIds: {
from: "Harvey Korbin",
to: "Better Life Bank",
},
data: {
amount: 256,
},
time: 1728998968000,
},
event004: {
entityIds: {
from: "Harvey Korbin",
to: "Better Life Bank",
},
data: {
amount: 800,
},
time: 1729776568000,
},
event005: {
entityIds: {
from: "Harvey Korbin",
to: "Better Life Bank",
},
data: {
amount: 900,
},
time: 1730726968000,
},
event01: {
entityIds: {
from: "Harvey Korbin",
to: "Better Life Bank",
},
data: {
amount: 50000,
},
time: 1704380377000,
},
event02: {
entityIds: {
from: "Harvey Korbin",
to: "Better Life Bank",
},
data: {
amount: 50000,
},
time: 1705503577000,
},
event04: {
entityIds: {
from: "Harvey Korbin",
to: "Better Life Bank",
},
data: {
amount: 50000,
},
time: 1707317977000,
},
event05: {
entityIds: {
from: "Better Life Bank",
to: "Gustav Christin",
},
data: {
amount: 75000,
},
time: 1707990456000,
},
event06: {
entityIds: {
from: "Better Life Bank",
to: "Gustav Christin",
},
data: {
amount: 75000,
},
time: 1709027256000,
},
event07: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 10000,
},
time: 1704448603000,
},
event08: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 10000,
},
time: 1709027256000,
},
event09: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 10000,
},
time: 1707127003000,
},
event10: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 10000,
},
time: 1709632603000,
},
event11: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 10000,
},
time: 1712311003000,
},
event12: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 10000,
},
time: 1714903003000,
},
event13: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 10000,
},
time: 1717581403000,
},
event14: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 10000,
},
time: 1720173403000,
},
event15: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 10000,
},
time: 1722851803000,
},
event16: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 10000,
},
time: 1725530203000,
},
event17: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 10000,
},
time: 1728122203000,
},
event18: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 10000,
},
time: 1730800603000,
},
event19: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 10000,
},
time: 1733392603000,
},
event20: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 10000,
},
time: 1738749403000,
},
event21: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 10000,
},
time: 1743847003000,
},
event22: {
entityIds: {
from: "AJR Investments",
to: "Anne-Sophie Nicolas",
},
data: {
amount: 150000,
},
time: 1749117403000,
},
event101: {
entityIds: ["Harvey Korbin"],
data: {
amount: 500,
},
time: 1715004727000,
},
event110: {
entityIds: ["Harvey Korbin"],
data: {
amount: 850,
},
time: 1717683127000,
},
event120: {
entityIds: ["Harvey Korbin"],
data: {
amount: 300,
},
time: 1728223927000,
},
event130: {
entityIds: ["Harvey Korbin"],
data: {
amount: 2500,
},
time: 1733494327000,
},
event140: {
entityIds: ["Harvey Korbin"],
data: {
amount: 1000,
},
time: 1741270327000,
},
event150: {
entityIds: ["Harvey Korbin"],
data: {
amount: 5000,
},
time: 1720275127000,
},
event160: {
entityIds: {
from: "Harvey Korbin",
to: "Better Life Bank",
},
data: {
amount: 3000,
},
time: 1725631927000,
},
event170: {
entityIds: {
from: "Harvey Korbin",
to: "Better Life Bank",
},
data: {
amount: 450,
},
time: 1715004727000,
},
event171: {
entityIds: {
from: "Harvey Korbin",
to: "Better Life Bank",
},
data: {
amount: 3400,
},
time: 1704550327000,
},
event172: {
entityIds: {
from: "Harvey Korbin",
to: "Better Life Bank",
},
data: {
amount: 349,
},
time: 1712412727000,
},
event173: {
entityIds: {
from: "Better Life Bank",
to: "Harvey Korbin",
},
data: {
amount: 700,
},
time: 1733494327000,
},
event174: {
entityIds: {
from: "Better Life Bank",
to: "Harvey Korbin",
},
data: {
amount: 1100,
},
time: 1736172727000,
},
event175: {
entityIds: {
from: "Better Life Bank",
to: "Gustav Christin",
},
data: {
amount: 2400,
},
time: 1704150327000,
},
event176: {
entityIds: {
from: "Better Life Bank",
to: "Gustav Christin",
},
data: {
amount: 2000,
},
time: 1713683127000,
},
event177: {
entityIds: {
from: "Better Life Bank",
to: "Gustav Christin",
},
data: {
amount: 800,
},
time: 1748223927000,
},
event178: {
entityIds: {
from: "Better Life Bank",
to: "Gustav Christin",
},
data: {
amount: 800,
},
time: 1739851127000,
},
event179: {
entityIds: {
from: "Better Life Bank",
to: "Gustav Christin",
},
data: {
amount: 400,
},
time: 1720275127000,
},
event180: {
entityIds: {
from: "Better Life Bank",
to: "Gustav Christin",
},
data: {
amount: 700,
},
time: 1721743927000,
},
event181: {
entityIds: {
from: "Better Life Bank",
to: "Gustav Christin",
},
data: {
amount: 200,
},
time: 1722435127000,
},
event182: {
entityIds: ["Better Life Bank"],
data: {
amount: 450,
},
time: 1714572727000,
},
event1821: {
entityIds: ["Better Life Bank"],
data: {
amount: 900,
},
time: 1733059768000,
},
event1822: {
entityIds: ["Better Life Bank"],
data: {
amount: 2300,
},
time: 1733405368000,
},
event1823: {
entityIds: ["Better Life Bank"],
data: {
amount: 900,
},
time: 1735565368000,
},
event1824: {
entityIds: ["Better Life Bank"],
data: {
amount: 700,
},
time: 1731590968000,
},
event1825: {
entityIds: ["Better Life Bank"],
data: {
amount: 60,
},
time: 1723642168000,
},
event1826: {
entityIds: ["Better Life Bank"],
data: {
amount: 200,
},
time: 1723901368000,
},
event1827: {
entityIds: ["Better Life Bank"],
data: {
amount: 500,
},
time: 1727789368000,
},
event1828: {
entityIds: ["Better Life Bank"],
data: {
amount: 700,
},
time: 1728566968000,
},
event1829: {
entityIds: ["Better Life Bank"],
data: {
amount: 1000,
},
time: 1730381368000,
},
event183: {
entityIds: ["Better Life Bank"],
data: {
amount: 2000,
},
time: 1708175167000,
},
event184: {
entityIds: ["Better Life Bank"],
data: {
amount: 2500,
},
time: 1708175167000,
},
event185: {
entityIds: {
from: "Better Life Bank",
to: "Gustav Christin",
},
data: {
amount: 990,
},
time: 1709643967000,
},
event186: {
entityIds: {
from: "Better Life Bank",
to: "Gustav Christin",
},
data: {
amount: 4000,
},
time: 1733058367000,
},
event187: {
entityIds: {
from: "Better Life Bank",
to: "Gustav Christin",
},
data: {
amount: 2000,
},
time: 1733835967000,
},
event188: {
entityIds: {
from: "Better Life Bank",
to: "Gustav Christin",
},
data: {
amount: 2000,
},
time: 1731243967000,
},
event190: {
entityIds: ["Better Life Bank"],
data: {
amount: 500,
},
time: 1718024767000,
},
event189: {
entityIds: ["Better Life Bank"],
data: {
amount: 800,
},
time: 1719752767000,
},
event191: {
entityIds: ["Better Life Bank"],
data: {
amount: 800,
},
time: 1725023167000,
},
event192: {
entityIds: ["Better Life Bank"],
data: {
amount: 900,
},
time: 1722863167000,
},
event193: {
entityIds: ["Better Life Bank"],
data: {
amount: 600,
},
time: 1712322367000,
},
event194: {
entityIds: ["Better Life Bank"],
data: {
amount: 500,
},
time: 1710335167000,
},
event195: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 200,
},
time: 1710335167000,
},
event196: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 500,
},
time: 1718283967000,
},
event197: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 1000,
},
time: 1723554367000,
},
event198: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 200,
},
time: 1734095167000,
},
event199: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 200,
},
time: 1736773567000,
},
event200: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 2000,
},
time: 1739451967000,
},
event201: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 3000,
},
time: 1704114367000,
},
event202: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 2300,
},
time: 1706706367000,
},
event203: {
entityIds: ["AJR Investments"],
data: {
amount: 800,
},
time: 1717160767000,
},
event204: {
entityIds: ["AJR Investments"],
data: {
amount: 50,
},
time: 1721048767000,
},
event205: {
entityIds: ["AJR Investments"],
data: {
amount: 100,
},
time: 1721059567000,
},
event206: {
entityIds: ["AJR Investments"],
data: {
amount: 200,
},
time: 1721063167000,
},
event207: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 10,
},
time: 1729011967000,
},
event208: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 200,
},
time: 1729184767000,
},
event209: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 4000,
},
time: 1729443967000,
},
event210: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 200,
},
time: 1742144767000,
},
event211: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 300,
},
time: 1742835967000,
},
event212: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 500,
},
time: 1748365567000,
},
event213: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 134,
},
time: 1748970367000,
},
event214: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 600,
},
time: 1743699967000,
},
event215: {
entityIds: {
from: "Gustav Christin",
to: "AJR Investments",
},
data: {
amount: 990,
},
time: 1745168767000,
},
event216: {
entityIds: {
from: "AJR Investments",
to: "Anne-Sophie Nicolas",
},
data: {
amount: 500,
},
time: 1712077567000,
},
event217: {
entityIds: {
from: "AJR Investments",
to: "Anne-Sophie Nicolas",
},
data: {
amount: 3400,
},
time: 1719939967000,
},
event218: {
entityIds: {
from: "AJR Investments",
to: "Anne-Sophie Nicolas",
},
data: {
amount: 1100,
},
time: 1722618367000,
},
event219: {
entityIds: {
from: "AJR Investments",
to: "Anne-Sophie Nicolas",
},
data: {
amount: 2000,
},
time: 1727888767000,
},
event220: {
entityIds: {
from: "AJR Investments",
to: "Anne-Sophie Nicolas",
},
data: {
amount: 1500,
},
time: 1733159167000,
},
event221: {
entityIds: ["Anne-Sophie Nicolas"],
data: {
amount: 600,
},
time: 1715840568000,
},
event222: {
entityIds: ["Anne-Sophie Nicolas"],
data: {
amount: 1600,
},
time: 1717840568000,
},
event223: {
entityIds: ["Anne-Sophie Nicolas"],
data: {
amount: 300,
},
time: 1719840568000,
},
event224: {
entityIds: ["Anne-Sophie Nicolas"],
data: {
amount: 5000,
},
time: 1704115768000,
},
event225: {
entityIds: ["Anne-Sophie Nicolas"],
data: {
amount: 1000,
},
time: 1711978168000,
},
event226: {
entityIds: ["Anne-Sophie Nicolas"],
data: {
amount: 334,
},
time: 1719840568000,
},
event227: {
entityIds: ["Anne-Sophie Nicolas"],
data: {
amount: 600,
},
time: 1724595768000,
},
event228: {
entityIds: ["Anne-Sophie Nicolas"],
data: {
amount: 600,
},
time: 1713619768000,
},
event229: {
entityIds: ["Anne-Sophie Nicolas"],
data: {
amount: 700,
},
time: 1713792568000,
},
event230: {
entityIds: ["Anne-Sophie Nicolas"],
data: {
amount: 700,
},
time: 1714397368000,
},
event231: {
entityIds: ["Anne-Sophie Nicolas"],
data: {
amount: 300,
},
time: 1714829368000,
},
event232: {
entityIds: ["Anne-Sophie Nicolas"],
data: {
amount: 500,
},
time: 1722778168000,
},
event233: {
entityIds: ["Anne-Sophie Nicolas"],
data: {
amount: 800,
},
time: 1723469368000,
},
event234: {
entityIds: ["Anne-Sophie Nicolas"],
data: {
amount: 1300,
},
time: 1726147768000,
},
event235: {
entityIds: ["Anne-Sophie Nicolas"],
data: {
amount: 2500,
},
time: 1726406968000,
},
event236: {
entityIds: ["Anne-Sophie Nicolas"],
data: {
amount: 700,
},
time: 1742045368000,
},
event237: {
entityIds: ["Anne-Sophie Nicolas"],
data: {
amount: 900,
},
time: 1740922168000,
},
event238: {
entityIds: ["Anne-Sophie Nicolas"],
data: {
amount: 700,
},
time: 1743168568000,
},
event239: {
entityIds: ["Anne-Sophie Nicolas"],
data: {
amount: 4000,
},
time: 1743427768000,
},
},
eventTypes: {
default: {
lineWidth: 2,
color: "entity",
},
},
};<!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>