Tremor を使用して React で素晴らしいダッシュボードを作成する

Tremor を使用して React で素晴らしいダッシュボードを作成する

ダッシュボードのような複雑なユーザー インターフェイスを React で構築することは、ゼロから行う場合は困難な場合があります。ありがたいことに、そうする必要はありません。

使用できる最高のコンポーネント ライブラリの 1 つは Tremor です。これを使用すると、React でモダンでレスポンシブなダッシュボードを簡単に作成できます。Tremor を使用して React でダッシュボードを作成する方法をご覧ください。

振戦とは?

Tremor は、React でダッシュボードを構築するための最新のオープンソースの低レベル UI コンポーネント ライブラリです。Tremor は、Tailwind CSS、React、および Recharts (React 用の別のコンポーネント ベースのチャート作成ライブラリ) の上に構築されています。その上で、Heroicons のアイコンを使用します。

グラフ、カード、入力要素など、素晴らしい分析インターフェイスを構築するためのすべての要素を備えた 20 を超えるコンポーネントを誇っています。ライブラリには、バッジ、ボタン、ドロップダウン、タブなどの小さなモジュラー コンポーネントが含まれており、これらを組み合わせて本格的なダッシュボードを作成できます。

Tremor を際立たせているのは、非常に意見が分かれていることです。そのため、ライブラリの決定に問題がない限り、プロ並みのダッシュボードを簡単に起動できます。

もちろん、Tremor はカスタマイズをサポートしており、React の props システムを介して簡単に行うことができます。

振戦を始める方法

Tremor のコンポーネント ライブラリで構築されたダッシュボードのスクリーンショット

create-react-appパッケージ (または、必要に応じて Vite)を使用して、新しい React アプリを作成することから始めます。

システムに Node.js と npm が既にインストールされている必要があります。これを確認するには、コマンド ラインでnode –versionを実行してからnpm –versionを実行します。いずれかのコマンドが欠落している場合は、簡単なプロセスを使用してインストールできます。たとえば、Windows に Node.js と npm をインストールするには、このガイドを参照してください。

Tremor を使用して React プロジェクトをセットアップする

  1. ターミナルを開き、cdコマンドを使用して希望のディレクトリに移動します。
  2. npx create-react-app tremor-tutorial を実行します。このコマンドは、システムの現在のディレクトリにtremor-tutorialという名前の新しい React アプリケーションを作成します。
  3. cd tremor-tutorialを実行して、アプリ ディレクトリに切り替えます。
  4. 次のコマンドを使用して、React プロジェクトに Tremor をインストールします。 npm install @tremor/react
  5. Tremor をインストールしたら、インポートの最後に次の行を追加して、 App.js ( Vite を使用している場合はmain.jsx ) にパッケージをインポートします。 import "@tremor/react/dist/esm/tremor.css";

Tremor は Tailwind CSS を使用しますが、ライブラリを使用するために React アプリにインストールする必要はありません。これは、Tremor が既に内部で Tailwind をセットアップしているためです。ただし、必要に応じて、Tailwind CSS を React にインストールするためのチュートリアルを確認してください。

次に、次のコマンドを使用してプロジェクトに Heroicons をインストールします。

npm i heroicons@1.0.6 @tremor/react

では、 src/App.jsファイルから不要なコードを削除しましょう。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>
  );
}

次に、 srcフォルダーに専用のコンポーネントサブフォルダーを作成します。そのコンポーネントフォルダーで、新しいDashboard.jsファイルを作成し、次のコードを追加します。

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

export default Dashboard;

他のインポートの後に次のステートメントを追加して、 App.jsに Dashboard コンポーネントをインポートします。

import Dashboard from "./components/Dashboard";

最後に、 h1要素の下に<Dashboard />を追加して、React アプリにコンポーネントを表示します。

Tremor でダッシュボードを作成する

Tremor を使用して最小限の手間で完全なダッシュボードを作成するには、利用可能なブロックの 1 つを選択します。ブロックは、さまざまな小さなモジュラー コンポーネントで構成される事前構築済みのレイアウトです。

良い出発点は、使用できるさまざまなタイプのビルド済みブロック コンポーネントを紹介するTremor のブロックセクションです。たとえば、レイアウト シェルを使用すると、さまざまなコンポーネントを組み合わせてダッシュボードを作成できます。

まず、次のコードをDashboard.jsファイルに追加します。

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;

シェル ブロックには、ファイルの先頭にインポートするさまざまなコンポーネントが含まれています。これをブラウザでプレビューすると、空のブロックが 2 つだけ表示されます。

チャート、カード、テーブルなど、Tremor の事前構築済みコンポーネントをブロックに追加できます。API (REST または GraphQL) からデータを取得したり、コンポーネント内のオブジェクトの配列に格納したりできます。

シェル ブロックにコンポーネントを追加するには、<div className=”h-96″/>行を次のように置き換えます。

<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"
/>

その後、returnステートメントの前に次の配列を追加します (これは、ダッシュボードのメイン セクションに表示されるデータです)。

// 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()};

次に、ファイルのvalueFormatterの後に次のコードを追加します。

// 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",
  },
];

オブジェクトのカテゴリ配列の場合、各オブジェクトをマップして、データを個別のCardコンポーネントに表示する必要があります。まず、KPI セクションの Card コンポーネントを削除してから、次のコードに置き換えます。

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

以上です。Tremor で最初のダッシュボードを作成しました。npm startを実行して、ダッシュボードを表示します。上のスクリーンショットのようになります。

Tremor コンポーネントのカスタマイズ

Tremor では、小道具を使用してカスタマイズできます。カスタマイズするコンポーネントのドキュメントを確認し、デフォルト値に含まれるすべてのプロパティを確認する必要があります。

たとえば、 <LineChart /> がある場合、小道具showXAxis={false}を渡すことで x 軸を非表示にするか、 height={h-40}を使用して高さを変更できます。サイジング、間隔、色など、Tailwind CSS にある値を宣言する props については、Tailwind ユーティリティ クラスを使用する必要があります。

複雑な React ダッシュボードを簡単に構築

Tremor のようなコンポーネント ライブラリのおかげで、UI のすべての部分を最初から作成する必要はありません。Tremor のようなライブラリを使用すると、複雑なレスポンシブ UI を作成する時間と頭痛の両方を節約できます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です