Commit ea5d8053 authored by alain's avatar alain 🐙
Browse files

make more thing optional/configurable

parent e4853a1d
......@@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Data on a Map App</title>
<title>%REACT_APP_WEBSITE_NAME%</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
......
......@@ -99,7 +99,7 @@ class DeckLayers extends React.Component {
hover: e.object,
hoverContent: <StationTooltip d={e.object} label={layerDefinition.label} unit={unit.label} />
}),
onClick: e => setModal(<StationInfo clickedObject={e.object} activeLayer={layerDefinition} />)
onClick: source.stationData ? e => setModal(<StationInfo clickedObject={e.object} activeLayer={layerDefinition} />) : null
})
)
break;
......
......@@ -9,16 +9,16 @@ import { moment } from "../util/time.js"
const SensorTooltip = props => {
const { d, label, unit } = props
const dataAgeText = `${ moment(d.timestamp).format("HH") }-${ moment(d.timestamp).add(1, 'hours').format("HH") }${texts.hourShort}`
const dataAgeText = d.timestamp ? ` (${ moment(d.timestamp).format("HH") }-${ moment(d.timestamp).add(1, 'hours').format("HH") }${texts.hourShort})` : ''
return (
<div>
<h4>{d.name}</h4>
<em>{label}</em>
{texts.lastMean !== label && <em>{label}</em>}
<table className="data"><tbody>
{ d.mean !== null &&
<tr>
<td>{`${texts.lastMean} (${dataAgeText}):`}</td>
<td>{`${texts.lastMean}${dataAgeText}:`}</td>
<td><strong>{ roundBy(d.mean, 1) }{ unit }</strong></td>
</tr>
}
......
......@@ -2,6 +2,7 @@ import React from 'react'
import IconSearch from 'Icons/IconSearch'
import { texts } from "../../../config/texts"
import { mapItemSettings } from "../../../config/map"
class MapSearch extends React.Component {
......@@ -90,7 +91,7 @@ class MapSearch extends React.Component {
// key enter
if(e.keyCode === 13 && current > -1) {
e.preventDefault()
this.props.changeViewportCenter(e, poisFiltered[current].coordinates, 17)
this.props.changeViewportCenter(e, poisFiltered[current].coordinates, mapItemSettings.searchZoomLevel)
e.target.blur()
}
......@@ -160,7 +161,7 @@ class MapSearch extends React.Component {
const className = (current === i ? 'current' : '')
return <div key={poi.name} className={className} onClick={(e)=>{
changeViewportCenter(e, poi.coordinates, 17)
changeViewportCenter(e, poi.coordinates, mapItemSettings.searchZoomLevel)
this.setState({
search: texts.search,
poisFiltered: pois
......
......@@ -4,7 +4,7 @@ import ReactHtmlParser from 'react-html-parser'
import { scaleLinear, scaleLog } from 'd3-scale'
const Legend = (props) => {
const { unit } = props
const { unit, width } = props
const scale = (unit && unit.scale === 'log' ? scaleLog().domain(unit.range) : scaleLinear().domain(unit.range))
......@@ -15,16 +15,16 @@ const Legend = (props) => {
<span>{unit.range[0]} {unit.label}</span>
<span>{unit.range[1]} {unit.label} </span>
</div>
<svg width="236" height="8">
<svg width={width} height="8">
<defs>
<linearGradient id={`legend-${unit.id}`} x1="0" y1="0" x2="236" y2="8" gradientUnits="userSpaceOnUse">
<linearGradient id={`legend-${unit.id}`} x1="0" y1="0" x2={width} y2="8" gradientUnits="userSpaceOnUse">
{ Object.keys(unit.legend).sort((a,b) => a-b).map(s => {
//return <stop key={s} offset={`${(s-unit.range[0])/(unit.range[1]-unit.range[0]) * 100}%`} stopColor={unit.legend[s].color} />
return <stop key={s} offset={`${(scale(s) * 100)}%`} stopColor={unit.legend[s].color} />
}) }
</linearGradient>
</defs>
<rect x="0" y="0" width="236" height="8" fill={`url(#legend-${unit.id})`} />
<rect x="0" y="0" width={width} height="8" fill={`url(#legend-${unit.id})`} />
</svg>
{/* <div className="legend-labels">
<span>{ unit.legend[unit.range[0]].label }</span>
......
......@@ -22,6 +22,8 @@ class PanelLayers extends React.Component {
super()
this.closeLoading = this.closeLoading.bind(this)
this.container = React.createRef()
}
......@@ -75,7 +77,7 @@ class PanelLayers extends React.Component {
if(panelStatus[dataGroup.title]) classes.push("open")
return (
<div key={dataGroup.title} className={ classes.join(" ") }>
<div key={dataGroup.title} className={ classes.join(" ") } ref={this.container}>
<h3 className="panel-toggle" onClick={() => { this.toggleGroup(dataGroup.title) }}>
{dataGroup.title}
<IconArrowDown />
......@@ -103,7 +105,7 @@ class PanelLayers extends React.Component {
</span>
}
{ parameter.tooltip && <Tooltip parameter={parameter} /> }
{ unit && <Legend unit={unit} /> }
{ unit && <Legend unit={unit} width={this.container.current.offsetWidth} /> }
</li>)
})
}
......
......@@ -105,6 +105,8 @@
#search-form {
pointer-events: auto;
position: relative;
width: 290px;
max-width: calc(100vw - 70px);
height: 34px;
margin: 10px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
......
......@@ -259,7 +259,7 @@ class App extends React.Component {
<MapAttributions />
<div className='mapboxgl-ctrl-bottom-left'>
{( texts.about && <Panel id="about" content={ texts.about } openOnLoad={true} /> )}
{ texts.about && <Panel id="about" content={ texts.about } openOnLoad={true} /> }
<PanelLayers layers={layers} forceUpdate={layers.join()} dataGroups={dataGroups} toggleLayer={this.toggleLayer} viewportHeight={viewport.height} loading={loading} reload={this.reload} />
</div>
......
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