From 292d5db692a21a7f7ccd1c59322d1d3b5052bcc1 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Fri, 29 Nov 2024 19:28:18 -0300
Subject: [PATCH] widgets: Add `Plotter` widget

This is a plot widget that can be configured to consume from any data-lake variable of type `number`.
---
 src/assets/widgets/Plotter.png     | Bin 0 -> 6790 bytes
 src/components/EditMenu.vue        |   2 +
 src/components/widgets/Plotter.vue | 304 +++++++++++++++++++++++++++++
 src/types/widgets.ts               |   1 +
 4 files changed, 307 insertions(+)
 create mode 100644 src/assets/widgets/Plotter.png
 create mode 100644 src/components/widgets/Plotter.vue

diff --git a/src/assets/widgets/Plotter.png b/src/assets/widgets/Plotter.png
new file mode 100644
index 0000000000000000000000000000000000000000..b27fb4814c093b0273c3984ef530e6edaadd2e73
GIT binary patch
literal 6790
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
UskEQuA4>qBr)8*FrfwhkUvrdRaR2}S

literal 0
HcmV?d00001

diff --git a/src/components/EditMenu.vue b/src/components/EditMenu.vue
index d3c4d48eb..2b6025c24 100644
--- a/src/components/EditMenu.vue
+++ b/src/components/EditMenu.vue
@@ -654,6 +654,7 @@ import IFrameImg from '@/assets/widgets/IFrame.png'
 import ImageViewImg from '@/assets/widgets/ImageView.png'
 import MapImg from '@/assets/widgets/Map.png'
 import MiniWidgetsBarImg from '@/assets/widgets/MiniWidgetsBar.png'
+import PlotterImg from '@/assets/widgets/Plotter.png'
 import URLVideoPlayerImg from '@/assets/widgets/URLVideoPlayer.png'
 import VideoPlayerImg from '@/assets/widgets/VideoPlayer.png'
 import VirtualHorizonImg from '@/assets/widgets/VirtualHorizon.png'
