devnews.pl

Main Menu

  • Informacje
    • Systemy i przeglądarki
    • Gadżety
  • Narzędzia
  • Frontend
  • Backend
  • QA
  • Języki programowania

logo

devnews.pl

  • Informacje
    • Systemy i przeglądarki
    • Gadżety
  • Narzędzia
  • Frontend
  • Backend
  • QA
  • Języki programowania
Frontend
Home›Frontend›Billboard.js 2.0 – mniejszy i szybszy, już dostępny

Billboard.js 2.0 – mniejszy i szybszy, już dostępny

By Bernadeta Zapała
21 lipca 2020
222
1
Share:

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.

Billboard.js 2.0 - focus

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
    }
}

Billboard.js 2.0 - próg

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
TagsBillboard.jsChartsData VisualizationJavaScriptTypescript

Share:

  • FrontendNarzędzia

    Wsparcie dla Fluttera w Adobe XD

  • Narzędzia

    RSLint – linter Java Script napisany w Rust

  • Frontend

    Tailwind CSS v.1.4 – space i divide, narzędzia do krycia kolorów

  • 3 marca 2021

    Vite 2.0 wydane z nowymi wtyczkami

  • 25 lutego 2021

    ReacType 5.0 – zmiany we wprowadzaniu komponentów

  • 23 lutego 2021

    Dapr v.1.0 gotowy do fazy produkcji

  • 22 lutego 2021

    ReScript 9.0 z zewnętrzną konfiguracją stdlib

  • 22 lutego 2021

    One UI 3.1 z ciekawymi nowościami dla urządzeń Samsunga

  • 22 lutego 2021

    Windows Terminal Preview 1.6 z nową sekcją ustawień

  • 15 lutego 2021

    Visual Studio Code 1.53 z ulepszeniami debugowania

  • 8 lutego 2021

    Edge 89 beta, Edge Dev 90 i nowości na kanale Canary

  • 2 lutego 2021

    Firefox 85 i Firefox Nightly – nowe wersje przeglądarki Mozilli

  • 29 stycznia 2021

    Billboard.js 2.2.0 z nowymi funkcjami wykresów

  • 26 stycznia 2021

    Kendo UI R1 2021 – nowości dla bibliotek

  • 21 stycznia 2021

    Narzędzie Vno – połączenie Vue i Deno

  • 19 stycznia 2021

    GitHub Enterprise Server 3.0 RC – kandydat do wydania

  • 15 stycznia 2021

    TypeScript 4.2 Beta z ulepszeniami typów krotek

  • 13 stycznia 2021

    Styczniowy Patch Tuesday z luką 0-day

  • 11 stycznia 2021

    Safari Technology Preview 118 dostępne dla programistów

  • 8 stycznia 2021

    Microsoft Launcher na Androida z usprawnionym dotykiem

  • 7 stycznia 2021

    WebStorm 2020.3.1 dostępny dla urządzeń z Apple Silicon

  • 22 grudnia 2020

    ReScript 8.4 z przypiętymi zależnościami

  • 14 grudnia 2020

    Edge 88 beta i przeglądarka na kanale Canary dostępne!

  • 9 grudnia 2020

    Chrome 88 Beta z nowościami w WebXR

  • 9 grudnia 2020

    Snowpack 3.0 RC z eksperymentalnymi funkcjami

  • 4 grudnia 2020

    Android Studio Arctic Fox – nowe wydanie narzędzia Google

  • 4 grudnia 2020

    The Hack Summit 2020 – konferencja IT Security

  • 2 grudnia 2020

    PowerToys 0.27 z poprawkami błędów

  • 2 grudnia 2020

    Aleph.js alfa z funkcją importowania map

  • 27 listopada 2020

    Cypress 6.0 zwiększa zakres możliwości obsługi sieci

  • 26 listopada 2020

    Firefox 83 przyspiesza i wprowadza tryb HTTPS-Only

  • 25 listopada 2020

    Electron 11.0 z obsługą Apple Silicon

  • 25 listopada 2020

    Prettier 2.2 z obsługą najnowszego TypeScript 4.1

 

 

Jesteśmy pasjonatami najnowszych technologii w świecie programowania. Zbieramy dla Was informacje i porady z całego świata, które sprawią, że Twoja praca stanie się jeszcze bardziej efektywna.

Obserwuj nas codziennie, aby być na bieżąco oraz śmiało udostępniaj nasze posty.

Zespół DevNews

Kategorie

  • Backend
  • Bez kategorii
  • Frontend
  • Gadżety
  • Informacje
  • Języki programowania
  • Narzędzia
  • QA
  • Systemy i przeglądarki

OBSERWUJ NAS

KONTAKT

Chcesz się z nami skontaktować?

Napisz do nas wiadomość: kontakt@devnews.pl

www.devnews.pl | DEVNEWS 2020 | Newsy i ciekawostki ze świata IT