Commit 8430b934 authored by alain's avatar alain 🐙
Browse files

support multiple units for station layer...

parent 9499ddf1
......@@ -52,7 +52,20 @@ class StationInfo extends React.Component {
const dataFunction = parameter.sources.find(s => s.name === station.source).detail
dataFunction(station, parameter.id, start, end).then(({stationMeta, data})=> {
this.setState({ data, stationMeta })
const unit = (parameter.units ? parameter.units.find(x => x.id === this.props.unitStatus[parameter.id]) : null)
if(unit.conversion) {
data = data.map(d => {
d.value = unit.conversion(d.value)
if(d.minmax) {
d.minmax[0] = unit.conversion(d.minmax[0])
d.minmax[1] = unit.conversion(d.minmax[1])
}
return d
})
}
this.setState({ data, stationMeta, unit })
const startIndex = (data.length - 7*24 > 0 ? data.length - 7*24 : 0)
const dataStart = moment(data[startIndex].timestamp)
......@@ -117,12 +130,12 @@ class StationInfo extends React.Component {
render() {
const { stationMeta, data, chartHeight, downloadForm } = this.state
moment().locale("nl", localization)
const { stationMeta, data, chartHeight, downloadForm, unit } = this.state
const { id, source } = this.props.clickedObject
const parameter = this.props.activeLayer
const unit = (parameter.units ? parameter.units.find(x => x.id === this.props.unitStatus[parameter.id]) : null)
moment().locale("nl", localization)
const lineStyle = (data && data[0].minmax ? { stroke:"#000000" } : { stroke:"url(#yaxis)" } )
const lineClass = (data && data[0].minmax ? "dashed" : "solid" )
......@@ -170,7 +183,7 @@ class StationInfo extends React.Component {
{ data ?
<div>
<div id="chart-header">
<h3>{parameter.label} {parameter.unit}</h3>
<h3>{parameter.label} {unit.label}</h3>
{ sourceObject.download ? <span className={`toggle-link ${(downloadForm ? "active" : "")}`} onClick={ ()=> { this.setState({ downloadForm: !downloadForm }) } }>
{ texts.downloadData } <IconArrowDown />
</span> : null }
......@@ -186,7 +199,7 @@ class StationInfo extends React.Component {
</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} />
<YAxis type="number" strokeWidth="6" stroke="url(#yaxis)" width={30} height={chartHeight} domain={unit.range} tickSize={4} tickLine={{ strokeWidth: 1 }} allowDataOverflow={true} />
<Tooltip content={ ChartTooltip } animationDuration={0} unit={unit.label} />
......@@ -199,7 +212,7 @@ class StationInfo extends React.Component {
tickFormatter={this.xAxisTickFormatter} >
<LineChart>
<Line type="natural" dataKey="value" stroke="#ccc" dot={false} />
<YAxis domain={parameter.range} tick={false} width={0} />
<YAxis domain={unit.range} tick={false} width={0} />
</LineChart>
</Brush>
</ComposedChart>
......
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