Mirrors/VILLASweb
1
0
Fork 0
mirror of https://git.rwth-aachen.de/acs/public/villas/web/ synced 2025-03-09 00:00:01 +01:00
Code Issues Releases Wiki Activity

Fix plot clip zones

Browse source
This commit is contained in:
Markus Grigull 2017-09-25 17:15:36 +02:00
parent b393d8e2e0
commit 0b0f848b57
1 changed files with 10 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/components/widget-plot/plot.js
View file

@ -19,6 +19,8 @@ const leftMargin = 30;
const bottomMargin = 20;
const rightMargin = 10;
let uniqueIdentifier = 0;
class Plot extends React.Component {
constructor(props) {
super(props);
@ -33,9 +35,9 @@ class Plot extends React.Component {
let yScale;
if (props.yUseMinMax) {
yScale = scaleLinear().domain([props.yMin, props.yMax]).range([props.height, 0]);
yScale = scaleLinear().domain([props.yMin, props.yMax]).range([props.height - bottomMargin, 0]);
} else {
yScale = scaleLinear().domain([0, 10]).range([props.height, 0]);
yScale = scaleLinear().domain([0, 10]).range([props.height - bottomMargin, 0]);
}
const xAxis = axisBottom().scale(xScale).ticks(5).tickFormat(date => timeFormat("%M:%S")(date));
@ -46,7 +48,8 @@ class Plot extends React.Component {
lines: null,
xAxis,
yAxis,
labelMargin
labelMargin,
identifier: uniqueIdentifier++
};
}
@ -75,9 +78,9 @@ class Plot extends React.Component {
let yScale;
if (nextProps.yUseMinMax) {
yScale = scaleLinear().domain([nextProps.yMin, nextProps.yMax]).range([nextProps.height, 0]);
yScale = scaleLinear().domain([nextProps.yMin, nextProps.yMax]).range([nextProps.height - bottomMargin, 0]);
} else {
yScale = scaleLinear().domain([0, 10]).range([nextProps.height, 0]);
yScale = scaleLinear().domain([0, 10]).range([nextProps.height - bottomMargin, 0]);
}
const xAxis = axisBottom().scale(xScale).ticks(5).tickFormat(date => timeFormat("%M:%S")(date));
@ -174,12 +177,12 @@ class Plot extends React.Component {
<text strokeWidth="0.01" textAnchor="end" x={this.props.width - rightMargin} y={this.props.height + bottomMargin - 5}>Time [s]</text>
<defs>
<clipPath id="lineClipPath">
<clipPath id={"lineClipPath" + this.state.identifier}>
<rect x={leftMargin + this.state.labelMargin} y={0} width={this.props.width - leftMargin - this.state.labelMargin - rightMargin} height={this.props.height - bottomMargin} />
</clipPath>
</defs>
<g style={{ clipPath: 'url(#lineClipPath)' }}>
<g style={{ clipPath: 'url(#lineClipPath' + this.state.identifier + ')' }}>
{this.state.lines}
</g>
</svg>;