使用 React 和 Tremor 进行数据可视化 - 附示例

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

各位程序员朋友们好！

对于React开发者（以及其他开发者）来说，编写仪表盘和数据可视化层可能是一项繁琐的工作。为了简化这项任务，让开发者能够更专注于应用程序逻辑和数据处理，Tremor库应运而生。本文将通过代码示例的方式介绍这个开源库。在文章中，我们将共同编写一个示例，该示例使用 TremorGitHub API作为信息源，并使用Tremor Charts作为展示层。

谢谢你！

👉 GitHub API 和 Tremor -LIVE demo
👉 GitHub API 和 Tremor示例 -source code

Copyright Note：项目改编自Svelte 版本，适用于React 和 Tremor，由.Robert Soriano

最终，该产品能够接受任何有效的 GitHub 用户名作为输入，从 GitHub 公共 API 获取数据，并渲染如下所示的一些图表：

为了更好地了解我们在使用 Tremor 时有哪些选择，让我们来看看TremorLabs开发的这款免费产品。

✨什么是震颤

Tremor是一个开源的 UI 组件库，它使 React 开发者能够快速创建仪表盘。其组件设计精美，提供完全交互式的用户界面和卓越的用户体验。

Tremor 由注重设计和美学的数据科学家和软件工程师开发，深受全球 React 开发人员的喜爱。

在本教程中，我将逐步指导您如何在 React 应用中添加 Tremor 并使用 Tremor 可视化数据。在此之前，让我们先了解一下为什么要使用 Tremor。

为什么要使用Tremor？

✅ 精美设计的 UI 组件
Tremor 提供各种设计精美的 UI 组件，让您在几分钟内即可构建多种 UI 布局。它基于流行的 Tailwind CSS 库构建，提供完全响应式且易于定制的 UI 组件。使用 Tremor，您无需担心美观性和响应性；这些 UI 组件经过专业设计，能够适应不同的屏幕尺寸。

✅ 快速简便的数据可视化库

Tremor 是一个快速便捷的数据可视化库，专为 React 开发者打造。只需几分钟阅读文档，您就可以使用 Tremor 创建精美的仪表盘和 UI 组件。

要使用 Tremor 创建图表，您只需将数据输入到图表组件中，指定 x 轴和 y 轴，Tremor 就会处理其余部分。

✅ 文档齐全

Tremor 的另一大亮点在于其文档。Tremor 的文档非常出色，易于使用和浏览，并提供了详细的代码示例。

文档描述了每个 UI 组件、如何使用它们以及 UI 组件所需的各种属性；从而使新老用户都能轻松探索和使用这些组件。

✅ 开源

Tremor 正在不断发展壮大，提供更多 UI 组件，例如图表、输入框和其他布局元素。它拥有一个由开发者、数据科学家和优秀贡献者组成的社区，他们持续维护和改进着这个库。作为开发者或用户，我们非常欢迎您为 Tremor 的发展贡献力量。

✨ 入门指南

深入理解概念的一个好方法是从零开始编写代码，不重复使用样板代码或预先编写好的层。为了贯彻这一原则，我们的示例将使用 create-react-app 创建，所有配置都将手动完成。开始吧！

👉创建 React代码库并集成Tremor

$ npx create-react-app my-project
$ cd my-project

复制以下代码安装 Tremor。

$ npm install @tremor/react

将 Tremor 样式表导入到您的App.js文件中，操作步骤如下：

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

完成以上步骤后，即可开始使用 Tremor。在接下来的章节中，我将指导您构建一个 GitHub 应用程序，该应用程序使用 Tremor 分析和可视化用户数据。用户界面包含三个页面：首页（需要输入）、图表页面和一个简单的错误页面。

进入该client/src文件夹，创建一个名为 components 的文件夹，其中包含Home.js、UserProfile.js和GitHubError.js组件。

该Home组件是应用程序的主页，其中包含一个输入字段，用于接收用户的用户名；该UserProfile组件显示用户信息；该GitHubError组件表示错误页面。

$ cd src
$ mkdir components
$ touch Home.js UserProfile.js GitHubError.js

安装React Router- 一个 JavaScript 库，使我们能够在 React 应用程序的页面之间导航React Icons。

