React.js에서 동적 진행률 표시줄을 만드는 방법

React 및 순환 진행 구성 요소를 사용하여 성능 대시보드 구축
이번 블로그에서는 React를 사용하여 성능 지표 대시보드를 구축하는 방법을 살펴보겠습니다. 대시보드에는 접근성, SEO, 모범 사례 등 다양한 성과 지표에 대한 순환 진행률 표시기가 표시됩니다. 진행률 표시기가 점진적으로 채워져 로딩 애니메이션을 시뮬레이션합니다.

이 프로젝트는 스타일링을 위해 Tailwind CSS를 사용하며, 유연하고 재사용 가능한 인터페이스를 만들기 위해 여러 구성 요소가 구성됩니다.

사업개요
두 가지 주요 구성 요소를 만듭니다.

CircularProgress – 특정 비율에 대해 순환 진행률 표시줄을 표시합니다.
대시보드 – 성능, 접근성 등과 같은 다양한 지표에 대한 여러 진행률 표시줄을 표시합니다.
CircularProgress 구성 요소
CircularProgress 구성 요소는 지정된 백분율로 애니메이션을 적용하는 원형 진행률 표시줄을 처리합니다. 구성 요소는 다음 소품을 사용합니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!