I componenti di visualizzazione Looker sono una suite di componenti basati su React disponibili nel pacchetto open source @looker/visualizations
.
I componenti di visualizzazione accettano un valore Query.client_id
o un ID query da un'esplorazione di Looker o un ID dashboard da una dashboard di Looker e visualizzano una visualizzazione lato client senza un iframe.
Questi componenti possono essere utilizzati fin dal primo utilizzo, personalizzati o trattati come formati di dati puri per passare dati puliti da un Explore di Looker, per semplificare la creazione di visualizzazioni personalizzate.
I componenti di visualizzazione Looker sono progettati per essere utilizzati in un ambiente React che è stato autenticato con l'API Looker utilizzando l'SDK TypeScript/JavaScript. Questo passaggio viene gestito automaticamente quando crei informazioni con il framework delle estensioni Looker.
Creazione di visualizzazioni con i componenti di visualizzazione di Looker
La suite di componenti di visualizzazione di Looker fornisce due componenti di alto livello per lavorare con i dati:
Query
: gestisce il recupero dei dati e carica la risposta in Contesto reazioneVisualization
: accetta i dati restituiti daQuery
e utilizza gli adattatori di configurazione per visualizzare su una pagina il grafico appropriato
Attualmente, i dati possono essere visualizzati con i seguenti tipi di grafico:
- A linee
- Area
- Grafico a dispersione
- Sparkline
- Valore singolo
- Barra
- Colonna
- Tabella
- Torta
Sono in corso lo sviluppo di altri tipi di grafici.
Per visualizzare le tabelle delle proprietà per ogni tipo di grafico, visita la pagina della documentazione relativa alle tabelle delle proprietà Visualizzazione e Query.
Per visualizzare le opzioni di configurazione disponibili per ogni tipo di grafico, visita il parco giochi con visualizzazione sul portale per gli sviluppatori di Looker.
Perché utilizzare i componenti della visualizzazione?
I componenti di visualizzazione migliorano e semplificano il processo di rendering di una visualizzazione da Looker all'interno di un'applicazione, offrono più tempo agli sviluppatori e offrono più opzioni per personalizzare ed estendere le visualizzazioni da Looker.
- Incorporamento migliorato: i componenti di visualizzazione consentono agli sviluppatori di incorporare una visualizzazione di Looker in un'applicazione senza iframe. Ciò può migliorare le prestazioni, il monitoraggio e la personalizzazione.
- Integrazione semplificata: i componenti di visualizzazione possono poi essere combinati con altri componenti di
@looker/components
per creare composizioni ed esperienze front-end completamente nuove. - Personalizzazione: è più facile personalizzare le visualizzazioni incorporate quando si utilizzano i componenti di visualizzazione rispetto a quando utilizzi gli iframe. Inoltre, con i componenti di visualizzazione, gli sviluppatori possono creare applicazioni altamente personalizzate molto più velocemente, senza dover creare un livello di visualizzazione da zero.
- Semplificazione: i componenti di visualizzazione migliorano la portabilità delle visualizzazioni di Looker e semplificano le interazioni con l'API Looker.
Installazione dei componenti di visualizzazione
Per iniziare, aggiungi il pacchetto NPM dei componenti di visualizzazione Looker:
- NPM:
npm install @looker/visualizations
- YARN:
yarn add @looker/visualizations
Dovrai inoltre soddisfare alcune dipendenze delle app peer: Looker/componenti, Reazione e Componenti con stile:
- NPM:
npm install @looker/components react react-dom styled-components
- YARN:
yarn add @looker/components react react-dom styled-components
Puoi trovare informazioni sull'installazione e sull'utilizzo del pacchetto dei componenti di visualizzazione nel documento README, disponibile in GitHub e NPM.
Passaggi successivi
- Utilizzare i componenti di visualizzazione e la proprietà
dashboard
per visualizzare una visualizzazione semplice - Utilizzare i componenti di visualizzazione e la proprietà
query
per visualizzare una visualizzazione semplice - Utilizzare i componenti di visualizzazione per eseguire visualizzazioni personalizzate
- Utilizzare i componenti di visualizzazione per creare una visualizzazione personalizzata
- Tabelle delle proprietà Visualizzazione e Query