Daj się poznać 2017 – Ruszamy!

Jak już wspominałem we wcześniejszym wpisie, startuje w konkursie Daj się poznać. Projekt, który będę tworzył nosi nazwę „Boomtarara charts” (ciekawa nazwa, przyznaję ;)) i będzie to biblioteka do tworzenia wykresów napisana w języku Javascript. Jej repozytorium znajduje się na githubie.

Motywacje

W Internecie znajduje się wiele bibliotek stworzonych do tego celu. Niektóre z nich wykorzystują grafikę SVG, inne opierają się na elemencie canvas. Ja korzystałem tylko z darmowych rozwiązań takich jak: ChartistJS, ChartJSGoogle Charts czy NVD3. Są to bardzo przydatne narzędzia, ale czasami gdy musiałem dostosować jakiś wykres – do konkretnego projektu narysowanego przez grafika – napotykałem różne problemy i efekt końcowy nie był dokładnie taki jakbym chciał. Zauważyłem również, że przydałoby się narzędzie, które pozwalałoby w łatwy sposób stworzyć dowolnie wyglądający wykres, by później kopiując tylko kod i podpinając dane umieścić go na stronie. Dzięki temu programiści z backendu lub blogerzy nie musieliby zagłębiać się w kod biblioteki.

Wykresy narysowane za pomocą bibliotek (ChartistJS, ChartJS, CanvasJS, NVD3)
Wykresy narysowane za pomocą wspomnianych bibliotek (ChartistJS, ChartJS, CanvasJS, NVD3)

Cel

Dlatego chciałbym napisać bibliotekę, która pozwalałaby tworzyć efektowne, animowane wykresy zbliżone do tych projektowanych przez grafików. Jednocześnie chcę stworzyć edytor w którym będzie można spersonalizować/ostylować wykres do swoich potrzeb, dodać do niego animacje i efekty a na końcu skopiować kod, który będzie można umieścić na stronie. W późniejszym czasie chciałbym stworzyć moduły, które można by było importować do frameworków javascriptowych takich jak AngularJS czy ReactJS.

Bardzo efektowne wykresy narysowane przez grafików, pochodzące ze strony dribbble.com.
(Autorzy: Masudur Rahman, Mike | Creative Mints, Cosmin Capitanu, Peter Main, InVision)

Rozwój

Omówiłem podstawowe cele aplikacji, teraz czas na moją osobę. Podczas tworzenia tego projektu chciałbym nauczyć się TDD, nowego dla mnie frameworka Vue.js, dogłębniej poznać GITa i napisać całą bibliotekę w stardardzie ES6. Miejmy nadzieję, że dam radę 🙂

Oto ogólny plan działania:

  • Przygotowanie środowiska
  • Napisanie podstawowych modułów
  • Wykres słupkowy
  • Wykres liniowy
  • Wykres kołowy
  • Stworzenie edytora
  • Stworzenie modułów do frameworków (w przyszłości)

Do dzieła! 🙂