$ $ npm install react-router-dom react-icons

在此处复制应用程序的 CSS 样式。

将以下代码复制到App.js文件中。以下代码片段使用 React Router 在网页之间进行导航。

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import GithubError from "./components/GithubError";
import Home from "./components/Home";
import UserProfile from "./components/UserProfile";
import "@tremor/react/dist/esm/tremor.css";

const App = () => {
   return (
       <BrowserRouter>
           <Routes>
               <Route path='/' element={<Home />} />
               <Route path='/profile/:username' element={<UserProfile />} />
               <Route path='/error' element={<GithubError />} />
           </Routes>
       </BrowserRouter>
   );
};

export default App;

👉家庭组件

更新Home.js文件，使其渲染一个接受用户 GitHub 用户名的输入字段。

import React, { useState } from "react";
import { FaGithubAlt } from "react-icons/fa";
import { useNavigate } from "react-router-dom";

const Home = () => {
   const navigate = useNavigate();
   const [username, setUsername] = useState("");

   const handleSubmit = (e) => {
       e.preventDefault();
       //navigates the user to the dynamic route
       navigate(`/profile/${username}`);
       setUsername("");
   };
   return (
       <div className='home'>
           <form className='home__form' onSubmit={handleSubmit}>
               <FaGithubAlt className='githubIcon' />
               <label htmlFor='username'>Enter your GitHub username</label>
               <input
                   value={username}
                   onChange={(e) => setUsername(e.target.value)}
                   name='username'
                   id='username'
               />
           </form>
       </div>
   );
};

export default Home;

👉 GitHubError 组件

当用户提供的用户名在 GitHub 上不存在时，将显示此组件。

import React from "react";
import { Link } from "react-router-dom";

const GithubError = ({ error }) => {
   return (
       <main className='errorContainer'>
           <h2 style={{ color: "#fff" }}>Github User: {error || "Not Found"}</h2>
           <Link to='/'>Go back</Link>
       </main>
   );
};

export default GithubError;

👉用户个人资料组件

此组件中会显示用户的 GitHub 详细信息。请将以下代码复制到UserProfile.js文件中：

import React, { useEffect, useState } from "react";
import { useParams, useNavigate } from "react-router-dom";
import Header from "./Header";
import Charts from "./Charts";
import Section from "./Section";

const UserProfile = () => {
   const navigate = useNavigate();
   //👇🏻 fetch the username from the URL
   const { username } = useParams();
   //👇🏻 the required states
   const [loading, setLoading] = useState(true);
   const [userData, setUserData] = useState([]);
   const [error, setError] = useState(false);

   //👇🏻 fetch the user details on page load
   useEffect(() => {
       function fetchGitHubUser() {
           fetch(`https://api.github.com/users/${username}`)
               .then((res) => res.json())
               .then((data) => {
                   if (data.message) {
                       setError(true);
                       setLoading(false);
                   } else {
                       setLoading(false);
                       setUserData(data);
                   }
               })
               .catch((err) => {
                   setError(true);
                   setLoading(false);
                   console.error(err);
               });
       }
       fetchGitHubUser();
   }, [username]);

   //👇🏻 runs if the user data is loading
   if (loading) {
       return <div className='loading'>Loading...please wait</div>;
   }

如果 API 调用返回错误，则此情况由以下代码片段处理：

   if (error) {
       return navigate("/error");
   }
   return (
       <div className='profile'>
           <Header data={userData} />
           <main className='main' style={{ padding: "30px" }}>
               <Charts />
               <Section />
           </main>
       </div>
   );
};

export default UserProfile;

从代码片段中，我导入了三个组件——页眉组件、图表组件和章节组件。运行以下代码创建子组件：

$ touch Header.js Charts.js Section.js

👉编写头部组件代码

const Header = ({ data }) => {
   return (
       <header className='profile__header'>
           <nav className='profile__nav'>
               <h2>Coder Stats</h2>
               <div className='profile__links'>
                   <Link to='/' className='home__link'>
                       Home
                   </Link>
                   <a href='https://github.com' target='_blank' rel='noreferrer'>
                       GitHub
                   </a>
               </div>
           </nav>
           <Bio data={data} />
       </header>
   );
};

export default Header;

