enero 30, 2023

Cree impresionantes tableros en React usando Tremor

Crear una interfaz de usuario compleja en React, como un tablero, puede ser desalentador si lo hace desde cero. Afortunadamente, no tienes que hacerlo.


Una de las mejores bibliotecas de componentes que puede usar es Tremor, que le permite crear paneles modernos y receptivos en React con poco esfuerzo. Aprenda a usar Tremor para crear paneles en React.


¿Qué es el temblor?

Tremor es una biblioteca moderna, de código abierto y de bajo nivel de componentes de interfaz de usuario para crear paneles en React. Tremor se basa en Tailwind CSS, React y Recharts (otra biblioteca de gráficos basada en componentes para React). Además, utilice los iconos de Heroicons.

Cuenta con más de 20 componentes con todos los elementos esenciales para crear una excelente interfaz analítica, como gráficos, pestañas y elementos de entrada. La biblioteca incluye pequeños componentes modulares, como insignias, botones, menús desplegables y pestañas, que puede combinar para crear paneles integrales.

Lo que distingue a Tremor es que es muy obstinado, por lo que siempre que esté de acuerdo con las decisiones de la biblioteca, puede tener un panel de control de aspecto profesional en un instante.

Tremor admite la personalización, por supuesto, y lo hace fácil a través del sistema de accesorios de React.

Empezando con el temblor

Captura de pantalla de un tablero creado con la biblioteca de componentes Tremor

Comience creando una nueva aplicación React usando el paquete create-react-app (o Vite si lo prefiere).

Deberá tener Node.js y npm instalados en su sistema. Puede confirmar esto ejecutando nodo –versión después npm –versión en una línea de comando. Si falta alguno de los comandos, puede instalarlos mediante un proceso simple; consulte esta guía para instalar Node.js y npm en Windows, por ejemplo.

Configurando tu proyecto React con Tremor

  1. Abra su terminal y navegue a su directorio preferido usando el archivo CD dominio.
  2. Correr npx create-react-app tremor-tutorial. Este comando creará una nueva aplicación React llamada temblor-tutorial en su sistema en el directorio actual.
  3. Cambie al directorio de la aplicación ejecutando temblor-tutorial cd.
  4. Instale Tremor en su proyecto React usando el siguiente comando:
     npm install @tremor/react 
  5. Una vez que Tremor esté instalado, importe el paquete a su archivo Aplicación.js (o principal.jsx si usó Vite) agregando la siguiente línea en la parte inferior de sus importaciones:
     import "@tremor/react/dist/esm/tremor.css"; 

Si bien Tremor usa Tailwind CSS, no necesita instalarlo en su aplicación React para usar la biblioteca. Esto se debe a que Tremor ya configuró Tailwind internamente. Sin embargo, si lo desea, consulte nuestro tutorial sobre cómo instalar Tailwind CSS en React.

Luego, instala Heroicons en tu proyecto usando el siguiente comando:

 npm i heroicons@1.0.6 @tremor/react 

Ahora, eliminemos el código innecesario en nuestro src/Aplicación.js expediente. Aquí está nuestro código inicial Aplicación.js:

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

Luego, crea un archivo dedicado componentes subcarpeta en su origen bolsa para la escuela. En eso componentes carpeta, crea una nueva Tablero.js archivo y agregue el siguiente código:

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

export default Dashboard;

Importe el componente Dashboard en Aplicación.js agregando la siguiente declaración después de otras importaciones:

 import Dashboard from "./components/Dashboard";

Finalmente, muestre el componente en su aplicación React agregando bajo la h1 elemento.

Creación de un tablero con Tremor

Para crear un tablero completo usando Tremor, con el mínimo esfuerzo, seleccione uno de los bloques disponibles. Los bloques son diseños prediseñados formados por varios componentes modulares pequeños.

Un buen lugar para comenzar es la sección de bloques de Tremor, que le muestra diferentes tipos de componentes de bloques de construcción que puede usar. Por ejemplo, las estructuras de diseño le permiten juntar varios componentes para crear un tablero.

Primero, agregue el siguiente código a su Tablero.js expediente:

 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>

      {}
      <Card marginTop="mt-6">
        <div className="h-96" />
      </Card>

      {}
      <ColGrid numColsMd={2} gapX="gap-x-6" gapY="gap-y-6" marginTop="mt-6">
        <Card>
          {}
          <div className="h-28" />
        </Card>
      </ColGrid>
    </main>
  );
}

export default Dashboard;

El bloque de shell contiene varios componentes que importa en la parte superior del archivo. Si obtiene una vista previa en su navegador, solo verá dos bloques en blanco.

Puede llenar sus bloques con los componentes integrados de Tremor, como un gráfico, un tablero o una tabla. Puede extraer datos de una API (REST o GraphQL) o almacenarlos en una matriz de objetos directamente dentro de su componente.

Para agregar un componente a su bloque de shell, reemplace el archivo

línea con lo siguiente:
 <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"
/>

A continuación, agregue la siguiente matriz antes de la suya Retorno declaración (estos son los datos que se mostrarán en la sección principal del tablero):

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

Luego, agrega el siguiente código a tu after formateador de valores:

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

Para el categorías matriz de objetos, cada objeto debe ser mapeado para mostrar los datos por separado Papel componentes Primero, elimine el componente Tarjeta en la sección KPI y luego reemplácelo con este código:

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

Y esto es todo Ha creado su primer tablero con Tremor. Ver su panel de control ejecutando iniciar npm. Debería verse similar a la captura de pantalla anterior.

Personalización de componentes de tremor

Tremor permite la personalización mediante accesorios. Deberá revisar la documentación del componente que desea personalizar y verificar todas las propiedades incluidas con sus valores predeterminados.

Por ejemplo, si tienes un puedes ocultar el eje x pasando el accesorio mostrarXAxis={falso} o cambiar la altura usando altura={h-40}. Para accesorios que declaran valores que se encuentran en Tailwind CSS, como tamaño, espaciado, colores y similares, debe usar las clases de utilidad Tailwind.

Cree paneles de React complejos con facilidad

Gracias a las bibliotecas de componentes como Tremor, no tiene que crear cada parte de la interfaz de usuario desde cero. El uso de una biblioteca como Tremor puede ahorrarle el tiempo y el dolor de cabeza de crear interfaces de usuario receptivas complejas.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *