Terning.js, open Source Dashboard ramme: Ultimate Guide-Cube.js Blog

terning.js er en open source-ramme til opbygning af analytiske internetapplikationer. Det bruges primært til at opbygge interne business intelligence-værktøjer eller til at tilføje kundevendte analyser til en eksisterende applikation. I de fleste tilfælde er det første trin i opbygningen af en sådan applikation et analytics-dashboard. Det starter normalt med— ” lad os tilføje et analytics-dashboard til vores adminpanel.”Så, som det altid sker i programmeludvikling, bliver tingene mere komplicerede, meget mere komplicerede.

da vi begyndte at arbejde på Cube.js, vi ønskede at bygge et værktøj, som er let at starte, men skalerer let i funktioner, kompleksitet, og datavolumen. Terning.js lægger et solidt fundament for dit fremtidige analytiske system, uanset om det er en selvstændig applikation eller indlejret i den eksisterende.

du kan tænke på denne tutorial som “terning.js 101.”Jeg leder dig gennem de grundlæggende trin i design af det første dashboard fra databasen til visualiseringer.

live demo af det endelige dashboard er tilgængeligt her. Den fulde kildekode er på Github.

arkitektur
backend
terning.js Data Schema
Frontend
opbygning af et Dashboard
næste trin

arkitektur

størstedelen af moderne internetapplikationer er bygget som en enkeltsidet applikation, hvor frontend er adskilt fra backend. Backend også normalt er opdelt i flere tjenester, efter en microservice arkitektur.

terning.js omfavner denne tilgang. Konventionelt kører du terning.JS Backend som en tjeneste. Det styrer forbindelsen til din database, herunder forespørgsler kø, caching, pre-aggregation, og mere. Det udsætter også en API til din frontend-app til at opbygge dashboards og andre analysefunktioner.

backend

Analytics starter med data og data ligger i en database. Det er det første, vi skal have på plads. Du har sandsynligvis allerede en database til din applikation, og det er normalt bare fint at bruge til analyse. Moderne populære databaser som Postgres eller Myskl er velegnede til en simpel analytisk arbejdsbyrde. Enkelt sagt mener jeg et datavolumen med mindre end 1 milliard rækker.

MongoDB er også fint, det eneste du skal tilføje er MongoDB-stik til BI. Det gør det muligt at udføre kode på toppen af dine MongoDB data. Det er gratis og kan nemt hentes fra MongoDB hjemmeside. En ting mere at huske på er replikation. Det betragtes som en dårlig praksis at køre analyseforespørgsler mod din produktionsdatabase, hovedsagelig på grund af ydelsesproblemerne. Terning.js kan dramatisk reducere mængden af en databases arbejdsbyrde, men jeg vil stadig anbefale at oprette forbindelse til replikaen.

for at opsummere—Hvis du bruger Postgres eller Myskl, skal du bare oprette en replika, så er vi klar til at gå. Hvis du bruger MongoDB—Hent MongoDB stik til BI og oprette en replika.

hvis du ikke har nogen data til instrumentbrættet, kan du indlæse vores eksempel e-handel Postgres datasæt.

 $ krølle http://cube.dev/downloads/ecom-dump.sql > ecom-dump.
  $ createdb ecom
  $ pskl --dbname ecom - f ecom-dump.

nu, da vi har data i databasen, er vi klar til at oprette terningen.js Backend service. Kør følgende kommandoer i din terminal:

 $ npm install-g cubejs-cli 
$ cubejs Opret dashboard-backend-d postgres

kommandoerne ovenfor installer terning.js CLI og oprette en ny tjeneste, konfigureret til at arbejde med Postgres database.

terning.js bruger miljøvariabler til konfiguration. Det bruger miljøvariabler, der starter med CUBEJS_. For at konfigurere forbindelsen til vores database skal vi angive DB-type og navn. I terningen.JS project folder erstat indholdet af .env med følgende:

 CUBEJS_API_SECRET=hemmelighed 
 CUBEJS_DB_TYPE=postgres 
 CUBEJS_DB_NAME=ecom

terning.js Data Schema

det næste trin er at oprette en terning.JS data skema. Terning.js bruger dataskemaet til at generere en kode, som vil blive udført i din database. Dataskemaet er ikke en erstatning for CVR. Det er designet til at gøre det genanvendeligt og give det en struktur, samtidig med at den bevarer al sin kraft. Grundelementerne i dataskemaet er measures og dimensions.

mål kaldes kvantitative data, såsom antallet af solgte enheder, antal unikke besøg, fortjeneste og så videre.

Dimension kaldes kategoriske data, såsom tilstand, køn, Produktnavn eller tidsenheder (f.eks. dag, uge, måned).

