Merge branch 'master' of https://git.sitenevis.com/mahdi/danovinTasks
commit
55d7ed0204
12 changed files with 275 additions and 64 deletions
@ -0,0 +1,3 @@ |
||||
* { |
||||
direction: rtl; |
||||
} |
||||
@ -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; |
||||
} |
||||
@ -0,0 +1,61 @@ |
||||
import React, { PureComponent } from 'react'; |
||||
import { Radar, RadarChart, PolarGrid, Legend, PolarAngleAxis, PolarRadiusAxis, ResponsiveContainer } from 'recharts'; |
||||
|
||||
|
||||
function SpecifiedDomainRadarChart ({ data }) { |
||||
return ( |
||||
<section className="bg-white w-11/12 mx-auto my-20 p-7 rounded-lg shadow-lg"> |
||||
<ResponsiveContainer width="100%" aspect={2}> |
||||
<RadarChart cx="50%" cy="50%" outerRadius="80%" data={data}> |
||||
<PolarGrid stroke="#A1CBFF" /> |
||||
<PolarAngleAxis dataKey="subject" tick={{stroke: "#A1CBFF"}}/> |
||||
{/* <PolarRadiusAxis angle={30} domain={[0, 150]} /> */} |
||||
<Radar name="Mike" dataKey="A" stroke="blue" fill="blue" fillOpacity={0.9} /> |
||||
<Radar name="Lily" dataKey="B" stroke="#36C7EC" fill="#36C7EC" fillOpacity={0.1} strokeDasharray="7 7"/> |
||||
</RadarChart> |
||||
</ResponsiveContainer> </section> |
||||
); |
||||
}; |
||||
|
||||
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, |
||||
}, |
||||
] |
||||
}; |
||||
|
After Width: | Height: | Size: 617 B |
|
After Width: | Height: | Size: 525 B |
@ -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 <section className="my-20"> |
||||
<div className="bg-white w-6/12 rounded shadow mx-auto py-7 px-4"> |
||||
{/* title */} |
||||
<div className="flex flex-row items-center"> |
||||
<div className="w-1 h-5 bg-blue-600 rounded ml-1"></div> |
||||
<h2 className="text-lg">{title}</h2> |
||||
</div> |
||||
{/* price */} |
||||
<p className="text-base mt-4 mr-2" style={{color:"#65A9FF"}}>{price}<span className="mr-1">تومان</span></p> |
||||
{/* card */} |
||||
<div className="flex flex-row flex-wrap items-center"> |
||||
{incomes.map((income,index) => ( |
||||
<div style={{width:'33%'}} className="flex flex-row my-2"> |
||||
<div className="flex flex-col border-gray-200 p-3" > |
||||
<p className="text-base">{income.name}</p> |
||||
<p className="text-lg font-bold text-center my-2">{income.income}</p> |
||||
<div className={`w-16 my-2 p-1 flex flex-row items-center justify-around self-end rounded ${income.percent > 0 ? "bg-green-100" :"bg-red-100"}`} |
||||
> |
||||
<span style={{direction: 'initial'}} className={`font-bold text-sm ${income.percent > 0 ? 'text-green-500': 'text-red-500'}`}> |
||||
{income.percent} |
||||
</span> |
||||
<img src={income.logo} alt="" /> |
||||
</div> |
||||
<p className="text-xs leading-5 text-justify mt-2">{income.excerpt}</p> |
||||
</div> |
||||
{Number(index) !== incomes.length -1 && ( |
||||
<div className="bg-gray-200 w-1"></div> |
||||
)} |
||||
</div> |
||||
))} |
||||
</div> |
||||
</div> |
||||
</section>; |
||||
}; |
||||
|
||||
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: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.', |
||||
}, |
||||
] |
||||
} |
||||
|
After Width: | Height: | Size: 182 B |
@ -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 <section className="my-20"> |
||||
<div className="bg-white w-4/12 rounded shadow mx-auto py-7 px-4"> |
||||
{/* title */} |
||||
<div className="flex flex-row items-center mb-7"> |
||||
<div className="w-1 h-5 bg-blue-600 rounded ml-1"></div> |
||||
<h2 className="text-base">{title}</h2> |
||||
</div> |
||||
{/* circles */} |
||||
{incomes.map((income,index) =>( |
||||
<div className="flex flex-row items-center mt-4"> |
||||
<img src={income.image} alt="" className="w-14 rounded-full" /> |
||||
<div className="h-3 w-full rounded mt-2 mr-2 ml-4" style={{background:"#EDF2FB"}}> |
||||
<div className={`h-3 rounded duration-500 `} |
||||
style={{background:income.bgColor, width: progressFlag ? income.width : 0,}}></div> |
||||
</div> |
||||
<p>{income.percentNumb}</p> |
||||
</div> |
||||
))} |
||||
</div> |
||||
</section>; |
||||
}; |
||||
|
||||
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', |
||||
}, |
||||
] |
||||
} |
||||
@ -1,32 +1,18 @@ |
||||
import React from "react"; |
||||
import video from "./danovin.mp4"; |
||||
// import "./Testttt.scss";
|
||||
|
||||
const Testttt = () => { |
||||
return ( |
||||
<div classNameName="App"> |
||||
<button |
||||
id="dropdownButton" |
||||
data-dropdown-toggle="dropdown" |
||||
className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" |
||||
type="button" |
||||
> |
||||
Dropdown button |
||||
</button> |
||||
import book from "../../assets/images/book.svg"; |
||||
import bookCover from "../../assets/images/book-white-cover.svg"; |
||||
|
||||
<div |
||||
id="dropdown" |
||||
className="hidden z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700" |
||||
> |
||||
<ul className="py-1" aria-labelledby="dropdownButton"> |
||||
<li> |
||||
<a className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"> |
||||
Dashboard |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
); |
||||
export const Testttt = ({ bookBackCoverBg }) => { |
||||
return ( |
||||
<section className="w-10/12 bg-white rounded-lg shadow-lg p-10 mx-auto my-10"> |
||||
<div>mahdi</div> |
||||
</section> |
||||
); |
||||
}; |
||||
|
||||
export default Testttt; |
||||
Testttt.defaultProps = { |
||||
bookBackCoverBg: "bg-greenBookBg", |
||||
}; |
||||
|
||||
Binary file not shown.
Loading…
Reference in new issue