Gumawa ng Mga Kahanga-hangang Dashboard sa React Gamit ang Tremor

Ang pagbuo ng isang kumplikadong user interface sa React, tulad ng isang dashboard, ay maaaring nakakatakot kung ginagawa mo ito mula sa simula. Sa kabutihang palad, hindi mo kailangang gawin ito.

Ang isa sa mga pinakamahusay na library ng component na maaari mong gamitin ay ang Tremor na nagbibigay-daan sa iyong lumikha ng mga moderno, tumutugon na mga dashboard sa React na may kaunting pagsisikap. Alamin kung paano gamitin ang Tremor para gumawa ng mga dashboard sa React.

Ano ang Panginginig?

Ang Tremor ay isang moderno, open-source, mababang antas na library ng component ng UI para sa pagbuo ng mga dashboard sa React. Nabubuo ang panginginig sa ibabaw ng Tailwind CSS, React, at Recharts (isa pang component-based charting library para sa React). Higit pa rito, gumagamit ito ng mga icon mula sa Heroicons.

Ipinagmamalaki nito ang higit sa 20 mga bahagi kasama ang lahat ng mga mahahalaga para sa pagbuo ng isang kamangha-manghang analytical interface tulad ng mga chart, card, at mga elemento ng input. Kasama sa library ang maliliit, modular na bahagi tulad ng mga badge, button, dropdown, at tab, na maaari mong pagsamahin upang lumikha ng mga ganap na dashboard.

Ang namumukod-tangi kay Tremor ay ang pagiging mataas ang opinyon nito, kaya hangga't okay ka sa mga desisyon ng library, maaari mong patakbuhin ang isang dashboard na mukhang propesyonal sa madalian.

Sinusuportahan ng Tremor ang pagpapasadya, siyempre, at ginagawang madali itong gawin sa pamamagitan ng props system ng React.

Paano Magsimula Sa Panginginig

Magsimula sa pamamagitan ng paggawa ng bagong React app gamit ang gumawa-react-app package (o Vite kung iyon ang gusto mo).

Kakailanganin mo na magkaroon ng Node.js at npm na naka-install sa iyong system. Maaari mong kumpirmahin ito sa pamamagitan ng pagtakbo node --bersyon at pagkatapos npm --bersyon sa isang command line. Kung nawawala ang alinmang command, maaari mong i-install ang mga ito gamit ang isang simpleng proseso; tingnan ang gabay na ito sa pag-install ng Node.js at npm sa Windows , Halimbawa.

Pag-set Up ng Iyong React Project Gamit ang Tremor

1. Buksan ang iyong terminal at mag-navigate sa iyong ginustong direktoryo gamit ang cd utos.
2. Takbo npx create-react-app tremor-tutorial . Ang utos na ito ay lilikha ng bagong React application na tinatawag panginginig-tutorial sa iyong system sa kasalukuyang direktoryo.
3. Lumipat sa direktoryo ng app sa pamamagitan ng pagtakbo cd tremor-tutorial .
4. I-install ang Tremor sa iyong React project gamit ang sumusunod na command:

    npm install @tremor/react

5. Kapag na-install mo na ang Tremor, i-import ang package sa iyong App.js (o main.jsx kung ginamit mo ang Vite) sa pamamagitan ng pagdaragdag ng sumusunod na linya sa ibaba ng iyong mga import:

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

Bagama't gumagamit ang Tremor ng Tailwind CSS, hindi mo kailangang i-install ito sa iyong React app para magamit ang library. Ito ay dahil ang Tremor ay mayroon nang internal na naka-set up na Tailwind. Gayunpaman, kung gusto mo, tingnan ang aming tutorial sa pag-install ng Tailwind CSS sa React .

Susunod, i-install ang Heroicons sa iyong proyekto gamit ang sumusunod na command:

 npm i heroicons@1.0.6 @tremor/react

Ngayon, tanggalin natin ang hindi kinakailangang code sa ating src/App.js file. Narito ang aming starter code 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> 
  ); 
} 

Susunod, lumikha ng isang nakatuon mga bahagi subfolder sa iyong src folder. Sa ganyan mga bahagi folder, gumawa ng bago Dashboard.js file at idagdag ang sumusunod na code:

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

I-import ang bahagi ng Dashboard sa App.js sa pamamagitan ng pagdaragdag ng sumusunod na pahayag pagkatapos ng iba pang mga pag-import:

 import Dashboard from "./components/Dashboard"; 

Panghuli, ipakita ang bahagi sa iyong React app sa pamamagitan ng pagdaragdag sa ibaba ng h1 elemento.

Paggawa ng Dashboard na May Panginginig

Para gumawa ng kumpletong dashboard gamit ang Tremor, na may kaunting kaguluhan, pumili ng isa sa mga available na block. Ang mga bloke ay mga prebuilt na layout na binubuo ng iba't ibang maliliit na modular na bahagi.

Ang isang magandang panimulang punto ay Mga bloke ng panginginig seksyon na nagpapakita ng iba't ibang uri ng mga prebuilt block na bahagi na magagamit mo. Ang mga shell ng layout, halimbawa, ay nagbibigay-daan sa iyong pagsama-samahin ang iba't ibang bahagi upang lumikha ng isang dashboard.

Una, idagdag ang sumusunod na code sa iyong Dashboard.js file:

 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; 
 

Ang shell block ay naglalaman ng iba't ibang bahagi na iyong ini-import sa itaas ng file. Kung i-preview mo ito sa iyong browser, makikita mo lang ang dalawang walang laman na bloke.

Maaari mong punan ang iyong mga bloke ng mga prebuilt na bahagi ng Tremor, tulad ng isang tsart, card, o talahanayan. Maaari kang kumuha ng data mula sa isang API (REST o GraphQL) o iimbak ito sa isang hanay ng mga bagay sa loob mismo ng iyong bahagi.

kung paano mag-download ng isang buong website para sa offline na pagtingin

Upang magdagdag ng isang bahagi sa iyong shell block, palitan ang

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