konventionelt er skemafiler placeret i mappen schema. Her er et eksempel på skemaet, som kan bruges til at beskrive brugernes data.

 terning(`brugere`, {
  kvm: 'vælg * fra brugere`, 
 foranstaltninger: { 
  antal: { 
  : 'id', 
  type: 'antal` 
 } 
 }, 
 dimensioner: { 
 by: { 
 kvm: `by', 
  type ` 'string` 
 }, 
 signedUp: { 
  kvm ` 'created_at', 
  type ` 'tid` 
 }, 
 firmanavn: { 
  kvm ` 'firmanavn', 
  type ` ' string` 
 } 
 } 
 });

nu, med ovenstående skema på plads, kan vi sende forespørgsler til terningen.js backend om brugernes data. Terning.JS-forespørgsler er almindelige javascript-objekter. Normalt har den en eller flere measures, dimensions og timeDimensions.

hvis vi vil besvare spørgsmålet “Hvor er vores brugere baseret?”vi kan sende følgende forespørgsel til terningen.js:

 { 
 foranstaltninger:, 
 dimensioner: 
 }

Cube.js vil generere den nødvendige KVL baseret på skemaet, udføre det, og sende resultatet tilbage.

lad os oprette en lidt mere kompliceret forespørgsel. Vi kan tilføje en timeDimensions for at se, hvordan forholdet mellem forskellige byer har ændret sig hver måned i løbet af det sidste år. For at gøre dette tilføjer vi en signedUp tidsdimension, grupperer den efter månedligt og filtrerer kun sidste års tilmeldinger.

 { 
 foranstaltninger:, 
  dimensioner:, 
 timedimensioner: 
 }] 
 }

Cube.js kan generere enkle skemaer baseret på databasens tabeller. Lad os generere skemaer, vi har brug for til vores dashboard, og start derefter en dev-server.

$ cubejs generer-t brugere, ordrer
  $ npm run dev

du kan inspicere genererede skemaer og sende testforespørgsler ved at åbne en udvikling legeplads på http://localhost:4000.

Frontend

vi bygger vores frontend og dashboard med React ved hjælp af terningen.JS reagerer klient. Men du kan bruge enhver ramme eller bare vanilje javascript til at opbygge en frontend med terning.js. Denne tutorial viser dig, hvordan du opbygger et dashboard i ren javascript.Vi sætter alt op ved hjælp af Create React-appen, som officielt understøttes af React-teamet. Det pakker alle afhængigheder til React app og gør det nemt at komme i gang med et nyt projekt. Kør følgende kommandoer i din terminal:

$ 
 $ cd dashboard-frontend
 $ npm start

den sidste linje starter en server på port 3000 og åbner din internetsøgemaskine på http://localhost:3000.

vi bygger vores brugergrænseflade med Reactstrap, som er en React-indpakning til Bootstrap 4. Installer Reactstrap og Bootstrap fra NPM. Reactstrap inkluderer ikke Bootstrap CSS, så dette skal installeres separat:

 $ npm installer reactstrap bootstrap --Gem

Importer Bootstrap CSS i filen src/index.js før import ./index.css:

 import ' bootstrap / dist / css / bootstrap.min.css';

nu er vi klar til at bruge Reactstrap-komponenterne.

det næste trin er at installere Cube.JS klient til at hente data fra serveren og vores visualisering bibliotek for at vise det. Til denne tutorial vil vi bruge genopladninger. Terning.js er visualisering agnostiker, hvilket betyder at du kan bruge ethvert bibliotek, du ønsker. Vi bruger også øjeblik og tal til pænt at formatere datoer og tal.

 $ npm install-save @cubejs-client / core @cubejs-client / react recharts moment numeral

endelig er vi færdige med afhængigheder, så lad os gå videre og oprette vores første diagram.Udskift indholdet af src/App.js med følgende:

 import React, { Component } fra "react"; 
 import { 
 Bar, 
 Bar, 
 Aks, 
 Aks, 
 værktøjstip, 
 ResponsiveContainer
 } fra "genopladninger"; 
 import cubejs from "@cubejs-client/core"; 
 import moment from "moment"; 
 import { QueryRenderer } from "@cubejs-client/react"; 
 const cubejsApi = cubejs(process.env.REACT_APP_CUBEJS_TOKEN, { 
 apiUrl: process.env.REACT_APP_API_URL 
 }); 
 const dateFormatter = item => moment(item).format("MMM YY"); 
 class App extends Component { 
 render() { 
 return ( 
 <QueryRenderer 
 query={{ 
 measures: , 
 timedimensioner:, 
  granularitet: "måned" 
 } 
 ] 
 }} 
 cubejsApi={cubejsApi} 
  render= {({ resultSet }) => { 
 hvis (!resultatsæt) { 
  return "indlæsning..."; 
 } 
 tilbage ( 
 <ResponsiveContainer Bredde=" 100% " højde={300}> 
 <BarChart data={resultatsæt.chartPivot()}> 
 <e-mail: info (at) } /> 
 <Yaksi /> 
 <Tooltip labelFormatter={dateFormatter} /> 
 <Bar dataKey= " ordrer.tæl "fill=" rgba(106, 110, 229)" /> 
 </BarChart> 
 </ResponsiveContainer> 
 ); 
 }} 
 /> 
 ); 
 } 
 } 
 Eksporter standard App;

