Po kilku miesiącach pracy nad nowym wydaniem, Billboard.js 2.0 ujrzał światło dzienne. Przede wszystkim zrestrukturyzowano cały system plików i architekturę klas oraz umożliwiono stwarzanie szybciej mniejszych kompilacji. W celu ułatwienia dostępu do kodów przeniesiono całą bazę kodu do TypeScript.

Główne zmiany związane z wydajnością i rozmiarem kompilacji

Mniejsze pakiety

Jednym z rozwiązań problemu wydajności załadunku jest zmniejszenie wielkości dostawy. Nie korzysta się z wszystkich typów wykresów we wszystkich okolicznościach. Nowa wersja zapewni kompilację ESM, co oznacza, że moduły interakcji i typy wykresów są nazywane eksportowanymi. Rzadko korzysta się z funkcji interakcji i nie zawsze takie z nich jak podwykres czy wybór danych są wymagane. Bezsensownym jest więc umieszczanie w pakiecie wszystkich powiązanych kodów. Lepszym wyjściem jest importowanie tylko tego, z czego korzystamy. Dzięki temu zmniejszenie pakietu osiągnie od 20 do nawet 43%.

Redukcja węzła

Prócz powyższego zmniejszenia pakietów, zredukowano także rozmiar węzła. Billboard.js 2.0 minimalizuje użycie nadmiarowych węzłów. Tworzy tylko te niezbędne, według używanych typów. V2 zastąpiło przestarzałe API .transform(), aby usunąć możliwość przekształcania jednego typu wykresu na inne. Według przeprowadzonych testów rozmiar zmniejszył się z 5%-50%.

Benchmark

W związku z opisanymi wcześniej zmniejszeniami pakietów i węzła, poprawiono wydajność środowiska wykonawczego. Poprawa wynosi średnio 50%.

Nowe opcje w Billboard.js 2.0

Fokusowanie

Jedną z nowych funkcji jest point.focus.only. Dzięki niej po najechaniu kursorem na punkt wykresu wyświetli się punkt danych.

Wygeneruje się jeden węzeł <circle> na serię danych. W przypadku dużej ilości danych może to wpłynąć na wydajność. Przykładowo, w wersji v1 korzystano z następującej opcji:

point: {
    r: 0,
    focus: {
      expand: {
        r: 5
      }
    }
}

W nowej wersji stworzy się tylko jeden węzeł na dane, co zapobiega wpływowi na wydajność. Opcja fokusowania wygląda więc następująco:

point: {
   focus: {
      only: true
   }
}

Etykiety danych w Billboard.js 2.0

Kolejną dodaną funkcją jest label.threshold dla belki. W przypadku wykresów czasami ciężko jest zrozumieć dane, które wizualnie nakładają się na siebie.

Wizualnie lepiej jest wtedy ukryć ten tekst, zamiast go wyświetlać. Wcześniej próg etykiety danych był obsługiwany tylko dla typu kołowego. Dziś, jako rozszerzenie dodano nowe opcje label.threshold dla słupków i mierników.

bar | gauge: {
    label: {
	threshold: 0.1
    }
}

Skalowanie logarytmiczne

Ostatnią nowością jest nowy sposób skalowania danych – według skali logarytmicznej.

Warto jednak pamiętać o ograniczeniach skali logarytmicznej:

1. Wartości danych muszą być dodatnie.
2. Minimalna wartość dla skali logarytmicznej powinna być większa od zera. Ponadto log0 jest niezdefiniowany.

Podsumowanie Billboard.js 2.0

Szczegółowe informacje można znaleźć w dzienniku zmian. Billboard 2.0 można zainstalować także przez npm poleceniem:

# zainstaluj v2 
npm install billboard.js