Skip to content
Snippets Groups Projects
Commit 7cee557a authored by francoisdillinger's avatar francoisdillinger
Browse files

updated chart data and desired temp

parent fe97f456
No related branches found
No related tags found
No related merge requests found
...@@ -20,6 +20,9 @@ function App() { ...@@ -20,6 +20,9 @@ function App() {
const [theme, setTheme] = useState(false); const [theme, setTheme] = useState(false);
const [rotateValues, setRotateValues] = useState({ rotateX: 0, rotateY: 0 }); const [rotateValues, setRotateValues] = useState({ rotateX: 0, rotateY: 0 });
const [previousMonthlyCost, setPreviousMonthlyCost] = useState(0);
const [currentMonthlyCost, setCurrentMonthlyCost] = useState(0);
const handleDarkModeToggle = () => { const handleDarkModeToggle = () => {
setTheme(prevState => !prevState) setTheme(prevState => !prevState)
} }
...@@ -98,8 +101,8 @@ function App() { ...@@ -98,8 +101,8 @@ function App() {
<DesiredTemp /> <DesiredTemp />
</Slide> </Slide>
<Slide index={1}> <Slide index={1}>
<ChartComponent /> <ChartComponent setPreviousMonthlyCost={setPreviousMonthlyCost} setCurrentMonthlyCost={setCurrentMonthlyCost} />
<CostsCollection /> <CostsCollection previousMonthlyCost={previousMonthlyCost} currentMonthlyCost={currentMonthlyCost} />
</Slide> </Slide>
<Slide index={2}> <Slide index={2}>
<ForecastCollection /> <ForecastCollection />
......
...@@ -20,7 +20,7 @@ const DesiredTemp = (props) => { ...@@ -20,7 +20,7 @@ const DesiredTemp = (props) => {
<div id="currentTemp" className='temps'> <div id="currentTemp" className='temps'>
<p className='title'>Desired</p> <p className='title'>Desired</p>
<p className='title'>Temperature</p> <p className='title'>Temperature</p>
<p className='temperatures'>{desiredTemp} &deg;F</p> <p className='temperatures' >{desiredTemp} &deg;F</p>
</div> </div>
<IncreaseTempButton handleIncreaseTempClick={handleIncreaseTempClick}/> <IncreaseTempButton handleIncreaseTempClick={handleIncreaseTempClick}/>
</div> </div>
......
...@@ -49,6 +49,8 @@ const ChartComponent = (props) => { ...@@ -49,6 +49,8 @@ const ChartComponent = (props) => {
const chartData = await response.json(); const chartData = await response.json();
setChartData(chartData); setChartData(chartData);
props.setPreviousMonthlyCost((chartData[chartData.length - 2][2]).toFixed(2))
props.setCurrentMonthlyCost((chartData[chartData.length - 1][2]).toFixed(2))
} catch (error) { } catch (error) {
console.error('There was a problem with the fetch operation:', error); console.error('There was a problem with the fetch operation:', error);
} }
...@@ -63,7 +65,7 @@ const ChartComponent = (props) => { ...@@ -63,7 +65,7 @@ const ChartComponent = (props) => {
datasets: [ datasets: [
{ {
label: 'Power Usage (MW)', label: 'Power Usage (MW)',
data: chartData ? chartData.map(data => (data[1] / 1000)) : [], data: chartData ? chartData.map(data => (data[1] / 100000)) : [],
borderColor: 'red', borderColor: 'red',
backgroundColor: 'red', backgroundColor: 'red',
}, },
...@@ -81,7 +83,6 @@ const ChartComponent = (props) => { ...@@ -81,7 +83,6 @@ const ChartComponent = (props) => {
}, },
], ],
}; };
return ( return (
<div id="chart"> <div id="chart">
{chartData && <Line options={options} data={data} />} {chartData && <Line options={options} data={data} />}
......
...@@ -8,20 +8,20 @@ const CostsCollection = (props) => { ...@@ -8,20 +8,20 @@ const CostsCollection = (props) => {
<p className='title'>Previous</p> <p className='title'>Previous</p>
<p className='title'>Monthly</p> <p className='title'>Monthly</p>
<p className='title'>Cost</p> <p className='title'>Cost</p>
<p className='amounts'>81.00</p> <p className='amounts' style={{letterSpacing: '3px'}}>{props.previousMonthlyCost}</p>
</div> </div>
<div id="comfortTemp" className='costs'> <div id="comfortTemp" className='costs'>
<p className='title'>Current</p> <p className='title'>Current</p>
<p className='title'>Monthly</p> <p className='title'>Monthly</p>
<p className='title'>Cost</p> <p className='title'>Cost</p>
<p className='amounts'>81.00</p> <p className='amounts' style={{letterSpacing: '3px'}}>{props.currentMonthlyCost}</p>
</div> </div>
<div id="outsideTemp" className='costs'> {/* <div id="outsideTemp" className='costs'>
<p className='title'>Predicted</p> <p className='title'>Predicted</p>
<p className='title'>Monthly</p> <p className='title'>Monthly</p>
<p className='title'>Cost</p> <p className='title'>Cost</p>
<p className='amounts'>81.00</p> <p className='amounts'>81.00</p>
</div> </div> */}
{/* <div id="outsideTemp" className='costs'> {/* <div id="outsideTemp" className='costs'>
<p className='title'>Total</p> <p className='title'>Total</p>
<p className='title'>Monthly</p> <p className='title'>Monthly</p>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment