Crea fantastiche dashboard in React utilizzando Tremor

Costruire un'interfaccia utente complessa in React, come una dashboard, può essere scoraggiante se lo fai da zero. Per fortuna, non devi farlo.

Una delle migliori librerie di componenti che puoi utilizzare è Tremor che ti consente di creare dashboard moderni e reattivi in ​​​​React con poco sforzo. Scopri come utilizzare Tremor per creare dashboard in React.

Cos'è il tremore?

Tremor è una libreria di componenti dell'interfaccia utente moderna, open source e di basso livello per la creazione di dashboard in React. Tremor si basa su Tailwind CSS, React e Recharts (un'altra libreria di grafici basata su componenti per React). Inoltre, utilizza le icone di Heroicons.

Vanta oltre 20 componenti con tutti gli elementi essenziali per creare una fantastica interfaccia analitica come grafici, schede ed elementi di input. La libreria include piccoli componenti modulari come badge, pulsanti, menu a discesa e schede, che puoi combinare per creare dashboard completi.

Ciò che distingue Tremor è che è molto supponente, quindi fintanto che sei d'accordo con le decisioni della biblioteca, puoi attivare una dashboard dall'aspetto professionale in un attimo.

Tremor supporta la personalizzazione, ovviamente, e lo rende facile tramite il sistema di oggetti di scena di React.

Come iniziare con il tremore

A partire da creazione di una nuova app React usando il creare-reagire-app pacchetto (o Vite se è quello che preferisci).

Dovrai avere già Node.js e npm installati sul tuo sistema. Puoi confermarlo correndo nodo --versione poi npm --versione su una riga di comando. Se manca uno dei comandi, puoi installarli utilizzando un semplice processo; vedere questa guida a installare Node.js e npm su Windows , Per esempio.

Impostare il tuo progetto React con Tremor

1. Apri il tuo terminale e vai alla tua directory preferita usando il file CD comando.
2. Correre npx create-react-app tremor-tutorial . Questo comando creerà una nuova applicazione React chiamata tremore-tutorial sul tuo sistema nella directory corrente.
3. Passa alla directory dell'app eseguendo cd tremor-tutorial .
4. Installa Tremor nel tuo progetto React usando il seguente comando:

    npm install @tremor/react

5. Una volta installato Tremor, importa il pacchetto nel tuo file App.js (o main.jsx se hai utilizzato Vite) aggiungendo la seguente riga in fondo alle tue importazioni:

    import "@tremor/react/dist/esm/tremor.css";

Sebbene Tremor utilizzi Tailwind CSS, non è necessario installarlo nella tua app React per utilizzare la libreria. Questo perché Tremor ha già impostato Tailwind internamente. Tuttavia, se lo desideri, dai un'occhiata al nostro tutorial su installare Tailwind CSS in React .

Quindi, installa Heroicons nel tuo progetto usando il seguente comando:

 npm i heroicons@1.0.6 @tremor/react

Ora, rimuoviamo il codice non necessario nel nostro src/App.js file. Ecco il nostro codice iniziale App.js :

 import "./App.css"; 
import "@tremor/react/dist/esm/tremor.css"; 
export default function App() { 
  return ( 
    <div> 
      <h1>Our Awesome React Dashboard</h1>  
    </div> 
  ); 
} 

Quindi, crea un file dedicato componenti sottocartella nel tuo src cartella. In ciò componenti cartella, creane una nuova Dashboard.js file e aggiungere il seguente codice:

costo di sostituzione della batteria del macbook pro 2015

 function Dashboard() { 
  return <div>Dashboard</div>; 
} 
 
export default Dashboard; 

Importa il componente Dashboard in App.js aggiungendo la seguente dichiarazione dopo altre importazioni:

 import Dashboard from "./components/Dashboard"; 

Infine, visualizza il componente nella tua app React aggiungendo sotto il h1 elemento.

Creazione di una dashboard con Tremor

