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

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 instalēt @tremor/react

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

   imports"@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 [email protected] @tremor/react

Tagad noņemsim nevajadzīgo kodu savā src/App.js failu. Šeit ir mūsu sākuma kods App.js:

imports"./App.css";
imports"@tremor/react/dist/esm/tremor.css";
eksportētnoklusējumafunkcijuApp() {
atgriezties (


Mūsu lieliskā reakcijas informācijas panelis</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:

funkcijuMērinstrumentu panelis() {
atgriezties<div>Mērinstrumentu panelisdiv>;
}
eksportētnoklusējuma Mērinstrumentu panelis;

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

imports Mērinstrumentu panelis no"./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:

imports {
 Karte,
 Nosaukums,
 Teksts,
 ColGrid,
 Apgabala diagramma,
 Progresa josla,
 metrika,
 Flex,
} no"@tremor/reaģēt";
funkcijuMērinstrumentu panelis() {
atgriezties (


 {/* Galvenā sadaļa */}
 "mt-6">
 
"h-96" /> 
 </Karte>
 {/* KPI sadaļa */}
 2} gapX="gap-x-6" gapY="gap-y -6" marginTop="mt-6">
 
 {/* Vietturis, lai iestatītu augstumu */}
 
"h-28" />
 </Card> 
 </ColGrid>
 </main>
 );
}
eksportēt noklusējuma informācijas panelis;
Apvalka blokā ir dažādi komponenti, kas jūs importējat faila augšdaļā. Ja priekšskatīsit to savā pārlūkprogrammā, redzēsiet tikai divus tukšus blokus.
Jūs 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  rinda ar šādu:
 
 
Pēc ka pirms return paziņojuma pievienojiet šādu masīvu (šie ir dati, kas tiks parādīti informācijas paneļa galvenajā sadaļā):
 
 // Dati, kas jāparāda uz galvenā sadaļa
const data = [
 {
 Mēnesis: "21. janvāris",
 Pārdošana: 2890,
 Peļņa: 2400,
 },
 {
 Mēnesis: "febr. 21",
 Pārdošana: 1890,
 Peļņa: 1398,
 },
 // ...
 {
 Mēnesis: "22. janvāris",
 Pārdošana: 3890,
 Peļņa: 2980,
 },
];
const valueFormatter = (skaitlis) =>< /span>
${Intl.NumberFormat("us").formāts (number).toString()};
Pēc tam failam pēc valueFormatter pievienojiet šādu kodu:
 
 // Dati, kas jāparāda KPI sadaļa
const kategorijas = [
 {
 nosaukums: "Pārdošana",
 metrika: "12 699 ASV dolāri",
 procentuālā vērtība: 15,9,
 mērķis: "$ 80 000",
 },
 {
 nosaukums: "Peļņa",
 metrika: "45 564 ASV dolāri" span>,
 procentuālā vērtība: 36,5,
 mērķis: “125 000 ASV dolāru”,
 },
 {
 nosaukums: "Klienti",
 metrika: "1072",
 procentuālā vērtība:  53,6,
 mērķis: "2000",
 },
 {
 nosaukums: “Gada pārdošanas pārskats”,
 metrika: “201 072 ASV dolāri”,
 procentuālā vērtība: 28,7,
 mērķis: "700 000 ASV dolāru",
 },
];
 kategorijas objektu masīvs, jums ir jākartē katrs objekts, lai parādītu datus atsevišķos Kartes komponentos. Vispirms izdzēsiet Kartes komponentu sadaļā KPI un pēc tam aizstājiet to ar šo kodu:
 
 {categories.map((item) => span> (
 
 {item.title}</Text>
 {item.metric}</Metric> 
 "mt-4">
  truncate={true}
 >{`${item.percentageValue}% (${item.metric} )`}</Teksts>
 {item.target}</Teksts>
 </Flex>
  percentValue={ item.percentageValue}
 marginTop="mt-2"
 />
 </Karte>
))}
Un tas arī viss. Jūs esat izveidojis savu pirmo informācijas paneli, izmantojot Tremor. Skatiet savu informācijas paneli, izpildot npm start. Tam jābūt līdzīgam iepriekš redzamajam ekrānuzņēmumam.
 Tremor komponentu pielāgošana
Trīce ļauj pielāgot, izmantojot rekvizītus. Jums būs jāpārskata tā komponenta dokumentācija, kuru vēlaties pielāgot, un jāpārbauda visi rekvizīti, kas iekļauti to noklusējuma vērtībās.
Piemēram, ja jums ir , varat paslēpt x asi, nododot balstu showXAxis={false} vai mainīt augstumu, izmantojot augstums={h-40}. Rekvizīti, kas deklarē Tailwind CSS atrodamās vērtības, piemēram, izmēru, atstarpes, krāsas un pārējo, ir jāizmanto Tailwind utilīta klases.
 Ērti izveidojiet sarežģītus reaģēšanas informācijas paneļus
Pateicoties komponentu bibliotēkām, piemēram, Tremor, jums nav jāveido visas viena jūsu lietotāja saskarnes daļa no nulles. Izmantojot tādu bibliotēku kā Tremor, varat ietaupīt gan laiku, gan galvassāpes, veidojot sarežģītas atsaucīgas lietotāja saskarnes.