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.

Sign up for GitHub

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

Fix rendering of the Plotter widget on initial states #1709

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

Fix rendering of the Plotter widget on initial states #1709

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
79a87ed
plotter: Make canvas reactive to changes in the widget options
rafaellehmkuhl Feb 20, 2025
5a95cca
plotter: Render canvas and its elements on mounting
rafaellehmkuhl Feb 20, 2025
9d14e43
plotter: Fetch initial value for the variable on mount
rafaellehmkuhl Feb 21, 2025
4322243
plotter: Use special drawings for single-value and no-value cases
rafaellehmkuhl Feb 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 52 additions & 23 deletions src/components/widgets/Plotter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,7 @@ import { computed, nextTick, onBeforeMount, onMounted, onUnmounted, ref, toRefs,
import {
DataLakeVariable,
getAllDataLakeVariablesInfo,
getDataLakeVariableData,
listenDataLakeVariable,
listenToDataLakeVariablesInfoChanges,
unlistenDataLakeVariable,
Expand Down Expand Up @@ -170,6 +171,14 @@ onMounted(() => {
dataLakeVariableInfoListenerId = listenToDataLakeVariablesInfoChanges((variables) => {
availableDataLakeVariables.value = Object.values(variables)
})

// Try to get an initial value for the data lake variable
if (valuesHistory.length === 0) {
const initialValue = getDataLakeVariableData(widget.value.options.dataLakeVariableId)
if (initialValue) {
pushNewValue(initialValue as number)
}
}
})

onUnmounted(() => {
Expand Down Expand Up @@ -197,6 +206,12 @@ const cutExtraSamples = (): void => {
}
}

const pushNewValue = (value: number): void => {
valuesHistory.push(value)
cutExtraSamples()
renderCanvas()
}

const changeDataLakeVariable = (newId: string, oldId?: string): void => {
if (newId === undefined) {
console.error('No data lake variable ID provided!')
Expand All @@ -207,19 +222,9 @@ const changeDataLakeVariable = (newId: string, oldId?: string): void => {
unlistenDataLakeVariable(oldId, dataLakeVariableListenerId)
}

dataLakeVariableListenerId = listenDataLakeVariable(newId, (value) => {
valuesHistory.push(value as number)

cutExtraSamples()
renderCanvas()
})
dataLakeVariableListenerId = listenDataLakeVariable(newId, (value) => pushNewValue(value as number))
}

watch([widget.value.options.maxSamples, widget.value.options.limitSamples], () => {
cutExtraSamples()
renderCanvas()
})

watch(
() => widget.value.options.dataLakeVariableId,
(newId, oldId) => {
Expand Down Expand Up @@ -274,8 +279,6 @@ const renderCanvas = (): void => {
ctx.lineWidth = Math.max(widget.value.options.lineThickness, 1)

try {
if (valuesHistory.length === 0) return

maxValue = Math.max(...valuesHistory)
minValue = Math.min(...valuesHistory)

Expand All @@ -288,12 +291,33 @@ const renderCanvas = (): void => {
// Draw the graph
ctx.beginPath()
ctx.moveTo(0, canvasHeight / 2)

valuesHistory.forEach((sample, index) => {
const x = index * (canvasWidth / valuesHistory.length)
const y = canvasHeight - ((sample - minY) / (maxY - minY)) * canvasHeight
ctx.lineTo(x, y)
})
ctx.setLineDash([])

if (valuesHistory.length === 0) {
// Draw an open circle in the middle of the canvas indicating no value
ctx.beginPath()
ctx.arc(canvasWidth / 2, canvasHeight / 2, 5, 0, 2 * Math.PI)
ctx.stroke()
} else if (valuesHistory.length === 1) {
// Draw a filled circle in the middle of the canvas with a small dash line to the right indicating a single value
ctx.fillStyle = widget.value.options.lineColor
ctx.beginPath()
ctx.arc(canvasWidth / 2, canvasHeight / 2, 5, 0, 2 * Math.PI)
ctx.fill()

ctx.beginPath()
ctx.setLineDash([5, 5])
ctx.moveTo(canvasWidth / 2, canvasHeight / 2)
ctx.lineTo(canvasWidth / 2 + 50, canvasHeight / 2)
ctx.stroke()
} else {
ctx.setLineDash([])
valuesHistory.forEach((sample, index) => {
const x = index * (canvasWidth / valuesHistory.length)
const y = canvasHeight - ((sample - minY) / (maxY - minY)) * canvasHeight
ctx.lineTo(x, y)
})
}
ctx.stroke()

// Setup text rendering
Expand Down Expand Up @@ -324,10 +348,15 @@ let maxValue = 0
let minValue = 0

// Update canvas whenever reference variables changes
watch([canvasSize, widget.value.options], () => {
if (!widgetStore.isWidgetVisible(widget.value)) return
nextTick(() => renderCanvas())
})
watch(
[canvasSize, widget],
() => {
if (!widgetStore.isWidgetVisible(widget.value)) return
cutExtraSamples()
nextTick(() => renderCanvas())
},
{ deep: true }
)

const canvasVisible = useElementVisibility(canvasRef)
watch(canvasVisible, (isVisible, wasVisible) => {
Expand Down