Per creare una dashboard completa utilizzando Tremor, con il minimo sforzo, seleziona uno dei blocchi disponibili. I blocchi sono layout predefiniti costituiti da diversi piccoli componenti modulari.

Un buon punto di partenza è I blocchi del tremore sezione che mostra diversi tipi di componenti di blocchi predefiniti che è possibile utilizzare. Le shell di layout, ad esempio, consentono di mettere insieme diversi componenti per creare un dashboard.

Innanzitutto, aggiungi il seguente codice al tuo Dashboard.js file:

 import { 
  Card, 
  Title, 
  Text, 
  ColGrid, 
  AreaChart, 
  ProgressBar, 
  Metric, 
  Flex, 
} from "@tremor/react"; 
 
function Dashboard() { 
  return ( 
    <main> 
      <Title>Sales Dashboard</Title> 
      <Text>This is a sample dashboard built with Tremor.</Text> 
 
      {/* Main section */} 
      <Card marginTop="mt-6"> 
        <div className="h-96" /> 
      </Card> 
 
      {/* KPI section */} 
      <ColGrid numColsMd={2} gapX="gap-x-6" gapY="gap-y-6" marginTop="mt-6"> 
        <Card> 
          {/* Placeholder to set height */} 
          <div className="h-28" /> 
        </Card> 
      </ColGrid> 
    </main> 
  ); 
} 
 
export default Dashboard; 
 

Il blocco shell contiene diversi componenti che importi nella parte superiore del file. Se lo visualizzi in anteprima nel tuo browser, vedrai solo due blocchi vuoti.

Puoi popolare i tuoi blocchi con i componenti predefiniti di Tremor, come un grafico, una scheda o una tabella. Puoi estrarre i dati da un'API (REST o GraphQL) o memorizzarli in un array di oggetti direttamente all'interno del tuo componente.

Per aggiungere un componente al tuo blocco shell, sostituisci il file

 <Title>Performance</Title> 
 
<Text>Comparison between Sales and Profit</Text> 
 
<AreaChart 
  marginTop="mt-4" 
  data={data} 
  categories={["Sales", "Profit"]} 
  dataKey="Month" 
  colors={["indigo", "fuchsia"]} 
  valueFormatter={valueFormatter} 
  height="h-80" 
/> 
 

 // Data to display in the main section 
const data = [ 
  { 
    Month: "Jan 21", 
    Sales: 2890, 
    Profit: 2400, 
  }, 
  { 
    Month: "Feb 21", 
    Sales: 1890, 
    Profit: 1398, 
  }, 
// ... 
  { 
    Month: "Jan 22", 
    Sales: 3890, 
    Profit: 2980, 
  }, 
]; 
 
const valueFormatter = (number) => 
 
$ ${Intl.NumberFormat("us").format(number).toString()}; 
 

 // Data to display in KPI section 
const categories = [ 
  { 
    title: "Sales", 
    metric: "$ 12,699", 
    percentageValue: 15.9, 
    target: "$ 80,000", 
  }, 
  { 
    title: "Profit", 
    metric: "$ 45,564", 
    percentageValue: 36.5, 
    target: "$ 125,000", 
  }, 
  { 
    title: "Customers", 
    metric: "1,072", 
    percentageValue: 53.6, 
    target: "2,000", 
  }, 
  { 
    title: "Yearly Sales Overview", 
    metric: "$ 201,072", 
    percentageValue: 28.7, 
    target: "$ 700,000", 
  }, 
]; 
 

 {categories.map((item) => ( 
  <Card key={item.title}> 
    <Text>{item.title}</Text> 
    <Metric>{item.metric}</Metric> 
    <Flex marginTop="mt-4"> 
      <Text 
        truncate={true} 
      >{`${item.percentageValue}% (${item.metric})`}</Text> 
 
      <Text>{item.target}</Text> 
    </Flex> 
 
    <ProgressBar 
      percentageValue={item.percentageValue} 
      marginTop="mt-2" 
    /> 
  </Card> 
))}