Heatmap
This commit is contained in:
rodič
14d374c9a6
revize
300277a15f
|
@ -70,9 +70,47 @@
|
||||||
it.perc = (it.score / (segmentsMax/100))
|
it.perc = (it.score / (segmentsMax/100))
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let selectedSegment = null
|
||||||
|
|
||||||
|
function makeSelected (day, segment, keys) {
|
||||||
|
const baseDate = new Date(`${day}T${segment}`)
|
||||||
|
const title = format(baseDate, "EEEE MMMM d | HH:mm - ") + format(addMinutes(baseDate, segmentMinutes), "HH:mm")
|
||||||
|
return (event) => {
|
||||||
|
selectedSegment = {
|
||||||
|
day,
|
||||||
|
segment,
|
||||||
|
data: keys,
|
||||||
|
event,
|
||||||
|
title,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function hiddenSelected() {
|
||||||
|
selectedSegment = null
|
||||||
|
}
|
||||||
|
|
||||||
|
function eventDetail (id) {
|
||||||
|
return bundle.events.find(e => e.id === id)
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="w-full mb-10">
|
<div class="w-full mb-10 relative">
|
||||||
|
{#if selectedSegment}
|
||||||
|
<div class="absolute top-[74px] w-[300px] border bg-white z-50 py-2 px-4 {selectedSegment ? 'block' : 'hidden'}" style="left: {selectedSegment.event.layerX}px;">
|
||||||
|
<div class="uppercase">{selectedSegment.title}</div>
|
||||||
|
<div class="text-xl mt-4">
|
||||||
|
{#each selectedSegment.data.events.map(e => eventDetail(e)) as item}
|
||||||
|
<div class="h-12">
|
||||||
|
{#if item.logo}
|
||||||
|
<img src={item.logo} alt={item.name} class="rounded-lg w-full aspect-square object-cover w-10 inline-block mr-1" />
|
||||||
|
{/if}
|
||||||
|
{item.name}
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
<div class="flex text-center text-gray-600 text-sm">
|
<div class="flex text-center text-gray-600 text-sm">
|
||||||
{#each days as day}
|
{#each days as day}
|
||||||
<div class="mb-1 uppercase" style="width: {1/(days.length/100)}%;">
|
<div class="mb-1 uppercase" style="width: {1/(days.length/100)}%;">
|
||||||
|
@ -80,11 +118,11 @@
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full border border-gray-600 rounded flex bg-gray-50">
|
<div class="w-full border border-gray-600 rounded flex">
|
||||||
{#each days as day}
|
{#each days as day}
|
||||||
<div class="h-12 flex flex-grow hover:bg-pbw-yellow/30" style="width: {1/(days.length/100)}%;">
|
<div class="h-12 flex flex-grow " style="width: {1/(days.length/100)}%; border-right: 1px solid gray;">
|
||||||
{#each segments as segment}
|
{#each segments as segment}
|
||||||
<div id="{day}-{segment}" data-events={timelineData[[day, segment].join(";")].events} data-score={timelineData[[day, segment].join(";")].score} class="hover:border hover:border-pbw-red flex-grow" style="width: {1/(segments.length/50)}%; background-color: rgba(255, 120, 120, {timelineData[[day, segment].join(";")].perc}%);">
|
<div id="{day}-{segment}" data-events={timelineData[[day, segment].join(";")].events} data-score={timelineData[[day, segment].join(";")].score} class="hover:border hover:border-pbw-red flex-grow" style="width: {1/(segments.length/50)}%; background-color: rgba(255, 120, 120, {timelineData[[day, segment].join(";")].perc}%);" on:mouseenter={makeSelected(day, segment, timelineData[[day, segment].join(";")])} on:mouseleave={hiddenSelected}>
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
|
@ -1,6 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
import CollectionList from '$lib/components/CollectionList.svelte';
|
import CollectionList from '$lib/components/CollectionList.svelte';
|
||||||
import TimelineOverview from '$lib/components/TimelineOverview.svelte';
|
import TimelineHeatmap from '$lib/components/TimelineHeatmap.svelte';
|
||||||
import Footer from '$lib/components/Footer.svelte';
|
import Footer from '$lib/components/Footer.svelte';
|
||||||
import { page } from '$app/stores';
|
import { page } from '$app/stores';
|
||||||
|
|
||||||
|
@ -17,7 +17,7 @@
|
||||||
|
|
||||||
<div class="w-full px-6 xl:mx-0">
|
<div class="w-full px-6 xl:mx-0">
|
||||||
<div class="max-w-7xl mx-auto pt-2 md:pt-7">
|
<div class="max-w-7xl mx-auto pt-2 md:pt-7">
|
||||||
<TimelineOverview bundle={data.bundle} />
|
<TimelineHeatmap bundle={data.bundle} />
|
||||||
|
|
||||||
<h2 class="text-2xl uppercase font-bold text-gray-500"><a href="/{entry}/events">Conferences & Hackathons</a> ({conferences.length})</h2>
|
<h2 class="text-2xl uppercase font-bold text-gray-500"><a href="/{entry}/events">Conferences & Hackathons</a> ({conferences.length})</h2>
|
||||||
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-6 my-6 text-center text-2xl">
|
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-6 my-6 text-center text-2xl">
|
||||||
|
|
Načítá se…
Odkázat v novém úkolu