Header 组件还包含 Bio 组件，创建该组件并将以下代码复制到Bio.js文件中。

import React from "react";
import { IoLocationSharp } from "react-icons/io5";
import { FaCalendarAlt } from "react-icons/fa";
import { splitDate } from "../utils/requests";

const Bio = ({ data }) => {
   return (
       <div className='profile___section'>
           <img src={data.avatar_url} alt={data.name} className='profile__image' />
           <h1>{data.name}</h1>
           <a
               href={`https://github.com/${data.login}`}
               alt={data.name}
               className='profile__url'
               target='_blank'
               rel='noreferrer'
           >
               @{data.login}
           </a>
           <div className='profile__info'>
               <div style={{ display: "flex", marginRight: "30px", color: "#ddd" }}>
                   <IoLocationSharp />
                   <p>{data.location}</p>
               </div>

               <div style={{ display: "flex", color: "#ddd" }}>
                   <FaCalendarAlt style={{ marginRight: "5px" }} />
                   <p>{splitDate(data.created_at)}</p>
               </div>
           </div>
           <div className='profile__details'>
               <div>
                   <p className='profile__text'>{data.public_repos}</p>
                   <p style={{ color: "#21325e" }}>Repositories</p>
               </div>
               <div>
                   <p className='profile__text'>{data.followers}</p>
                   <p style={{ color: "#21325e" }}>Followers</p>
               </div>
               <div>
                   <p className='profile__text'>{data.following}</p>
                   <p style={{ color: "#21325e" }}>Following</p>
               </div>
           </div>
       </div>
   );
};

export default Bio;

从上面的代码片段中，我们splitDate从一个文件夹导入了一个函数。在该文件夹中utils创建一个文件，并将以下代码复制到该文件中。该函数将从 GitHub 获取的日期转换为可读格式。requests.jsutils

👉编写 INFO 组件代码

在本节中，我们将展示用户最常用的九个存储库，如下图所示：

在文件夹内utils创建一个langColors.js文件，其中包含一个对象，该对象包含各种编程语言的不同颜色标签。

export function fetchRepos(user, setVariable) {
   fetch(
       `https://api.github.com/users/${user}/repos?type=owner&sort=updated&per_page=100`
   )
       .then((res) => res.json())
       .then((data) => {
           const mostStarred = data.sort(
               (a, b) => b.stargazers_count - a.stargazers_count
           );
           setVariable(mostStarred.splice(0, 9));
       })
       .catch((err) => console.error(err));
}

上面的代码片段获取用户的 GitHub 存储库，根据星标数量对结果进行排序，并返回前九个。

将该fetchRepos函数导入UserProfile.js文件并显示存储库列表。

import React, { useEffect, useState } from "react";
import { useParams, useNavigate } from "react-router-dom";

//👇🏻 Import fetchRepos function
import { fetchRepos } from "../utils/requests";

const UserProfile = () => {
   const { username } = useParams();
   //....other states and functions

   // states the holds all the repositories
   const [repos, setRepos] = useState([]);

   useEffect(() => {
       // fetch the repos if there is no error
       function authenticate() {
           if (!error) {
               fetchRepos(username, setRepos);
           }
       }
       authenticate();
   }, [username, error]);

   return (
       <div className='profile'>
           <Header data={userData} />
           <main className='main' style={{ padding: "30px" }}>
               <Charts />
               <Section repos={repos} />
           </main>
       </div>
   );
};

export default UserProfile;

👉使用 Tremor UI 库可视化数据

接下来，我将引导您使用 Tremor 库进行数据可视化。我们将展示用户使用最多的语言、获得星标最多的语言以及每种语言的星标数量。

更新requests.js文件，使其包含以下函数，用于获取热门语言、获得最多星标的语言以及每种语言的星标数量。

信息是通过 4 个辅助函数（代码未显示）提取的，这些辅助函数提供图表要使用的信息。

import {
   fetchMostStarredRepos,
   fetchRepos,
   fetchStarsPerLang,
   fetchTopLanguages,
} from "../utils/requests";

为了使用该辅助函数，我们需要更新UserProfile.js 文件：

import Charts from "./Charts";

