comment créer une barre de progression dynamique dans React.js

Création d'un tableau de bord de performances avec les composants React et Circular Progress
Dans ce blog, nous explorerons comment créer un tableau de bord de mesures de performances à l'aide de React. Le tableau de bord affiche des indicateurs de progression circulaires pour différentes mesures de performances telles que l'accessibilité, le référencement et les meilleures pratiques. Les indicateurs de progression se remplissent progressivement, simulant une animation de chargement.

Le projet utilise Tailwind CSS pour le style, et plusieurs composants sont composés pour créer une interface flexible et réutilisable.

Aperçu du projet
Nous allons créer deux composants principaux :

CircularProgress – Affiche une barre de progression circulaire pour un pourcentage donné.
Tableau de bord – Affiche plusieurs barres de progression pour différentes mesures, telles que les performances, l'accessibilité, etc.
Composant CircularProgress
Le composant CircularProgress gère la barre de progression circulaire, qui s'anime selon le pourcentage spécifié. Le composant prend les accessoires suivants :

innerCircleColor : La couleur d'arrière-plan à l'intérieur de la progression circulaire.
pourcentage : le pourcentage d'achèvement.
progressColor : La couleur de la barre de progression.
bgColor : La couleur d’arrière-plan en dehors de la zone de progression.
textColor : La couleur du texte en pourcentage.
title : Le titre de la métrique.
Implémentation du code

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;

Composant du tableau de bord
Le composant Dashboard affiche plusieurs instances du composant CircularProgress, chacune représentant une mesure de performance différente.

Mise en œuvre du code

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;

Composant Accueil
En plus des barres de progression, le tableau de bord comprend également une section pliable qui affiche des informations plus détaillées sur les temps de réponse du serveur.

Mise en œuvre du code

 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;

Conclusion
Ce tableau de bord des performances montre comment créer des composants de progression circulaires animés et réutilisables dans React. En structurant le tableau de bord de cette manière, vous pouvez facilement l'étendre pour suivre d'autres mesures de performances ou l'intégrer dans une application plus large, ce qui en fait un outil puissant pour visualiser les mesures clés.

N'hésitez pas à adapter ce code à vos projets, et profitez de la création de tableaux de bord de performances avec React !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!