du kan tjekke dette eksempel i Kodesandfeltet nedenfor.

lad os se dybere på, hvordan vi indlæser data og tegner diagrammet.

først initialiserer vi terningen.JS API client:

 const cubejsApi = cubejs (proces.env.REACT_APP_CUBEJS_TOKEN, { 
  apiUrl: proces.env.REACT_APP_API_URL 
 });

Opret en .env-fil med følgende legitimationsoplysninger. I udviklingsmiljøet, terning.js håndhæver ikke brugen af token til at godkende forespørgsler, så du kan bruge enhver streng til dit token her. Du kan lære mere om brug og generering af tokens i produktionsmiljøet her i docs.

REACT_APP_CUBEJS_TOKEN=din-TOKEN 
REACT_APP_API_URL=http://localhost:4000/cubejs-api/v1

næste bruger vi Forespørgselsceruben.JS React komponent til at indlæse ordrer data.

 <forespørgsel 
  forespørgsel= {{
  foranstaltninger: , 
  timedimensioner:, 
  granularitet: "måned" 
 } 
 ] 
 }} 
 cubejsApi={cubejsApi} 
  render= {({ resultSet }) => { 
 // Render resultat 
 }} 
 />

forespørgsler udfører en API-anmodning til terningen.js backend og bruger render rekvisitter teknik til at lade dig gøre resultatet, men du vil. Vi har allerede dækket forespørgselsformatet ovenfor, men hvis du vil opdatere—her er forespørgselsformatet fuld reference.

parameteren renderfor Spørgerenderer er en funktion af typen ({error, resultSet, isLoading}) => React.Node. Udgangen af denne funktion vil blive gengivet af Forespørgselsrenderen. En resultSet er et objekt, der indeholder data opnået fra forespørgslen. Hvis dette objekt ikke er defineret, betyder det, at dataene stadig hentes.

resultSet giver flere metoder til datamanipulation, men i vores tilfælde har vi kun brug for chartPivot – metoden, som returnerer data i et format, der forventes af genopladninger.

vi plotter Ordredataene som et søjlediagram inde i en lydhør container.

 hvis (!resultatsæt) { 
  return "indlæsning..."; 
 } 
 tilbage ( 
 <ResponsiveContainer Bredde=" 100% " højde={300}> 
 <BarChart data={resultatsæt.chartPivot()}> 
 <e-mail: info (at) } /> 
 <Yaksi /> 
 <Tooltip labelFormatter={dateFormatter} /> 
 <Bar dataKey= " ordrer.tæl "fill=" rgba(106, 110, 229)" /> 
 </BarChart> 
 </ResponsiveContainer> 
 );

opbygning af et Dashboard

vi lærte at bygge et enkelt diagram med terning.js og Recharts, og vi er nu klar til at begynde at bygge hele instrumentbrættet. Der er nogle bedste fremgangsmåder med hensyn til design af dashboardets layout. Den almindelige praksis er at placere de vigtigste målinger på højt niveau øverst som enkeltværdidiagrammer, undertiden kaldet KPI ‘ er, og derefter liste de relevante opdelinger af disse målinger.

her er skærmbilledet af vores endelige dashboard med KPI ‘ er på toppen efterfulgt af bar og linjediagrammer.

lad os først refactorere vores diagram og udtrække den fælles kode til en genanvendelig <Chart /> komponent. Opret en src/Chart.js fil følgende indhold:

 import React fra "react"; 
  import { Card, CardTitle, CardBody, Cardtekst } fra "reactstrap"; 
  import {forespørgsel } fra "@cubejs-client / react"; 
 const Chart = ({ cubejsApi, title, query, render }) => ( 
 <Card> 
 <CardBody> 
 <CardTitle tag="h5">{title}</CardTitle> 
 <CardText> 
 <QueryRenderer 
 query={query} 
 cubejsApi={cubejsApi} 
 render={({ resultSet }) => { 
 if (!resultSet) { 
 return <div className="loader" />; 
 } 
 return render(resultSet); 
 }} 
 /> 
 </korttekst> 
 </CardBody> 
 </kort> 
 ); 
 Eksporter standarddiagram;

