sales income component added

master
mahdi andalib 3 years ago
parent 6b343c2c77
commit 72fa965be3
  1. 6
      src/App.js
  2. 3
      src/App.scss
  3. 37
      src/components/ProductSalesAmount/Design1/index.js
  4. 3
      src/components/ProductSalesAmount/Design2/Ellipse.svg
  5. 67
      src/components/ProductSalesAmount/Design2/index.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() {
{/* <CourseChapter /> */}
{/* <SidebarMenu /> */}
{/* <SidebarDesign2 /> */}
{/* <SimpleBarChart /> */}
<SimpleBarChart />
{/* <SpecifiedDomainRadarChart/> */}
<Design1/>
{/* <Design1/> */}
<Design2/>
</div>
</Provider>
);

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

@ -5,25 +5,33 @@ import arrowUp from './home-trend-up.svg';
const Design1 = ({title,price,incomes}) => {
return <section className="my-20">
<div className="bg-white w-5/12 rounded shadow mx-auto py-7 px-4">
<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-3" style={{color:"#65A9FF"}}>{price}<span className="mr-1">تومان</span></p>
<p className="text-base mt-4 mr-2" style={{color:"#65A9FF"}}>{price}<span className="mr-1">تومان</span></p>
{/* card */}
<div className="flex flex-row items-center mt-4">
<div className="flex flex-row flex-wrap items-center">
{incomes.map((income,index) => (
<div className="flex flex-col p-4 border-l border-gray-200">
<p className="text-base">{income.name}</p>
<p className="text-lg font-bold text-center my-2">{income.income}</p>
<div className="bg-green-100 my-2 p-1 flex flex-row items-center justify-around self-end rounded w-16">
<span className="font-bold text-sm text-green-500">{income.percent}</span>
<img src={income.logo} alt="" />
<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>
<p className="text-xs leading-6 text-justify mt-2">{income.excerpt}</p>
{Number(index) !== incomes.length -1 && (
<div className="bg-gray-200 w-1"></div>
)}
</div>
))}
</div>
@ -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: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.',
},
]
}

@ -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',
},
]
}
Loading…
Cancel
Save