Organize your entities into groups.
Entity groups can themselves be grouped, forming a hierarchy of grouping levels.
See Also
import { createTimeline } from "kronograph";
import data from "./data";
const timeline = createTimeline("my-timeline");
timeline.options({ entities: { standardRowHeight: 18 } });
timeline.set({
...data,
entityTypes: {
ip: {
groupBy: ["country", "continent"],
typeLabel: "IP Addresses",
},
},
});
timeline.fit(); export default {
entities: {
"119.184.100.174": {
type: "ip",
data: {
continent: "South America",
country: "Brazil",
},
color: "#2676c7",
},
"80.255.245.230": {
type: "ip",
data: {
continent: "Europe",
country: "Germany",
},
color: "#f7d06e",
},
"78.248.27.2": {
type: "ip",
data: {
continent: "Europe",
country: "Spain",
},
color: "#f7d06e",
},
"27.195.134.201": {
type: "ip",
data: {
continent: "Asia",
country: "South Korea",
},
color: "#f86868",
},
"101.226.51.230": {
type: "ip",
data: {
continent: "Asia",
country: "South Korea",
},
color: "#f86868",
},
"123.184.218.198": {
type: "ip",
data: {
continent: "Asia",
country: "South Korea",
},
color: "#f86868",
},
"191.7.178.2": {
type: "ip",
data: {
continent: "South America",
country: "Brazil",
},
color: "#2676c7",
},
"118.37.6.215": {
type: "ip",
data: {
continent: "South America",
country: "Argentina",
},
color: "#2676c7",
},
"1.180.208.152": {
type: "ip",
data: {
continent: "Asia",
country: "Japan",
},
color: "#f86868",
},
"81.161.59.17": {
type: "ip",
data: {
continent: "Europe",
country: "Germany",
},
color: "#f7d06e",
},
"163.172.66.164": {
type: "ip",
data: {
continent: "Europe",
country: "United Kingdom",
},
color: "#f7d06e",
},
"65.48.139.133": {
type: "ip",
data: {
continent: "North America",
country: "United States",
},
color: "#5dbbb4",
},
"66.249.64.128": {
type: "ip",
data: {
continent: "North America",
country: "United States",
},
color: "#5dbbb4",
},
"117.144.246.77": {
type: "ip",
data: {
continent: "Asia",
country: "Thailand",
},
color: "#f86868",
},
"1.180.208.148": {
type: "ip",
data: {
continent: "Asia",
country: "Thailand",
},
color: "#f86868",
},
"213.184.105.182": {
type: "ip",
data: {
continent: "Europe",
country: "United Kingdom",
},
color: "#f7d06e",
},
"138.128.6.115": {
type: "ip",
data: {
continent: "North America",
country: "United States",
},
color: "#5dbbb4",
},
"163.172.66.171": {
type: "ip",
data: {
continent: "Europe",
country: "United Kingdom",
},
color: "#f7d06e",
},
"101.226.125.119": {
type: "ip",
data: {
continent: "Asia",
country: "Thailand",
},
color: "#f86868",
},
"163.172.66.15": {
type: "ip",
data: {
continent: "Europe",
country: "Spain",
},
color: "#f7d06e",
},
"101.226.33.217": {
type: "ip",
data: {
continent: "South America",
country: "Peru",
},
color: "#2676c7",
},
"131.161.224.94": {
type: "ip",
data: {
continent: "South America",
country: "Peru",
},
color: "#2676c7",
},
"179.181.219.24": {
type: "ip",
data: {
continent: "South America",
country: "Argentina",
},
color: "#2676c7",
},
"195.55.121.5": {
type: "ip",
data: {
continent: "Europe",
country: "Spain",
},
color: "#f7d06e",
},
"163.172.66.40": {
type: "ip",
data: {
continent: "Europe",
country: "Germany",
},
color: "#f7d06e",
},
"220.181.108.103": {
type: "ip",
data: {
continent: "Asia",
country: "Japan",
},
color: "#f86868",
},
"179.181.219.44": {
type: "ip",
data: {
continent: "South America",
country: "Peru",
},
color: "#2676c7",
},
"220.181.108.109": {
type: "ip",
data: {
continent: "Asia",
country: "Japan",
},
color: "#f86868",
},
"222.182.107.110": {
type: "ip",
data: {
continent: "North America",
country: "Mexico",
},
color: "#5dbbb4",
},
"222.184.107.114": {
type: "ip",
data: {
continent: "North America",
country: "Mexico",
},
color: "#5dbbb4",
},
"222.184.1033.144": {
type: "ip",
data: {
continent: "North America",
country: "Mexico",
},
color: "#5dbbb4",
},
"157.55.39.189": {
type: "ip",
data: {
continent: "South America",
country: "Argentina",
},
color: "#2676c7",
},
"157.55.39.1838": {
type: "ip",
data: {
continent: "North America",
country: "Canada",
},
color: "#5dbbb4",
},
"157.55.39.1828": {
type: "ip",
data: {
continent: "North America",
country: "Canada",
},
color: "#5dbbb4",
},
"157.55.39.122": {
type: "ip",
data: {
continent: "South America",
country: "Brazil",
},
color: "#2676c7",
},
"157.55.39.788": {
type: "ip",
data: {
continent: "North America",
country: "Canada",
},
color: "#5dbbb4",
},
},
events: {
"event-0": { entityIds: ["119.184.100.174", "123.184.218.198"], time: 1755134388000 },
"event-1": { entityIds: ["80.255.245.230", "27.195.134.201"], time: 1766131464000 },
"event-2": { entityIds: ["78.248.27.2", "163.172.66.40"], time: 1743866152000 },
"event-3": { entityIds: ["27.195.134.201", "27.195.134.201"], time: 1736076865000 },
"event-4": { entityIds: ["101.226.51.230", "157.55.39.189"], time: 1749701822000 },
"event-5": { entityIds: ["123.184.218.198", "101.226.33.217"], time: 1752416704000 },
"event-6": { entityIds: ["191.7.178.2", "191.7.178.2"], time: 1739237039000 },
"event-7": { entityIds: ["118.37.6.215", "81.161.59.17"], time: 1741785040000 },
"event-8": { entityIds: ["1.180.208.152", "101.226.33.217"], time: 1742455960000 },
"event-9": { entityIds: ["81.161.59.17", "220.181.108.103"], time: 1747236098000 },
"event-10": { entityIds: ["163.172.66.164", "65.48.139.133"], time: 1767047562000 },
"event-11": { entityIds: ["65.48.139.133", "220.181.108.109"], time: 1763356848000 },
"event-12": { entityIds: ["66.249.64.128", "131.161.224.94"], time: 1743400169000 },
"event-13": { entityIds: ["117.144.246.77", "119.184.100.174"], time: 1751642538000 },
"event-14": { entityIds: ["1.180.208.148", "191.7.178.2"], time: 1747055998000 },
"event-15": { entityIds: ["213.184.105.182", "157.55.39.1838"], time: 1753787169000 },
"event-16": { entityIds: ["138.128.6.115", "101.226.51.230"], time: 1738092371000 },
"event-17": { entityIds: ["163.172.66.171", "163.172.66.40"], time: 1757346412000 },
"event-18": { entityIds: ["101.226.125.119", "179.181.219.44"], time: 1757199337000 },
"event-19": { entityIds: ["163.172.66.15", "81.161.59.17"], time: 1736236722000 },
"event-20": { entityIds: ["101.226.33.217", "220.181.108.103"], time: 1739154299000 },
"event-21": { entityIds: ["131.161.224.94", "101.226.125.119"], time: 1760062058000 },
"event-22": { entityIds: ["179.181.219.24", "65.48.139.133"], time: 1741689612000 },
"event-23": { entityIds: ["195.55.121.5", "157.55.39.122"], time: 1748424056000 },
"event-24": { entityIds: ["163.172.66.40", "157.55.39.1828"], time: 1737500113000 },
"event-25": { entityIds: ["220.181.108.103", "65.48.139.133"], time: 1748876462000 },
"event-26": { entityIds: ["179.181.219.44", "123.184.218.198"], time: 1739520699000 },
"event-27": { entityIds: ["220.181.108.109", "157.55.39.788"], time: 1761013787000 },
"event-28": { entityIds: ["222.182.107.110", "101.226.51.230"], time: 1763160023000 },
"event-29": {
entityIds: ["222.184.107.114", "222.182.107.110"],
time: 1737472004000,
},
"event-30": { entityIds: ["222.184.1033.144", "65.48.139.133"], time: 1735952732000 },
"event-31": { entityIds: ["157.55.39.189", "157.55.39.1838"], time: 1746343121000 },
"event-32": { entityIds: ["157.55.39.1838", "65.48.139.133"], time: 1738311440000 },
"event-33": { entityIds: ["157.55.39.1828", "157.55.39.1828"], time: 1766142686000 },
"event-34": { entityIds: ["157.55.39.122", "157.55.39.1838"], time: 1738902458000 },
"event-35": { entityIds: ["157.55.39.788", "195.55.121.5"], time: 1740426786000 },
},
}; <!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 from "react";
import { createRoot } from "react-dom/client";
import Timeline from "kronograph/react/Timeline";
import data from "./data";
export const Demo = () => (
<Timeline
options={{ entities: { standardRowHeight: 18 } }}
events={data.events}
entities={data.entities}
entityTypes={{
ip: {
groupBy: ["country", "continent"],
typeLabel: "IP Addresses",
},
}}
/>
);
const root = createRoot(document.getElementById("my-timeline"));
root.render(<Demo />); export default {
entities: {
"119.184.100.174": {
type: "ip",
data: {
continent: "South America",
country: "Brazil",
},
color: "#2676c7",
},
"80.255.245.230": {
type: "ip",
data: {
continent: "Europe",
country: "Germany",
},
color: "#f7d06e",
},
"78.248.27.2": {
type: "ip",
data: {
continent: "Europe",
country: "Spain",
},
color: "#f7d06e",
},
"27.195.134.201": {
type: "ip",
data: {
continent: "Asia",
country: "South Korea",
},
color: "#f86868",
},
"101.226.51.230": {
type: "ip",
data: {
continent: "Asia",
country: "South Korea",
},
color: "#f86868",
},
"123.184.218.198": {
type: "ip",
data: {
continent: "Asia",
country: "South Korea",
},
color: "#f86868",
},
"191.7.178.2": {
type: "ip",
data: {
continent: "South America",
country: "Brazil",
},
color: "#2676c7",
},
"118.37.6.215": {
type: "ip",
data: {
continent: "South America",
country: "Argentina",
},
color: "#2676c7",
},
"1.180.208.152": {
type: "ip",
data: {
continent: "Asia",
country: "Japan",
},
color: "#f86868",
},
"81.161.59.17": {
type: "ip",
data: {
continent: "Europe",
country: "Germany",
},
color: "#f7d06e",
},
"163.172.66.164": {
type: "ip",
data: {
continent: "Europe",
country: "United Kingdom",
},
color: "#f7d06e",
},
"65.48.139.133": {
type: "ip",
data: {
continent: "North America",
country: "United States",
},
color: "#5dbbb4",
},
"66.249.64.128": {
type: "ip",
data: {
continent: "North America",
country: "United States",
},
color: "#5dbbb4",
},
"117.144.246.77": {
type: "ip",
data: {
continent: "Asia",
country: "Thailand",
},
color: "#f86868",
},
"1.180.208.148": {
type: "ip",
data: {
continent: "Asia",
country: "Thailand",
},
color: "#f86868",
},
"213.184.105.182": {
type: "ip",
data: {
continent: "Europe",
country: "United Kingdom",
},
color: "#f7d06e",
},
"138.128.6.115": {
type: "ip",
data: {
continent: "North America",
country: "United States",
},
color: "#5dbbb4",
},
"163.172.66.171": {
type: "ip",
data: {
continent: "Europe",
country: "United Kingdom",
},
color: "#f7d06e",
},
"101.226.125.119": {
type: "ip",
data: {
continent: "Asia",
country: "Thailand",
},
color: "#f86868",
},
"163.172.66.15": {
type: "ip",
data: {
continent: "Europe",
country: "Spain",
},
color: "#f7d06e",
},
"101.226.33.217": {
type: "ip",
data: {
continent: "South America",
country: "Peru",
},
color: "#2676c7",
},
"131.161.224.94": {
type: "ip",
data: {
continent: "South America",
country: "Peru",
},
color: "#2676c7",
},
"179.181.219.24": {
type: "ip",
data: {
continent: "South America",
country: "Argentina",
},
color: "#2676c7",
},
"195.55.121.5": {
type: "ip",
data: {
continent: "Europe",
country: "Spain",
},
color: "#f7d06e",
},
"163.172.66.40": {
type: "ip",
data: {
continent: "Europe",
country: "Germany",
},
color: "#f7d06e",
},
"220.181.108.103": {
type: "ip",
data: {
continent: "Asia",
country: "Japan",
},
color: "#f86868",
},
"179.181.219.44": {
type: "ip",
data: {
continent: "South America",
country: "Peru",
},
color: "#2676c7",
},
"220.181.108.109": {
type: "ip",
data: {
continent: "Asia",
country: "Japan",
},
color: "#f86868",
},
"222.182.107.110": {
type: "ip",
data: {
continent: "North America",
country: "Mexico",
},
color: "#5dbbb4",
},
"222.184.107.114": {
type: "ip",
data: {
continent: "North America",
country: "Mexico",
},
color: "#5dbbb4",
},
"222.184.1033.144": {
type: "ip",
data: {
continent: "North America",
country: "Mexico",
},
color: "#5dbbb4",
},
"157.55.39.189": {
type: "ip",
data: {
continent: "South America",
country: "Argentina",
},
color: "#2676c7",
},
"157.55.39.1838": {
type: "ip",
data: {
continent: "North America",
country: "Canada",
},
color: "#5dbbb4",
},
"157.55.39.1828": {
type: "ip",
data: {
continent: "North America",
country: "Canada",
},
color: "#5dbbb4",
},
"157.55.39.122": {
type: "ip",
data: {
continent: "South America",
country: "Brazil",
},
color: "#2676c7",
},
"157.55.39.788": {
type: "ip",
data: {
continent: "North America",
country: "Canada",
},
color: "#5dbbb4",
},
},
events: {
"event-0": { entityIds: ["119.184.100.174", "123.184.218.198"], time: 1755134388000 },
"event-1": { entityIds: ["80.255.245.230", "27.195.134.201"], time: 1766131464000 },
"event-2": { entityIds: ["78.248.27.2", "163.172.66.40"], time: 1743866152000 },
"event-3": { entityIds: ["27.195.134.201", "27.195.134.201"], time: 1736076865000 },
"event-4": { entityIds: ["101.226.51.230", "157.55.39.189"], time: 1749701822000 },
"event-5": { entityIds: ["123.184.218.198", "101.226.33.217"], time: 1752416704000 },
"event-6": { entityIds: ["191.7.178.2", "191.7.178.2"], time: 1739237039000 },
"event-7": { entityIds: ["118.37.6.215", "81.161.59.17"], time: 1741785040000 },
"event-8": { entityIds: ["1.180.208.152", "101.226.33.217"], time: 1742455960000 },
"event-9": { entityIds: ["81.161.59.17", "220.181.108.103"], time: 1747236098000 },
"event-10": { entityIds: ["163.172.66.164", "65.48.139.133"], time: 1767047562000 },
"event-11": { entityIds: ["65.48.139.133", "220.181.108.109"], time: 1763356848000 },
"event-12": { entityIds: ["66.249.64.128", "131.161.224.94"], time: 1743400169000 },
"event-13": { entityIds: ["117.144.246.77", "119.184.100.174"], time: 1751642538000 },
"event-14": { entityIds: ["1.180.208.148", "191.7.178.2"], time: 1747055998000 },
"event-15": { entityIds: ["213.184.105.182", "157.55.39.1838"], time: 1753787169000 },
"event-16": { entityIds: ["138.128.6.115", "101.226.51.230"], time: 1738092371000 },
"event-17": { entityIds: ["163.172.66.171", "163.172.66.40"], time: 1757346412000 },
"event-18": { entityIds: ["101.226.125.119", "179.181.219.44"], time: 1757199337000 },
"event-19": { entityIds: ["163.172.66.15", "81.161.59.17"], time: 1736236722000 },
"event-20": { entityIds: ["101.226.33.217", "220.181.108.103"], time: 1739154299000 },
"event-21": { entityIds: ["131.161.224.94", "101.226.125.119"], time: 1760062058000 },
"event-22": { entityIds: ["179.181.219.24", "65.48.139.133"], time: 1741689612000 },
"event-23": { entityIds: ["195.55.121.5", "157.55.39.122"], time: 1748424056000 },
"event-24": { entityIds: ["163.172.66.40", "157.55.39.1828"], time: 1737500113000 },
"event-25": { entityIds: ["220.181.108.103", "65.48.139.133"], time: 1748876462000 },
"event-26": { entityIds: ["179.181.219.44", "123.184.218.198"], time: 1739520699000 },
"event-27": { entityIds: ["220.181.108.109", "157.55.39.788"], time: 1761013787000 },
"event-28": { entityIds: ["222.182.107.110", "101.226.51.230"], time: 1763160023000 },
"event-29": {
entityIds: ["222.184.107.114", "222.182.107.110"],
time: 1737472004000,
},
"event-30": { entityIds: ["222.184.1033.144", "65.48.139.133"], time: 1735952732000 },
"event-31": { entityIds: ["157.55.39.189", "157.55.39.1838"], time: 1746343121000 },
"event-32": { entityIds: ["157.55.39.1838", "65.48.139.133"], time: 1738311440000 },
"event-33": { entityIds: ["157.55.39.1828", "157.55.39.1828"], time: 1766142686000 },
"event-34": { entityIds: ["157.55.39.122", "157.55.39.1838"], time: 1738902458000 },
"event-35": { entityIds: ["157.55.39.788", "195.55.121.5"], time: 1740426786000 },
},
}; <!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>