Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор. Прочетете още.

Изграждането на сложен потребителски интерфейс в React, като табло за управление, може да бъде обезсърчително, ако го правите от нулата. За щастие, не е нужно да го правите.

Една от най-добрите библиотеки с компоненти, които можете да използвате, е Tremor, която ви позволява да създавате модерни, отзивчиви табла за управление в React с малко усилия. Научете как да използвате Tremor за създаване на табла за управление в React.

Какво е тремор?

Tremor е модерна библиотека с компоненти на потребителския интерфейс с отворен код от ниско ниво за изграждане на табла за управление в React. Tremor се основава на Tailwind CSS, React и Recharts (друга базирана на компонент библиотека за диаграми за React). Освен това използва икони от Heroicons.

Той може да се похвали с над 20 компонента с всички основни елементи за изграждане на фантастичен аналитичен интерфейс като диаграми, карти и елементи за въвеждане. Библиотеката включва малки, модулни компоненти като значки, бутони, падащи менюта и раздели, които можете да комбинирате, за да създадете пълноценни табла за управление.

instagram viewer

Това, което прави Tremor да се откроява, е, че е силно убеден, така че стига да сте съгласни с решенията на библиотеката, можете да стартирате професионално изглеждащо табло за управление на вятъра.

Tremor поддържа персонализиране, разбира се, и го прави лесно чрез системата за подпори на React.

Как да започнете с тремор

Започнете от създаване на ново приложение React използвайки create-react-app пакет (или Vite, ако това е, което предпочитате).

Ще трябва вече да имате инсталирани Node.js и npm на вашата система. Можете да потвърдите това, като стартирате възел --версия и тогава npm --версия на командния ред. Ако някоя от командите липсва, можете да ги инсталирате с помощта на прост процес; вижте това ръководство за инсталиране на Node.js и npm на Windows, например.

Настройване на вашия проект React с Tremor

  1. Отворете вашия терминал и навигирайте до предпочитаната от вас директория, като използвате cd команда.
  2. Бягай npx create-react-app тремор-урок. Тази команда ще създаде ново React приложение, наречено тремор-урок на вашата система в текущата директория.
  3. Превключете към директорията на приложението, като стартирате cd тремор-урок.
  4. Инсталирайте Tremor във вашия проект React, като използвате следната команда: 
    npm инсталирайте @tremor/react
  5. След като инсталирате Tremor, импортирайте пакета във вашия App.js (или main.jsx ако сте използвали Vite), като добавите следния ред в долната част на вашите импортирания: 
    импортиране"@tremor/react/dist/esm/tremor.css";

Въпреки че Tremor използва Tailwind CSS, не е необходимо да го инсталирате в приложението си React, за да използвате библиотеката. Това е така, защото Tremor вече има вътрешно настроен Tailwind. Въпреки това, ако искате, вижте нашия урок за инсталиране на Tailwind CSS в React.

След това инсталирайте Heroicons във вашия проект, като използвате следната команда:

npm i [email protected] @tremor/react

Сега нека премахнем ненужния код в нашия src/App.js файл. Ето нашия начален код App.js:

импортиране"./App.css";
импортиране"@tremor/react/dist/esm/tremor.css";
износпо подразбиранефункцияПриложение() {
връщане (


Нашето страхотно табло за управление на React</h1> 
 </div>
 );
}

След това създайте специален компоненти подпапка във вашата src папка. В това компоненти папка, създайте нова Dashboard.js файл и добавете следния код:

функцияТабло() {
връщане<див>Таблодив>;
}
износпо подразбиране Табло;

Импортирайте компонента Dashboard App.js чрез добавяне на следния израз след други импортирания:

импортиране Табло от"./components/Dashboard";

И накрая, покажете компонента във вашето приложение React, като добавите под h1 елемент.

Създаване на табло за управление с Tremor

За да създадете пълно табло с помощта на Tremor, с минимални усилия, изберете един от наличните блокове. Блоковете са предварително изградени оформления, съставени от различни малки модулни компоненти.

Добра отправна точка е Блокове на тремора раздел, който показва различни типове предварително изградени блокови компоненти, които можете да използвате. Обвивките за оформление, например, ви позволяват да сглобите различни компоненти, за да създадете табло за управление.

Първо добавете следния код към вашия Dashboard.js файл:

