import React, { useEffect, useState } from "react"; import ellipse from './Ellipse.svg'; const Design2 = ({title,incomes}) => { const [progressFlag,setProgressFlag] = useState(false); useEffect(() => { setTimeout(() => { setProgressFlag(true); },100); },[]); return
{/* title */}

{title}

{/* circles */} {incomes.map((income,index) =>(

{income.percentNumb}

))}
; }; export default Design2; Design2.defaultProps = { title: 'میزان فروش محصولات', incomes: [ { image: ellipse, bgColor :'#26E58C', width : '96%', percentNumb : '110', }, { image: ellipse, bgColor :'#FFEE00', width : '44%', percentNumb : '72', }, { image: ellipse, bgColor :'#EC4C19', width : '20%', percentNumb : '20', }, { image: ellipse, bgColor :'#0077FF', width : '75%', percentNumb : '80', }, ] }