Poniższa treść to notatki z Grafana Community Call z czerwca 2025. Wszystkie przedstawione przemyślenia, obserwacje i wnioski pochodzą od zespołu Grafana Labs oraz uczestników rozmowy: Adeli, Drew Slobodnika, Ihora, Usmana Ahmeda i Matta Ryera.
TL;DR
- Canvas Panel umożliwia tworzenie interaktywnych aplikacji wizualnych wykraczających poza standardowe wykresy
- Prawdziwe zastosowania obejmują monitoring pizzerii z animowanymi piekarnikami oraz farmy wiatrowe z danymi w czasie rzeczywistym
- Każdy element może działać jak przycisk dzięki nowej funkcjonalności Akcji
- Zespół całkowicie przepisał mechanizm przesuwania i powiększania, rozwiązując kluczowe problemy użytkowników
- Społeczność wykorzystuje narzędzie do tworzenia gier wieloosobowych podczas hackathonów
- W planach jest integracja z AI do automatycznego generowania układów
- Programiści mogą tworzyć własne elementy poprzez PR-y do biblioteki
Filozofia wykraczająca poza standardowe panele
Adela z zespołu Datavis w Grafana Labs wyjaśnia podstawową motywację za stworzeniem Canvas Panel. „Czasami chcesz zrobić coś więcej niż zwykły wykres” – podkreśla ekspertka pracująca z narzędziem od początku jego rozwoju. Według niej kluczem jest możliwość wizualizacji historii w sposób zrozumiały dla wszystkich, nie tylko dla analityków patrzących na punkty na wykresie.
Drew Slobodnik z tego samego zespołu dodaje strategiczną perspektywę: „Ultima vision polega na zbudowaniu konstruktora aplikacji, który naprawdę pozwoli na dostosowanie”. W rezultacie Canvas to nie zwykły panel, lecz platforma do tworzenia aplikacji.
Jednakże zespół musi radzić sobie z nieoczekiwanymi oczekiwaniami społeczności. Ihor ujawnia zaskakujący trend: ludzie chcą budować tabele wewnątrz Canvas, co zespół uważa za kontrowersyjne, mimo to słuchają każdego głosu społeczności.
Historia narzędzia rozpoczęła się we wrześniu 2021 od pojedynczego PR-a zawierającego tylko element tekstowy. W dalszej kolejności wersja alfa pojawiła się w Grafana 9.5, natomiast pełna dostępność przyszła z Grafana 10.
Zastosowania przekraczające oczekiwania
Matt Ryer, principal engineer w Grafana Labs, wykazał szczególne zainteresowanie przykładem pizzerii prezentowanym podczas rozmowy. Adela opisuje to studium przypadku: mają piekarniki z animacjami, pizza zmienia kolor skorupy gdy jest prawie gotowa, dodatkowo system zawiera timer.
Inne zastosowania obejmują monitoring fabryk z wizualizacją linii produkcyjnych, farmy wiatrowe z danymi w czasie rzeczywistym pokazującymi stan turbin, stacje ładowania samochodów elektrycznych z animowanymi statusami oraz plany pięter z interaktywnym mapowaniem urządzeń IoT.
Drew zwraca uwagę na praktyczny aspekt: „Jeśli praca polega na patrzeniu na dashboard przez 8 godzin dziennie, dlaczego nie patrzeć na coś pięknego i intuicyjnego?”
Architektura oparta na strukturze drzewiastej
Canvas Panel bazuje na strukturze drzewiastej elementów z klasą scene, jak wyjaśnia Adela. Właściwości elementów mogą być wartościami stałymi lub powiązanymi z danymi – prawdopodobnie najpotężniejsza funkcjonalność całego narzędzia.
Do obsługi selekcji i przesuwania elementów zespół wykorzystuje dwie biblioteki: movable oraz selector. Adela podkreśla pozytywne doświadczenia we współpracy z ich twórcą.
System oferuje dwa typy elementów: standardowe (prostokąty, trójkąty, ikony) oraz eksperymentalne (drony, przyciski, wiatraki). Ciekawostką jest fakt, że przycisk już dawno udowodnił swoją wartość, jednak nadal znajduje się w kategorii eksperymentalnej. Pierwotnie przycisk miał umożliwiać wywołania API – funkcjonalność ewoluowała w Akcje, gdzie każdy element może działać jak przycisk.
Canvas wspiera warstwy i nakładanie elementów, co według Drew otwiera ogromne możliwości twórcze. Jest to szczególnie przydatne przy złożonych systemach, gdzie trzeba nałożyć elementy sterowane danymi na obrazy układów czy map.
System połączeń na nowym poziomie
Drew szczegółowo opisuje możliwości połączeń: każdy element ma serię punktów zakotwiczenia wokół siebie, które można łączyć ze sobą. Dodatkowo każde połączenie można modyfikować poprzez przeciąganie punktów wierzchołków.
Połączenia można dostosowywać pod wieloma względami:
- Wygląd: kolor, rozmiar i promień
- Styl linii: przerywane, ciągłe, różne grubości
- Kierunek i animacje wizualizujące przepływ danych
- Zaawansowane parametry wizualne
Adela żali się podczas prezentacji, że animacje nie są widoczne na slajdach, lecz w rzeczywistości są w pełni animowane.
Ulepszenia w podpowiedziach i działaniach
Zespół wprowadził znaczące usprawnienia w systemie podpowiedzi. Jak opisuje Adela, wcześniej pojawiały się tylko przy powiązaniu danych i zawierały jedynie ten link. Teraz zawierają nazwę elementu, wartość danych oraz znacznik czasu punktu danych.
Nowa funkcjonalność powiązań danych na poziomie elementu stanowi duży krok naprzód. Wcześniej były dostępne tylko na poziomie pola, obecnie każdy element może mieć powiązanie danych, co pokrywa znacznie więcej przypadków użycia.
Funkcjonalność jednego kliknięcia przekształca każdy element w przycisk. Można tworzyć powiązania danych zmieniające zmienne lub linkujące do innych dashboardów czy zewnętrznych źródeł.
Podczas demo Adela prezentuje praktyczne zastosowanie zmiennych szablonowych w powiązaniach danych. System umożliwia wykorzystanie automatycznego uzupełniania, gdzie zmienna staje się parametrem zapytania w URL-u, co pozwala dynamicznie przekazywać kontekst między dashboardami.
Całkowicie przepisane przesuwanie i powiększanie
Ihor całkowicie przepisał funkcjonalność przesuwania i powiększania – jedno z najbardziej oczekiwanych ulepszeń. „Wcześniej to była imitacja przesuwania i powiększania. Teraz mamy w pełni funkcjonalne doświadczenie” – wyjaśnia inżynier.
Kluczowe ulepszenia obejmują:
- Pozycjonowanie względem dowolnej krawędzi zamiast tylko lewego górnego rogu
- Poprawione zachowanie połączeń podczas rotacji elementów
- Funkcję auto-dopasowania automatycznie dostosowującą elementy do ekranu
- Rozwiązanie problemów z różnymi rozmiarami ekranów
Matt Ryer komentuje entuzjastycznie intuicyjność interfejsu, dodając że budował podobne rzeczy i wie, że naprawa takich problemów nie jest łatwa.
Plany rozwoju obejmujące AI
Ihor prezentuje fascynujące plany na przyszłość:
- Dynamiczne układy: programmatyczne tworzenie układów dla specyficznych przypadków użycia
- Inteligentne pozycjonowanie: automatyczne pozycjonowanie elementów w zależności od danych
- Wizualizacja w locie: tworzenie wizualizacji na bieżąco
- Integracja z AI: planowana integracja z asystentem do generowania układów
Szczególnie interesująca jest wzmianka o integracji z AI. Ihor ujawnia, że w najbliższym hackathonie zespół będzie eksplorować ideę generowania układów przez AI.
Matt Ryer widzi potencjał połączenia z asystentem Grafana, ponieważ wszystkie elementy w Canvas to JSON, co prawdopodobnie umożliwia już teraz współpracę z asystentem.
Społeczność wykracza poza standardowe zastosowania
Jednym z najbardziej zaskakujących odkryć było stworzenie gry wieloosobowej z wykorzystaniem Canvas Panel podczas hackathonu. Drew opisuje: podłączyli system do bazy danych ze strumieniem na żywo, tworząc interaktywną grę wieloosobową.
Matt Ryer żartobliwie pyta o możliwość zagrania, na co Drew odpowiada, że gra nie została jeszcze wdrożona, lecz może to nastąpić w niedalekiej przyszłości.
Zespół aktywnie zachęca do tworzenia własnych elementów. Adela wyjaśnia filozofię: ludzie mają różne przypadki użycia, dlatego trudno znaleźć jeden element satysfakcjonujący wszystkich. Z tego powodu zespół silnie zachęca do tworzenia własnych elementów i składania PR-ów.
Drew dodaje praktyczną informację o tworzeniu przewodnika dla programistów w celu ustanowienia wytycznych. Zespół chętnie przegląda propozycje interesujących, użytecznych typów elementów przeznaczonych dla społeczności.
Podstawy dla początkujących
Podczas demo na żywo Adela demonstruje podstawy dla osób rozpoczynających przygodę z Canvas. Proces zaczyna się od dodania wizualizacji Canvas z listy dostępnych paneli, po czym system startuje z domyślnym elementem wartości metryki.
Tworzenie połączeń jest intuicyjne – najechanie kursorem nad element pokazuje punkty zakotwiczenia, które można przeciągać między elementami. Każdy element ma sekcję konfiguracji z opcjami umiejscowienia, pozycjonowania i tła. Powiązania danych i akcje można tworzyć na poziomie pola lub elementu, natomiast przełącznik w ustawieniach odsłania eksperymentalne typy elementów.
Na pytanie o animowane SVG Drew odpowiada jasno: można je używać, lecz nie można dostosowywać koloru. Jest to świetna sugestia do przyszłych ulepszeń w zakresie szczegółowej kontroli stylizacji.
Dla złożonych SVG Drew sugeruje rozbicie na oddzielne pliki i kontrolowanie jako indywidualne ikony, które można nakładać na siebie.
W przyszłości planowane są ulepszenia w zarządzaniu plikami. Drew ujawnia istnienie ekscytujących nowych rozwiązań w zapleczu dla przechowywania plików, z których Canvas skorzysta, co oznacza potencjalnie wcześniejsze wprowadzenie bezpośredniego przesyłania obrazów przez interfejs.
Możliwości importu zewnętrznych formatów
David wspomina o zapytaniu z Grafanacon dotyczącym importera Visio. Drew potwierdza, że zespół rozważa import Draw.io lub Visio, dodając że w poprzednim hackathonie wspierali import formatu DXF – otwartego formatu CAD.
Matt Ryer sugeruje potencjał dla formatów tekstowych jak Mermaid, ponieważ modele językowe będą w tym bardzo skuteczne.
Drew ujawnia istotny szczegół techniczny: wszystkie elementy w Canvas to JSON, więc można napisać własny skrypt do generowania panelu Canvas. To otwiera możliwości automatyzacji tworzenia skomplikowanych układów – od migracji z innych narzędzi po generowanie w oparciu o dane.
Kluczowy insight
Projektuj wokół rzeczywistości, nie danych
Standardowo myślimy: Dashboard to sposób na pokazanie danych – tworzymy wykresy, tabele i metryki odzwierciedlające strukturę baz danych i systemów monitoringu.
W praktyce okazuje się: Najlepsze dashboardy odzwierciedlają rzeczywistość biznesową – piece w pizzerii, turbiny na farmie wiatrowej, linie produkcyjne w fabryce. Drew ujął to trafnie: patrzenie przez 8 godzin dziennie na dashboard powinno być piękne i intuicyjne.
Dlaczego to istotne: Gdy dashboard wygląda jak prawdziwy proces biznesowy, ludzie natychmiast wiedzą gdzie jest problem i co robić. Operator pizzerii widzi czerwony piec i wie, że musi go sprawdzić – nie musi dekodować wykresu temperatury.
Test na jutro: Następnym razem projektując dashboard, zamiast pytać „jakie dane pokazać?” spytaj „jak ten proces wygląda w rzeczywistości?” i zaprojektuj wizualną kopię prawdziwego miejsca pracy.
Ten wpis jest częścią kolekcji notatek z wartościowych podcastów, webinarów i prezentacji. Oryginalne źródło: Grafana Campfire 🔥- Using Canvas Panel (Grafana Community Call – June 2025)
Dodaj komentarz
Musisz się zalogować, aby móc dodać komentarz.