Izveidojiet lieliskus informācijas paneļus programmā React, izmantojot Tremor

Sarežģīta lietotāja saskarnes, piemēram, informācijas paneļa, izveide programmā React var būt biedējoša, ja to darāt no nulles. Par laimi, jums tas nav jādara.

Viena no labākajām komponentu bibliotēkām, ko varat izmantot, ir Tremor, kas ļauj ar nelielu piepūli izveidot modernus, atsaucīgus informācijas paneļus programmā React. Uzziniet, kā izmantot Tremor, lai programmā React izveidotu informācijas paneļus.

Kas ir trīce?

Tremor ir moderna, atvērtā pirmkoda zema līmeņa lietotāja interfeisa komponentu bibliotēka informācijas paneļu izveidei programmā React. Tremor pamatā ir Tailwind CSS, React un Recharts (cita uz komponentiem balstīta React diagrammu bibliotēka). Papildus tam tiek izmantotas ikonas no Heroicons.

Tajā ir vairāk nekā 20 komponenti ar visu nepieciešamo, lai izveidotu fantastisku analītisku saskarni, piemēram, diagrammas, kartes un ievades elementus. Bibliotēkā ir iekļauti mazi, modulāri komponenti, piemēram, nozīmītes, pogas, nolaižamās izvēlnes un cilnes, kuras varat apvienot, lai izveidotu pilnvērtīgus informācijas paneļus.

Tremor izceļas ar to, ka tas ir ļoti pārliecināts, tāpēc, ja vien jums ir labi ar bibliotēkas lēmumiem, jūs varat ātri iedarbināt profesionāla izskata informācijas paneli.

Tremor, protams, atbalsta pielāgošanu, un to ir viegli izdarīt, izmantojot React rekvizītu sistēmu.

Kā sākt ar trīci

Sāciet ar izveidojot jaunu React lietotni izmantojot izveidot-reaģēt-lietotni iepakojums (vai Vite, ja tas ir tas, ko vēlaties).

imessage nedarbojas operētājsistēmā Mac

Sistēmā jau ir jābūt instalētai Node.js un npm. To var apstiprināt, palaižot mezgls -- versija un tad npm — versija komandrindā. Ja trūkst kādas komandas, varat tās instalēt, izmantojot vienkāršu procesu; skatiet šo rokasgrāmatu Node.js un npm instalēšana operētājsistēmā Windows , piemēram.

Reakcijas projekta iestatīšana ar trīci

1. Atveriet savu termināli un dodieties uz vēlamo direktoriju, izmantojot cd komandu.
2. Skrien npx izveidot-reaģēt-lietotnes tremor-apmācība . Šī komanda izveidos jaunu React lietojumprogrammu ar nosaukumu trīce-pamācība jūsu sistēmā pašreizējā direktorijā.
3. Pārslēdzieties uz lietotņu direktoriju, palaižot cd tremor-apmācība .
4. Instalējiet Tremor savā React projektā, izmantojot šādu komandu:

    npm install @tremor/react

5. Kad esat instalējis Tremor, importējiet pakotni savā App.js (vai galvenais.jsx ja izmantojāt Vite), importa apakšā pievienojot šādu rindiņu:

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

Lai gan Tremor izmanto Tailwind CSS, jums tas nav jāinstalē React lietotnē, lai izmantotu bibliotēku. Tas ir tāpēc, ka Tremor jau ir iekšēji iestatīts Tailwind. Tomēr, ja vēlaties, skatiet mūsu apmācību par Instalējot Tailwind CSS programmā React .

Pēc tam instalējiet Heroicons savā projektā, izmantojot šādu komandu:

 npm i heroicons@1.0.6 @tremor/react

Tagad noņemsim nevajadzīgo kodu savā src/App.js failu. Šeit ir mūsu sākuma kods 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> 
  ); 
} 

Pēc tam izveidojiet īpašu sastāvdaļas apakšmapē jūsu src mapi. Tajā sastāvdaļas mapi, izveidojiet jaunu Dashboard.js failu un pievienojiet šādu kodu:

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

Importējiet informācijas paneļa komponentu App.js pievienojot šādu paziņojumu pēc citiem importiem:

 import Dashboard from "./components/Dashboard"; 

Visbeidzot, parādiet komponentu savā React lietotnē, pievienojot zem h1 elements.

Informācijas paneļa izveide ar trīci

Lai izveidotu pilnīgu informācijas paneli, izmantojot Tremor, ar minimālu satraukumu, atlasiet vienu no pieejamajiem blokiem. Bloki ir iepriekš izveidoti izkārtojumi, kas sastāv no dažādiem maziem moduļu komponentiem.

Labs sākumpunkts ir Tremora bloki sadaļa, kurā ir parādīti dažādi iepriekš izveidoto bloku komponentu veidi, kurus varat izmantot. Piemēram, izkārtojuma apvalki ļauj apvienot dažādus komponentus, lai izveidotu informācijas paneli.

Vispirms pievienojiet tālāk norādīto kodu savam Dashboard.js fails:

 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; 
 

Apvalka blokā ir dažādi komponenti, kurus importējat faila augšdaļā. Ja priekšskatīsit to savā pārlūkprogrammā, redzēsit tikai divus tukšus blokus.

Varat aizpildīt savus blokus ar Tremor iepriekš izveidotajiem komponentiem, piemēram, diagrammu, karti vai tabulu. Varat iegūt datus no API (REST vai GraphQL) vai saglabāt tos objektu masīvā tieši savā komponentā.

Lai čaulas blokam pievienotu komponentu, nomainiet

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