[HomeWallet] Wykresy i UI

W ten świąteczny wieczór zapraszam na podsumowanie kolejnego tygodnia prac nad Home Wallet.

 


Wykresy

 

Ostatnio w serii NaSzybko pisałem jak dodać do naszego projektu wykresy. Z tej samej biblioteki HighCharts korzystałem w tym tygodniu przy projekcie. Udało mi się wygenerować wykres dla statystyk danego dnia, który pokazuje stosunek pieniędzy wydanych danego dnia do założeń planu.

 

 

Problemy z wykresem są dwa.

Pierwszy, to przy niskiej kwocie wydanej fragment jest na tyle mały, że nie mieści się na nim opis i zlewa z tłem.

Drugi, to przy kwocie przekraczającej plan pokazywane jest i tak 100%.

Na razie nie zagłębiałem się czy da się z tym coś zrobić. Jeden i drugi problem nie jest na tyle duży zważając na to, że nad wykresem zawsze jest wszystko opisane słownie.

 

Kolejne wykresy wygenerowałem dla statystyk planu. Pojawia się tam podobny wykres jak ten w statystykach dnia, zliczający ile już wydaliśmy a ile nam pozostało do wydania.

 

 

Dodatkowo generuje wykres półkołowy który ma przedstawić ile dni upłynęło od startu planu oraz ile dni pozostało.

 

 

Wykresy te dzięki HighCharts wygenerowałem bardzo prosto. Należało trochę pokombinować z wyglądem, szczególnie z opisami fragmentów koła, jednak nie było tak źle. Więcej moich przemyśleń możecie znaleźć tutaj.

 


Counter

 

W statystykach planu dodatkowo pojawiły się liczniki pokazujące ile zaplanowaliśmy wydać oraz ile średnio musimy wydawać dziennie żeby zmieścić się w limicie.

Do ich zrealizowania wykorzystałem skrypt jquery-incremental-counter, który nieco przerobiłem aby pokazywał wartości dziesiętne.

 

 

Po moich zmianach nie jest on idealny, ale najważniejsze, że działa.

 


UI

 

Wiedząc już jak ma wyglądać tworzenie rachunku pogrzebałem nieco w CSS i poprawiłem to co należało.

Produkty wyświetlają się już tak jak powinny, przycisk do usuwania jest mały. Jedyne co muszę jeszcze ulepszyć to przycisk do dodawania nowych sklepów tak, aby razem z selectem był tej samej szerokości co datepicker.

 

 

Dodatkowo, nadal nie działa mi Chosen. Próbowałem zmienić go na Selectize, ale ten również nie chce ze mną współpracować. Będę dalej z tym walczył. Jestem na 99% pewny, że problem leży przy PartialView.

Przy okazji mając już css do tworzenia rachunku stworzyłem pierwszą wersję widoku do przeglądania konkretnego rachunku. Wygląda on niemal identycznie jak tworzenie, oczywiście bez możliwości edytowania, która będzie w oddzielnym widoku.

 


Podsumowanie

 

Z wykonanych prac w tym tygodniu to tyle. W następnym tygodniu postaram się wziąć za wygląd dialogów jQuery. Muszę się o nich trochę douczyć, a ideałem byłoby stworzenie czegoś zupełnie bez ramek.

Cały kod oczywiście znajdziecie na GitHubie projektu, a tymczasem życzę Wam Wesołych Świąt!

Do zobaczenia, cześć!

2 komentarzy

  1. Teraz aplikacja wygląda dużo lepiej 🙂

    1. Fajnie wiedzieć, że zmiany na lepsze. Dzięki za komentarz 🙂

Dodaj komentarz