Commit 08c73f99 authored by alain's avatar alain 🐙
Browse files
parents 01ca0c96 37bd2ad3
......@@ -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. 12/11/2019</span>
<span>v. 18/11/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>
......
......@@ -3,18 +3,12 @@ import React from 'react'
import { texts } from "../../../config/texts"
import { roundBy } from "../util/math.js"
import Moment from "moment"
import localization from "moment/locale/nl-be"
import { extendMoment } from 'moment-range'
const moment = extendMoment(Moment)
import { moment } from "../util/time.js"
const ChartTooltip = (props) => {
const { active, payload, label, unit } = props
moment().locale("nl", localization)
if (active) {
let avg, max
......
......@@ -5,6 +5,7 @@ import { connect } from 'react-redux'
import { scaleLinear, scaleLog } from 'd3-scale'
import { getTickSettings } from "../util/plot.js"
import { ResponsiveContainer, ComposedChart, LineChart, Area, Line, XAxis, YAxis, Brush, Tooltip } from "recharts"
import ChartTooltip from "./ChartTooltip"
......@@ -12,14 +13,15 @@ import ChartTick from "./ChartTick"
import IconArrowDown from "../Icons/IconArrowDown"
import { texts } from "../../../config/texts"
import { appSettings } from "../../../config/app"
import { moment, getNowISO, getDaysAgoHourISO } from "../util/time.js"
import { getNowISO, getMonthsAgoHourISO } from "../util/time.js"
import Moment from "moment"
import localization from "moment/locale/nl-be"
import { extendMoment } from 'moment-range'
const moment = extendMoment(Moment)
const start = getMonthsAgoHourISO(3)
const start = getDaysAgoHourISO(90)
const end = getNowISO()
......@@ -30,6 +32,7 @@ class StationInfo extends React.Component {
this.state = {
chartHeight: Math.min(400, window.innerHeight-260),
chartWidth: Math.min(834, window.innerHeight-136),
granularity: "hourly",
ticks: [],
tickFormat: ["D MMM"],
downloadForm: false,
......@@ -52,10 +55,17 @@ class StationInfo extends React.Component {
const station = this.props.clickedObject
const parameter = this.props.activeLayer
//const { start, end } = this.state
const dataFunction = parameter.sources.find(s => s.name === station.source).detail
dataFunction(station, parameter.id, start, end).then(({stationMeta, data})=> {
const source = parameter.sources.find(s => s.name === station.source)
const daysToFetch = source.daysToFetch
const dataFunction = source.detail
const start = getDaysAgoHourISO(daysToFetch)
const end = getNowISO()
const granularity = this.state.granularity
dataFunction(station, parameter.id, start, end, granularity).then(({stationMeta, data})=> {
const unit = (parameter.units ? parameter.units.find(x => x.id === this.props.unitStatus[parameter.id]) : null)
if(unit.conversion) {
data = data.map(d => {
......@@ -99,64 +109,9 @@ class StationInfo extends React.Component {
}
setTickSettings(start, end) {
const diffHours = end.diff(start, 'hours')
const diffDays = end.diff(start, 'days')
let range
let rangeBy = []
let step = []
let tickFormat = []
let ticks = []
const fitHours = diffHours / (this.state.chartWidth / 40)
if(fitHours < 12 || diffDays < 7) {
range = moment.range(start, end).snapTo('day')
rangeBy = ["hour", "day"]
tickFormat = ["H:mm", "D MMM"]
switch (true) {
case fitHours > 6:
step[0] = 12
break;
case fitHours > 3:
step[0] = 6
break;
case fitHours > 1:
step[0] = 3
break;
default:
step[0] = 1
break;
}
step[1] = 1
} else {
tickFormat = ["dd", "D MMM"]
const tickSettings = getTickSettings(start, end, this.state.granularity, this.state.chartWidth)
const fitDays = (this.state.chartWidth / 50) / diffDays
if(fitDays > 1) {
range = moment.range(start, end).snapTo('day')
rangeBy = ["day", "day"]
step = [1,1]
} else {
range = moment.range(start, end).snapTo('week')
rangeBy = ["week", "week"]
step = [1,1]
}
}
ticks = [
Array.from(range.by(rangeBy[0], { step: step[0] } )).filter(tick => tick > start && tick < end),
Array.from(range.by(rangeBy[1], { step: step[1] } )).filter(tick => tick > start && tick < end)
]
this.setState({
ticks,
tickFormat
})
this.setState(tickSettings)
}
handleRangeChange(indexes) {
......@@ -168,7 +123,7 @@ class StationInfo extends React.Component {
render() {
moment().locale("nl", localization)
moment.updateLocale(appSettings.language, localization)
const { stationMeta, data, chartHeight, downloadForm, unit, tickFormat, ticks } = this.state
const { id, source } = this.props.clickedObject
......@@ -239,10 +194,10 @@ class StationInfo extends React.Component {
</linearGradient>
</defs>
<XAxis type="number" scale="time" domain={['auto', 'auto']} dataKey="timestamp" height={20} padding={{ left: 6 }} tickFormatter={()=>"##"} tickSize={4} ticks={ticks[0]} tick={<ChartTick tickFormat={tickFormat[0]} />} />
<XAxis xAxisId="day" type="number" scale="time" domain={['auto', 'auto']} dataKey="timestamp" height={20} padding={{ left: 6 }} axisLine={false} tickFormatter={()=>"##"} tickSize={0} ticks={ticks[1]} tick={<ChartTick tickFormat={tickFormat[1]} />} />
<XAxis type="number" scale="time" domain={['auto', 'auto']} dataKey="timestamp" height={20} padding={{ left: 6 }} tickFormatter={()=>"###"} tickSize={4} ticks={ticks[0]} tick={<ChartTick tickFormat={tickFormat[0]} />} />
<XAxis xAxisId="day" type="number" scale="time" domain={['auto', 'auto']} dataKey="timestamp" height={20} padding={{ left: 6 }} axisLine={false} tickFormatter={()=>"####"} tickSize={0} ticks={ticks[1]} tick={<ChartTick tickFormat={tickFormat[1]} />} />
<YAxis type="number" strokeWidth="6" stroke="url(#yaxis)" width={40} ticks={(unit.ticks ? unit.ticks : Object.keys(unit.legend))} height={chartHeight} domain={unit.range} tickSize={2} tickLine={{ strokeWidth: 1 }} allowDataOverflow={true} scale={yScale} />
<YAxis type="number" strokeWidth="6" stroke="url(#yaxis)" width={30} ticks={(unit.ticks ? unit.ticks : Object.keys(unit.legend))} height={chartHeight} domain={unit.range} tickSize={2} tickLine={{ strokeWidth: 1 }} allowDataOverflow={true} scale={yScale} />
<Tooltip content={ ChartTooltip } animationDuration={0} unit={unit.label} />
......
......@@ -44,15 +44,17 @@ export const removeFromArray = (array, value) => {
}
export const addMissingHours = (data) => {
export const addMissingDataPoints = (data, granularity) => {
if(!data[0]) return data
const dataStart = new Date(data[0].timestamp).getTime()
//const dataEnd = new Date(data[data.length-1].timestamp).getTime()
const dataEnd = new Date().getTime()
const existing = data.map(x => x.timestamp)
let interval = 60000
if (granularity === "hourly") interval = 3600000
if (granularity === "daily") interval = 86400000
for (let i = dataStart; i < dataEnd; i = i + 3600000) {
for (let i = dataStart; i < dataEnd; i = i + interval) {
if(existing.indexOf(i) < 0) {
data.push({
timestamp: i,
......@@ -67,11 +69,15 @@ export const addMissingHours = (data) => {
}
export const calculateHourlyData = (inputData, prefix) => {
export const downsampleData = (inputData, granularity, prefix) => {
const binnedData = inputData.map(d => {
let timestamp = d.ts
if (granularity === "hourly") timestamp = d.ts.slice(0, 14) + "00:00.000Z"
if (granularity === "daily") timestamp = d.ts.slice(0, 11) + "00:00:00.000Z"
return {
timestamp: d.ts.slice(0, 14) + "00:00.000Z",
timestamp,
value: d[prefix]
}
})
......
import { inArray } from "./data";
import { moment } from "./time";
export const doOffsets = (data) => {
......@@ -30,3 +31,70 @@ export const setMetersOffset = (coordinates, offsets) => {
return [long, lat]
}
export const getTickSettings = (start, end, granularity, chartWidth) => {
const diffHours = end.diff(start, 'hours')
const diffDays = end.diff(start, 'days')
let range
let rangeBy = []
let step = []
let tickFormat = []
let ticks = []
const fitHours = diffHours / (chartWidth / 50)
if((fitHours < 12 || diffDays < 6) && granularity !== "daily") {
range = moment.range(start, end).snapTo('day')
rangeBy = ["hour", "day"]
tickFormat = ["H:mm", "dd D/M"]
switch (true) {
case fitHours > 6:
step[0] = 12
break;
case fitHours > 3:
step[0] = 6
break;
case fitHours > 1:
step[0] = 3
break;
default:
step[0] = 1
break;
}
step[1] = 1
} else {
tickFormat = ["dd", "D MMM"]
const fitDays = (chartWidth / 50) / diffDays
if(fitDays > 1) {
range = moment.range(start, end).snapTo('day')
rangeBy = ["day", "day"]
step = [1,1]
} else {
range = moment.range(start, end).snapTo('week')
rangeBy = ["week", "week"]
step = [1,1]
}
}
// set ticks
ticks[0] = Array.from(range.by(rangeBy[0], { step: step[0] } )).filter(tick => tick > start && tick < end)
if(rangeBy[1] === "day" && diffDays < 1) {
ticks[1] = [start + ((end - start) / 2)]
} else {
ticks[1] = Array.from(range.by(rangeBy[1], { step: step[1] } )).filter(tick => tick > start && tick < end)
}
return {
tickFormat,
ticks
}
}
\ No newline at end of file
import Moment from "moment"
import { extendMoment } from 'moment-range'
export const moment = extendMoment(Moment)
const pad = (number) => {
var r = String(number);
......@@ -11,17 +17,12 @@ const pad = (number) => {
export const getNowISO = () => {
const now = new Date()
//now.setHours(now.getHours() - 1);
return now.getUTCFullYear()
+ '-' + pad(now.getUTCMonth() + 1)
+ '-' + pad(now.getUTCDate())
+ 'T' + pad(now.getUTCHours())
//+ ':00:00.000Z'
+ ':' + pad(now.getUTCMinutes() )
+ ':' + pad(now.getUTCSeconds() )
+ '.' + String((now.getUTCMilliseconds()/1000).toFixed(3)).slice(2, 5)
+ 'Z';
+ ':00.000Z'
}
export const getLastHourISO = () => {
......@@ -39,8 +40,6 @@ export const getLastHourISO = () => {
export const getNowHourISO = () => {
const now = new Date()
//now.setHours(now.getHours() - 1);
return now.getUTCFullYear()
+ '-' + pad(now.getUTCMonth() + 1)
+ '-' + pad(now.getUTCDate())
......@@ -49,10 +48,10 @@ export const getNowHourISO = () => {
}
export const getMonthsAgoHourISO = (months) => {
export const getDaysAgoHourISO = (days) => {
const now = new Date()
now.setDate(now.getDate() - 30*months)
now.setDate(now.getDate() - days)
return now.getUTCFullYear()
+ '-' + pad(now.getUTCMonth() + 1)
......@@ -60,3 +59,16 @@ export const getMonthsAgoHourISO = (months) => {
+ 'T' + pad(now.getUTCHours())
+ ':00:00.000Z'
}
// export const getMonthsAgoHourISO = (months) => {
// const now = new Date()
// now.setDate(now.getDate() - 30*months)
// return now.getUTCFullYear()
// + '-' + pad(now.getUTCMonth() + 1)
// + '-' + pad(now.getUTCDate())
// + 'T' + pad(now.getUTCHours())
// + ':00:00.000Z'
// }
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