site logo

Graf prostojů

Graf je použit v aplikaci Prostoje. Na začátku byl problém jak zobrazit dlouhý časový úsek na malé ploše obrazovky a přesto dodržet přehledné uspořádání událostí. Nakonec jsem se nechal inspirovat měsíčním kalendářem.

Funkční ukázka grafu je zkrácena o legendu, odkazy na tisk denního protokolu, odkazy na detailní popis prostoje, vynechána je i navigace pro volbu zobrazeného období a výrobní linky. Funkce onMouseOver() pro zachování aspoň částečné dynamičnosti grafu zůstala. Legendu nahradíme popisem slovy: zelená barva jsou prostoje provozní (technologické), oranžová značí prostoje údržby, tmavě šedá jsou prostoje ostatní. Modrá je přestavba, bílá značí odstavenou linku.

1.4.2006
2.4.2006
3.4.2006
4.4.2006
5.4.2006
6.4.2006
7.4.2006
8.4.2006
9.4.2006
10.4.2006
11.4.2006
12.4.2006
13.4.2006
14.4.2006
15.4.2006
16.4.2006
17.4.2006
18.4.2006
19.4.2006
20.4.2006
21.4.2006
22.4.2006
23.4.2006
24.4.2006
25.4.2006
26.4.2006
27.4.2006
28.4.2006
29.4.2006
30.4.2006

<style type="text/css">
.area {position: relative; width: 580px; height: 417px; border: 0;}
.back {position: absolute; top: 0; left: 0; width: 580px; height: 417px;}
.graf {position: absolute; top: 6px; left: 8px; width: 570px; height:372px;}
.desc {position: absolute; top: 393px; left:8px; width:558px; height: 16px;}

.date {width: 58px; color: black; text-align: right; padding-right: 6px;}
.cont {position: relative; top: 0; left: 0; width: 486px; height: 12px;}
.imbg {position: absolute; top: 0; left: 0; width: 486px; height: 12px;}
.ibar {position: absolute; top: 1px; left: 0; width: 160px; height: 10px;}
.date, .cont {float: left;}

#time {left:   8px; width: 172px;}
#text {left: 184px; width: 382px;}
</style>

<script type="text/javascript">
function show(tx, ty, tz) {
  document.getElementById("time").innerHTML = tx + " / " + ty + " min.";
  document.getElementById("text").innerHTML = tz;
}
function hide() {
  document.getElementById("time").innerHTML = " ";
  document.getElementById("text").innerHTML = " ";
}
</script>

<body>

<div class="area">
<img class="back" src="card.png" alt="">
<div class="graf">

<div class="date">1.4.2006</div>
<div class="cont">
<img class="imbg" src="Day.png" alt="">
</div>
...
<div class="date">13.4.2006</div>
<div class="cont">
<img class="imbg" src="Day.png" alt="">
<img class="ibar" src="Bar3.png"
  style="left: 41px; width: 102px;"
  onmouseover="show('13.4.2006 08:00','240','investiční akce ...')"
  onmouseout="hide()" alt="">
<img class="ibar" src="Bar1.png"
  style="left: 242px; width: 33px; top: 3px; height: 7px;"
  onmouseover="show('13.4.2006 18:00','95','porucha LIF ...')"
  onmouseout="hide()" alt="">
</div>
...
</div> <!-- konec .graf konteineru -->

<div class="desc">
<div id="time"> </div>
<div id="text"> </div>
</div>

</div> <!-- konec .area konteineru -->

</body>

Celou plochu pro zobrazení složitějšího grafu rozdělíme na několik samostatných oblastí. Ohraničení celé plochy je definováno ve třídě .area, která slouží jako globální kontejner pro náš graf. Globální kontejner lze vyplnit obrázkem pozadí pomocí třidy .back. Do globálního kontejneru vložíme dílčí kontejnery .graf a .desc. Ve skutečnosti těchto dílčích kontejnerů může být více (legenda, navigace). Toto rozdělení nám usnadní vyladění vzájemných pozic dílčích kontejnerů. Globální kontejner má pozici relative, dílčí kontejnery mají pozici absolute.

Pro kreslení grafu připravíme následující třídy v sekci CSS: .date pro zobrazení datumu, .cont  bude interní kontejner pro grafické zobrazení jednoho dne. Obrázek pro znázornění dne a směn používá třídu .imbg, barevné sloupce označující prostoje použíjí třídu .ibar. Deklarace #time a #text jsou pro DHTML zobrazení popisu prostoje uvnitř subkontejneru .desc. V ukázce CSS jsou uvedeny jen části důležité pro pozicování prvků, vynechány jsou deklarace písma. V případě potřeby nahlédněte do zdrojového kódu. Javascriptové funkce slouží pro obsluhu DHTML událostí.

V části HTML kódu vidíte definici globálního kontejneru area, obrázku pro pozadí globálního kontejneru back a dílčího kontejneru graf. Následuje zkrácená část kódu pro kreslení dnů. První den (1.4.2006) je bez prostoje, ve druhém ukázkovém dnu (13.4.2006) jsou dva prostoje. Každý den začíná kódem pro zobrazení datumu, následuje interní konteiner pro kreslení grafického řádku. Zde nejprve nakreslíme obrázek řádku celého dne, který je pro lepší orientaci rozdělen na směny. Pokud v daném dni existuje prostoj, přidáme ještě kód pro zobrazení barevného sloupce prostoje.

Podle typu prostoje je vybrána odpovídající barva obrázku prostoje. Podle času začátku prostoje vypočteme hodnotu left a podle délky trvání prostoje vypočteme hodnotu width pro inline styl. Pokud má daný prostoj jen omezený vliv na chod celé linky a výroba na lince pokračuje např. na 60%, vypočteme ještě hodnoty top a height. Nakonec doplníme parametry (popis prostoje) do funkce onmouseover(...)

Databáze je organizovaná tak, že prostoj musí být ukončen každou směnu. Na další směně, pokud prostoj pokračuje, se musí prostoj zapsat znovu. Vzhledem ke střídání směn nové datum začíná v 6:00 a končí 5:59 následujícího dne. Protože zobrazení jednotlivých směn je odděleno 2 pixelovou mezerou, grafické měřítko není kontinuální a hodnoty left barevných sloupců se musí korigovat podle směny ve které prostoj vznikl.

updated 27.05.2006