parent
4b16e0558e
commit
0dd513fe7f
3 changed files with 16 additions and 76 deletions
@ -1,78 +1,18 @@ |
|||||||
import React, { PureComponent } from 'react'; |
import React from "react"; |
||||||
import { BarChart, Bar, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'; |
// import "./Testttt.scss";
|
||||||
|
|
||||||
const data = [ |
import book from "../../assets/images/book.svg"; |
||||||
{ |
import bookCover from "../../assets/images/book-white-cover.svg"; |
||||||
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, |
|
||||||
}, |
|
||||||
]; |
|
||||||
|
|
||||||
export default function App() { |
export const Testttt = ({ bookBackCoverBg }) => { |
||||||
return ( |
return ( |
||||||
<ResponsiveContainer width="100%" aspect={3}> |
<section className="w-10/12 bg-white rounded-lg shadow-lg p-10 mx-auto my-10"> |
||||||
<BarChart |
<div>mahdi</div> |
||||||
width={500} |
</section> |
||||||
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> |
|
||||||
); |
); |
||||||
} |
}; |
||||||
|
|
||||||
|
export default Testttt; |
||||||
|
Testttt.defaultProps = { |
||||||
|
bookBackCoverBg: "bg-greenBookBg", |
||||||
|
}; |
||||||
|
Binary file not shown.
Loading…
Reference in new issue