Představujeme nové grafy na Deep in IT / CDR
Ještě než u nás vyjde nějaká další recenze, rozhodli jsme se, že vám v předstihu ukážeme, jak budou vypadat nové grafy, které budeme používat v recenzích na Deep in IT / CDR.cz…
Grafy pro nás zpracoval jeden čtenář, který se tak nějak z hecu rozhodl, že udělá něco hezčího, než jsme doposud používali, mimo jiné také proto, aby se trošku odreagoval od běžného pracovního programování. První verzi nám poslal už loni 11. 11., trošku jsme pokomunikovali a pak to šlo na nějaký čas k ledu, protože se začala chystat nová verze našich dvou portálů a nemělo tak smysl řešit nasazení grafů do staré verze.
Poté, co byl nový design spuštěn, jsem začal s autorem nových grafů znovu komunikovat a poprosil ho, jestli by nezapracoval tohle, tamto, takto a onak a vůbec. Výsledkem je něco, co se mně osobně moc líbí, protože to přesně splňuje požadavky na nenáročnost, jednoduchost vzhledu a v podstatě i přehlednost a není to zbytečně interaktivní. Interaktivita je tam jen jedna a bude užívána snad výhradně v grafech hlučnosti, případně tam, kde to bude mít ještě smysl, tedy tam, kde bude malé množství výsledků velmi výrazně vyčnívat z řady.
Autor se sám snažil vycházet z dosavadního vstupního datového formátu starých grafů, abychom mohli i ty již doposud vyšlé snadno nahradit novými, což sice nebylo nutné, ale věřím, že se to může hodit, takže za všechny, co s tím následně budou dělat, děkuji (to píšu spíše akademicky, protože jestli bude někdo předělávat staré grafy na nové, budu to s největší pravděpodobností jen já a i já si nejspíš ještě rozmyslím, kam až daleko budu ochoten zajít). Ne všechno půjde předělat snadno, protože např. v grafech, kde se pracuje s časovými údaji, jsem si zase kdysi usnadnil práci já a zadával jsem do grafů zvlášť minuty a zvlášť sekundy, zatímco v nových grafech už se zadávají jen sekundy (ne vždy je výhodné držet se zpětné kompatibility, někdy je lepší za něčím udělat tlustou čáru a začít jinak, lépe a efektivněji).
Především jsou ale nové grafy ze strany redaktora relativně snadno konfigurovatelné. Nechci říci přímo přizpůsobitelné, protože přizpůsobitelné v podstatě nejsou. Vzhled je víceméně dán, lze konfigurovat některé věci jako způsob zobrazení, jednotky, vybírat z předdefinované sady barev pruhů a podobně.
Konkrétní příklady
Abych tedy konečně přešel ke vzhledu, ukažme si to na konkrétním příkladě. Vezměme si na paškál jednu starší věc:
Na 5. straně je velmi jednoduchý graf (ten první), který sice nevypadá (podle mého názoru) úplně špatně, ale mohl by klidně vypadat lépe. Např. takto:
graph-1
Toto je klasický graf s pěti měřenými položkami, každá se dvěma měřenými hodnotami. Vstupní data, která se v tuto chvíli zadávají komplet celá, vypadají takto:
element: 'graph-1',
title: '',
legend: '℃ (⇐ méně je lépe ⇐)',
measurement: ['AMD','Nuvoton'],
data:[
[39, 54, false, 'green', 'Šedivka + Diamond'],
[31, 49, false, 'red', 'CoolLaborka + Diamond'],
[28, 46, false, 'purple','CoolLaborka + CoolLaborka'],
[24, 44, false, 'cyan', 'CoolLaborka bez HS, Vortex'],
[16, 36, false, 'yellow','CoolLaborka bez HS, Accelero']
]
Právě tohle se zadává do jednoho z chlívečků v administraci, takže to rozhodně není blbuvzdorné a redaktor musí vědět, co dělá (samozřejmě se to nemusí takhle krásně řádkovat a vyplňovat mezerami, to je čistě pro orientaci, stejně tak nezáleží na pořadí, tedy kromě pořadí prvků v polích samozřejmě).
Další krásná ukázka předělávky může pocházet z této recenze:
5. strana obsahuje snad úplně nejjednodušší formu grafu: co položka, to jedna hodnota. Problém je, že popisek je relativně dlouhý. Ale to nevadí, autor si s tím pohrál a zajistil, že první řádek popisku má jinou barvu a velikost než další řádky. Takže výsledek je následující:
graph-2
6. strana téže recenze už je na tom zajímavěji. Každá položka má totiž čtyři hodnoty. V novém pojetí to vypadá následovně:
graph-3
A tady začíná legrace a konfigurovatelnost grafů. Protože tento graf je docela velký, šel by na výšku trošku smrsknout. Stačí přidat jediný parametr: shifting: true. Navíc je zde využita další funkce grafů: pokud pro dané měření není hodnota, píšeme místo ní -1, neb se zápornými hodnotami se obecně nepočítá (zatímco nula je pořád hodnota, se kterou se počítat dá). Standardně píše graf N/A, ale pokud bychom chtěli něco jiného, stačí použít další parametr třeba takto: empty: '' (dvě jednoduché uvozovky vedle sebe značí prázdný řetězec, místo N/A se tedy nenapíše nic, aby to vypadalo stejně jako v původním starém grafu). Výsledek tedy bude po přidání těchto dvou parametrů vypadat takto:
graph-4
Podívejme se na další možnosti. Celkem jednoduchý graf, nicméně potřebujeme náhle operovat s časem. Na 4. straně této recenze
je mimo jiné graf, který ukazuje časové hodnoty. Převod těchto grafů do nových bude pravděpodobně megaopruz, protože zatímco ve starých grafech jsem zadával minuty i sekundy, v nových už zadávám jen sekundy (i za minuty samozřejmě). Aby se čas zobrazil jako čas, je třeba použít parametr conversion: 'time'. Zobrazovaný formát je m:ss a když to náhodou překročí hodinu, přidá to i hodiny (h:mm:ss). Takže v novém kabátě (už bez zbytečného odlišného pruhu pro zvýrazněné položky, pouze s podbarvením) takto:
graph-5
Další strana téže recenze obsahuje výsledky ze CineBenche. V těch obvykle rádi uvádíme, stejně jako to dělá CineBench, o kolik rychlejší je vícevláknová práce oproti jednovláknové. Není nic snazšího než přidat do hry další parametr multiple: true. Můžete si též všimnout, že grafy používají ve výsledcích desetinné čárky místo teček. Detail, ale potěší ;-). Další takový detail odděluje mezerou tisíce, milióny a další.
graph-6
To nejlepší na konec: měření hlučnosti. Zde používáme snad nejstarší javascriptový graf, který se kdy u nás objevil (ten byl ještě na starém CD-R serveru) a sebekriticky (protože jsem ho sesmolil já) musím uznat, že je to šílená patlanina. Jestliže předělávka časových grafů do nové podoby bude megaopruz, pak předělávka grafů hlučnosti do nových bude ultrahypergigaopruz, protože bylo zvlášť pole pro hodnoty, zvlášť pro popisky a zvlášť pro barvy a i v datech byl šílený maglajz a teď se to musí v podstatě ručně předělat do jednoho pole tak, aby to dávalo smysl.
Mrkněte na 6. stranu této recenze:
Jak jistě víte, pro měření hlučnosti používáme pro délku pruhů přepočet na akustický tlak, což podstatně lépe odráží subjektivní dojem toho, jak na člověka daný zvuk působí. Aby to nové grafy správně zobrazily, použijeme již známý parametr, ovšem s jinou hodnotou: conversion: 'dba'. Protože ale ještě potřebujeme posunout počátek osy X na 30, musíme také nastavit start: 30 a v neposlední řadě je tu ten efekt s velmi řvoucími grafikami, které by nám s ohledem na logaritmické zobrazení setřely rozdíly mezi tichými produkty. Pro tento účel jsme používali interaktivitu v podobě rolovacího grafu, což byla sice prasárna, ale bylo to lepší než drátem do oka (i když … těžko říci). Nové grafy to umí efektivně vyřešit nastavením maximální hodnoty, zde např. zoom: 45. Ten parametr se nejmenuje zoom náhodou. Co vám budu povídat, prostě si na graf klikejte a pochopíte sami, co se děje.
graph-7
Tak takové jsou naše nové grafy. Autorovi za ně mnohokráte děkujeme, konečně to bude vypadat slušně. Na redaktory to sice klade trošku zvýšené nároky, protože chyby v zadání se špatně odhalují (obvykle se při výskytu syntaktické chyby nenakreslí na stránce ani jeden graf, takže se hůře odhaluje, ve kterém je chyba), ale zase je zachována možnost copy&pastovat data pro graf jako celek tak, jako tomu bylo doposud (já bych tomu osobně raději žádné pěkné blbuvzdorné GUI nedělal). Jediné, co budeme muset dořešit, je vkládání zástupného prvku grafu do textu jinak než editací fullHTML verze textu. Grafy jako takové jsou nicméně hotové.
Kdybyste se náhodou ptali, proč to nemáme tak hezky interaktivní a uživatelsky konfigurovatelné jako např. na EHW, pak vězte, že právě tak jsme to nechtěli. Chtěli jsme to jednoduché, zbytečně nekonfigurovatelné (ze strany uživatele-čtenáře) a v podstatě vycházející z dosavadního pojetí. Autor našich grafů se nám tímhle výtvorem přesně trefil do noty.
Aktualizováno 7. března 2014
Autor grafy na základě reakcí čtenářů vylepšil (protože nasazujeme vždy novou verzi přes starou, projevilo se to rovnou i v článku). Novinky:
- Legenda obsahuje všechny použité barvy, nikoli jen tu první použitou jako dříve.
- Jednotlivé položky jsou lépe odlišeny tím, že každá druhá položka má tmavší podbarvení (střídá se bílá a lehce šedá). Když to vyjde na zvýrazněnou položku, je tato také trošku tmavší (mohou být tedy dvě zvýrazněné položky hned vedle sebe a snadno půjdou rozlišit).
- Přidána možnost uživatelského seřazení výsledků klikáním na popisek legendy. Klikání cykluje řazení mezi [výchozí] ⇒ [vzestupně] ⇒ [sestupně] (a pořád dokola). Na kterou legendu se klikne, podle té se výsledky řadí.
- Přidána možnost seskupení/rozeskupení výsledků podle barvy pruhů. Pokud budou redaktoři např. dodržovat pravidlo, že AMD budou podbarvovat červeně a Nvidii zeleně, bude možné k sobě seskupovat jednotlivé barvy. Současně s tím nadále funguje i seřazování výsledků, seskupování se přitom zachovává. Redaktor může nastavit, zda budou výsledky v daném grafu ve výchozím stavu seskupené, nebo rozeskupené (standardně jsou rozeskupené, tedy zobrazené tak, jak je to zadáno v poli).
Protože v článku žádný vyloženě rozeskupený graf není a přepínač tak vlastně nic nemění, doplnil jsem níže jeden ukázkový, abyste si to mohli vyzkoušet. - Opraveny další drobné bugy a provedena špetka optimalizací.
graph-novy
Sice nám to přidalo další prvek interaktivity, který jsme původně nechtěli, ale osobně musím říci, že je to ještě pořád v pohodě a je to pěkné a snadno použitelné. Autorovi tímto opětovně děkujeme.
