luneski/mqtt-explorer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix numeric plots

Browse Source
This commit is contained in:
Thomas Nordquist
2019-04-03 17:56:01 +02:00
parent f23f6c908f
commit 8266a87417
1 changed files with 6 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/src/components/Sidebar/ValueRenderer/PlotHistory.tsx
View File

@@ -5,6 +5,7 @@ import { default as ReactResizeDetector } from 'react-resize-detector'
import 'react-vis/dist/style.css' import 'react-vis/dist/style.css'
import { Base64Message } from '../../../../../backend/src/Model/Base64Message'; import { Base64Message } from '../../../../../backend/src/Model/Base64Message';
const { XYPlot, LineMarkSeries, Hint, YAxis, HorizontalGridLines } = require('react-vis') const { XYPlot, LineMarkSeries, Hint, YAxis, HorizontalGridLines } = require('react-vis')
const abbreviate = require('number-abbreviate')
interface Props { interface Props {
data: {x: number, y: number}[] data: {x: number, y: number}[]
@@ -32,13 +33,16 @@ class PlotHistory extends React.Component<Props, Stats> {
<div> <div>
<XYPlot width={this.state.width} height={150}> <XYPlot width={this.state.width} height={150}>
<HorizontalGridLines /> <HorizontalGridLines />
<YAxis /> <YAxis
width={45}
tickFormat={(num: number) => abbreviate(num)}
/>
<LineMarkSeries <LineMarkSeries
onValueMouseOver={this._rememberValue} onValueMouseOver={this._rememberValue}
onValueMouseOut={this._forgetValue} onValueMouseOut={this._forgetValue}
size={3} size={3}
data={data} data={data}
curve="curveCardinal" curve={data.length < 50 ? 'curveCardinal' : undefined}
/> />
{this.state.value ? <Hint format={this.hintFormatter} value={this.state.value} /> : null} {this.state.value ? <Hint format={this.hintFormatter} value={this.state.value} /> : null}
</XYPlot> </XYPlot>