WP3-05 - Dopolnitev grafov # Potrebni refaktorji na chartu: ## I. Podatkovni model Ocena dela: 3 dni Trenutno se podatki hranijo v chartu v obliki ```javascript [ datetime, value ] ``` V primeru da so določene kategorije podatkov zgeneriramo temu podatku v samem chartu še časovno kategorijo (npr. JAN 2020). V primeru da želimo točkam dodati še dodatne podatke kot je barva, id, index (sortiranja) itd. bi bilo priporočljivo da hranimo te podatke v formatu ```javascript const value = { x, // ..., npr. datetime y, // ... value (color), // ... (sortIndex), // ... (id), // ... (dodatni poljubni podatek 1), // ... (dodatni poljubni podatek 2), // ... } ``` Vsak vrednostni objekt potrebuje x in y, vsi ostali podatki so neobvezni in se uporabljajo zgolj za sortiranje grafa ali uporabo v tabeli. ## II. Tabela Ocena dela: 3 dni do 1 teden. Če imamo podatke v key-value obliki lahko tudi definiramo stolpce v tabeli za prikaz v tabeli direkt po imenih stolpcev in spremenimo hardkodirano tabelo, kot je sedaj v nekej kar se da naconfat glede na potrebe uporabnika. Primer za konfiguracijo stolpcev v tabeli: ```javascript const tableConfiguration = { columns: [ { name: 'ime stolpca', from: 'ime lastnosti v objektu za vrednost', fromSeries: 'id series', autogenerated_link: { // spoda dva propertija bosta vezana na konfiguracijski objekt za komponento in se bota dodala v konfiguracijo za stolpce z vrednostmi če jih bodo serije vsebovale href: () => {} // funkcija v katero bo tabela podala vse podatke o stolpcu, ki jih ima, pričakuje podatek tipa string ki bo url na ikoni poleg naslova state: () => {} // funkcija v katero bo tabela podala vse podatke o stolpcu, ki jih ima, pričakuje podatek tipa string ki bo angular ui-sref na ikoni poleg naslova }, actions: [{ text: 'tekst na gumbu', fn: () => {} }] } ] } ``` Tabela bo dopuščala tudi opcije icon-buttnov za vsako vrstico. Na klik v gumb bo tabela poklicala funkcijo pripeto na konfiguracijo za ta stolpec in ji podala celoten objekt vrednosti za to vrstico - Točka XII. podrobnost podatka. Če je name v akciji specificiran kot 'x' se akcija doda vsem stolpcem ki predstavljajo različne serije. Če je name v akciji specificiran kot 'y' se akciaj doda stolpcu s časem. ### a. Povečanje števila rezultatov v tabeli na druge predoločene opcije Ocena dela: 1 ura ## III. Graf Ocena dela: 1 teden. Treba je refaktorirat kontroller. Predlagam da se malo razparelira ogromen kontroler, ki je bloatnil skozi čas ko so se featureji dodajali v specifičnih fajlov. Dodatno preverit in posodobit način kako se apiji hendlajo ter live update vrednosti. ### a. Sprememba da limita ni več required + sprememba dodani filtri (pol leta, tri meseci) Ocena dela: 1 ura Dopolnitev na dialogu za filtracijo. Možnost privzetega filtra za limito. ### b. Ko gre sistem nalagati vrednost, naj jih razbije v manjše pakete in naj graf nalaga po obdobjih npr. vrednosti Ocena dela: N/A Za to spremembo rabimo opraviti test ali je sploh performančno to boljše. ### c. Začetek grafa in konec grafa mora biti enak datumu in času, ki ga uporabnik nastavi – tudi če ni podatkov. Ocena dela: do 1 dan Graf odpre opcije da se za določeno os odpre from/to opcije, ki fiksno nastavijo vse časovne x-osi grafa. Enako če uporabnik vnese te vrednosti v filter dialogu za vrednosti od - do. ### d. Privzeto skrivanje serij Ocena dela 2 - 3 dni Serije, ki so privzeto skrite na grafu ne fetchajo podatkov niti niso prikazane v tabeli. Ko uporabnik klikne tako skrito serijo na legendi prvič se izvede fetch podatkov in jih vmesti v podatkovni model. Serije, ki so privzeto skrite in še niso bile odkrite se tudi ne fetchajo na refreshanje. ## IV. Spremembe približevanja grafa Ocena dela: 1 teden Trenutno lahko uporabnik približa in resetira sliko na grafu. To funkcionalnost bomo spremenili tako, da bo približano območje po x osi na grafu tudi filtriralo rezultate v tabeli. Poleg gumba za reset na originalno sliko bomo grafu dodali še 2 gumba (+ in -) ki bosta ves čas vidna namesto Reset gumba in bosta približevala in oddaljevala sliko na grafu na nek predoločen interval kot npr. na google mapsih. Poleg teh gumbov bo graf dobil še opcijo za dodatne gumbe ki se jih bo dalo definirati z imenom željenega časovnega obdobja zooma in velikostjo intervala v številki. Približevanje bo delovali na način da če je graf že približan bo približal na trenutno centirano točko na x Osi, če pa še približan pa od konca x Osi nazaj. (Sepravi, da če zoom ne bo nastavljen in bo uporabnik prvič kliknil gumb za zoom 1 dan, bo graf približal na zadnji dan na celotnem intervalu, če bo od tam zoper kliknil na gumb za približevanje bo graf približal na nek interval okoli 12. ure). Ko bo graf priližan bo pod njim pasica z drsnikom s katero bo lahko uporabnik premikal graf (primer: http://jsfiddle.net/LnneuLoy/8/ - primer vsebuje). Velikost držala na drsniku bo korelirala z velikostjo približanega grafa do neke fikne širine ki je še dovolj velika da lahko uporabnik brez težav vleče drsnik. ## V. Podpora za stacking grafov Ocena dela: 1 dan Treba dodati to kot poseben tip v codelist in dodat stacking property v serije (Tango). Vse serije ki bodo imele stacking in bodo na isti y Osi se bodo stackala skupaj. To predela oštevilčenje osi na 0 (oz. 100) do 100 <- v tem primeru bi bilo namesto standardne merske enote bolje dati procent znak. Vse druge serije na isti osi, ki nimajo stackinga se renderajo normalno, brez omejitve 0 - 100 <-- za njih ne bi imelo smisla podajat % znaka na os. ## VI. Podpora so-odvisnosti dveh ali večih serij namesto časovne odvisnosti - NE GRE NOT (https://devops.smartis.si/confluence/pages/viewpage.action?pageId=32080686) Ocena dela: 1 teden Graf mora podpirati na x-osi namesto časovne osi vpeljavo dodatnih serij kot podatkov za os. Enako mora tabela biti sposobna podpirati tak prikaz podatkov, ki so vezani na drug stolpec kot datetime. To je bilo originalno implementirano ampak zaradi neuporabe treba refaktorirati da bo delalo pravilno tudi če imamo več x-osi in več y-osi. ## VII. Funkcija sortiranja po velikosti podatka Ocena dela: 3 dni Podatke želimo s posebno akcije preurediti da so sortirani po velikosti na posebni osi ki je oštevilčena od 1 do n ki korelira z vrednostjo podatka. Privzeto je na indexu 1 največji podatek in na indexu n najmanjši podatek, na osi pa prikazujemo zaporedno število podatka glede na interval. Ta index se doda podatkom (interno) v modelu po akciji klika na gumb v headerju grafa in dopolni konfiguracijo za tabelo. Ob ponovnem kliku se vrstni red sortiranja obrne. Po tretjem kliku se ta način ukine in polje index umakne iz podatkovnega modela in iz konfiguracije za tabelo, graf pa rerendera. ## VIII. Link na serijo v imenu serije v tabeli Ocena dela: 1 ura Serije opremimo s podatkom link ki, če je nastavljen, naredi ikono za link poleg imena serije, ki odpelje uporabnika na željeno stran. ## XI. Link na serijo v imenu serije v grafu Ocena dela: 1 dan Imena serij v legendi na grafu opremimo z ikono za link če te serije vsebujejo lastnost lastnosti opisane v konfiguraciji za link zgoraj. ## X. Generiraj poročilo nima veze z izbranim grafom. Naj se prikaže samo poročila, ki vključujejo dotični graf. - NE GRE NOT Ocena dela: 1 dan Trenutno je reporting narejen izven same komponente. Na komponenti lahko exposamo api ki vrne podatke za trenutno gledano obdobje na x oseh in ta podatek potem dodamo v klic API-ju na BE ki generira poročila. ## X. Na vrednosti, ki je trenutno aktualna (trenuten čas) se na grafu jasno pokaže, da je ta vrednost aktualna Ocena dela: 1 dan Če refaktoriramo podatkovje da lahko pripnemo točkam še dodatne podatke lahko podamo poleg vrednosti dodamo še color s katerim bo graf znal določeno točko pobarvati na željeno barvo. ## XII. Spreminjanje višine grafa in tabele Ocena dela: 2 dni Uporabniku bomo dali opcijo določit eno od prenastavljenih velikosti (1:2, 2:1 in 1:1). Poleg tega bo na komponenti za grafe exposana opcija ki odklene dinamično nastavljanje višine. To bo narejeno na tak način: https://jsfiddle.net/dny4mtu2/7/ ## XIII. Prikaz podrobnosti podatka - NE GRE NOT (WP3-01) Ocena dela: 3 dni V tabelo se doda icon button ki ima notri črko i poleg vsakega podatka z vrednostjo. S klikom na gum se pokliče funkcija v Tangotu, ki odpre dialog z razširjenimi podatki o točki.