diff --git a/src/App.js b/src/App.js index 43a81f5..5bf59b8 100644 --- a/src/App.js +++ b/src/App.js @@ -39,6 +39,9 @@ import SidebarDesign2 from "./components/Sidebar/SidebarDesign2"; 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 ( @@ -78,6 +81,9 @@ 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/Chart/SimpleBarChart/index.js b/src/components/Chart/SimpleBarChart/index.js index 38b5f4a..7b43c14 100644 --- a/src/components/Chart/SimpleBarChart/index.js +++ b/src/components/Chart/SimpleBarChart/index.js @@ -14,10 +14,11 @@ import { ResponsiveContainer, } from "recharts"; -const SimpleBarChart = ({ data, buttons }) => { +function SimpleBarChart({ data, buttons }) { return ( -
-
+
+ {/* top */} +

میزان فروش محصولات

@@ -34,32 +35,41 @@ const SimpleBarChart = ({ data, buttons }) => { ))}
-
- - - - - - - - - - - -
+ {/* chart */} + + + + + + + {/* */} + + + +
); -}; +} export default SimpleBarChart; @@ -138,6 +148,7 @@ SimpleBarChart.defaultProps = { amt: 2100, }, ], + buttons: [ { name: "مدت مشابه سال گذشته", diff --git a/src/components/Chart/SimpleBarChart/index.scss b/src/components/Chart/SimpleBarChart/index.scss index d744d28..e69de29 100644 --- a/src/components/Chart/SimpleBarChart/index.scss +++ b/src/components/Chart/SimpleBarChart/index.scss @@ -1,11 +0,0 @@ -.recharts-legend-item-text { - margin-right: 10px; -} - -.recharts-legend-item { - margin-top: 25px !important; -} - -.recharts-text tspan { - transform: translateX(0px) !important; -} diff --git a/src/components/Chart/SpecifiedDomainRadarChart/index.js b/src/components/Chart/SpecifiedDomainRadarChart/index.js new file mode 100644 index 0000000..d04a322 --- /dev/null +++ b/src/components/Chart/SpecifiedDomainRadarChart/index.js @@ -0,0 +1,61 @@ +import React, { PureComponent } from 'react'; +import { Radar, RadarChart, PolarGrid, Legend, PolarAngleAxis, PolarRadiusAxis, ResponsiveContainer } from 'recharts'; + + +function SpecifiedDomainRadarChart ({ data }) { + return ( +
+ + + + + {/* */} + + + +
+ ); +}; + +export default SpecifiedDomainRadarChart; + +SpecifiedDomainRadarChart.defaultProps = { + data: [ + { + subject: 'پشتیبانی', + A: 107, + B: 113, + fullMark: 150, + }, + { + subject: 'لجستیک', + A: 75, + B: 150, + fullMark: 150, + }, + { + subject: 'زنجیره تامین', + A: 100, + B: 130, + fullMark: 150, + }, + { + subject: 'اداری', + A: 120, + B: 120, + fullMark: 150, + }, + { + subject: 'حسابداری', + A: 85, + B: 120, + fullMark: 150, + }, + { + subject: 'بازاریابی', + A: 96, + B: 96, + fullMark: 150, + }, + ] +}; diff --git a/src/components/ProductSalesAmount/Design1/home-trend-down.svg b/src/components/ProductSalesAmount/Design1/home-trend-down.svg new file mode 100644 index 0000000..a487fe1 --- /dev/null +++ b/src/components/ProductSalesAmount/Design1/home-trend-down.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/ProductSalesAmount/Design1/home-trend-up.svg b/src/components/ProductSalesAmount/Design1/home-trend-up.svg new file mode 100644 index 0000000..5b733f0 --- /dev/null +++ b/src/components/ProductSalesAmount/Design1/home-trend-up.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/ProductSalesAmount/Design1/index.js b/src/components/ProductSalesAmount/Design1/index.js new file mode 100644 index 0000000..c60e374 --- /dev/null +++ b/src/components/ProductSalesAmount/Design1/index.js @@ -0,0 +1,71 @@ +import React from 'react'; + +import arrowDown from './home-trend-down.svg'; +import arrowUp from './home-trend-up.svg'; + +const Design1 = ({title,price,incomes}) => { + return
+
+ {/* title */} +
+
+

{title}

+
+ {/* price */} +

{price}تومان

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

{income.name}

+

{income.income}

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

{income.excerpt}

+
+ {Number(index) !== incomes.length -1 && ( +
+ )} +
+ ))} +
+
+
; +}; + +export default Design1; + +Design1.defaultProps = { + title: 'میزان فروش محصولات', + price: '196.209.810', + + incomes: [ + { + name: 'درآمد امروز', + income:'138.916.431', + percent: 27, + logo: arrowUp, + excerpt: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.', + }, + { + name: 'درآمد روز گذشته', + income:'651.098.311', + percent: -6, + logo: arrowDown, + excerpt: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.', + }, + { + name: 'درآمد این هفته', + income:'890.325.308', + 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 diff --git a/src/components/testtttt/Testttt.js b/src/components/testtttt/Testttt.js index 1dcf9f7..523e2d8 100644 --- a/src/components/testtttt/Testttt.js +++ b/src/components/testtttt/Testttt.js @@ -1,32 +1,18 @@ import React from "react"; -import video from "./danovin.mp4"; +// import "./Testttt.scss"; -const Testttt = () => { - return ( -
- +import book from "../../assets/images/book.svg"; +import bookCover from "../../assets/images/book-white-cover.svg"; - -
- ); +export const Testttt = ({ bookBackCoverBg }) => { + return ( +
+
mahdi
+
+ ); }; export default Testttt; +Testttt.defaultProps = { + bookBackCoverBg: "bg-greenBookBg", +}; diff --git a/src/components/testtttt/danovin.mp4 b/src/components/testtttt/danovin.mp4 deleted file mode 100644 index faba880..0000000 Binary files a/src/components/testtttt/danovin.mp4 and /dev/null differ