cara membuat bar Kemajuan dinamik dalam React.js

Membina Papan Pemuka Prestasi dengan Komponen Kemajuan Reaksi dan Pekeliling
Dalam blog ini, kami akan meneroka cara membina papan pemuka metrik prestasi menggunakan React. Papan pemuka memaparkan penunjuk kemajuan bulat untuk metrik prestasi yang berbeza seperti Kebolehcapaian, SEO dan Amalan Terbaik. Penunjuk kemajuan diisi secara beransur-ansur, mensimulasikan animasi pemuatan.

Projek ini menggunakan CSS Tailwind untuk penggayaan dan beberapa komponen digubah untuk mencipta antara muka yang fleksibel dan boleh digunakan semula.

Gambaran Keseluruhan Projek
Kami akan mencipta dua komponen utama:

CircularProgress – Memaparkan bar kemajuan bulat untuk peratusan tertentu.
Papan pemuka – Menunjukkan berbilang bar kemajuan untuk metrik yang berbeza, seperti prestasi, kebolehaksesan dan banyak lagi.
Komponen Kemajuan Pekeliling
Komponen CircularProgress mengendalikan bar kemajuan bulat, yang menghidupkan kepada peratusan yang ditentukan. Komponen mengambil prop berikut:

innerCircleColor: Warna latar belakang dalam kemajuan bulatan.
peratusan: Peratusan siap.
progressColor: Warna bar kemajuan.
bgColor: Warna latar belakang di luar kawasan kemajuan.
textColor: Warna peratusan teks.
tajuk: Tajuk metrik.
Pelaksanaan Kod

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;

Komponen Papan Pemuka
Komponen Papan Pemuka memaparkan berbilang tika komponen CircularProgress, setiap satu mewakili metrik prestasi yang berbeza.

Pelaksanaan Kod

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;

Komponen Rumah
Selain bar kemajuan, papan pemuka juga termasuk bahagian boleh lipat yang menunjukkan maklumat lebih terperinci tentang masa respons pelayan.

Pelaksanaan Kod

 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;

Kesimpulan
Papan pemuka prestasi ini mempamerkan cara membuat komponen kemajuan pekeliling animasi yang boleh digunakan semula dalam React. Dengan menstrukturkan papan pemuka dengan cara ini, anda boleh mengembangkannya dengan mudah untuk menjejaki metrik prestasi lain atau menyepadukannya ke dalam aplikasi yang lebih luas, menjadikannya alat yang berkuasa untuk menggambarkan metrik utama.

Jangan ragu untuk menyesuaikan kod ini untuk projek anda dan nikmati membuat papan pemuka prestasi dengan React!

Atas ialah kandungan terperinci cara membuat bar Kemajuan dinamik dalam React.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!