From 4b16e0558e12f2d6ae67633433f742708803ffd2 Mon Sep 17 00:00:00 2001 From: mahdi andalib Date: Sun, 30 Jan 2022 12:54:40 +0330 Subject: [PATCH] rechart added --- src/components/Chart/SimpleBarChart/index.js | 40 ++++--- .../Chart/SimpleBarChart/index.scss | 11 -- src/components/testtttt/Testttt.js | 106 +++++++++++++----- 3 files changed, 102 insertions(+), 55 deletions(-) diff --git a/src/components/Chart/SimpleBarChart/index.js b/src/components/Chart/SimpleBarChart/index.js index be925b7..533f8f9 100644 --- a/src/components/Chart/SimpleBarChart/index.js +++ b/src/components/Chart/SimpleBarChart/index.js @@ -16,8 +16,9 @@ import { const SimpleBarChart = ({ data, buttons }) => { return ( -
-
+
+ {/* top */} +

میزان فروش محصولات

@@ -34,29 +35,39 @@ const SimpleBarChart = ({ data, buttons }) => { ))}
-
- + {/* chart */} + - - - + + + - - - + {/* */} + + + -
); }; @@ -138,6 +149,7 @@ SimpleBarChart.defaultProps = { amt: 2100, }, ], + buttons: [ { name: "مدت مشابه سال گذشته", diff --git a/src/components/Chart/SimpleBarChart/index.scss b/src/components/Chart/SimpleBarChart/index.scss index d744d28..e69de29 100644 --- a/src/components/Chart/SimpleBarChart/index.scss +++ b/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; -} diff --git a/src/components/testtttt/Testttt.js b/src/components/testtttt/Testttt.js index 1dcf9f7..ef9495a 100644 --- a/src/components/testtttt/Testttt.js +++ b/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 ( -
- +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, + }, +]; - -
- ); -}; - -export default Testttt; +export default function App() { + return ( + + + + + '$${number.toFixed(2)}'} + /> + + + + + + + ); +}