diff --git a/src/App.js b/src/App.js index 4b38380..5bf59b8 100644 --- a/src/App.js +++ b/src/App.js @@ -41,6 +41,7 @@ import SimpleBarChart from "./components/Chart/SimpleBarChart"; import Switch from "./components/Switch"; import SpecifiedDomainRadarChart from "./components/Chart/SpecifiedDomainRadarChart"; import Design1 from "./components/ProductSalesAmount/Design1"; +import Design2 from "./components/ProductSalesAmount/Design2"; function App() { return ( @@ -79,9 +80,10 @@ function App() { {/* */} {/* */} {/* */} - {/* */} + {/* */} - + {/* */} + ); diff --git a/src/App.scss b/src/App.scss index e69de29..d1f0744 100644 --- a/src/App.scss +++ b/src/App.scss @@ -0,0 +1,3 @@ +* { + direction: rtl; +} diff --git a/src/components/ProductSalesAmount/Design1/index.js b/src/components/ProductSalesAmount/Design1/index.js index 35e13e0..c60e374 100644 --- a/src/components/ProductSalesAmount/Design1/index.js +++ b/src/components/ProductSalesAmount/Design1/index.js @@ -5,25 +5,33 @@ import arrowUp from './home-trend-up.svg'; const Design1 = ({title,price,incomes}) => { return
-
+
{/* title */}

{title}

{/* price */} -

{price}تومان

+

{price}تومان

{/* card */} -
+
{incomes.map((income,index) => ( -
-

{income.name}

-

{income.income}

-
- {income.percent} - +
+
+

{income.name}

+

{income.income}

+
0 ? "bg-green-100" :"bg-red-100"}`} + > + 0 ? 'text-green-500': 'text-red-500'}`}> + {income.percent} + + +
+

{income.excerpt}

-

{income.excerpt}

+ {Number(index) !== incomes.length -1 && ( +
+ )}
))}
@@ -41,24 +49,23 @@ Design1.defaultProps = { { name: 'درآمد امروز', income:'138.916.431', - percent: '+12', + percent: 27, logo: arrowUp, excerpt: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.', }, { name: 'درآمد روز گذشته', income:'651.098.311', - percent: '-0.5', - logo: arrowUp, + percent: -6, + logo: arrowDown, excerpt: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.', }, { name: 'درآمد این هفته', income:'890.325.308', - percent: '+12', + percent: 10, logo: arrowUp, excerpt: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.', }, - ] } \ No newline at end of file diff --git a/src/components/ProductSalesAmount/Design2/Ellipse.svg b/src/components/ProductSalesAmount/Design2/Ellipse.svg new file mode 100644 index 0000000..9268423 --- /dev/null +++ b/src/components/ProductSalesAmount/Design2/Ellipse.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/ProductSalesAmount/Design2/index.js b/src/components/ProductSalesAmount/Design2/index.js new file mode 100644 index 0000000..da5afd9 --- /dev/null +++ b/src/components/ProductSalesAmount/Design2/index.js @@ -0,0 +1,67 @@ +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', + }, + ] +} \ No newline at end of file