Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Initial Dashboard draft beta version #30

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Initial Dashboard draft beta version #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
aeb5ed7
react router package
pawel3ala Aug 25, 2020
c4c7e14
react router kick off
pawel3ala Aug 25, 2020
c028289
ignore node_modules
pawel3ala Aug 25, 2020
851431c
dashboard - kick off
pawel3ala Aug 25, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
target/
logs/
.idea/
*.iml
*.iml
frontend/be-neutral/node_modules
16,790 changes: 16,790 additions & 0 deletions frontend/be-neutral/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 6 additions & 0 deletions frontend/be-neutral/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,17 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@devexpress/dx-react-chart": "^2.7.1",
"@devexpress/dx-react-chart-material-ui": "^2.7.1",
"@devexpress/dx-react-core": "^2.7.1",
"@material-ui/core": "^4.11.0",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1"
},
"scripts": {
Expand Down
142 changes: 43 additions & 99 deletions frontend/be-neutral/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,108 +1,52 @@
import React from 'react';
import './App.css';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";

const stepList = [
{
img: 'schema-house.png',
alt: 'House - cloud - tree cycle with highlighted house.',
title: 'Tell us about your home',
text: 'We calculate your CO<sub>2</sub> emission based on your utilities usage and location-specific information of how the energy is produced and transmitted.'
},
{
img: 'schema-cloud.png',
alt: 'House - cloud - tree cycle with highlighted data cloud',
title: 'Compare your options',
text: 'Learn what contributes to your footprint. Compare options to reduce your emission and to offset what remains emitted. By reducing utilities usage, you will also pay lower bills. Get to know how much you can save and what upfront costs you\'ll have to cover. Whenever possible, we complete our knowledge-based estimates with data-based estimates by analyzing previous implementations of a solution in other houses in the network, similar to yours.'
},
{
img: 'schema-tree.png',
alt: 'House - cloud - tree cycle with highlighted tree',
title: 'Take an action',
text: 'Retrofit your house by addressing energy efficiency and shifting sources of energy to renewable, change your habits. Insulate your walls or renovate windows, install new solar panels, replace bulbs and plant trees to capture what you couldn\'t reduce.'
},
{
img: 'schema-arrows.png',
alt: 'House - cloud - tree cycle with highlighted transition arrows',
title: 'Repeat until you are neutral',
text: 'Keep on measuring your utilities and reducing your emission until you achieve carbon-neutrality and then maintain it by balancing emission with absorption. Start small, by replacing a few bulbs or setting the thermostat one degree up/down. Over time as you build trust to our estimates you can make bigger improvements like renovating windows, installing solar panels, or even trying that new energy-efficiency technology which you may have never considered before. Ultimately - make well informed decisions and move at your own pace. Track changes in your utilities usage and see effects, both ecological and economical, of your efforts'
},
{
img: 'schema-rain.png',
alt: 'House - cloud - tree cycle with data flying all over the place',
title: 'Share with the community',
text: 'Community is our super-power! Share changes you are making and how efficient they are so that we can make even more accurate estimates for others to rely on. We calculate the efficiency of your implementation by computing what \'normal\' utility usage meant for your house before the change (relative to the baseline established by other similar and nearby houses, to account for weather) and after the change compare your new \'normal\' with the old one.'
}



]
import Home from './components/Home'
import Dashboard from './components/Dashboard'
import Other from './components/Other'

function App() {
return (
<div>
<section className="main-section">
<img
src="logo.png"
alt="BeNeutral logo - zen circle around CO2."
style={{
display: 'block',
marginLeft: 'auto',
marginRight: 'auto',
width: '60vw',
minWidth: '350px'
}}
/>
<button onClick={() => console.log('click')}>Start the balancing art</button>
</section>

<section className="main-section">
<p>Heating and cooling, warm water, cooking, electricity to power appliances and lights all demand energy, taking a great toll on the environment and family budgets worldwide. From 25% in car-dominated US<a href="#ref1"><sup>1</sup></a> to 40% in bicycle-focused Denmark<a href="#ref2"><sup>2</sup></a>, homes contribute significantly to the annual emissions of a household.</p>

<img src="personal-footprint-structure-us-avg.png"
alt="Pie chart with footprint breakdown for an average american, home account for about 1/4, travel 1/3, other are food, goods and services."
style={{ float: 'right', height: '250px' }} />

<p>We look for better ways to obtain energy, yet, <b>as much as 80% of energy consumed at homes is wasted</b><a href="#ref3"><sup>3</sup></a>. Many energy solutions already exist, from improving efficiency to new sources, from accurate insulation to solar panels. On the other hand, we could also absorb some of the CO<sub>2</sub> emitted by carefully and smartly planting trees<a href="#ref4"><sup>4</sup></a>. We lack knowledge about all of these options, ways to compare and quantify them.</p>

<p>Long term, we believe there is no other way for the planet then every human to keep balance of his emissions and absorptions, and we need tools to do that.</p>
</section>

<section className="main-section">
<h2>How does <span style={{ color: '#1ca240' }}>B</span>e<span style={{ color: '#1ca240' }}>N</span>eutral work?</h2>

<p>Based on your utilities usage, we calculate CO<sub>2</sub> emitted by your house, advise how to reduce it, and encourage you to offset the rest by planting trees.</p>

<p>In short, we use data to help you keep balance to be neutral.</p>
<ol className="steps">
{stepList.map((step, index) => {
return (
<div key={index}>
<li className="step" >
<img src={step.img} alt={step.alt} />
<div className="point">{index + 1}</div>
<h3>{step.title}</h3>
<p>{step.text}</p>
</li>
</div>
)
})}
</ol>
</section>

<section class="main-section">
<p>
<span id="ref1">1.&nbsp;<a href="https://www.nature.org/en-us/get-involved/how-to-help/carbon-footprint-calculator/">The Nature Conservancy Carbon Footprint Calculator</a></span>
<span id="ref2">2.&nbsp;Copenhagen: Solutions For Sustainable Cities, 2014, p. 38</span>
<span id="ref3">3.&nbsp;<a href="https://drawdown.org/solutions/building-retrofitting">Project Drawdown - Building retrofitting</a></span>
<span id="ref4">4.&nbsp;<a href="https://www.arborday.org/calculator/">The Arbor Day Foundation's Tree Benefit Calculator</a></span>
</p>
<p style={{ color: 'grey' }}>TODO: maybe include water consumption - as a matter of running out of resources rather than global warming.</p>
</section>




</div>
<Router>
<div>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/dashboard">Dashboard</Link>
</li>
<li>
<Link to="/otherpage">Any other page</Link>
</li>
</ul>
</div>
<div >
This navbar is for testing purposes only - to be deleted
</div>

<hr />

<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/dashboard">
<Dashboard />
</Route>
<Route path="/otherpage">
<Other />
</Route>
</Switch>
</div>
</Router>
);
}

Expand Down
112 changes: 112 additions & 0 deletions frontend/be-neutral/src/components/Dashboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
import React from 'react'
import Paper from '@material-ui/core/Paper';
import {
ArgumentAxis,
Chart,
BarSeries,
PieSeries,
Title,
} from '@devexpress/dx-react-chart-material-ui';
import { Animation } from '@devexpress/dx-react-chart';
import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';

const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
paddingLeft: '20%',
paddingRight: '20%'
},
paper: {
padding: theme.spacing(2),
textAlign: 'center',
color: theme.palette.text.secondary,
},
}));

