From 76fd465ee44075b7c55a4e43f7ab3f80f9043d8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Corte?= <josecarlos-corte@hotmail.com>
Date: Fri, 6 May 2022 19:21:18 -0300
Subject: [PATCH] :lipstick: modifing ui of card and add chart test

---
 src/components/graph/Graph.tsx                | 60 ++++++++++++++++++-
 src/components/graph/graphCard/GraphCard.tsx  |  7 ++-
 .../graph/graphCard/GraphCardView.ts          | 22 ++++---
 3 files changed, 75 insertions(+), 14 deletions(-)

diff --git a/src/components/graph/Graph.tsx b/src/components/graph/Graph.tsx
index 9a15997..16e0d45 100644
--- a/src/components/graph/Graph.tsx
+++ b/src/components/graph/Graph.tsx
@@ -1,7 +1,63 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
+
+import { Bar, Line } from 'react-chartjs-2';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend
+} from 'chart.js'
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend
+)
 
 export default function Graph() {
+
+  const [ graphData, setGraphData ] = useState({
+    labels: [],
+    datasets: [],
+  })
+  const [ graphOptions, setGraphOptions ] = useState({})
+
+  useEffect(() => {
+    setGraphData({
+      labels: ['John', 'kevin', 'george', 'michael', 'oreo'],
+      datasets: [{
+        label: "Whom'st let the dogsout",
+        data: [12, 55, 34, 120, 720],
+        borderColor: "rgb(53, 162, 235)",
+        backgroundColor: "rgb(53, 162, 235, 0.4)"
+      }]
+    })
+    setGraphOptions({
+      responsive: true,
+      plugins: {
+        legend: {
+          position: 'top'
+        },
+        title: {
+          display: true,
+          text: "Whom'st let the dogsout"
+        }
+      }
+    })
+  }, [])
+
+
   return (
-    <></>
+    <Line
+      options={graphOptions}
+      data={graphData}
+      // {}
+    />
   )
 }
diff --git a/src/components/graph/graphCard/GraphCard.tsx b/src/components/graph/graphCard/GraphCard.tsx
index 9a4de14..a1c7f4e 100644
--- a/src/components/graph/graphCard/GraphCard.tsx
+++ b/src/components/graph/graphCard/GraphCard.tsx
@@ -9,10 +9,11 @@ import { GraphCardView } from './GraphCardView';
 interface GraphCardInterface {
   title: string,
   subtitle: string,
-  consumption?: number
+  consumption?: number,
+  className?: string
 }
 
-export default function GraphCard({ title, subtitle, consumption }: GraphCardInterface) {
+export default function GraphCard({ title, subtitle, consumption, className }: GraphCardInterface) {
   const [timeCourse, setTimeCourse] = React.useState<string | null>('left');
 
   const handleAlignment = (
@@ -23,7 +24,7 @@ export default function GraphCard({ title, subtitle, consumption }: GraphCardInt
   };
 
   return (
-    <GraphCardView>
+    <GraphCardView className={className} >
       <div className='content' >
         <div className='header'>
           <div>
diff --git a/src/components/graph/graphCard/GraphCardView.ts b/src/components/graph/graphCard/GraphCardView.ts
index c463886..f6b5e03 100644
--- a/src/components/graph/graphCard/GraphCardView.ts
+++ b/src/components/graph/graphCard/GraphCardView.ts
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 export const GraphCardView = styled.article`
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   justify-content: space-between;
 
   flex-direction: column;
@@ -10,21 +10,23 @@ export const GraphCardView = styled.article`
   width: 100%;
   /* max-width: ; */
   height: fit-content;
-  min-height: 40rem;
-  max-height: fit-content;
+  min-height: 34.5rem;
 
-  padding: 30px;
-
-  box-shadow: 0px 12px 23px rgba(62, 73, 84, 0.04);
+  background: #F8F8F8;
+	box-shadow: 0 0 11px rgba(0, 0, 0, 0.2)  ;
+	-webkit-box-shadow: 0 0 11px rgba(0, 0, 0, 0.2)  ;
+	-moz-box-shadow: 0 0 11px rgba(0, 0, 0, 0.2)  ;
   border-radius: 20px;
 
   background-color: #FFFFFF;
 
   .graph {
-    width: 100%;
-    height: 396px;
+    width: 90%;
+    min-height: 300px;
 
     background-color: black;
+
+    margin-bottom: 20px;
   }
 
   a {
@@ -49,7 +51,9 @@ export const GraphCardView = styled.article`
   }
 
   .content {
-    width: 100%;
+    width: 90%;
+
+    margin-top: 20px;
   }
 
   .header {