-
Notifications
You must be signed in to change notification settings - Fork 1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Abi li - more graph types #59
base: master
Are you sure you want to change the base?
Conversation
added minline and toggle reset buttons
Added tooltips to placeholder and min/max graph buttons
two variables but without node implementation
implemented drag and drop to add data into multi-line graph
implemented play/pause button also cleaned up code
if (typeof this.state == "boolean") { | ||
this.backgroundColor = this.state? "#008000" : "#B22222" | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This should be done via a class attribute for booleans rather than hardcoding the style
// if (event.target.type) | ||
console.log(event.target); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Remove debug statement
series: this.srs, | ||
realTime: true, | ||
baseTime: Date.now() - performance.now(), | ||
xRange: { min: 0, max: 20 * 1000 }, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why is this range hardcoded?
var yVal = Math.sin(time * 0.002); | ||
// this.history[0].push({x: time, y: yVal}); | ||
if (this.live) { | ||
for (let i = 0; i < this.history.length; i++) { | ||
this.history[i].push({x : time, y : (yVal + i)}); | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we use real subscription data by attaching a subscriber instead of generating data?
computed: { | ||
header() { | ||
return ( | ||
"GraphMinMax: " + (this.variables[0] ? this.variables[0].getPretty() : "") |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why only the first variable?
<div class="graph-controls"> | ||
<NumberField v-model="timespan" @input="updateTimespan" /> | ||
<FlatButton | ||
icon="clock" | ||
:class="{ controlActive: useTimespan }" | ||
@click="useTimespan = !useTimespan" | ||
title="Use Timespan" | ||
/> | ||
<FlatButton | ||
icon="play" | ||
:class="{ controlActive: live }" | ||
@click="toggleLive" | ||
title="Play" | ||
/> | ||
<FlatButton | ||
icon="arrow-alt-circle-up" | ||
:class="{ controlActive: live }" | ||
@click="toggleMax" | ||
title="Reset Max Line" | ||
/> | ||
<FlatButton | ||
icon="arrow-alt-circle-down" | ||
:class="{ controlActive: live }" | ||
@click="toggleMin" | ||
title="Reset Min Line" | ||
/> | ||
</div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This should probably not be a separate component, but a flag on the existing graph component so that you can have expanded tools (that way we reduce code duplication) between this file and Graph.vue
Implemented more graphing types, including time graph with min-max lines, drag-and-drop variables onto graphs, and colored boolean display.