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. 102
      src/components/testtttt/Testttt.js

@ -16,8 +16,9 @@ import {
const SimpleBarChart = ({ data, buttons }) => { const 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,29 +35,39 @@ 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: 30, 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"
tick={{stroke: "#929292"}}
axisLine={false}
tickLine={false}
/>
<YAxis
tick={{stroke: "#929292"}}
axisLine={false}
tickLine={false}
tickCount={7}
/>
<Tooltip /> <Tooltip />
<Legend /> {/* <Legend width={200} height={50} wrapperStyle={{right: 0, bottom: 0, backgroundColor: '#f5f5f5', border: '1px solid #d5d5d5', borderRadius: 7, lineHeight: '10px' }} /> */}
<Bar dataKey="امسال" fill="#4862E4" /> <Bar dataKey="امسال" fill="#4862E4" radius={[4, 4, 4, 4]}/>
<Bar dataKey="پارسال" fill="#E1E6FF" /> <Bar dataKey="پارسال" fill="#E1E6FF" radius={[4, 4, 4, 4]}/>
</BarChart> </BarChart>
</ResponsiveContainer> </ResponsiveContainer>
</div>
</section> </section>
); );
}; };
@ -138,6 +149,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;
}

@ -1,32 +1,78 @@
import React from "react"; import React, { PureComponent } from 'react';
import video from "./danovin.mp4"; import { BarChart, Bar, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
const Testttt = () => { const data = [
return ( {
<div classNameName="App"> name: 'Page A',
<button uv: 4000,
id="dropdownButton" pv: 2400,
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" name: 'Page B',
> uv: 3000,
Dropdown button pv: 1398,
</button> 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 export default function App() {
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" <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"> <CartesianGrid strokeDasharray="3 3" />
<li> <XAxis dataKey="name" tick={{stroke: "red"}} axisLine={false} tickLine={false}/>
<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"> <YAxis
Dashboard tick={{stroke: "red"}}
</a> axisLine={false}
</li> tickLine={false}
</ul> tickCount={7}
</div> // tickFormatter={(number) =>'$${number.toFixed(2)}'}
</div> />
<Tooltip />
<Legend />
<Bar dataKey="pv" fill="#8884d8" />
<Bar dataKey="uv" fill="#82ca9d" />
</BarChart>
</ResponsiveContainer>
); );
}; }
export default Testttt;

Loading…
Cancel
Save