📌 insert update in code of simple graph

Author: lucassantus

src/components/Sales/index.tsx

@@ -10,8 +10,8 @@ export const Sales: React.FC = () => {
         <span className="text-white font-inter text-2xl">
           Vendas por dia da semana
         </span>
-        <div className="grid grid-cols-2 pt-8">
-          <div className="flex flex-col gap-2">
+        <div className="grid sm:grid-cols-2 grid-cols-1 pt-8">
+          <div className="flex flex-col gap-2 sm:justify-center sm:items-start items-center">
             <InfoOfTheDay
               dailySale="Dia com mais vendas"
               weekday="quarta-feira"
@@ -27,7 +27,7 @@ export const Sales: React.FC = () => {
             />
           </div>
 
-          <div>
+          <div className="pt-10">
             <SimpleGraph />
           </div>
         </div>

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 (
-    <div className="h-full">
-      <div className="flex justify-between items-end h-full">
+    <div className="relative h-full  flex items-center">
+      <div className="w-full bg-[#4A4556] h-[3px]" />
+
+      <div className="absolute flex justify-between items-end h-full overflow-auto z-10 inset-0">
         {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"
             >
               <div
-                className={classNames(
-                  // height,
-                  "bg-custom-cyan-600 w-[15px] rounded-full"
-                )}
+                className={"bg-custom-cyan-600 w-[15px] rounded-full"}
                 style={divStyle}
               />
               <span className="font-inter font-medium text-sm text-white">

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<IItemProps> = ({ title, value, color }) => {
+export const ItemStatistics: FC<IItemProps> = ({
+  title,
+  value,
+  color,
+  type,
+}) => {
   const valueFormatted = useMemo(() => {
+    if (type === "integer") return value;
+
     return formatterNumbers(value, 1);
-  }, [value]);
+  }, [value, type]);
 
   return (
     <div className="flex gap-1 text-white font-inter text-sm font-medium">

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<IStatisticsProps> = ({
   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<IStatisticsProps> = ({
     <Card>
       <div className="py-7 md:px-12">
         <div className="flex flex-col items-center justify-between gap-4">
-          <span className="font-inter font-semibold text-2xl text-white">
+          <span className="font-inter font-semibold text-2xl text-white flex items-center justify-center">
             {title}
           </span>
           <div className="relative">
@@ -52,11 +58,13 @@ export const Statistics: FC<IStatisticsProps> = ({
               title="Esperado"
               value={expected}
               color={"bg-custom-purple-700"}
+              type={type}
             />
             <ItemStatistics
               title="Alcançado"
               value={reached}
               color={backgroundColor}
+              type={type}
             />
           </div>
         </div>

src/pages/Dashboard.tsx

@@ -4,29 +4,37 @@ import { Statistics } from "../components/Statistics";
 
 export const Dashboard = () => {
   return (
-    <div className="w-screen w- h-screen bg-custom-purple-800 flex justify-center items-center">
-      <div className="container mx-auto px-4 grid grid-cols-1 gap-5">
-        <div className="grid sm:grid-cols-1 md:grid-cols-3 gap-5">
-          <Score />
+    <div className="w-screen sm:h-screen h-full p-5 bg-custom-purple-800">
+      <div className="sm:flex sm:justify-center sm:items-center h-full">
+        <div className="container grid-cols-1 mx-auto px-4 grid gap-5 max-w-[1200px]">
+          <div className="grid sm:grid-cols-1 md:grid-cols-3 gap-5 ">
+            <Score />
 
-          <Statistics
-            title="Vendas fechadas"
-            expected={100}
-            reached={70}
-            backgroundColor={"bg-[#7367F0]"}
-            strokeColor={"stroke-[#7367F0]"}
-          />
+            <Statistics
+              title="Vendas fechadas"
+              data={{
+                expected: 100,
+                reached: 70,
+                type: "integer",
+              }}
+              backgroundColor={"bg-[#7367F0]"}
+              strokeColor={"stroke-[#7367F0]"}
+            />
 
-          <Statistics
-            title="Meta mensal"
-            expected={70000}
-            reached={63000}
-            backgroundColor={"bg-[#A66DE9]"}
-            strokeColor={"stroke-[#A66DE9]"}
-          />
-        </div>
-        <div>
-          <Sales />
+            <Statistics
+              title="Meta mensal"
+              data={{
+                expected: 70000,
+                reached: 63000,
+                type: "money",
+              }}
+              backgroundColor={"bg-[#A66DE9]"}
+              strokeColor={"stroke-[#A66DE9]"}
+            />
+          </div>
+          <div>
+            <Sales />
+          </div>
         </div>
       </div>
     </div>