Commit 0d152eb5 authored by alain's avatar alain 🐙
Browse files

add more granularity stuff

parent 265ec7f4
......@@ -2,5 +2,6 @@
export const appSettingsDefault = {
language: "nl",
panelBreakpoint: 600,
yAxisWidth: 30
yAxisWidth: 30,
defaultGranularity: "hourly"
}
import React from 'react'
import { texts } from "../../../config/texts"
import { appSettings } from "../../../config/app"
import { roundBy } from "../util/math.js"
import { moment } from "../util/time.js"
......@@ -9,7 +10,7 @@ import { moment } from "../util/time.js"
const SensorTooltip = props => {
const { d, label, unit } = props
const dataAgeText = d.timestamp ? ` (${ moment(d.timestamp).format("HH") }-${ moment(d.timestamp).add(1, 'hours').format("HH") }${texts.hourShort})` : ''
const dataAgeText = d.timestamp && appSettings.defaultGranularity !== 'daily' ? ` (${ moment(d.timestamp).format("HH") }-${ moment(d.timestamp).add(1, 'hours').format("HH") }${texts.hourShort})` : ''
return (
<div>
......
......@@ -7,10 +7,15 @@ import { moment } from "../util/time.js"
const ChartTooltip = (props) => {
const { active, payload, label, unit, dataStreamsState } = props
const { active, payload, label, unit, dataStreamsState, granularity } = props
if (active) {
const title = <h4>{ moment(label).format("D MMM") } { moment(label).format("HH:mm") } - { moment(label).add(1, 'hours').format("HH:mm") } { texts.hour }</h4>
const title = <h4>
{ moment(label).format("D MMM") }
{ granularity === 'hourly' &&
<span>{ moment(label).format("HH:mm") } - { moment(label).add(1, 'hours').format("HH:mm") } { texts.hour }</span>
}
</h4>
let body
if(!payload) {
......
......@@ -29,7 +29,7 @@ class StationInfo extends React.Component {
this.state = {
chartHeight: Math.min(400, window.innerHeight-260),
chartWidth: Math.min(834, window.innerHeight-136),
granularity: "hourly",
granularity: appSettings.defaultGranularity,
ticks: [],
tickFormat: ["D MMM"],
downloadForm: false,
......@@ -169,7 +169,7 @@ class StationInfo extends React.Component {
render() {
moment.locale(appSettings.language)
const { error, stationMeta, data, dataStreams, brushData, chartHeight, downloadForm, unit, tickFormat, ticks } = this.state
const { error, stationMeta, data, dataStreams, brushData, chartHeight, downloadForm, unit, tickFormat, ticks, granularity } = this.state
const { id } = this.props.clickedObject
const parameter = this.props.activeLayer
const source = parameter.sources.find(o => {
......@@ -266,7 +266,7 @@ class StationInfo extends React.Component {
<YAxis type="number" strokeWidth="6" stroke="url(#yaxis)" width={appSettings.yAxisWidth} 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} dataStreamsState={dataStreams} />
<Tooltip content={ ChartTooltip } animationDuration={0} unit={unit.label} dataStreamsState={dataStreams} granularity={granularity} />
{ plots }
......
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