React.jsで動的なプログレスバーを作成する方法

React および Circular Progress コンポーネントを使用したパフォーマンス ダッシュボードの構築
このブログでは、React を使用してパフォーマンス メトリクス ダッシュボードを構築する方法を説明します。ダッシュボードには、アクセシビリティ、SEO、ベスト プラクティスなどのさまざまなパフォーマンス指標の円形の進行状況インジケーターが表示されます。進行状況インジケーターが徐々にいっぱいになり、読み込みアニメーションをシミュレートします。

このプロジェクトではスタイル設定に Tailwind CSS を使用しており、柔軟で再利用可能なインターフェイスを作成するためにいくつかのコンポーネントが構成されています。

プロジェクト概要
2 つの主要コンポーネントを作成します:

CircularProgress – 指定された割合の円形の進行状況バーを表示します。
ダッシュボード – パフォーマンス、アクセシビリティなど、さまざまな指標の複数の進行状況バーを表示します。
CircularProgress コンポーネント
CircularProgress コンポーネントは、指定されたパーセンテージでアニメーション化する円形のプログレス バーを処理します。コンポーネントは次の props を受け取ります:

innerCircleColor: 円形の進行状況内の背景色。
パーセント: 完了のパーセンテージ。
progressColor: プログレスバーの色。
bgColor: 進行状況領域の外側の背景色。
textColor: パーセントテキストの色。
title: メトリクスのタイトル
コードの実装

import React, { useEffect, useRef, useState } from 'react';

interface CircularProgressProps {
  innerCircleColor: string;
  percentage: number;
  progressColor: string;
  bgColor: string;
  textColor: string;
  title: string;
}

const CircularProgress: React.FC<CircularProgressProps> = ({
  innerCircleColor,
  percentage,
  progressColor,
  bgColor,
  textColor,
  title,
}) => {
  const [currentPercentage, setCurrentPercentage] = useState(0);
  const innerCircleRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    const speed = 50; // Speed of the animation
    const increment = () => {
      setCurrentPercentage((prev) => {
        if (prev >= percentage) return percentage;
        return prev + 1;
      });
    };

    const interval = setInterval(increment, speed);

    return () => clearInterval(interval);
  }, [percentage]);

  return (
    <div className='flex flex-col justify-center gap-2'>
      <div
        className="relative flex items-center justify-center w-12 h-12 rounded-full"
        style={{
          background: `conic-gradient(${progressColor} ${currentPercentage * 3.6}deg, ${bgColor} 0deg)`,
        }}
      >
        <div
          className="absolute w-[calc(100%_-_6px)] h-[calc(100%_-_6px)] rounded-full"
          style={{ backgroundColor: innerCircleColor }}
          ref={innerCircleRef}
        ></div>
        <p
          className="relative text-[16px] font-semibold"
          style={{ color: textColor }}
        >
          {currentPercentage}%
        </p>
      </div>
      <p className='text-[10px] font-semibold text-center'>{title}</p>
    </div>
  );
};

export default CircularProgress;

ダッシュボードコンポーネント
ダッシュボード コンポーネントには、CircularProgress コンポーネントの複数のインスタンスが表示され、それぞれが異なるパフォーマンス メトリックを表します。

コードの実装

import React from 'react';
import CircularProgress from './CircularProgress';

const Dashboard: React.FC = () => {
  return (
    <div className="bg-white flex flex-col items-center border h-auto w-full xl:px-[14rem] lg:px-[5rem] sm:px-0 py-[5rem] justify-center">
      <div className='w-full border rounded'>
        <div className='py-12 border-b'>
          {/* Performance Metrics */}
          <div className="flex flex-wrap justify-center gap-14 items-center">
            <CircularProgress
              innerCircleColor="Bisque"
              percentage={99}
              progressColor="DarkOrange"
              bgColor="Bisque"
              textColor="DarkOrange"
              title="Performance"
            />
            <CircularProgress
              innerCircleColor="Bisque"
              percentage={96}
              progressColor="DarkOrange"
              bgColor="Bisque"
              textColor="DarkOrange"
              title="Accessibility"
            />
            <CircularProgress
              innerCircleColor="lightgreen"
              percentage={90}
              progressColor="LimeGreen"
              bgColor="lightgreen"
              textColor="LimeGreen"
              title="Best Practices"
            />
            <CircularProgress
              innerCircleColor="Bisque"
              percentage={100}
              progressColor="DarkOrange"
              bgColor="Bisque"
              textColor="DarkOrange"
              title="SEO"
            />
          </div>
        </div>
      </div>
    </div>
  );
};

export default Dashboard;

ホームコンポーネント
進行状況バーに加えて、ダッシュボードには、サーバーの応答時間に関する詳細情報を表示する折りたたみ可能なセクションも含まれています。

コードの実装

 import React, { useState } from 'react';
import { IoIosArrowDown, IoIosArrowUp } from 'react-icons/io';

const Home: React.FC = () => {
  const [isExpanded, setIsExpanded] = useState(false);

  const handleToggle = () => {
    setIsExpanded(!isExpanded);
  };

  return (
    <div className="rounded-md w-full mb-4" id="server-response-time">
      <div className="flex flex-col border w-full justify-between items-center text-sm text-red-600">
        <div className="flex items-center p-3 justify-between w-full">
          <span className="ml-2 text-gray-800">
            <span className="text-red-700">⚠️</span> Reduce initial server response time <span className="text-red-500">— Root document took 820 ms</span>
          </span>
          <span className="text-gray-800 cursor-pointer" onClick={handleToggle}>
            {isExpanded ? <IoIosArrowUp /> : <IoIosArrowDown />}
          </span>
        </div>
        {isExpanded && (
          <div className="bg-white border-t border-t-blue-600">
            <div className="py-8 pl-12 pr-4">
              <p className="text-[13px] text-gray-700">
                Learn more about server response time and performance optimizations.{' '}
                <a className="text-blue-500 underline" href="#" target="_blank" rel="noopener noreferrer">
                  Read more.
                </a>
              </p>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default Home;

結論
このパフォーマンス ダッシュボードでは、React で再利用可能なアニメーション化された循環進行コンポーネントを作成する方法を紹介します。このようにダッシュボードを構成すると、ダッシュボードを簡単に拡張して他のパフォーマンス指標を追跡したり、より広範なアプリケーションに統合したりできるため、主要な指標を視覚化するための強力なツールになります。

このコードをご自身のプロジェクトに自由に適応させて、React を使用してパフォーマンス ダッシュボードの作成をお楽しみください!

以上がReact.jsで動的なプログレスバーを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。