rechart added

master
mahdi andalib 3 years ago
parent a5a5cca5ea
commit 4b16e0558e
  1. 40
      src/components/Chart/SimpleBarChart/index.js
  2. 11
      src/components/Chart/SimpleBarChart/index.scss
  3. 106
      src/components/testtttt/Testttt.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: "مدت مشابه سال گذشته",

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

@ -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"
>
<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 default Testttt;
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,
}}
>
<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>
);
}

Loading…
Cancel
Save