mahdi 3 years ago
commit 55d7ed0204
  1. 6
      src/App.js
  2. 3
      src/App.scss
  3. 65
      src/components/Chart/SimpleBarChart/index.js
  4. 11
      src/components/Chart/SimpleBarChart/index.scss
  5. 61
      src/components/Chart/SpecifiedDomainRadarChart/index.js
  6. 8
      src/components/ProductSalesAmount/Design1/home-trend-down.svg
  7. 6
      src/components/ProductSalesAmount/Design1/home-trend-up.svg
  8. 71
      src/components/ProductSalesAmount/Design1/index.js
  9. 3
      src/components/ProductSalesAmount/Design2/Ellipse.svg
  10. 67
      src/components/ProductSalesAmount/Design2/index.js
  11. 38
      src/components/testtttt/Testttt.js
  12. BIN
      src/components/testtttt/danovin.mp4

@ -39,6 +39,9 @@ import SidebarDesign2 from "./components/Sidebar/SidebarDesign2";
import SimpleBarChart from "./components/Chart/SimpleBarChart"; import SimpleBarChart from "./components/Chart/SimpleBarChart";
import Switch from "./components/Switch"; 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() { function App() {
return ( return (
@ -78,6 +81,9 @@ function App() {
{/* <SidebarMenu /> */} {/* <SidebarMenu /> */}
{/* <SidebarDesign2 /> */} {/* <SidebarDesign2 /> */}
<SimpleBarChart /> <SimpleBarChart />
{/* <SpecifiedDomainRadarChart/> */}
{/* <Design1/> */}
<Design2/>
</div> </div>
</Provider> </Provider>
); );

@ -0,0 +1,3 @@
* {
direction: rtl;
}

@ -14,10 +14,11 @@ import {
ResponsiveContainer, ResponsiveContainer,
} from "recharts"; } from "recharts";
const SimpleBarChart = ({ data, buttons }) => { function SimpleBarChart({ data, buttons }) {
return ( return (
<section className="bg-white w-11/12 mx-auto mt-20 p-7 rounded-lg shadow-lg"> <section className="bg-white w-11/12 mx-auto my-20 p-7 rounded-lg shadow-lg">
<div className="flex flex-row items-center justify-between"> {/* top */}
<div className="flex flex-row items-center justify-between mb-10">
<div className="flex flex-row items-center"> <div className="flex flex-row items-center">
<div className="w-1 h-6 bg-blue-600 rounded ml-1"></div> <div className="w-1 h-6 bg-blue-600 rounded ml-1"></div>
<h2 className="text-lg">میزان فروش محصولات</h2> <h2 className="text-lg">میزان فروش محصولات</h2>
@ -34,32 +35,41 @@ const SimpleBarChart = ({ data, buttons }) => {
))} ))}
</div> </div>
</div> </div>
<div style={{ width: "100%", height: 550 }} className="mt-10"> {/* chart */}
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" aspect={3}>
<BarChart <BarChart
width={500} width={500}
height={300} height={300}
data={data} data={data}
margin={{ margin={{
top: 5, top: 5,
right: 20, right: 10,
left: 20, left: 10,
bottom: 5, bottom: 10,
}} }}
> >
<CartesianGrid strokeDasharray="3 3" /> <CartesianGrid stroke="#E2EAFC" strokeDasharray="7 7" />
<XAxis dataKey="name" /> <XAxis
<YAxis /> dataKey="name"
<Tooltip /> tick={{ stroke: "#929292" }}
<Legend /> axisLine={false}
<Bar dataKey="امسال" fill="#4862E4" /> tickLine={false}
<Bar dataKey="پارسال" fill="#E1E6FF" /> />
</BarChart> <YAxis
</ResponsiveContainer> tick={{ stroke: "#929292" }}
</div> axisLine={false}
tickLine={false}
tickCount={7}
/>
<Tooltip />
{/* <Legend width={200} height={50} wrapperStyle={{right: 0, bottom: 0, backgroundColor: '#f5f5f5', border: '1px solid #d5d5d5', borderRadius: 7, lineHeight: '10px' }} /> */}
<Bar dataKey="امسال" fill="#4862E4" radius={[4, 4, 4, 4]} />
<Bar dataKey="پارسال" fill="#E1E6FF" radius={[4, 4, 4, 4]} />
</BarChart>
</ResponsiveContainer>
</section> </section>
); );
}; }
export default SimpleBarChart; export default SimpleBarChart;
@ -138,6 +148,7 @@ SimpleBarChart.defaultProps = {
amt: 2100, amt: 2100,
}, },
], ],
buttons: [ buttons: [
{ {
name: "مدت مشابه سال گذشته", name: "مدت مشابه سال گذشته",

@ -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,
},
]
};

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="13.821" height="8.621" viewBox="0 0 13.821 8.621">
<g id="vuesax_linear_home-trend-down" data-name="vuesax/linear/home-trend-down" transform="translate(1.061 1.061)">
<g id="home-trend-down">
<path id="Vector" d="M11.7,6.5,6.24,1.04,4.16,4.16,0,0" fill="none" stroke="#cf3912" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M0,2.6H2.6V0" transform="translate(9.1 3.9)" fill="none" stroke="#cf3912" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 617 B

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="13.758" height="8.586" viewBox="0 0 13.758 8.586">
<g id="home-trend-up" transform="translate(1.061 1.061)">
<path id="Vector" d="M11.637,0,6.206,5.43l-2.069-3.1L0,6.465" fill="none" stroke="#15bf4e" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M0,0H2.586V2.586" transform="translate(9.051)" fill="none" stroke="#15bf4e" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
</g>
</svg>

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: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.',
},
]
}

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
<circle id="Ellipse_116" data-name="Ellipse 116" cx="20" cy="20" r="20" fill="#edf2fb"/>
</svg>

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 React from "react";
import video from "./danovin.mp4"; // import "./Testttt.scss";
const Testttt = () => { import book from "../../assets/images/book.svg";
return ( import bookCover from "../../assets/images/book-white-cover.svg";
<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>
<div export const Testttt = ({ bookBackCoverBg }) => {
id="dropdown" return (
className="hidden z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700" <section className="w-10/12 bg-white rounded-lg shadow-lg p-10 mx-auto my-10">
> <div>mahdi</div>
<ul className="py-1" aria-labelledby="dropdownButton"> </section>
<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 default Testttt; export default Testttt;
Testttt.defaultProps = {
bookBackCoverBg: "bg-greenBookBg",
};

Loading…
Cancel
Save