const UserProfile = () => {
   const [mostStarred, setMostStarred] = useState([]);
   const [starsPerLanguageArray, setStarsPerLanguageArray] = useState([]);
   const [topLanguages, setTopLanguages] = useState([]);

   //...other functions and states
   useEffect(() => {
       function authenticate() {
           if (!error) {
               fetchMostStarredRepos(username, setMostStarred);
               fetchRepos(username, setRepos);
               fetchStarsPerLang(username, setStarsPerLanguageArray);
               fetchTopLanguages(username, setTopLanguages);
           }
       }
       authenticate();
   }, [username, error]);

   return (
       <div className='profile'>
           <Header data={userData} />
           <main className='main' style={{ padding: "30px" }}>
               {/*Pass the data into the Charts component*/}
               <Charts
                   topLanguages={topLanguages}
                   mostStarred={mostStarred}
                   starsPerLanguageArray={starsPerLanguageArray}
               />
               <Section repos={repos} />
           </main>
       </div>
   );
};
export default UserProfile;

要将数据可视化成上图所示，请更新文件Charts.js，使其包含以下代码：

import React from "react";
import { BarChart, DonutChart, Card, Title } from "@tremor/react";

const Charts = ({ topLanguages, mostStarred, starsPerLanguageArray }) => {
   return (
       <div className='card__container'>
           <Card>
               <Title>Top Languages</Title>
               <DonutChart
                   data={topLanguages}
                   category='count'
                   variant='pie'
                   dataKey='lang'
                   marginTop='mt-6'
                   colors={["yellow", "blue", "red", "blue"]}
               />
           </Card>
           <Card>
               <Title>Most Starred</Title>
               <BarChart
                   data={mostStarred}
                   dataKey='name'
                   categories={["stars"]}
                   colors={["blue"]}
                   marginTop='mt-6'
                   yAxisWidth='w-6'
               />
           </Card>
           <Card>
               <Title>Stars per Language</Title>
               <DonutChart
                   data={starsPerLanguageArray}
                   category='stars'
                   dataKey='lang'
                   marginTop='mt-6'
                   colors={["yellow", "blue", "red", "blue"]}
               />
           </Card>
       </div>
   );
};

export default Charts;

根据代码片段，我导入了 Tremor 提供的两种图表类型，并将数据传递给了 UI 组件。

✨ 结论

到目前为止，您已经学习了如何使用 Tremor、Tremor 提供的各种功能以及如何通过 Tremor 库可视化数据。

本教程将通过演示，带您了解如何使用 Tremor UI 库和 GitHub API 构建应用。欢迎浏览 Tremor 的文档，参与贡献代码，并加入其开发者社区。

如果您正在寻找一个能够帮助您轻松快速地可视化数据的 React 库，那么 Tremor 是一个绝佳的选择。Thanks for reading!

👉 GitHub API 和 Tremor示例 -source code
🚀 AppSeed 提供免费支持（电子邮件和 Discord）
👉 更多使用 Flask、Django 和React构建的免费应用

文章来源：https://dev.to/sm0ke/data-visualization-using-react-and-tremor-with-sample-546a

菜单

分享

使用 React 和 Tremor 进行数据可视化 - Sample DEV 的全球展示挑战赛，由 Mux 呈现：展示你的项目！

使用 React 和 Tremor 进行数据可视化 - 附示例

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

✨什么是震颤

✨ 入门指南

✨ 结论

系统设计面试中的 19 种微服务模式

使用 React 和 AWS Amplify 实现无服务器架构第三部分：跟踪应用使用情况

模型-视图-控制器（MVC）模式到底是什么？DEV 全球项目展示挑战赛，由 Mux 主办：快来展示你的项目吧！

我在两年内从 PHP 开发人员晋升为高级 C#/.NET 开发人员。

了解 Docker：第 12 部分 – 传递构建参数

Yarn 和第三方 NPM 客户端的黑暗未来 DEV 的全球展示与讲述挑战赛，由 Mux 呈现：展示你的项目！

CSS DEV 的全球展示挑战赛“响应式字体”由 Mux 呈现：展示你的项目！

我是如何以学生开发者的身份免费获得 Tabnine Pro 的，你也可以！

五大顶级JS框架

从 Rector PHP 开始：利用自动化改进您的 PHP 代码