So erstellen Sie einen dynamischen Fortschrittsbalken in React.js

Erstellen eines Leistungs-Dashboards mit Reaktions- und zirkulären Fortschrittskomponenten
In diesem Blog erfahren Sie, wie Sie mit React ein Dashboard für Leistungsmetriken erstellen. Das Dashboard zeigt kreisförmige Fortschrittsindikatoren für verschiedene Leistungsmetriken wie Barrierefreiheit, SEO und Best Practices an. Die Fortschrittsanzeigen füllen sich nach und nach und simulieren eine Ladeanimation.

Das Projekt nutzt Tailwind CSS für die Gestaltung und mehrere Komponenten werden zusammengestellt, um eine flexible und wiederverwendbare Schnittstelle zu schaffen.

Projektübersicht
Wir erstellen zwei Hauptkomponenten:

CircularProgress – Zeigt einen kreisförmigen Fortschrittsbalken für einen bestimmten Prozentsatz an.
Dashboard – Zeigt mehrere Fortschrittsbalken für verschiedene Metriken an, z. B. Leistung, Zugänglichkeit und mehr.
CircularProgress-Komponente
Die CircularProgress-Komponente verwaltet den kreisförmigen Fortschrittsbalken, der auf den angegebenen Prozentsatz animiert wird. Die Komponente benötigt die folgenden Requisiten:

innerCircleColor: Die Hintergrundfarbe innerhalb des kreisförmigen Fortschritts.
Prozentsatz: Der Prozentsatz der Fertigstellung.
progressColor: Die Farbe des Fortschrittsbalkens.
bgColor: Die Hintergrundfarbe außerhalb des Fortschrittsbereichs.
textColor: Die Farbe des Prozenttextes.
Titel: Der Titel der Metrik.
Code-Implementierung

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;

Dashboard-Komponente
Die Dashboard-Komponente zeigt mehrere Instanzen der CircularProgress-Komponente an, die jeweils eine andere Leistungsmetrik darstellen.

Code-Implementierung

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;

Heimkomponente
Zusätzlich zu den Fortschrittsbalken enthält das Dashboard auch einen ausklappbaren Abschnitt, der detailliertere Informationen zu den Serverantwortzeiten anzeigt.

Code-Implementierung

 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;

Fazit
Dieses Leistungs-Dashboard zeigt, wie Sie wiederverwendbare, animierte kreisförmige Fortschrittskomponenten in React erstellen. Wenn Sie das Dashboard auf diese Weise strukturieren, können Sie es problemlos erweitern, um andere Leistungsmetriken zu verfolgen, oder es in eine umfassendere Anwendung integrieren, wodurch es zu einem leistungsstarken Tool zur Visualisierung wichtiger Metriken wird.

Sie können diesen Code gerne für Ihre Projekte anpassen und viel Spaß beim Erstellen von Leistungs-Dashboards mit React haben!

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen dynamischen Fortschrittsbalken in React.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!