Kevin Adametz
c62234e1ca
# Conflicts: # .gitignore # backend/vite.config.js # frontend/package-lock.json
284 lines
8 KiB
TypeScript
284 lines
8 KiB
TypeScript
import {
|
|
ConnectedDotsVisualization,
|
|
type DotConfig,
|
|
} from "./ConnectedDotsVisualization";
|
|
|
|
// Sample dot configurations
|
|
const sampleDots: DotConfig[] = [
|
|
{
|
|
id: 1,
|
|
value: -1.8,
|
|
x: -2,
|
|
imageUrl:
|
|
"https://cdn.midjourney.com/07911cec-cc5a-478a-b580-ac1bb80bad94/0_3.png",
|
|
title: "Beginn des neuen Abenteuers",
|
|
description: "01.10.2024",
|
|
link: "/page1",
|
|
},
|
|
{
|
|
id: 2,
|
|
value: 1.2,
|
|
x: 0,
|
|
imageUrl:
|
|
"https://cdn.midjourney.com/57370e4b-e0c3-4271-bf8f-69adbdb416cc/0_2.png",
|
|
title: "Omas Annis Geburtstag",
|
|
description: "02.10.2024",
|
|
link: "/page2",
|
|
},
|
|
{
|
|
id: 3,
|
|
value: -0.6,
|
|
x: 2,
|
|
imageUrl:
|
|
"https://cdn.midjourney.com/876aa1b2-48c5-4d19-9c2b-297271d17a51/0_3.png",
|
|
title: "Konzertbesuch mit Freunden",
|
|
description: "03.10.2024",
|
|
link: "/page3",
|
|
},
|
|
{
|
|
id: 4,
|
|
value:0,
|
|
x: 4,
|
|
imageUrl:
|
|
"https://cdn.midjourney.com/8b61487f-bdc6-4550-99b8-52802fa55fe8/0_1.png",
|
|
title: "Wanderreiten in den Bergen",
|
|
description: "04.10.2024",
|
|
link: "/page4",
|
|
},
|
|
{
|
|
id: 5,
|
|
value: 3,
|
|
x: 6,
|
|
imageUrl:
|
|
"https://cdn.midjourney.com/8eafbeb0-35c8-4139-97b4-26b0298c64f6/0_2.png",
|
|
title: "Ruhiger Tag zu Hause",
|
|
description: "05.10.2024",
|
|
link: "/page5",
|
|
},
|
|
{
|
|
id: 6,
|
|
value: -3,
|
|
x: 8,
|
|
imageUrl:
|
|
"https://cdn.midjourney.com/5419f43d-2d7e-474c-b672-82f671f410d9/0_3.png",
|
|
title: "Oma Erna verstorben",
|
|
description: "06.10.2024",
|
|
link: "/page6",
|
|
},
|
|
{
|
|
id: 7,
|
|
value: 1.5,
|
|
x: 10,
|
|
imageUrl:
|
|
"https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_0.png",
|
|
title: "Erholungsausflug zum See",
|
|
description: "07.10.2024",
|
|
link: "/page7",
|
|
},
|
|
{
|
|
id: 8,
|
|
value: 0,
|
|
x: 12,
|
|
imageUrl:
|
|
"https://cdn.midjourney.com/a30dd9b5-beae-4d2d-8ba8-e58b474b69f1/0_1.png",
|
|
title: "Kleine Wochenendsfeier",
|
|
description: "08.10.2024",
|
|
link: "/page8",
|
|
},
|
|
{
|
|
id: 9,
|
|
value: 3.1,
|
|
x: 14,
|
|
imageUrl:
|
|
"https://cdn.midjourney.com/2683889b-38af-49bd-954e-defe3c4ca659/0_0.png",
|
|
title: "Hochzeit von Cousine Tatjana",
|
|
description: "09.10.2024",
|
|
link: "/page9",
|
|
},
|
|
{
|
|
id: 10,
|
|
value: -1.8,
|
|
x: 16,
|
|
imageUrl:
|
|
"https://cdn.midjourney.com/92b34bda-d03c-4ec6-9e9f-b23f27f454d6/0_3.png",
|
|
title: "Erster Tag im neuen Job",
|
|
description: "10.10.2024",
|
|
link: "/page10",
|
|
},
|
|
{
|
|
id: 11,
|
|
value: 1.2,
|
|
x: 18,
|
|
imageUrl:
|
|
"https://cdn.midjourney.com/83e928f3-27c2-4a74-8553-ce767be2d1d9/0_3.png",
|
|
title: "Klassentreffen nach vielen Jahren",
|
|
description: "11.10.2024",
|
|
link: "/page11",
|
|
},
|
|
{
|
|
id: 12,
|
|
value: -0.6,
|
|
x: 20,
|
|
imageUrl:
|
|
"https://cdn.midjourney.com/4588970f-748f-4c1e-89aa-f3a34c4ef73d/0_1.png",
|
|
title: "Familienabendessen",
|
|
description: "12.10.2024",
|
|
link: "/page12",
|
|
},
|
|
{
|
|
id: 13,
|
|
value: 2.7,
|
|
x: 22,
|
|
imageUrl:
|
|
"https://cdn.midjourney.com/2ca30890-cf87-4a0c-9a13-0fc4ec6a6b1c/0_2.png",
|
|
title: "Kinobesuch mit der ganzen Familie",
|
|
description: "13.10.2024",
|
|
link: "/page13",
|
|
},
|
|
{
|
|
id: 14,
|
|
value: 0.8,
|
|
x: 24,
|
|
imageUrl:
|
|
"https://cdn.midjourney.com/9ebf9d61-8ede-46de-9336-10211aebaef7/0_0.png",
|
|
title: "Entspannung",
|
|
description: "14.10.2024",
|
|
link: "/page14",
|
|
},
|
|
{
|
|
id: 15,
|
|
value: -2.9,
|
|
x: 26,
|
|
imageUrl: "https://picsum.photos/200/150?random=6",
|
|
title: "Geruhsamer Sonntag",
|
|
description: "15.10.2024",
|
|
link: "/page15",
|
|
},
|
|
{
|
|
id: 16,
|
|
value: 1.5,
|
|
x: 28,
|
|
imageUrl:
|
|
"https://cdn.midjourney.com/86652ad5-d67c-4ddb-bb50-a651387a4e5b/0_3.png",
|
|
title: "Kindergeburtstag",
|
|
description: "16.10.2024",
|
|
link: "/page16",
|
|
},
|
|
{
|
|
id: 17,
|
|
value: 0,
|
|
x: 30,
|
|
imageUrl:
|
|
"https://cdn.midjourney.com/ac154c04-7cc9-4926-ae8d-4f21c18bcf8d/0_2.png",
|
|
title: "Spaziergang mit der Familie",
|
|
description: "17.10.2024",
|
|
link: "/page17",
|
|
},
|
|
{
|
|
id: 18,
|
|
value: 2.1,
|
|
x: 32,
|
|
imageUrl:
|
|
"https://cdn.midjourney.com/0782c375-5ea9-4de5-b174-0046a65ce8ce/0_3.png",
|
|
title: "Familienfeier bei den Großeltern",
|
|
description: "18.10.2024",
|
|
link: "/page18",
|
|
},
|
|
];
|
|
|
|
// Wait for DOM to be fully loaded
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
// Initialize the visualization with the sample dots
|
|
const visualization = new ConnectedDotsVisualization(
|
|
"scroll-container",
|
|
sampleDots,
|
|
{
|
|
// Optional custom configuration
|
|
dotRadius: 8,
|
|
// tooltipWidth: 100,
|
|
// tooltipHeight: 100,
|
|
}
|
|
);
|
|
|
|
// Handle window resize
|
|
window.addEventListener("resize", () => {
|
|
visualization.resize();
|
|
});
|
|
|
|
// Example of updating dots dynamically (if needed)
|
|
/*
|
|
const updateButton = document.createElement('button');
|
|
updateButton.textContent = 'Update Data';
|
|
updateButton.classList.add('button');
|
|
updateButton.style.marginTop = '10px';
|
|
document.body.appendChild(updateButton);
|
|
|
|
updateButton.addEventListener('click', () => {
|
|
// Generate some new random data with image tooltips
|
|
const newDots: DotConfig[] = Array.from({ length: 9 }, (_, i) => ({
|
|
id: i + 1,
|
|
value: Math.random() * 6 - 3, // Random value between -3 and 3
|
|
x: i - 3,
|
|
imageUrl: `https://picsum.photos/200/150?random=${i+10}`,
|
|
title: `Point ${i+1}`,
|
|
description: `This is data point ${i+1} with value ${(Math.random() * 6 - 3).toFixed(1)}`
|
|
}));
|
|
visualization.updateDots(newDots);
|
|
});
|
|
*/
|
|
|
|
const scrollContainer = document.querySelector(".scroll-container");
|
|
|
|
let isDown = false;
|
|
let startX;
|
|
let scrollLeft;
|
|
|
|
// Mouse events
|
|
scrollContainer.addEventListener("mousedown", (e) => {
|
|
isDown = true;
|
|
scrollContainer.classList.add("active");
|
|
startX = e.pageX - scrollContainer.offsetLeft;
|
|
scrollLeft = scrollContainer.scrollLeft;
|
|
});
|
|
|
|
scrollContainer.addEventListener("mouseleave", () => {
|
|
isDown = false;
|
|
scrollContainer.classList.remove("active");
|
|
});
|
|
|
|
scrollContainer.addEventListener("mouseup", () => {
|
|
isDown = false;
|
|
scrollContainer.classList.remove("active");
|
|
});
|
|
|
|
scrollContainer.addEventListener("mousemove", (e) => {
|
|
if (!isDown) return;
|
|
e.preventDefault();
|
|
const x = e.pageX - scrollContainer.offsetLeft;
|
|
const walk = (x - startX) * 3; // Multiply by a number to speed up scrolling
|
|
scrollContainer.scrollLeft = scrollLeft - walk;
|
|
});
|
|
|
|
// Touch events
|
|
scrollContainer.addEventListener("touchstart", (e) => {
|
|
isDown = true;
|
|
scrollContainer.classList.add("active");
|
|
// Use the first touch point for calculations
|
|
startX = e.touches[0].pageX - scrollContainer.offsetLeft;
|
|
scrollLeft = scrollContainer.scrollLeft;
|
|
});
|
|
|
|
scrollContainer.addEventListener("touchend", () => {
|
|
isDown = false;
|
|
scrollContainer.classList.remove("active");
|
|
});
|
|
|
|
scrollContainer.addEventListener("touchmove", (e) => {
|
|
if (!isDown) return;
|
|
e.preventDefault();
|
|
// Use the first touch point for calculations
|
|
const x = e.touches[0].pageX - scrollContainer.offsetLeft;
|
|
const walk = (x - startX) * 3;
|
|
scrollContainer.scrollLeft = scrollLeft - walk;
|
|
});
|
|
});
|