En dags fördelning
Tids dagredigerare: en stapel med ett handtag på varje gräns och raderna bredvid.
I bruk: Tid, dagen och veckan (report/DayView.astro, report/WeekView.astro): Stapel, Storlek och Procent.
Dagen
Dra en gräns, eller flytta den med piltangenterna.
import { daySplit } from "@whitespace/malm-ui/components/day-split";
import { initDaySplits } from "@whitespace/malm-ui/js/day-split";
daySplit({ label: "Måndag 12 oktober", height: 16, lines: [
{ value: "2853", name: "andel[2853]", label: "#2853", percent: 50, html: "…" },
…
] });
initDaySplits(); // eller mountDaySplit(el) → { draw, split }
<div class="ws-day-split" data-malm="day-split" role="group" aria-label="…" data-min="2">
<div class="ws-day-split__bar">
<div class="ws-day-split__part" data-color="1" style="inset-block-start: 0%; block-size: 50%"></div>
<div class="ws-day-split__handle" role="separator" tabindex="0" aria-orientation="horizontal" …></div>
</div>
<div class="ws-day-split__rows">
<div class="ws-day-split__row …" data-value="2853" data-name="andel[2853]" data-label="#2853" style="…">
… <input type="hidden" name="andel[2853]" value="50">
</div>
</div>
</div>
<html class="ws-resizing"> <!-- medan något dras -->Storlek
Varje rad är liten, mellan, stor eller Flex. Flex tar det som blir över, så dagen blir alltid hel. Välj en storlek i nyckeln och klicka på delarna som har den.
Tisdag 13 oktober
INTIntern tid
#3520Kristianstad, DNS
#2853Region Skåne, Ny webbplats
#3471VBA, Workshop
#3502Mölndal, Support
#3517Lund, Inloggning
#3533Ystad, Formulär
daySplit({ label: "Tisdag 13 oktober", lines: [
{ value: "INT", label: "INT", percent: 15, color: "flex-1" }, // Flex: delar det som blir över
{ value: "3520", label: "#3520", percent: 15, color: "flex-2" }, // Flex
{ value: "2853", label: "#2853", percent: 40, color: "size-3" }, // stor: 40
{ value: "3471", label: "#3471", percent: 15, color: "size-2" }, // mellan: 15
{ value: "3502", label: "#3502", percent: 5, color: "size-1" }, // liten: 5
…
] });
<!-- Nyckeln: en knapp per storlek, nedtryckt när den är vald. -->
<button class="btn btn-ghost" type="button" aria-pressed="false" aria-label="Stor">
<span class="ws-swatch" data-color="size-3"></span>
</button>
--color-chart-size-1 … 3 liten, mellan, stor
--color-chart-flex-1 … 6 Flex, mörkast för den största andelenVeckan
En stapel per dag, så hög som dagens timmar.
Tabell
| Flex | Stor | Mellan | Liten | Flex | Flex | Mellan | Liten | Liten | Stor | Mellan | Flex | Flex | Flex | Flex | Liten | Stor | Mellan | Mellan | Liten | Liten | Dagen | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| mån 12 | 3,2 h | 3,2 h | 1,2 h | 0,4 h | – | – | – | – | – | – | – | – | – | – | – | – | – | – | – | – | – | 8 h |
| tis 13 | – | – | – | – | 2,9 h | 2,8 h | 1,1 h | 0,4 h | 0,4 h | – | – | – | – | – | – | – | – | – | – | – | – | 7,5 h |
| ons 14 | – | – | – | – | – | – | – | – | – | 1,8 h | 0,7 h | 2 h | – | – | – | – | – | – | – | – | – | 4,5 h |
| tor 15 | – | – | – | – | – | – | – | – | – | – | – | – | 2,6 h | 2,6 h | 2,5 h | 0,4 h | – | – | – | – | – | 8 h |
| fre 16 | – | – | – | – | – | – | – | – | – | – | – | – | – | – | – | – | 3 h | 1,1 h | 1,1 h | 0,4 h | 0,4 h | 6 h |
| lör 17 | – | – | – | – | – | – | – | – | – | – | – | – | – | – | – | – | – | – | – | – | – | – |
| sön 18 | – | – | – | – | – | – | – | – | – | – | – | – | – | – | – | – | – | – | – | – | – | – |
import { daySplitWeek } from "@whitespace/malm-ui/components/day-split-week";
daySplitWeek({
label: "Veckans fördelning",
days: ["mån 12", "tis 13", …],
hours: [8, 7.5, …], // dagens timmar
parts: [[{ value: "2853", label: "#2853", percent: 40 }, …], …], // en lista per dag, överst först
})