Commit 9499ddf1 authored by alain's avatar alain 🐙
Browse files

support multiple units for station layer..

parent e9efc4f6
import React from "react"
import ReactHtmlParser from 'react-html-parser'
import { connect } from 'react-redux'
import { ResponsiveContainer, ComposedChart, LineChart, Area, Line, XAxis, YAxis, Brush, Tooltip } from "recharts"
import ChartTooltip from "./ChartTooltip"
......@@ -115,11 +117,10 @@ class StationInfo extends React.Component {
render() {
const { stationMeta, data, chartHeight, downloadForm } = this.state
const { id, source } = this.props.clickedObject
const parameter = this.props.activeLayer
const { stationMeta, data, chartHeight, downloadForm } = this.state
const unit = (parameter.units ? parameter.units.find(x => x.id === this.props.unitStatus[parameter.id]) : null)
moment().locale("nl", localization)
......@@ -180,14 +181,14 @@ class StationInfo extends React.Component {
<ComposedChart data={data} margin={{ top: 0, right: 30, left: 0, bottom: 10 }}>
<defs>
<linearGradient id="yaxis" x1="0" y1="0" x2="0" y2={chartHeight - 80} gradientUnits="userSpaceOnUse">
{ Object.keys(parameter.legend).sort((a,b) => b-a).map(s => <stop key={s} offset={`${(parameter.range[1]-s)/parameter.range[1] * 100}%`} stopColor={parameter.legend[s].color} />) }
{ Object.keys(unit.legend).sort((a,b) => b-a).map(s => <stop key={s} offset={`${(unit.range[1]-s)/unit.range[1] * 100}%`} stopColor={unit.legend[s].color} />) }
</linearGradient>
</defs>
<XAxis type="number" scale="time" domain={['auto', 'auto']} dataKey="timestamp" padding={{ left: 6 }} tickFormatter={this.xAxisTickFormatter} tickSize={4} ticks={this.state.xAxisTicks} />
<YAxis type="number" strokeWidth="6" stroke="url(#yaxis)" width={30} height={chartHeight} domain={parameter.range} tickSize={4} tickLine={{ strokeWidth: 1 }} allowDataOverflow={true} />
<Tooltip content={ ChartTooltip } animationDuration={0} unit={parameter.unit} />
<Tooltip content={ ChartTooltip } animationDuration={0} unit={unit.label} />
<Area type="natural" dataKey="minmax" stroke="none" fill="url(#yaxis)" />
<Line className={lineClass} type="natural" dataKey="value" { ...lineStyle } dot={false} strokeWidth={1} activeDot={{ r: 3 }} />
......@@ -212,4 +213,10 @@ class StationInfo extends React.Component {
}
}
const mapStateToProps = (state) => ({
unitStatus: state.unitStatus
})
StationInfo = connect(mapStateToProps)(StationInfo)
export default StationInfo
\ No newline at end of file
import React from 'react'
import ReactHtmlParser from 'react-html-parser'
const Legend = (props) => {
const { unit } = props
return (
<div className="tooltip">
<div className="legend">
<div className="legend-labels">
<span>{unit.range[0]} {unit.label}</span>
......@@ -19,10 +21,12 @@ const Legend = (props) => {
</defs>
<rect x="0" y="0" width="236" height="8" fill={`url(#legend-${unit.id})`} />
</svg>
<div className="legend-labels">
{/* <div className="legend-labels">
<span>{ unit.legend[unit.range[0]].label }</span>
<span>{ unit.legend[unit.range[1]].label }</span>
</div>
</div> */}
</div>
{ (unit.tooltip ? <div className="tooltip-content">{ ReactHtmlParser(unit.tooltip) }</div> : null) }
</div>
)
}
......
......@@ -6,7 +6,7 @@ const Tooltip = (props) => {
const { parameter } = props
return (
<div className="tooltip">
<div className="tooltip-icon">
?
<div className="tooltip-content">
{ ReactHtmlParser(parameter.tooltip) }
......
......@@ -59,7 +59,7 @@
// panel layer
.layer-settings-options li {
line-height: 2;
margin: 0.5rem 0;
margin: 0.5rem 0 1rem;
.parameter-title {
margin-bottom: 0.25rem;
......@@ -68,6 +68,7 @@
}
.legend {
//margin-left: 1.6em;
max-height: 0;
overflow: hidden;
transition: all 100ms ease;
......
@mixin tooltip-content {
display: none;
position: absolute;
bottom: -1em;
left: calc(100% + 10px);
min-width: 360px;
min-height: 3em;
padding: 10px;
background-color: #FFF;
color: #000;
box-shadow: -2px 0 10px 0 rgba(0, 0, 0, 0.15);
z-index: 100;
font-size: 0.9rem;
line-height: 1.5em;
text-align: left;
&:before {
content: "";
position: absolute;
right: 100%;
top: 0;
bottom: 0;
background: transparent;
width: 20px;
}
&:after {
content: "";
position: absolute;
right: 100%;
bottom: 1em;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 6px solid #FFF;
}
}
.tooltip {
position: relative;
top: -0.5em;
.tooltip-content {
@include tooltip-content;
left: calc(100% + 5px);
}
&:hover .tooltip-content {
display: block;
}
}
.tooltip-icon {
position: relative;
display: inline-block;
top: -0.5em;
margin-left: 0.25rem;
width: 1.1em;
height: 1.1em;
......@@ -17,42 +68,7 @@
text-align: center;
.tooltip-content {
display: none;
position: absolute;
bottom: -1em;
left: calc(100% + 10px);
min-width: 360px;
min-height: 3em;
padding: 10px;
background-color: #FFF;
color: #000;
box-shadow: -2px 0 10px 0 rgba(0, 0, 0, 0.15);
z-index: 100;
font-size: 0.9rem;
line-height: 1.5em;
text-align: left;
&:before {
content: "";
position: absolute;
right: 100%;
top: 0;
bottom: 0;
background: transparent;
width: 20px;
}
&:after {
content: "";
position: absolute;
right: 100%;
bottom: 1em;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 6px solid #FFF;
}
@include tooltip-content;
}
&:hover .tooltip-content {
......@@ -73,3 +89,4 @@
z-index: 1000;
pointer-events: none;
}
......@@ -189,15 +189,15 @@ button.button-text {
}
}
$switch-size: 0.9em;
$switch-size: 0.75em;
.switch {
display: inline-block;
position: relative;
background-color: #dedede;
background-color: var(--color-false, #aaa);
width: 1.6 * $switch-size;
height: 1 * $switch-size;
vertical-align: middle;
margin-right: 0.4 * $switch-size;
margin-right: 0.5 * $switch-size;
border-radius: 0.5 * $switch-size;
//box-shadow: 0 0 0.25em 0 rgba(0, 0, 0, 0.25);
......@@ -209,7 +209,7 @@ $switch-size: 0.9em;
top: 0.15 * $switch-size;
width: 0.7 * $switch-size;
height: 0.7 * $switch-size;
background-color: #777;
background-color: #FFF;
border-radius: 0.5 * $switch-size;
transition: all 100ms ease;
}
......@@ -220,9 +220,11 @@ $switch-size: 0.9em;
}
.active .switch {
background-color: var(--color-true, #777);
&:after {
left: 0.75 * $switch-size;
background-color: var(--color-true, #ccc);
//background-color: var(--color-true, #777);
}
}
......@@ -240,7 +242,7 @@ $switch-size: 0.9em;
cursor: pointer;
&.active {
background-color: var(--color-true, #ccc);
background-color: var(--color-true, #777);
color: #FFF;
}
......
Supports Markdown
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