Merge branch 'master' of https://git.sitenevis.com/mahdi/danovinTasks

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() {
         {/* <SidebarMenu /> */}
         {/* <SidebarDesign2 /> */}
         <SimpleBarChart />
+        {/* <SpecifiedDomainRadarChart/> */}
+        {/* <Design1/> */}
+        <Design2/>
       </div>
     </Provider>
   );

src/App.scss

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

src/components/Chart/SimpleBarChart/index.js

@@ -14,10 +14,11 @@ import {
   ResponsiveContainer,
 } from "recharts";
 
-const SimpleBarChart = ({ data, buttons }) => {
+function SimpleBarChart({ data, buttons }) {
   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="w-1 h-6 bg-blue-600 rounded ml-1"></div>
           <h2 className="text-lg">میزان فروش محصولات</h2>
@@ -34,32 +35,41 @@ const SimpleBarChart = ({ data, buttons }) => {
           ))}
         </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>
   );
-};
+}
 
 export default SimpleBarChart;
 
@@ -138,6 +148,7 @@ SimpleBarChart.defaultProps = {
       amt: 2100,
     },
   ],
+
   buttons: [
     {
       name: "مدت مشابه سال گذشته",

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;
-}

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

src/components/ProductSalesAmount/Design1/home-trend-down.svg

@@ -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>

src/components/ProductSalesAmount/Design1/home-trend-up.svg

@@ -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>

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

src/components/ProductSalesAmount/Design2/Ellipse.svg

@@ -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>

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 <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',
+    },
+  ]
+}

src/components/testtttt/Testttt.js

@@ -1,32 +1,18 @@
 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;
+Testttt.defaultProps = {
+  bookBackCoverBg: "bg-greenBookBg",
+};