💄 modifing ui of card and add chart test

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}
+      // {}
+    />
   )
 }

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>

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;
+  min-height: 34.5rem;
-  max-height: fit-content;
 
-  padding: 30px;
+  background: #F8F8F8;
-
+	box-shadow: 0 0 11px rgba(0, 0, 0, 0.2)  ;
-  box-shadow: 0px 12px 23px rgba(62, 73, 84, 0.04);
+	-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%;
+    width: 90%;
-    height: 396px;
+    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 {