diff --git a/src/components/Sales/index.tsx b/src/components/Sales/index.tsx index 400b89e..e451035 100644 --- a/src/components/Sales/index.tsx +++ b/src/components/Sales/index.tsx @@ -10,8 +10,8 @@ export const Sales: React.FC = () => { Vendas por dia da semana -
-
+
+
{ />
-
+
diff --git a/src/components/SimpleGraph/index.tsx b/src/components/SimpleGraph/index.tsx index 5f3029a..4797d7b 100644 --- a/src/components/SimpleGraph/index.tsx +++ b/src/components/SimpleGraph/index.tsx @@ -1,5 +1,3 @@ -import classNames from "classnames"; - interface IDaysType { day: string; value: number; @@ -47,8 +45,10 @@ export const SimpleGraph: React.FC = () => { }; return ( -
-
+
+
+ +
{DAYS.map((item) => { const value = calcularValor(item.value); @@ -62,10 +62,7 @@ export const SimpleGraph: React.FC = () => { className="flex flex-col justify-center items-center" >
diff --git a/src/components/Statistics/components/Item.tsx b/src/components/Statistics/components/Item.tsx index 95bf954..27e39b8 100644 --- a/src/components/Statistics/components/Item.tsx +++ b/src/components/Statistics/components/Item.tsx @@ -6,12 +6,20 @@ interface IItemProps { title: string; value: number; color: string; + type: "money" | "integer"; } -export const ItemStatistics: FC = ({ title, value, color }) => { +export const ItemStatistics: FC = ({ + title, + value, + color, + type, +}) => { const valueFormatted = useMemo(() => { + if (type === "integer") return value; + return formatterNumbers(value, 1); - }, [value]); + }, [value, type]); return (
diff --git a/src/components/Statistics/index.tsx b/src/components/Statistics/index.tsx index 87e6f25..6ffb39c 100644 --- a/src/components/Statistics/index.tsx +++ b/src/components/Statistics/index.tsx @@ -3,21 +3,27 @@ import { Card } from "../Card"; import { CircleProgress } from "../CircleProgress"; import { ItemStatistics } from "./components/Item"; -interface IStatisticsProps { - title: string; +interface IDataType { expected: number; reached: number; + type: "money" | "integer"; +} + +interface IStatisticsProps { + title: string; + data: IDataType; backgroundColor: string; strokeColor: string; } export const Statistics: FC = ({ title, - expected, - reached, + data, backgroundColor, strokeColor, }) => { + const { reached, expected, type } = data; + const percentage = useMemo(() => { const value = (reached / expected) * 100; @@ -30,7 +36,7 @@ export const Statistics: FC = ({
- + {title}
@@ -52,11 +58,13 @@ export const Statistics: FC = ({ title="Esperado" value={expected} color={"bg-custom-purple-700"} + type={type} />
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx index ffaa7e2..3b47a6a 100644 --- a/src/pages/Dashboard.tsx +++ b/src/pages/Dashboard.tsx @@ -4,29 +4,37 @@ import { Statistics } from "../components/Statistics"; export const Dashboard = () => { return ( -
-
-
- +
+
+
+
+ - + - -
-
- + +
+
+ +