Componenti di visualizzazione Looker

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 di un'esplorazione Looker o un ID dashboard da una dashboard Looker e visualizzano una visualizzazione lato client senza un iframe.

Questi componenti possono essere utilizzati immediatamente, personalizzati o trattati come formati di dati puri per passare dati puliti da un'esplorazione di Looker per semplificare la creazione di visualizzazioni personalizzate.

I componenti di visualizzazione di Looker sono progettati per essere utilizzati in un ambiente React autenticato con l'API Looker utilizzando l'SDK TypeScript/JavaScript. Questo passaggio viene gestito automaticamente quando crei 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 delle reazioni
  • Visualization: accetta i dati restituiti da Query e utilizza gli adattatori di configurazione per visualizzare il grafico adeguatamente personalizzato su una pagina.

Al momento è possibile eseguire il rendering dei seguenti tipi di grafici:

  • A linee
  • Area
  • Grafico a dispersione
  • Sparkline
  • Valore singolo
  • A barre
  • Colonna
  • Tabella
  • Torta

Sono in fase di sviluppo altri tipi di grafici.

Per visualizzare le tabelle delle proprietà per ogni tipo di grafico, visita la pagina della documentazione Visualizzazione delle tabelle delle proprietà di query e query.

Per visualizzare le opzioni di configurazione disponibili per ogni tipo di grafico, visualizza il parco giochi di visualizzazione sul portale sviluppatori Looker.

Perché utilizzare i componenti di visualizzazione?

I componenti di visualizzazione migliorano e semplificano il processo di rendering di una visualizzazione da Looker all'interno di un'applicazione, risparmiando tempo agli sviluppatori e offrendo agli sviluppatori più opzioni per personalizzare ed estendere le proprie 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 il rendimento, il monitoraggio e la personalizzazione.
  • Integrazione semplice: i componenti di visualizzazione possono 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 agli iframe. Inoltre, con i componenti di visualizzazione, gli sviluppatori possono creare applicazioni altamente personalizzate molto più rapidamente, senza dover creare un livello di visualizzazione completamente nuovo.
  • 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 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

Le informazioni sull'installazione e l'utilizzo del pacchetto di componenti di visualizzazione sono disponibili nel documento README, disponibile in GitHub e NPM.

Passaggi successivi