Tworzenie aplikacji do generowania wykresów

Witam w moim pierwszym wpisie dokumentującym stworzenie aplikacji pokazowej. Tworzenie tego artykułu było dla mnie nowym doświadczeniem, dlatego proszę o łaskawe podejście i chętnie przyjmę wszelkie sugestie dotyczące tego, co mogłem zrobić lepiej – zarówno w projekcie, jak i w opisie.

1. Opis projektu

Pomysł na aplikację narodził się z chęci przetestowania swoich umiejętności. Celem było stworzenie intuicyjnego narzędzia, które pozwoli użytkownikom generować proste wykresy słupkowe na podstawie wprowadzonych danych. W aplikacji można:

• Dodawać dane do wykresu (nazwa, wartość, kolor).
• Sortować dane rosnąco i malejąco.
• Zmieniać kolejność słupków.
• Usuwać słupki.
• Pobierać wykres jako obraz PNG.

Cała aplikacja jest dostępna online pod adresem: https://charts.kwiatkowskilukasz.pl/,
a jej kod źródłowy znajdziecie w repozytorium GitHub: Simple Chart Generator.

2. Techniczne aspekty projektu

Moje rozwiązanie oparłem na następujących rozwiązaniach technologicznych:

• jQuery – prostota w zarządzaniu elementami DOM była kluczowa, zwłaszcza że miałem już doświadczenie z tą biblioteką.
• Chart.js – potężna biblioteka do tworzenia wizualizacji danych, którą wykorzystałem do generowania dynamicznych wykresów.
• Gulp – narzędzie do automatyzacji zadań, używane do konwersji SASS na CSS i minimalizacji kodu JavaScript.
• SASS – pozwolił mi na bardziej zorganizowane podejście do stylowania.

3. Funkcjonalności aplikacji

Aplikacja w obecnej wersji umożliwia użytkownikowi:

1. Tworzenie wykresów – użytkownik może dodawać słupki z nazwą, wartością i kolorem.
2. Sortowanie i reorganizacja – dane mogą być sortowane rosnąco lub malejąco, a słupki zmieniają swoje miejsce na wykresie w czasie rzeczywistym.
3. Eksport do PNG – gotowy wykres można pobrać jako obraz.
4. Edytowanie i usuwanie – użytkownik ma pełną kontrolę nad każdym słupkiem.

4. Kod aplikacji

4.1. Dodawanie nowego elementu

    $('#create__btn').click(() => {
        try {
            // Set values for new item
                let randColor = Math.floor(Math.random()*16777215).toString(16);
                let idedntifier = Math.random().toString(36).substring(7);
        
            // Create object for item
                let itemObject = {
                    id: idedntifier,
                    name: 'New item',
                    color: '#'+randColor,
                    value: 0
                };
        
            // Add item object to items array
                items.push(itemObject);
        
            // Prepare HTML for new item
                prepareHTML_ListItems();
        
            // Save items to local storage
                saveItems();
        } catch (error) {
            console.error(error);
        }
    });

Każdy nowy element ma przypisany losowy kolor oraz identyfikator. Ustawiana jest też domyślna nazwa i wartość startowa. Zapisany obiekt jest dodawany do tablicy. Następnie przygotowywany jest kod HTML dla ustawień wprowadzanych przez użytkownika. Natomiast lista obiektów jest zapisywana do pamięci lokalnej.

4.2. Tworzenie wykresu

    // Reload Chart
    function reloadChart() {
        try {
            if(myChartCreate) {
                myChartCreate.destroy();
            }
            let datasets = items.map(item => {
                return {
                    label: item.name,
                    data: [item.value],
                    backgroundColor: item.color,
                    borderColor: item.color,
                }
            });
    
            myChartCreate = new Chart(ctxCreate, {
                type: 'bar',
                data: {
                    labels: [''],
                    datasets: datasets
                },
            });
        } catch (error) {
            console.error(error);
        }
    }

Funkcjonalność generuje wykres słupkowy. Jeżeli istnieje obecny to jest niszczony.

4.3. Sortowanie elementów

    // Sort items by value ascending
    $('#asc__btn').click(() => {
        try {
            items.sort((a, b) => a.value - b.value);
            saveItems();
            prepareHTML_ListItems();
        } catch (error) {
            console.error(error);
        }
    });

    // Sort items by value descending
    $('#desc__btn').click(() => {
        try {
            items.sort((a, b) => b.value - a.value);
            saveItems();
            prepareHTML_ListItems();
        } catch (error) {
            console.error(error);
        }
    });

Sortowanie prowadzone jest na tablicy, a następnie prowadzony jest nowy zapis do pamięci lokalnej i przebudowanie listy w ustawieniach danych przez użytkownika.

Pełny kod aplikacji znajdziesz w repozytorium GitHub

5. Potencjalne rozwinięcia aplikacji

W przyszłości planuję:

• Dodanie wsparcia dla innych typów wykresów (np. kołowych, liniowych).
• Ulepszenie układu wykresów słupkowych, aby był bardziej elastyczny. Przykładowo dla wykresu słupkowego zmiana orientacji wykresu z osi x na oś y.

6. Przykład działania

7. Podsumowanie

Projekt ten okazał się dla mnie ciekawym wyzwaniem i okazją do efektywnej nauki. Zachęcam do wypróbowania aplikacji oraz podzielenia się opiniami.

• Link do aplikacji: Simple Chart Generator
• Kod na GitHub: Repozytorium GitHub