Commit 98f4d83f authored by alain's avatar alain 🐙
Browse files

tooltips for datastreams

parent 609be700
......@@ -8,7 +8,7 @@ class MapAttributions extends React.Component {
<div className="mapboxgl-ctrl-bottom-right">
<div className="mapboxgl-ctrl mapboxgl-ctrl-attrib">
<div className="mapboxgl-ctrl-attrib-inner">
<span>v. 28/11/2019</span>
<span>v. 9/12/2019</span>
<span><a href="https://waag.org" target="_blank" rel="noopener noreferrer">waag</a></span>
<span>© <a href="http://www.openstreetmap.org/about/" target="_blank" rel="noopener noreferrer">OpenStreetMap</a></span>
</div>
......
......@@ -20,7 +20,7 @@ const ChartTooltip = (props) => {
let rows = []
Object.keys(dataStreamsState).forEach(i => {
const headerRow = <tr key={i}><th>{ texts.dataStreams[i]}:</th><th></th></tr>
const headerRow = <tr key={i}><th>{ texts.dataStreams[i].label}:</th><th></th></tr>
let subRows = []
Object.keys(dataStreamsState[i]).forEach(j => {
......@@ -32,7 +32,7 @@ const ChartTooltip = (props) => {
text = Array.isArray(value) ? `${ roundBy(value[0], 1) }-${ roundBy(value[1], 1) }${unit}` : `${roundBy(value, 1)}${unit}`
if(!value) text = texts.nodata
subRows.push(<tr key={s.key}><td>{ texts.dataStreams[j] }:</td><td><strong>{ text }</strong></td></tr>)
subRows.push(<tr key={s.key}><td>{ texts.dataStreams[j].label }:</td><td><strong>{ text }</strong></td></tr>)
}
})
......
......@@ -290,11 +290,22 @@ class StationInfo extends React.Component {
<ul id="chart-data-selection">
{ Object.keys(dataStreams).map(i =>
<li key={i} className="data-stream">
<h4>{ texts.dataStreams[i] }</h4>
<h4>
{ texts.dataStreams[i].label }
{ texts.dataStreams[i].tooltip &&
<div className="tooltip-icon">
?
<div className="tooltip-content">
{ ReactHtmlParser(texts.dataStreams[i].tooltip) }
{/* { parameter.more && <a className="more" href={parameter.more} target="_blank" rel="noopener noreferrer">lees meer</a> } */}
</div>
</div>
}
</h4>
<ul>
{ Object.keys(dataStreams[i]).map(j => <li key={j} className={dataStreams[i][j].active ? "option active" : "option"} onClick={e => { this.toggleDataStream(i,j) } }>
<span className="switch"></span>
{ texts.dataStreams[j] }
{ texts.dataStreams[j].label }
{ dataStreams[i][j].active &&
<svg width="16" height="16">
{ dataStreams[i][j].type === "area" && <path d="M0 16v-4c5 0 6-7 8-7s3 7 8 7v4c-3 0-5-3-8-3s-5 3-8 3z" { ...dataStreams[i][j].attrs } /> }
......
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