Tutoriály

Středně pokročilý30 min

Naučíte se:

  • Real-time připojení přes WebSocket
  • Interaktivní komponenty grafů
  • Agregace a filtrování dat
  • Responzivní rozvržení dashboardu
  • Živá oznámení

Aplikace pro real-time dashboard

Sestavte si datový dashboard s živými aktualizacemi a interaktivními grafy

Real-time dashboardy jsou nezbytné pro sledování obchodních metrik, stavu systému nebo jakýchkoli dat, která se často mění. V tomto tutoriálu si vytvoříte plně funkční dashboard s živými aktualizacemi.

Sledujte, jak se vaše grafy aktualizují v reálném čase, jakmile přitečou data.

Předpoklady

  • Účet v ZBuild Studio
  • Základní znalost vizualizace dat
  • Dokončené tutoriály 'Začínáme'

Funkce dashboardu

Náš real-time dashboard bude obsahovat:

Karty s živými metrikami

Klíčová čísla, která se aktualizují v reálném čase

Grafy časových řad

Historická data s živými aktualizacemi

Datové tabulky

Řaditelné a filtrovatelné datové mřížky

Systém upozornění

Oznámení při překročení prahových hodnot

Filtry časového rozsahu

Zobrazení dat pro konkrétní časová období

Exportní funkce

Stažení dat ve formátu CSV nebo PDF

Krok 1: Definujte svůj dashboard

Popište své požadavky na dashboard nástroji Conductor.

Chci vytvořit real-time analytický dashboard.

Funkce:
- Karty s živými metrikami (celkový počet uživatelů, aktivní relace, tržby)
- Graf časových řad zobrazující aktivitu v čase
- Geografická mapa polohy uživatelů
- Tabulka posledních událostí s automatickým obnovením
- Upozornění na anomálie
- Výběr časového rozsahu pro historická data
- Export do CSV/PDF

Design: Tmavý motiv, responzivní, čisté UI
Real-time: Aktualizace přes WebSocket každých 5 sekund

Krok 2: Architektura WebSocket

Virtuoso nastaví WebSocket připojení pro doručování dat v reálném čase.

  1. Nastavení WebSocket serveru se správou místností
  2. Klientské připojení s automatickým opětovným připojením
  3. Streamování dat v nastavitelných intervalech
  4. Efektivní delta aktualizace (pouze změněná data)
  5. Indikátory stavu připojení

Krok 3: Komponenty grafů

Interaktivní grafy krásně zobrazí vaše data.

Grafy se automaticky animují, když dorazí nová data přes WebSocket.

Liniové grafy

Data časových řad s plynulými animacemi

Sloupcové grafy

Srovnávací vizualizace dat

Koláčové/Prstencové grafy

Rozdělení distribuce

Mapy

Geografická vizualizace dat

Krok 4: Systém upozornění

Nakonfigurujte upozornění, která vás informují, když metriky překročí prahové hodnoty.

  1. Definování prahových podmínek
  2. Sledování prahových hodnot v reálném čase
  3. Toast oznámení pro výstrahy
  4. Historie a potvrzování upozornění
  5. Volitelná e-mailová/SMS oznámení

Co jste vytvořili

  • Real-time streamování dat přes WebSocket
  • Interaktivní, animované grafy
  • Responzivní rozvržení dashboardu
  • Systém upozornění a oznámení
  • Funkcionalita exportu dat

Další kroky

SaaS platforma pro více nájemců

Proměňte svůj dashboard v SaaS produkt

Publikovat na Marketplace

Prodejte šablonu svého dashboardu

Jste připraveni vytvořit svůj dashboard?

Začněte stavět svůj real-time dashboard ještě dnes.

Začít stavětDalší tutoriály