rechart added

src/components/Chart/SimpleBarChart/index.js

@@ -16,8 +16,9 @@ import {
 
 const SimpleBarChart = ({ data, buttons }) => {
   return (
-    <section className="bg-white w-11/12 mx-auto mt-20 p-7 rounded-lg shadow-lg">
-      <div className="flex flex-row items-center justify-between">
+    <section className="bg-white w-11/12 mx-auto my-20 p-7 rounded-lg shadow-lg">
+      {/* 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,29 +35,39 @@ const SimpleBarChart = ({ data, buttons }) => {
           ))}
         </div>
       </div>
-      <div style={{ width: "100%", height: 550 }} className="mt-10">
-        <ResponsiveContainer width="100%" height="100%">
+      {/* chart */}
+        <ResponsiveContainer width="100%" aspect={3}>
           <BarChart
             width={500}
             height={300}
             data={data}
             margin={{
               top: 5,
-              right: 30,
-              left: 20,
-              bottom: 5,
+              right: 10,
+              left: 10,
+              bottom: 10,
             }}
           >
-            <CartesianGrid strokeDasharray="3 3" />
-            <XAxis dataKey="name" />
-            <YAxis />
+            <CartesianGrid stroke="#E2EAFC"  strokeDasharray="7 7"/>
+            <XAxis
+              dataKey="name"
+              tick={{stroke: "#929292"}}
+              axisLine={false}
+              tickLine={false}
+            />
+            <YAxis
+              tick={{stroke: "#929292"}}
+              axisLine={false}
+              tickLine={false}
+              tickCount={7}
+            />
             <Tooltip />
-            <Legend />
-            <Bar dataKey="امسال" fill="#4862E4" />
-            <Bar dataKey="پارسال" fill="#E1E6FF" />
+            {/* <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>
-      </div>
     </section>
   );
 };
@@ -138,6 +149,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/testtttt/Testttt.js

@@ -1,32 +1,78 @@
-import React from "react";
-import video from "./danovin.mp4";
+import React, { PureComponent } from 'react';
+import { BarChart, Bar, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
 
-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>
+const data = [
+  {
+    name: 'Page A',
+    uv: 4000,
+    pv: 2400,
+  },
+  {
+    name: 'Page B',
+    uv: 3000,
+    pv: 1398,
+    amt: 2210,
+  },
+  {
+    name: 'Page C',
+    uv: 2000,
+    pv: 9800,
+    amt: 2290,
+  },
+  {
+    name: 'Page D',
+    uv: 2780,
+    pv: 3908,
+    amt: 2000,
+  },
+  {
+    name: 'Page E',
+    uv: 1890,
+    pv: 4800,
+    amt: 2181,
+  },
+  {
+    name: 'Page F',
+    uv: 2390,
+    pv: 3800,
+    amt: 2500,
+  },
+  {
+    name: 'Page G',
+    uv: 3490,
+    pv: 4300,
+    amt: 2100,
+  },
+];
 
-      <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"
+export default function App() {
+    return (
+      <ResponsiveContainer width="100%" aspect={3}>
+        <BarChart
+          width={500}
+          height={300}
+          data={data}
+          margin={{
+            top: 5,
+            right: 30,
+            left: 20,
+            bottom: 5,
+          }}
         >
-        <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>
+          <CartesianGrid strokeDasharray="3 3" />
+          <XAxis dataKey="name" tick={{stroke: "red"}} axisLine={false} tickLine={false}/>
+          <YAxis
+            tick={{stroke: "red"}}
+            axisLine={false}
+            tickLine={false}
+            tickCount={7}
+            // tickFormatter={(number) =>'$${number.toFixed(2)}'}
+            />
+          <Tooltip />
+          <Legend />
+          <Bar dataKey="pv" fill="#8884d8" />
+          <Bar dataKey="uv" fill="#82ca9d" />
+        </BarChart>
+      </ResponsiveContainer>
     );
-};
-
-export default Testttt;
+}