const data = [
{ month: 'Jan', value: 100 },
{ month: 'Feb', value: 99 },
{ month: 'March', value: 96 },
{ month: 'April', value: 94 },
{ month: 'May', value: 91 },
{ month: 'June', value: 88 },
{ month: 'July', value: 81 },
{ month: 'August', value: 50 },
{ month: 'September', value: 25 },
{ month: 'October', value: 12 },
{ month: 'November', value: 6 },
{ month: 'December', value: 1 },
];

const emisionData = [
{ item: 'Lights', area: 12 },
{ item: 'Laundry', area: 7 },
{ item: 'Water heating', area: 7 },
{ item: 'other factor', area: 7 },
{ item: 'other factor #2', area: 6 },
{ item: 'other factor #3', area: 5 },
{ item: 'Cooking', area: 2 },
{ item: 'House heating', area: 55 },
];

const absorptionData = [
{ item: 'My trees', area: 55 },
{ item: 'Carbon capture products', area: 30 },
{ item: 'Other stuff', area: 15 },
];

export default function FullWidthGrid() {
const classes = useStyles();

return (
<div className={classes.root}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Paper className={classes.paper}>
<Chart
data={data}
>
<ArgumentAxis />
<Title
text="Progres over the course of time"
/>
<BarSeries valueField="value" argumentField="month" />
<Animation />
</Chart>
</Paper>
</Grid>
<Grid item xs={12} sm={6}>
<Paper className={classes.paper}>
<Chart data={emisionData}>
<Title text="CO2 Emision" />
<PieSeries
valueField="area"
argumentField="item"
/>
<Animation />
</Chart>
</Paper>
</Grid>
<Grid item xs={12} sm={6}>
<Paper className={classes.paper}>
<Chart data={absorptionData} >
<Title text="CO2 Absorbtion"/>
<PieSeries
valueField="area"
argumentField="item"
/>
<Animation />
</Chart>
</Paper>
</Grid>
<Grid item xs={6} sm={6}>
<Paper className={classes.paper}>Reduce emision: </Paper>
</Grid>
<Grid item xs={6} sm={6}>
<Paper className={classes.paper}>Increase absorbtion</Paper>
</Grid>
</Grid>
</div>
);
}
Loading