diff --git a/src/components/widget-plot/plot-legend.js b/src/components/widget-plot/plot-legend.js index 9c8ad71..4bde597 100644 --- a/src/components/widget-plot/plot-legend.js +++ b/src/components/widget-plot/plot-legend.js @@ -2,10 +2,23 @@ * File: plot-legend.js * Author: Ricardo Hernandez-Montoya * Date: 10.04.2017 - * Copyright: 2017, Institute for Automation of Complex Power Systems, EONERC - * This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential. - * Unauthorized copying of this file, via any medium is strictly prohibited. - **********************************************************************************/ + * Copyright: 2018, Institute for Automation of Complex Power Systems, EONERC + * + * This file is part of VILLASweb. + * + * VILLASweb is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * VILLASweb is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with VILLASweb. If not, see . + ******************************************************************************/ import React from 'react'; import { scaleOrdinal, schemeCategory10 } from 'd3-scale'; @@ -15,11 +28,14 @@ class PlotLegend extends React.Component { const colorScale = scaleOrdinal(schemeCategory10); return
- {this.props.signals.map(signal => -
-   {signal.name} [{signal.type}] -
- )} +
    + {this.props.signals.map(signal => +
  • + {signal.name} + {signal.type} +
    • + )} +
; } } diff --git a/src/components/widget-plot/plot.js b/src/components/widget-plot/plot.js index 719f35a..986db6f 100644 --- a/src/components/widget-plot/plot.js +++ b/src/components/widget-plot/plot.js @@ -2,10 +2,23 @@ * File: plot.js * Author: Ricardo Hernandez-Montoya * Date: 10.04.2017 - * Copyright: 2017, Institute for Automation of Complex Power Systems, EONERC - * This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential. - * Unauthorized copying of this file, via any medium is strictly prohibited. - **********************************************************************************/ + * Copyright: 2018, Institute for Automation of Complex Power Systems, EONERC + * + * This file is part of VILLASweb. + * + * VILLASweb is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * VILLASweb is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with VILLASweb. If not, see . + ******************************************************************************/ import React from 'react'; import { scaleLinear, scaleTime, scaleOrdinal, schemeCategory10 } from 'd3-scale'; @@ -14,9 +27,11 @@ import { line } from 'd3-shape'; import { axisBottom, axisLeft } from 'd3-axis'; import { select } from 'd3-selection'; import { timeFormat } from 'd3-time-format'; +import { format } from 'd3'; -const leftMargin = 30; -const bottomMargin = 20; +const topMargin = 10; +const bottomMargin = 25; +const leftMargin = 40; const rightMargin = 10; let uniqueIdentifier = 0; @@ -28,20 +43,20 @@ class Plot extends React.Component { // create dummy axes let labelMargin = 0; if (props.yLabel !== '') { - labelMargin = 20; + labelMargin = 30; } const xScale = scaleTime().domain([Date.now() - props.time * 1000, Date.now()]).range([0, props.width - leftMargin - labelMargin - rightMargin]); let yScale; if (props.yUseMinMax) { - yScale = scaleLinear().domain([props.yMin, props.yMax]).range([props.height - bottomMargin, 0]); + yScale = scaleLinear().domain([props.yMin, props.yMax]).range([props.height + topMargin - bottomMargin, topMargin]); } else { - yScale = scaleLinear().domain([0, 10]).range([props.height - bottomMargin, 0]); + yScale = scaleLinear().domain([0, 10]).range([props.height + topMargin - bottomMargin, topMargin]); } - const xAxis = axisBottom().scale(xScale).ticks(5).tickFormat(date => timeFormat("%M:%S")(date)); - const yAxis = axisLeft().scale(yScale).ticks(5); + const xAxis = axisBottom().scale(xScale).ticks(5).tickFormat(timeFormat("%M:%S")); + const yAxis = axisLeft().scale(yScale).ticks(5).tickFormat(format(".1g")); this.state = { data: null, @@ -68,7 +83,7 @@ class Plot extends React.Component { let labelMargin = 0; if (nextProps.yLabel !== '') { - labelMargin = 20; + labelMargin = 30; } // check if data is invalid @@ -76,15 +91,15 @@ class Plot extends React.Component { // create empty plot axes const xScale = scaleTime().domain([Date.now() - nextProps.time * 1000, Date.now()]).range([0, nextProps.width - leftMargin - labelMargin - rightMargin]); let yScale; - + if (nextProps.yUseMinMax) { - yScale = scaleLinear().domain([nextProps.yMin, nextProps.yMax]).range([nextProps.height - bottomMargin, 0]); + yScale = scaleLinear().domain([nextProps.yMin, nextProps.yMax]).range([nextProps.height + topMargin - bottomMargin, topMargin]); } else { - yScale = scaleLinear().domain([0, 10]).range([nextProps.height - bottomMargin, 0]); + yScale = scaleLinear().domain([0, 10]).range([nextProps.height + topMargin - bottomMargin, topMargin]); } - - const xAxis = axisBottom().scale(xScale).ticks(5).tickFormat(date => timeFormat("%M:%S")(date)); - const yAxis = axisLeft().scale(yScale).ticks(5); + + const xAxis = axisBottom().scale(xScale).ticks(5).tickFormat(timeFormat("%M:%S")); + const yAxis = axisLeft().scale(yScale).ticks(5).tickFormat(format(".1g")); this.setState({ data: null, xAxis, yAxis, labelMargin }); return; @@ -92,7 +107,7 @@ class Plot extends React.Component { // only show data in requested time let data = nextProps.data; - + const firstTimestamp = data[0][data[0].length - 1].x - (nextProps.time + 1) * 1000; if (data[0][0].x < firstTimestamp) { // only show data in range (+100 ms) @@ -137,7 +152,7 @@ class Plot extends React.Component { // calculate yRange let yRange = [0, 0]; - + if (this.props.yUseMinMax) { yRange = [this.props.yMin, this.props.yMax]; } else if (this.props.data.length > 0) { @@ -153,10 +168,10 @@ class Plot extends React.Component { // create scale functions for both axes const xScale = scaleTime().domain([Date.now() - this.props.time * 1000, Date.now()]).range([0, this.props.width - leftMargin - this.state.labelMargin - rightMargin]); - const yScale = scaleLinear().domain(yRange).range([this.props.height - bottomMargin, 5]); + const yScale = scaleLinear().domain(yRange).range([this.props.height + topMargin - bottomMargin, topMargin]); - const xAxis = axisBottom().scale(xScale).ticks(5).tickFormat(date => timeFormat("%M:%S")(date)); - const yAxis = axisLeft().scale(yScale).ticks(5); + const xAxis = axisBottom().scale(xScale).ticks(5).tickFormat(timeFormat("%M:%S")); + const yAxis = axisLeft().scale(yScale).ticks(5).tickFormat(format(".1g")); // generate paths from data const sparkLine = line().x(p => xScale(p.x)).y(p => yScale(p.y)); @@ -173,16 +188,16 @@ class Plot extends React.Component { y: this.props.height / 2 } - return - select(node).call(this.state.xAxis)} style={{ transform: `translateX(${leftMargin + this.state.labelMargin}px) translateY(${this.props.height - bottomMargin}px)` }} /> - select(node).call(this.state.yAxis)} style={{ transform: `translateX(${leftMargin + this.state.labelMargin}px)`}} /> - - {this.props.yLabel} - Time [s] + return + select(node).call(this.state.xAxis)} style={{ transform: `translateX(${leftMargin + this.state.labelMargin}px) translateY(${this.props.height + topMargin - bottomMargin}px)` }} /> + select(node).call(this.state.yAxis)} style={{ transform: `translateX(${leftMargin + this.state.labelMargin}px)` }} /> + + {this.props.yLabel} + Time [s] - +