Créez des tableaux de bord impressionnants dans React à l'aide de Tremor

Construire une interface utilisateur complexe dans React, comme un tableau de bord, peut être intimidant si vous le faites à partir de zéro. Heureusement, vous n'avez pas à le faire.

L'une des meilleures bibliothèques de composants que vous pouvez utiliser est Tremor qui vous permet de créer des tableaux de bord modernes et réactifs dans React avec peu d'effort. Découvrez comment utiliser Tremor pour créer des tableaux de bord dans React.

Qu'est-ce qu'un tremblement ?

Tremor est une bibliothèque de composants d'interface utilisateur moderne, open source et de bas niveau pour la création de tableaux de bord dans React. Tremor s'appuie sur Tailwind CSS, React et Recharts (une autre bibliothèque de graphiques basée sur des composants pour React). En plus de cela, il utilise des icônes de Heroicons.

comment rendre votre ps4 plus rapide

Il contient plus de 20 composants avec tous les éléments essentiels pour créer une interface analytique fantastique comme des graphiques, des cartes et des éléments d'entrée. La bibliothèque comprend de petits composants modulaires tels que des badges, des boutons, des listes déroulantes et des onglets, que vous pouvez combiner pour créer des tableaux de bord complets.

Ce qui distingue Tremor, c'est qu'il est très opiniâtre, donc tant que vous êtes d'accord avec les décisions de la bibliothèque, vous pouvez lancer un tableau de bord d'aspect professionnel en un clin d'œil.

Tremor prend en charge la personnalisation, bien sûr, et le rend facile à faire via le système d'accessoires de React.

Comment démarrer avec le tremblement

Commence par créer une nouvelle application React en utilisant le créer-réagir-app package (ou Vite si c'est ce que vous préférez).

Vous devez déjà avoir installé Node.js et npm sur votre système. Vous pouvez le confirmer en exécutant noeud --version et alors npm --version sur une ligne de commande. Si l'une ou l'autre commande est manquante, vous pouvez les installer en utilisant un processus simple ; voir ce guide pour installation de Node.js et npm sous Windows , par exemple.

Configuration de votre projet React avec Tremor

1. Ouvrez votre terminal et accédez à votre répertoire préféré à l'aide du CD commande.
2. Cours npx créer-réagir-app tremblement-tutoriel . Cette commande créera une nouvelle application React appelée tremblement-tutoriel sur votre système dans le répertoire courant.
3. Basculez vers le répertoire de l'application en exécutant cd tremblement-tutoriel .
4. Installez Tremor dans votre projet React à l'aide de la commande suivante :

    npm install @tremor/react

5. Une fois que vous avez installé Tremor, importez le package dans votre App.js (ou alors main.jsx si vous avez utilisé Vite) en ajoutant la ligne suivante en bas de vos importations :

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

Bien que Tremor utilise Tailwind CSS, vous n'avez pas besoin de l'installer dans votre application React pour utiliser la bibliothèque. En effet, Tremor a déjà configuré Tailwind en interne. Cependant, si vous le souhaitez, consultez notre tutoriel sur installation de Tailwind CSS dans React .

Ensuite, installez Heroicons dans votre projet à l'aide de la commande suivante :

 npm i heroicons@1.0.6 @tremor/react

Maintenant, supprimons le code inutile dans notre src/App.js dossier. Voici notre code de démarrage dans 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> 
  ); 
} 

Ensuite, créez un espace dédié Composants sous-dossier dans votre src dossier. Dans ce Composants dossier, créez un nouveau Tableau de bord.js fichier et ajoutez le code suivant :

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

Importez le composant Dashboard dans App.js en ajoutant l'instruction suivante après les autres importations :

 import Dashboard from "./components/Dashboard"; 

Enfin, affichez le composant dans votre application React en ajoutant sous le h1 élément.

Créer un tableau de bord avec Tremor

Pour créer un tableau de bord complet à l'aide de Tremor, en toute simplicité, sélectionnez l'un des blocs disponibles. Les blocs sont des mises en page prédéfinies composées de différents petits composants modulaires.

Un bon point de départ est Blocs de tremblement section qui présente différents types de composants de blocs prédéfinis que vous pouvez utiliser. Les coques de mise en page, par exemple, vous permettent d'assembler différents composants pour créer un tableau de bord.

Tout d'abord, ajoutez le code suivant à votre Tableau de bord.js dossier:

 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; 
 

Le bloc shell contient différents composants que vous importez en haut du fichier. Si vous prévisualisez ceci dans votre navigateur, vous ne verrez que deux blocs vides.

comment protéger par mot de passe un fichier zip windows 10

Vous pouvez remplir vos blocs avec les composants prédéfinis de Tremor, comme un graphique, une carte ou un tableau. Vous pouvez extraire des données d'une API (REST ou GraphQL) ou les stocker dans un tableau d'objets directement dans votre composant.

Pour ajouter un composant à votre bloc shell, remplacez le

 <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> 
))}