Commit dd478e76 authored by ugur22's avatar ugur22
Browse files

added description grpahs and stations

parent e84058b7
Pipeline #244 failed with stages
......@@ -3,6 +3,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@deck.gl/mapbox": "^6.4.5",
"@vx/axis": "0.0.184",
"@vx/curve": "0.0.182",
"@vx/geo": "0.0.184",
......@@ -19,8 +20,8 @@
"@vx/threshold": "0.0.184",
"d3": "^5.9.1",
"d3-scale": "^2.2.2",
"@deck.gl/mapbox": "^6.4.5",
"deck.gl": "^6.4.5",
"font-awesome": "^4.7.0",
"jsonp": "^0.2.1",
"react": "^16.8.4",
"react-dom": "^16.8.4",
......
......@@ -84,19 +84,19 @@ class App extends React.Component {
if(clickedObject.type === "lineGraph"){
return (
<InfoPanel closeInfoPanel={this.closeInfoPanel}>
<InfoPanel closeInfoPanel={this.closeInfoPanel} headerPanel={"Wijk aan Zee-De Banjaert"} subTextPanel={"Meetstation Wijk aan Zee is een industriestation. Op deze locatie wonen mensen en wordt de luchtkwaliteit voor een belangrijk deel bepaald door de uitstoot van de industrie. In opdracht van de provincie Noord-Holland en de omgevingsdienst Noordzeekanaalgebied meet de GGD Amsterdam hier de luchtkwaliteit."}>
<LineGraph />
</InfoPanel>
)
}else if(clickedObject.type === "Areagraph") {
return (
<InfoPanel closeInfoPanel={this.closeInfoPanel}>
<InfoPanel closeInfoPanel={this.closeInfoPanel} headerPanel={"Velsen-Staalstraat"} subTextPanel={"Meetstation Staalstraat is een industriestation. Op deze locatie wonen geen mensen en wordt de luchtkwaliteit voor een belangrijk deel bepaald door de uitstoot van de industrie. In opdracht van de provincie Noord-Holland en de omgevingsdienst Noordzeekanaalgebied meet de GGD Amsterdam hier de luchtkwaliteit."}>
<Areagraph/>
</InfoPanel>
)
}else if(clickedObject.type === "ThreshHoldgraph") {
return (
<InfoPanel closeInfoPanel={this.closeInfoPanel}>
<InfoPanel closeInfoPanel={this.closeInfoPanel} headerPanel={"Velsen Reyndersweg"} subTextPanel={"Meetstation Reyndersweg is een industriestation. Op deze locatie wonen geen mensen en wordt de luchtkwaliteit voor een belangrijk deel bepaald door de uitstoot van de industrie. het meetstation ligt slechts enkele meters van de grens van het terrein van Tata Steel. In opdracht van de provincie Noord-Holland en de omgevingsdienst Noordzeekanaalgebied meet de GGD Amsterdam hier de luchtkwaliteit."}>
<ThreshHoldgraph/>
</InfoPanel>
)
......
......@@ -68,7 +68,7 @@ const width = 640;
const height = 300;
// Bounds
const margin = {
top: 20,
top: 0,
bottom: 30,
left: 30,
right: 30
......@@ -118,7 +118,7 @@ class Areagraph extends React.Component {
return (
<LegendItem
key={`legend-quantile-${i}`}
margin={"40px 0px 20px 30px"}
margin={"20px 0px 20px 30px"}
>
<svg width={size} height={size}>
<rect fill={label.value} width={size} height={size} />
......
import React from 'react'
import "font-awesome/css/font-awesome.css";
class InfoPanel extends React.Component {
......@@ -12,11 +12,17 @@ class InfoPanel extends React.Component {
render() {
const closeInfoPanel = this.props.closeInfoPanel
let headerPanel = this.props.headerPanel;
let subTextPanel = this.props.subTextPanel;
return (
<div className="info-panel">
<div className="content">
<button onClick={(event) => closeInfoPanel(event)}>close</button>
<button onClick={(event) => closeInfoPanel(event)}><i class="fa fa-close"></i></button>
<div className="panel-description">
<h1 className="panel-header">Station {headerPanel}</h1>
<sub className="Panel-subtext">Hieronder een Vergelijking van fijnstof(PM2.5) Hollandse luchten sensoren met de officiele metingen. {subTextPanel}</sub>
</div>
{this.props.children}
</div>
</div>
......
......@@ -82,7 +82,7 @@ class LineGraph extends React.Component {
return (
<LegendItem
key={`legend-quantile-${i}`}
margin={"40px 0px 20px 30px"}
margin={"20px 0px 20px 30px"}
>
<svg width={size} height={size}>
<rect fill={label.value} width={size} height={size} />
......
......@@ -72,7 +72,7 @@ class ThreshHoldgraph extends React.Component {
return (
<LegendItem
key={`legend-quantile-${i}`}
margin={"15px 0px 20px 51px"}
margin={"20px 0px 20px 30px"}
>
<svg width={size} height={size}>
<rect fill={label.value} width={size} height={size} />
......
......@@ -22,6 +22,27 @@ body {
font-family: "Maax", sans-serif;
}
.info-panel {
h1 {
font-size: 17px;
}
p {
font-size: 13px;
}
button {
float: right;
}
button:hover{
cursor:pointer;
}
}
h2 {
margin: 0 0 20px 0;
font-weight: 500;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment