diff --git a/frontend/src/App.js b/frontend/src/App.js index 7fec7f5e9d2fc8ec08c5a897201a642686e50998..76b30f6151bb6aa8790a6e2882909152410e03e2 100644 --- a/frontend/src/App.js +++ b/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 /> diff --git a/frontend/src/DesiredTemp.js b/frontend/src/DesiredTemp.js index e653b349a99c975ec6843fc4aab846bd933dba5e..558ef85f5ce1dfba0855f2afe1256cf965962131 100644 --- a/frontend/src/DesiredTemp.js +++ b/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} °F</p> + <p className='temperatures' >{desiredTemp} °F</p> </div> <IncreaseTempButton handleIncreaseTempClick={handleIncreaseTempClick}/> </div> diff --git a/frontend/src/chartComponent.js b/frontend/src/chartComponent.js index 7495e32166a96dd5a8a8c7a07b006e4b2537f91b..71fa1ab4951b80fa93c24e5a4ad209c572648982 100644 --- a/frontend/src/chartComponent.js +++ b/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} />} diff --git a/frontend/src/costsCollection.js b/frontend/src/costsCollection.js index 460505a528f270b8abf895ea837cb854f4e28799..623387d905e7457b5dd00b687e929781b70f9818 100644 --- a/frontend/src/costsCollection.js +++ b/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>