импортиране {
 карта,
 Заглавие,
 Текст,
 ColGrid,
 AreaChart,
 Прогресбар,
 Метрика,
 Флекс,
} от"@tremor/реагирайте";
функцияТабло() {
връщане (

Табло за управление на продажбите<<span>/Заглавие></span><br> Това е примерно табло за управление, изградено <span>с</span> Tremor.<<span>/Текст></span>



 {/* Основен раздел */}
 "mt-6">
 
"h-96" /> 
 </Карта>
 {/* раздел KPI */}
 2} gapX="gap-x-6" gapY="gap-y -6" marginTop="mt-6">
 
 {/* Заместител за задаване на височина */}
 
"h-28" />
 </Card> 
 </ColGrid>
 </main>
 );
}
експортиране по подразбиране Табло за управление;


Блокът на черупката съдържа различни компоненти, които импортирате в горната част на файла. Ако визуализирате това в браузъра си, ще видите само два празни блока.


Можете да попълните блоковете си с предварително изградени компоненти на Tremor, като диаграма, карта или таблица. Можете да изтеглите данни от API (REST или GraphQL) или да ги съхранявате в масив от обекти направо във вашия компонент.


За да добавите компонент към своя блок на обвивката, заменете 
 ред със следното:
 
 Ефективност<<span>/Title></span><p><text>Сравнение между Продажби и Печалба<<span>/Текст></span></text></p>
<p><areachart></areachart> marginTop=<span>"mt-4"</span><br> data={data}<br> категории={[<span>"Продажби"</span>, <span>"Печалба"</span>]}<br> dataKey=<span>"Месец"</span><br> colors={[<span>"indigo"</span>, <span>"fuchsia"</span>]}<br> valueFormatter={ valueFormatter}<br> height=<span>"h-80"</span><br>/></p>



След че, добавете следния масив преди израза си за връщане (това са данните, които ще покаже основната секция на таблото за управление):
 
 // Данни за показване в на основен раздел
const данни = [
 {
 Месец: „21 януари“,
 Продажби: 2890,
 Печалба: 2400,
 },
 {
 Месец: "февр. 21",
 Продажби: 1890,
 Печалба: 1398,
 },
 // ...
 {
 Месец: „22 януари“,
 Продажби: 3890,
 Печалба: 2980,
 },
];
const valueFormatter = (число) =>< /span>


$ ${Intl.NumberFormat("us").format (number).toString()};


След това добавете следния код към вашия файл след valueFormatter:
 
 // Данни за показване в KPI раздел
const категории = [
 {
 заглавие: "Продажби",
 показател: "$ 12 699",
 процентна стойност: 15,9,
 цел: "$ 80 000",
 },
 {
 заглавие: "Печалба",
 показател: "$45 564" span>,
 процентна стойност: 36,5,
 цел: "$125 000",
 },
 {
 заглавие: „Клиенти“,
 показател: „1072“,
 процентна стойност:  53.6,
 цел: "2000",
 },
 {
 заглавие: „Общ преглед на годишните продажби“,
 показател: „$201 072“,
 процентна стойност: 28,7,
 цел: "$ 700 000",
 },
];


За категории масив от обекти, трябва да картографирате всеки обект, за да покажете данните в отделни компоненти на Карта. Първо изтрийте компонента Card в секцията KPI и след това го заменете с този код:
 
 {categories.map((item) => span> (
 
 {item.title}</Text>
 {item.metric}</Metric> 
 "mt-4">
  truncate={true}
 >{`${item.percentageValue}% (${item.metric} )`}</Текст>
 {item.target}</Text>
 </Flex>


  percentageValue={ item.percentageValue}
 marginTop="mt-2"
 />
 </Card>
))}


И това е всичко. Създадохте първото си табло за управление с Tremor. Вижте вашето табло за управление, като стартирате npm start. Трябва да е подобно на екранната снимка по-горе.


 Персонализиране на компонентите на Tremor


Tremor позволява персонализиране с помощта на подпори. Ще трябва да прегледате документацията на компонента, който искате да персонализирате, и да проверите всички включени свойства с техните стойности по подразбиране.


Например, ако имате , можете да скриете оста x, като подадете подпората showXAxis={false} или промените височината с height={h-40}. За реквизити, деклариращи стойности, намерени в Tailwind CSS, като оразмеряване, разстояние, цветове и останалото, трябва да използвате помощни класове на Tailwind.


 Изградете сложни табла за управление на React с лекота


Благодарение на библиотеките с компоненти като Tremor, не е необходимо да изграждате всеки една част от вашия потребителски интерфейс от нулата. Използването на библиотека като Tremor може да ви спести както времето, така и главоболието от създаването на сложни, реагиращи потребителски интерфейси.