Skip to content
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

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Abi li - more graph types #59

wants to merge 7 commits into from

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.

2 participants