Créer de superbes tableaux de bord en React avec Tremor

Construire une interface utilisateur complexe en 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’efforts. Découvrez comment utiliser Tremor pour créer des tableaux de bord dans React.

Qu’est-ce que Tremor ?

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 outre, il utilise les icônes de Heroicons.

Elle se vante de plus de 20 composants avec tous les éléments essentiels pour construire une interface analytique fantastique comme des graphiques, des cartes et des éléments de saisie. 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 à part entière.

Tremor se distingue par le fait qu’il est très libre d’opinion. Tant que vous êtes d’accord avec les décisions de la bibliothèque, vous pouvez créer un tableau de bord professionnel en un clin d’œil.

Tremor prend en charge la personnalisation, bien sûr, et facilite la tâche via le système d’accessoires de React.

Comment démarrer avec Tremor

Commencez par créer une nouvelle application React à l’aide du package create-react-app (ou Vite si c’est ce que vous préférez).

Vous devez avoir Node.js et npm installés sur votre système. Vous pouvez le confirmer en exécutant node –version et ensuite npm –version sur une ligne de commande. Si l’une ou l’autre de ces commandes est manquante, vous pouvez les installer à l’aide d’un processus simple ; voir ce guide d’installation de Node.js et de npm sous Windows, par exemple.

Configurer votre projet React avec Tremor

1. Ouvrez votre terminal et naviguez vers votre répertoire préféré en utilisant la fonction cd commande.
2. Exécuter npx create-react-app tremor-tutorial. Cette commande va créer une nouvelle application React appelée tremor-tutorial sur votre système dans le répertoire courant.
3. Passez dans le répertoire des applications en exécutant cd tremor-tutorial.
4. Installez Tremor dans votre projet React en utilisant la commande suivante :

    npm install @tremor/react 

5. Une fois que vous avez installé Tremor, importez le paquet dans votre projet React. App.js (ou main.jsx si vous avez utilisé Vite) en ajoutant la ligne suivante au 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. Toutefois, si vous le souhaitez, consultez notre tutoriel sur l’installation de Tailwind CSS dans React.

Ensuite, installez Heroicons dans votre projet en utilisant la commande suivante :

 npm i heroicons@1.0.6 @tremor/react 

Maintenant, supprimons le code inutile dans notre projet src/App.js fichier. 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 fichier dédié composants dans le sous-dossier src dossier. Dans ce composants créez un nouveau dossier Dashboard.js 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 le code suivant <Dashboard /&gt ; sous le h1 élément.

Création d’un tableau de bord avec Tremor

Pour créer un tableau de bord complet avec Tremor, avec un minimum d’effort, sélectionnez l’un des blocs disponibles. Les blocs sont des mises en page préconstruites composées de différents petits composants modulaires.

Un bon point de départ est la section des blocs de Tremor qui présente différents types de composants de blocs pré-construits que vous pouvez utiliser. Les coquilles 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 Dashboard.js fichier :

 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 coquille contient différents composants que vous importez en haut du fichier. Si vous prévisualisez ce fichier dans votre navigateur, vous ne verrez que deux blocs vides.

Vous pouvez remplir vos blocs avec les composants préconstruits 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 l’élément <div className= »h-96″ /&gt ; ligne avec ce qui suit :

 <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"
/>

 

Après cela, ajoutez le tableau suivant avant votre return (ce sont les données qui seront affichées dans la section principale du tableau de bord) :

 // 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()};

 

Ensuite, ajoutez le code suivant à votre fichier après valueFormatter:

 // 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",
  },
];

 

Pour le catégories vous devez passer par chaque objet pour afficher les données dans des tableaux séparés. Carte composants. Tout d’abord, supprimez le composant Card dans la section KPI, puis remplacez-le par ce code :

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

 

Et c’est tout. Vous avez créé votre premier tableau de bord avec Tremor. Visualisez votre tableau de bord en exécutant npm start. Il devrait être similaire à la capture d’écran ci-dessus.

Personnalisation des composants de Tremor

Tremor permet la personnalisation en utilisant des props. Vous devrez consulter la documentation du composant que vous voulez personnaliser et vérifier toutes les propriétés incluses avec leurs valeurs par défaut.

Par exemple, si vous avez un <LineChart /&gt ;, vous pouvez cacher l’axe des x en passant la propriété showXAxis={false} (en anglais) ou modifiez la hauteur en utilisant height={h-40}. Pour les props déclarant des valeurs trouvées dans Tailwind CSS, comme le dimensionnement, l’espacement, les couleurs, et le reste, vous devez utiliser les classes utilitaires de Tailwind.

Construire des tableaux de bord complexes en React avec facilité

Grâce aux bibliothèques de composants comme Tremor, vous n’avez pas besoin de construire chaque partie de votre interface utilisateur à partir de zéro. L’utilisation d’une bibliothèque comme Tremor peut vous faire gagner du temps et vous éviter les maux de tête liés à la création d’interfaces utilisateur réactives complexes.