Skip to content

Conversation

@zhxabi
Copy link

@zhxabi zhxabi commented Jan 22, 2022

Implemented more graphing types, including time graph with min-max lines, drag-and-drop variables onto graphs, and colored boolean display.

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
Comment on lines +34 to +36
if (typeof this.state == "boolean") {
this.backgroundColor = this.state? "#008000" : "#B22222"
}
Copy link
Collaborator

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

Comment on lines +120 to +121
// if (event.target.type)
console.log(event.target);
Copy link
Collaborator

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 },
Copy link
Collaborator

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?

Comment on lines +176 to +182
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)});
}
}
Copy link
Collaborator

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() : "")
Copy link
Collaborator

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?

Comment on lines +4 to +30
<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>
Copy link
Collaborator

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

3 participants