@@ -743,6 +744,7 @@ const widgetImages = {
   ImageView: ImageViewImg,
   Map: MapImg,
   MiniWidgetsBar: MiniWidgetsBarImg,
+  Plotter: PlotterImg,
   URLVideoPlayer: URLVideoPlayerImg,
   VideoPlayer: VideoPlayerImg,
   VirtualHorizon: VirtualHorizonImg,
diff --git a/src/components/widgets/Plotter.vue b/src/components/widgets/Plotter.vue
new file mode 100644
index 000000000..88ef8d344
--- /dev/null
+++ b/src/components/widgets/Plotter.vue
@@ -0,0 +1,304 @@
+<template>
+  <p
+    v-if="!widget.options.dataLakeVariableId"
+    class="w-full h-full flex items-center justify-center text-center text-white text-h5 font-weight-bold p-4 overflow-hidden"
+  >
+    Please open the Plotter widget configuration menu to select a variable to be plotted.
+  </p>
+  <div v-else class="main">
+    <canvas ref="canvasRef" :width="canvasSize.width" :height="canvasSize.height" />
+  </div>
+  <InteractionDialog
+    v-model="widgetStore.widgetManagerVars(widget.hash).configMenuOpen"
+    :title="`Plotter config`"
+    variant="text-only"
+  >
+    <template #content>
+      <!-- Data source section -->
+      <v-row>
+        <v-col cols="12">
+          <div class="text-subtitle-1 font-weight-medium mb-4">Data Source</div>
+          <div class="ml-2">
+            <v-select
+              v-model="widget.options.dataLakeVariableId"
+              :items="availableDataLakeVariables"
+              item-title="name"
+              item-value="id"
+              label="Data Lake variable"
+              hint="Select a variable to be plotted"
+              persistent-hint
+              variant="outlined"
+              density="comfortable"
+              @update:model-value="changeDataLakeVariable"
+            />
+          </div>
+        </v-col>
+      </v-row>
+
+      <!-- Appearance section -->
+      <v-row>
+        <v-col cols="12">
+          <div class="text-subtitle-1 font-weight-medium mb-2">Appearance</div>
+          <div class="ml-2 flex gap-x-8">
+            <v-menu :close-on-content-click="false">
+              <template #activator="{ props: colorPickerActivatorProps }">
+                <div v-bind="colorPickerActivatorProps" class="flex cursor-pointer">
+                  <span class="mt-1">Background color</span>
+                  <div
+                    class="w-[30px] h-[30px] border-2 border-slate-700 rounded-lg cursor-pointer ml-2"
+                    :style="{ backgroundColor: widget.options.backgroundColor }"
+                  ></div>
+                </div>
+              </template>
+              <v-card class="overflow-hidden" :style="interfaceStore.globalGlassMenuStyles">
+                <v-color-picker v-model="widget.options.backgroundColor" label="Background" hide-inputs />
+              </v-card>
+            </v-menu>
+            <v-menu :close-on-content-click="false">
+              <template #activator="{ props: colorPickerActivatorProps }">
+                <div v-bind="colorPickerActivatorProps" class="flex cursor-pointer">
+                  <span class="mt-1">Line color</span>
+                  <div
+                    class="w-[30px] h-[30px] border-2 border-slate-700 rounded-lg cursor-pointer ml-2"
+                    :style="{ backgroundColor: widget.options.lineColor }"
+                  ></div>
+                </div>
+              </template>
+              <v-card class="overflow-hidden" :style="interfaceStore.globalGlassMenuStyles">
+                <v-color-picker v-model="widget.options.lineColor" label="Line" hide-inputs />
+              </v-card>
+            </v-menu>
+            <v-text-field
+              v-model.number="widget.options.lineThickness"
+              type="number"
+              label="Line thickness"
+              variant="outlined"
+              density="compact"
+              :rules="[(v: number) => v > 0 || 'Must be greater than 0']"
+              width="140px"
+              hide-details
+            />
+          </div>
+        </v-col>
+      </v-row>
+
+      <!-- Data points section -->
+      <v-row>
+        <v-col cols="12">
+          <div class="text-subtitle-1 font-weight-medium mb-2">Data Points</div>
+          <div class="ml-2 flex gap-x-8">
+            <v-checkbox v-model="widget.options.limitSamples" label="Limit number of samples" />
+            <v-text-field
+              v-model.number="widget.options.maxSamples"
+              type="number"
+              label="Maximum samples"
+              variant="outlined"
+              density="comfortable"
+              :disabled="!widget.options.limitSamples"
+              :rules="[(v: number) => v > 0 || 'Must be greater than 0']"
+              hint="Higher values will show more history but may impact performance"
+              width="220px"
+            />
+          </div>
+        </v-col>
+      </v-row>
+    </template>
+    <template #actions>
+      <div class="flex w-full justify-end my-2">
+        <v-btn @click="widgetStore.widgetManagerVars(widget.hash).configMenuOpen = false">Close</v-btn>
+      </div>
+    </template>
+  </InteractionDialog>
+</template>
+
+<script setup lang="ts">
+import { useElementVisibility, useWindowSize } from '@vueuse/core'
+import { computed, nextTick, onBeforeMount, onMounted, ref, toRefs, watch } from 'vue'
+
+import {
+  CockpitActionVariable,
+  getAllCockpitActionVariablesInfo,
+  listenCockpitActionVariable,
+  unlistenCockpitActionVariable,
+} from '@/libs/actions/data-lake'
+import { resetCanvas } from '@/libs/utils'
+import { useAppInterfaceStore } from '@/stores/appInterface'
+import { useWidgetManagerStore } from '@/stores/widgetManager'
+import type { Widget } from '@/types/widgets'
+
+import InteractionDialog from '../InteractionDialog.vue'
+const interfaceStore = useAppInterfaceStore()
+
+const widgetStore = useWidgetManagerStore()
+
+const props = defineProps<{
+  /**
+   * Widget reference
+   */
+  widget: Widget
+}>()
+const widget = toRefs(props).widget
+const availableDataLakeVariables = ref<CockpitActionVariable[]>([])
+
+onBeforeMount(() => {
+  // Set initial widget options if they don't exist
+  if (Object.keys(widget.value.options).length === 0) {
+    widget.value.options = {
+      backgroundColor: 'rgba(0, 0, 0, 0.7)',
+      lineColor: 'rgba(255, 0, 0, 1.0)',
+      dataLakeVariableId: undefined,
+      maxSamples: 1000,
+      limitSamples: true,
+      lineThickness: 1,
+    }
+  }
+})
+
+onMounted(() => {
+  changeDataLakeVariable(widget.value.options.dataLakeVariableId)
+  availableDataLakeVariables.value = Object.values(getAllCockpitActionVariablesInfo()).filter(
+    (variable) => variable.type === 'number'
+  )
+})
+
+// Remove the oldest sample if the number of samples is greater than the max samples
+// Use shift if the number of samples is exactly the max samples + 1 for performance reasons
+const cutExtraSamples = (): void => {
+  if (widget.value.options.limitSamples) {
+    if (valuesHistory.length === widget.value.options.maxSamples + 1) {
+      valuesHistory.shift()
+    } else if (valuesHistory.length > widget.value.options.maxSamples) {
+      valuesHistory.splice(0, valuesHistory.length - widget.value.options.maxSamples)
+    }
+  }
+}
+
+const changeDataLakeVariable = (newId: string): void => {
+  if (newId === undefined) {
+    console.error('No data lake variable ID provided!')
+    return
+  }
+
+  const oldId = widget.value.options.dataLakeVariableId
+  if (oldId !== undefined) {
+    unlistenCockpitActionVariable(oldId)
+  }
+
+  listenCockpitActionVariable(newId, (value) => {
+    valuesHistory.push(value as number)
+
+    cutExtraSamples()
+    renderCanvas()
+  })
+}
+
+watch([widget.value.options.maxSamples, widget.value.options.limitSamples], () => {
+  cutExtraSamples()
+  renderCanvas()
+})
+
+// Make canvas size follows window resizing
+const { width: windowWidth, height: windowHeight } = useWindowSize()
+const canvasSize = computed(() => ({
+  width: widget.value.size.width * windowWidth.value,
+  height: widget.value.size.height * windowHeight.value,
+}))
+
+const canvasRef = ref<HTMLCanvasElement | undefined>()
+const canvasContext = ref()
+
+const drawText = (ctx: CanvasRenderingContext2D, text: string, x: number, y: number): void => {
+  // Add a semi-transparent background for better readability
+  const metrics = ctx.measureText(text)
+  const padding = 4
+  ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'
+  ctx.fillRect(
+    x - padding,
+    y - 16 - padding, // 16 is approx. font height
+    metrics.width + padding * 2,
+    16 + padding * 2
+  )
+
+  // Draw the text
+  ctx.fillStyle = widget.value.options.lineColor
+  ctx.fillText(text, x, y)
+}
+
+const renderCanvas = (): void => {
+  if (canvasRef.value === undefined || canvasRef.value === null) return
+  if (canvasContext.value === undefined) {
+    console.debug('Canvas context undefined!')
+    canvasContext.value = canvasRef.value.getContext('2d')
+    return
+  }
+  const ctx = canvasContext.value
+  const canvasWidth = canvasSize.value.width
+  const canvasHeight = canvasSize.value.height
+  resetCanvas(ctx)
+
+  ctx.clearRect(0, 0, canvasWidth, canvasHeight)
+  ctx.fillStyle = widget.value.options.backgroundColor
+  ctx.fillRect(0, 0, canvasWidth, canvasHeight)
+  ctx.strokeStyle = widget.value.options.lineColor
+  ctx.lineWidth = Math.max(widget.value.options.lineThickness, 1)
+
+  try {
+    if (valuesHistory.length === 0) return
+
+    maxValue = Math.max(...valuesHistory)
+    minValue = Math.min(...valuesHistory)
+    const currentValue = valuesHistory[valuesHistory.length - 1]
+
+    // Draw the graph
+    ctx.beginPath()
+    ctx.moveTo(0, canvasHeight)
+
+    valuesHistory.forEach((sample, index) => {
+      const x = index * (canvasWidth / valuesHistory.length)
+      const y = canvasHeight - ((sample - minValue) / (maxValue - minValue)) * canvasHeight
+      ctx.lineTo(x, y)
+    })
+    ctx.stroke()
+
+    // Setup text rendering
+    ctx.font = '14px monospace'
+    ctx.textBaseline = 'bottom'
+
+    // Draw the values
+    drawText(ctx, `Current: ${currentValue.toFixed(2)}`, 10, canvasHeight - 10)
+    drawText(ctx, `Min: ${minValue.toFixed(2)}`, 10, canvasHeight - 30)
+    drawText(ctx, `Max: ${maxValue.toFixed(2)}`, 10, canvasHeight - 50)
+  } catch (error) {
+    console.error('Error drawing graph:', error)
+  }
+}
+
+const valuesHistory: number[] = []
+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())
+})
+
+const canvasVisible = useElementVisibility(canvasRef)
+watch(canvasVisible, (isVisible, wasVisible) => {
+  if (isVisible && !wasVisible) renderCanvas()
+})
+</script>
+
+<style scoped>
+.main {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  min-width: 150px;
+  min-height: 200px;
+}
+</style>
diff --git a/src/types/widgets.ts b/src/types/widgets.ts
index 62da93c31..0924bd394 100644
--- a/src/types/widgets.ts
+++ b/src/types/widgets.ts
@@ -16,6 +16,7 @@ export enum WidgetType {
   ImageView = 'ImageView',
   Map = 'Map',
   MiniWidgetsBar = 'MiniWidgetsBar',
+  Plotter = 'Plotter',
   URLVideoPlayer = 'URLVideoPlayer',
   VideoPlayer = 'VideoPlayer',
   VirtualHorizon = 'VirtualHorizon',