Raport z placu boju - 5 tydzień DSP

Cześć! Tym wpisem rozpoczynam cotygodniową serię raportów z tworzenia Portfela Emerytalnego. Tak jak pisałem w ostatnim poście teraz takie podsumowania będą pojawiać się raz na tydzień w poniedziałki i będą zawierać podsumowania co udało się zrobić w ostatnim czasie w moim projekcie na konkurs Daj Się Poznać 2017.

Szablon strony

W ostatnim tygodniu znalazłem gotowy, darmowy szablon strony na podstawie którego będę budował interfejs użytkownika. Zależało mi na tym, aby mieć jak najmniej pracy związanej z  dostosowywaniem szablonu do moich potrzeb, dlatego od razu szukałem takiego, który będzie przystosowany do Angular 2. Ważne było też, żeby działał zarówno na dużych ekranach komputerów, jak i na smartfonach. Ten który znalazłem jest responsywny, zbudowany na bootstrap i wykorzystuje Material Design od Google. Material Design daje jeszcze jedną, istotną zaletę - zbiór gotowych komponentów do wykorzystania: https://material.angular.io/.
Nie może być jednak idealnie i szablon miesza trochę czystego JavaScript z TypeScriptem, ale mam nadzieję to uporządkować w trakcie rozwoju aplikacji.

Twórca zrobił tutaj kawał dobrej roboty, więc w podziękowaniu link do strony: https://www.creative-tim.com/product/material-dashboard-angular2

Dostosowanie szablonu

Pobrany szablon musiałem jeszcze zintegrować z wygenerowaną z angular-cli aplikacją i na jego podstawie zbudować zalążek tego, jak będzie się prezentował interfejs użytkownika Portfela Emerytalnego. W tej kwestii czeka mnie jeszcze sporo pracy, ale pierwsze rezultaty prezentują się następująco:

Zmiana biblioteki do wyświetlania wykresów

Ostatnią zmianą wprowadzoną w ubiegłym tygodniu jest rezygnacja z ng2-charts, którego pierwotnie chciałem użyć do wyświetlania wykresów. Podjąłem wiele prób wyświetlania danych przy użyciu tej biblioteki, rozwiązałem wiele pojawiających się problemów, ale wykresy nadal nie działały tak jak oczekiwałem. Przykładem niech będzie to, że kiedy zmieniałem ilość punktów które ma wyświetlić wykres to ten rzucał błędem parsowania.
Żeby nie zamieniać programowania w hackowanie tej biblioteki żeby działała, postanowiłem spróbować innego rozwiązania. Wybrałem angular2-highcharts, który okazał się idealnym rozwiązaniem wolnym od problemów z którymi zetknąłem się używając ng2-charts. Dodatkowo highchart od ręki obsługuje wykresy, na których możemy wybrać zakres czasu dla jakiego zostaną pokazane dane.

Kolejna rzecz mniej do napisania samemu, co ostatecznie zadecydowało o wyborze tego rozwiązania.

To tyle jeśli chodzi o dzisiejszego, opóźnionego posta. Na kolejne podsumowanie zapraszam za tydzień.