lad os derefter bruge denne komponent til at oprette instrumentbrættet. Erstat indholdet af src/App.js med følgende:

 import React, { Component } fra "react"; 
  import { Container, række, Col } fra "reactstrap"; 
 import { 
 AreaChart, 
 Area, 
 XAxis, 
 YAxis, 
 Tooltip, 
 ResponsiveContainer, 
 Legend, 
 BarChart, 
 Bar 
 } from "recharts"; 
 import moment from "moment"; 
 import numeral from "numeral"; 
 import cubejs from "@cubejs-client/core"; 
 import Chart from "./Chart.js"; 
 const cubejsApi = cubejs(process.env.REACT_APP_CUBEJS_TOKEN, { 
 apiUrl: process.env.REACT_APP_API_URL 
 }); 
  const numberFormatter = item = > tal(item).format("0,0"); 
 const dateFormatter = vare => øjeblik (vare).format ("MMM YY"); 
 const renderSingleValue = (resultatsæt, nøgle) => ( 
 <H1 højde={300}> {NumberFormat(resultatsæt.chartPivot ())}< / h1> 
 ); 
 klasse App udvider komponent { 
  render () {
  return ( 
 <beholder væske> 
 <række> 
 <oberst sm="4"> 
 <diagram 
 cubejsApi={cubejsApi}
 title="samlede brugere"
 forespørgsel={{ measures:}}
  render={resultSet = > renderSingleValue(resultSet, "brugere.tæller")} 
 /> 
 </oberst> 
 <oberst sm="4"> 
 <diagram 
 cubejsApi={cubejsApi}
 title="samlede ordrer"
 forespørgsel={{ measures:}}
  render={resultSet = > renderSingleValue(resultSet, "ordrer.tæller")} 
 /> 
 </oberst> 
 <oberst sm="4"> 
 <diagram 
 cubejsApi={cubejsApi} 
  title=" afsendte ordrer " 
  forespørgsel={{ 
  foranstaltninger: , 
  filtre: 
 } 
 ] 
 }} 
 render={resultSet = > renderSingleValue(resultSet, "ordrer.tæller")} 
 /> 
 </oberst> 
 </række> 
 <br /> 
 <br /> 
 <række> 
 <oberst sm="6"> 
 <diagram 
 cubejsApi={cubejsApi} 
  title= "nye brugere Over tid" 
 forespørgsel={{ 
 foranstaltninger: , 
 timedimensioner:, 
  granularitet: "måned" 
 } 
 ] 
 }} 
 render={resultatsæt => ( 
 <ResponsiveContainer Bredde=" 100% " højde={300}> 
 <AreaChart data={resultatsæt.chartPivot()}> 
 <datadata= "kategori" tickFormatter={dateFormatter} /> 
 <Tickformatter={numberFormatter} /> 
 <Tooltip labelFormatter={dateFormatter} /> 
 <område 
 type="monotone"
  dataKey="brugere.count " 
 name=" brugere "
 stroke= " rgb(106, 110, 229)" 
 fyld="rgba (106, 110, 229,.16)" 
 /> 
 </AreaChart> 
 </ResponsiveContainer> 
 )} 
 /> 
 </oberst> 
 <oberst sm="6"> 
 <diagram 
 cubejsApi={cubejsApi} 
  title=" ordrer efter Status Over tid " 
 forespørgsel={{ 
 foranstaltninger: , 
 dimensioner: , 
 timedimensioner:, 
  granularitet: "måned" 
 } 
 ] 
 }} 
 render={resultatsæt => { 
 tilbage ( 
 <ResponsiveContainer Bredde=" 100% " højde={300}> 
 <BarChart data={resultatsæt.chartPivot()}> 
 <Tickformatter={dateFormatter} dataKey="" /> 
 <Tickformatter={numberFormatter} /> 
 <Bar 
 stackId="a"
  dataKey="afsendt, ordrer.count "
  name= "afsendt" 
  fill= "#7DB3FF" 
 /> 
 <Bar 
 stackId="a"
  dataKey="behandling, ordrer.count "
  name= "Processing" 
  fill= "#49457B" 
 /> 
 <Bar 
 stackId="a"
  dataKey="afsluttet, ordrer.count "
  name= "Completed" 
  fill= "#FF7C78" 
 /> 
 <Legend /> 
 <Tooltip /> 
 </BarChart> 
 </ResponsiveContainer> 
 ); 
 }} 
 /> 
 </oberst> 
 </række> 
 </Container> 
 ); 
 } 
 } 
 Eksporter standard App;

det er nok til at bygge vores første dashboard. Prøv det i Kodeboksen nedenfor.

næste trin

vi har bygget et simpelt proof of concept dashboard med Cube.js. Du kan tjekke live demo her. Den fulde kildekode er tilgængelig på Github.

for at lære mere om Cube.JS backend-implementering, du kan henvise til implementeringsdokumentationen. Også her kan du finde flere tutorials om en række emner.

og deltag i vores Slack Community! Det er et godt sted at få hjælp og holde dig opdateret med nye udgivelser.

terning.js, open Source Dashboard ramme: Ultimate Guide