Commit 305bae4b authored by alain's avatar alain 🐙
Browse files

better xAxis ticks

parent 7829ad82
import React from 'react'
//import { texts } from "../../../config/texts"
import Moment from "moment"
import { extendMoment } from 'moment-range'
const moment = extendMoment(Moment)
const ChartTick = (props) => {
const { width, height, x, y, fill, tickFormat } = props
const timestamp = props.payload.value
// const lines = []
// let i = 1
// if(moment(timestamp).format("HH") === "00") {
// lines.push(<tspan key={i} x={x} dy={`${i * 0.71}em`}>{ moment(timestamp).format("D MMM") }</tspan>)
// } else {
// lines.push(<tspan key={i} x={x} dy={`${i * 0.71}em`}>&nbsp;</tspan>)
// }
// if(tickFormat.length > 1) {
// i++
// lines.push(<tspan key={i} x={x} dy={`${i * 0.71}em`}>{ moment(timestamp).format("H:mm") }</tspan>)
// }
//const lines = tickFormat.map((lineFormat, i) => <tspan key={i} x={x} dy={`${(i+1) * 0.71}em`}>{ moment(timestamp).format(lineFormat) }</tspan>)
return (
<text width={width} height={height} x={x} y={y} stroke="none" fill={fill} className="recharts-text recharts-cartesian-axis-tick-value" textAnchor="middle">
<tspan x={x} dy={`${1 * 0.71}em`}>{ moment(timestamp).format(tickFormat) }</tspan>
</text>
)
}
export default ChartTick
\ No newline at end of file
......@@ -8,6 +8,7 @@ import { scaleLinear, scaleLog } from 'd3-scale'
import { ResponsiveContainer, ComposedChart, LineChart, Area, Line, XAxis, YAxis, Brush, Tooltip } from "recharts"
import ChartTooltip from "./ChartTooltip"
import ChartTick from "./ChartTick"
import IconArrowDown from "../Icons/IconArrowDown"
import { texts } from "../../../config/texts"
......@@ -28,8 +29,9 @@ class StationInfo extends React.Component {
this.state = {
chartHeight: Math.min(400, window.innerHeight-260),
tickFormat: "D MMM HH:mm",
xAxisTicks: [],
chartWidth: Math.min(834, window.innerHeight-136),
ticks: [],
tickFormat: ["D MMM"],
downloadForm: false,
downloadStart: moment(start).format("YYYY-MM-DD"),
downloadEnd: moment(end).format("YYYY-MM-DD"),
......@@ -93,37 +95,67 @@ class StationInfo extends React.Component {
}
xAxisTickFormatter(timestamp) {
return moment(timestamp).format(this.state.tickFormat)
return moment(timestamp).format("D MMM")
}
setTickSettings(start, end) {
const range = moment.range(start, end)
const diff = end.diff(start, 'days')
let rangeBy
let step
let tickFormat
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
if (diff < 6) {
rangeBy = "hour"
tickFormat = "D MMM HH:mm"
step = 6
} else {
rangeBy = "day"
tickFormat = "D MMM"
tickFormat = ["dd", "D MMM"]
const fitDays = (this.state.chartWidth / 50) / diffDays
if(fitDays > 1) {
range = moment.range(start, end).snapTo('day')
rangeBy = ["day", "day"]
step = [1,1]
if(diff < 12) {
step = 1
} else {
step = 2
range = moment.range(start, end).snapTo('week')
rangeBy = ["week", "week"]
step = [1,1]
}
}
const xAxisTicks = Array.from(range.by(rangeBy, { excludeEnd: false , step: step } )).slice(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({
tickFormat,
xAxisTicks
ticks,
tickFormat
})
}
......@@ -138,7 +170,7 @@ class StationInfo extends React.Component {
render() {
moment().locale("nl", localization)
const { stationMeta, data, chartHeight, downloadForm, unit } = this.state
const { stationMeta, data, chartHeight, downloadForm, unit, tickFormat, ticks } = this.state
const { id, source } = this.props.clickedObject
const parameter = this.props.activeLayer
......@@ -175,7 +207,6 @@ class StationInfo extends React.Component {
</div>
{ ReactHtmlParser(texts.downloadInfo) }
</div>
}
return (
......@@ -193,7 +224,7 @@ class StationInfo extends React.Component {
{ (data && data.length > 0) &&
<div>
<div id="chart-header">
<h3>{parameter.label} {unit.label} { texts.chartHeaderAddition }</h3>
<h3>{parameter.label} {unit.label} { texts.chartHeaderAddition }</h3>
{ sourceObject.download && <span className={`toggle-link ${(downloadForm ? "active" : "")}`} onClick={ ()=> { this.setState({ downloadForm: !downloadForm }) } }>
{ texts.downloadData } <IconArrowDown />
</span> }
......@@ -208,7 +239,9 @@ class StationInfo extends React.Component {
</linearGradient>
</defs>
<XAxis type="number" scale="time" domain={['auto', 'auto']} dataKey="timestamp" padding={{ left: 6 }} tickFormatter={this.xAxisTickFormatter} tickSize={4} ticks={this.state.xAxisTicks} />
<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} />
<Tooltip content={ ChartTooltip } animationDuration={0} unit={unit.label} />
......
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