updated chart data and desired temp

frontend/src/App.js

@@ -20,6 +20,9 @@ function App() {
   const [theme, setTheme] = useState(false);
   const [rotateValues, setRotateValues] = useState({ rotateX: 0, rotateY: 0 });
 
+  const [previousMonthlyCost, setPreviousMonthlyCost] = useState(0);
+  const [currentMonthlyCost, setCurrentMonthlyCost] = useState(0);
+
   const handleDarkModeToggle = () => {
     setTheme(prevState => !prevState)
   }
@@ -98,8 +101,8 @@ function App() {
               <DesiredTemp />
             </Slide>
             <Slide index={1}>
-              <ChartComponent />
-              <CostsCollection />
+              <ChartComponent setPreviousMonthlyCost={setPreviousMonthlyCost} setCurrentMonthlyCost={setCurrentMonthlyCost} />
+              <CostsCollection previousMonthlyCost={previousMonthlyCost} currentMonthlyCost={currentMonthlyCost} />
             </Slide>
             <Slide index={2}>
               <ForecastCollection />

frontend/src/DesiredTemp.js

@@ -20,7 +20,7 @@ const DesiredTemp = (props) => {
             <div id="currentTemp" className='temps'>
             <p className='title'>Desired</p>
             <p className='title'>Temperature</p>
-            <p className='temperatures'>{desiredTemp} &deg;F</p>
+            <p className='temperatures' >{desiredTemp} &deg;F</p>
             </div>
             <IncreaseTempButton handleIncreaseTempClick={handleIncreaseTempClick}/>
         </div>

frontend/src/chartComponent.js

@@ -49,6 +49,8 @@ const ChartComponent = (props) => {
       
       const chartData = await response.json();
       setChartData(chartData);
+      props.setPreviousMonthlyCost((chartData[chartData.length - 2][2]).toFixed(2))
+      props.setCurrentMonthlyCost((chartData[chartData.length - 1][2]).toFixed(2))
     } catch (error) {
       console.error('There was a problem with the fetch operation:', error);
     }
@@ -63,7 +65,7 @@ const ChartComponent = (props) => {
     datasets: [
       {
         label: 'Power Usage (MW)',
-        data: chartData ? chartData.map(data => (data[1] / 1000)) : [],
+        data: chartData ? chartData.map(data => (data[1] / 100000)) : [],
         borderColor: 'red',
         backgroundColor: 'red',
       },
@@ -81,7 +83,6 @@ const ChartComponent = (props) => {
       },
     ],
   };
-
   return (
     <div id="chart">
       {chartData && <Line options={options} data={data} />}

frontend/src/costsCollection.js

@@ -8,20 +8,20 @@ const CostsCollection = (props) => {
         <p className='title'>Previous</p>
         <p className='title'>Monthly</p>
         <p className='title'>Cost</p>
-        <p className='amounts'>81.00</p>
+        <p className='amounts' style={{letterSpacing: '3px'}}>{props.previousMonthlyCost}</p>
         </div>
         <div id="comfortTemp" className='costs'>
         <p className='title'>Current</p>
         <p className='title'>Monthly</p>
         <p className='title'>Cost</p>
-        <p className='amounts'>81.00</p>
+        <p className='amounts' style={{letterSpacing: '3px'}}>{props.currentMonthlyCost}</p>
         </div>
-        <div id="outsideTemp" className='costs'>
+        {/* <div id="outsideTemp" className='costs'>
         <p className='title'>Predicted</p>
         <p className='title'>Monthly</p>
         <p className='title'>Cost</p>
         <p className='amounts'>81.00</p>
-        </div>
+        </div> */}
         {/* <div id="outsideTemp" className='costs'>
         <p className='title'>Total</p>
         <p className='title'>Monthly</p>