Add X,Y support to ARRAYPLOT

OpenC3 · Jan 29, 2025 · 4dc9e89 · 4dc9e89
1 parent fa79a7a
commit 4dc9e89
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 4 deletions.
diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-demo/targets/INST/cmd_tlm/inst_tlm.txt b/openc3-cosmos-init/plugins/packages/openc3-cosmos-demo/targets/INST/cmd_tlm/inst_tlm.txt
@@ -73,6 +73,14 @@ TELEMETRY <%= target_name %> HEALTH_STATUS BIG_ENDIAN "Health and status from th
     GENERIC_READ_CONVERSION_START FLOAT 32
       packet.read('TEMP1') * 1_000_000
     GENERIC_READ_CONVERSION_END
+  # Enable to test the ARRAYPLOT widget with array of array data [[x1,x2,...],[y1,y2,...]]
+  # ITEM POINTS 0 0 DERIVED
+  #   GENERIC_READ_CONVERSION_START UINT 800
+  #     return [
+  #       Array.new(800) { |i| i * 0.1 },
+  #       (0...800).map { |i| Math.sin(2 * Math::PI * i / 800) }
+  #     ]
+  #   GENERIC_READ_CONVERSION_END
   PROCESSOR TEMP1STAT statistics_processor.rb TEMP1 100
   PROCESSOR TEMP1WATER watermark_processor.rb TEMP1
 

diff --git a/openc3-cosmos-init/plugins/packages/openc3-vue-common/src/widgets/ArrayplotWidget.vue b/openc3-cosmos-init/plugins/packages/openc3-vue-common/src/widgets/ArrayplotWidget.vue
@@ -193,23 +193,36 @@ export default {
     },
     received: function (data) {
       for (let i = 0; i < data.length; i++) {
+        let xaxis = [] // Declare outside the loop so we can use it for the X axis values
         for (const [key, value] of Object.entries(data[i])) {
+          // We support 2 different kind of data, a simple array of Y values
+          // or an array with both X and Y values, e.g. [[x1,x2,x3...], [y1,y2,y3...]]
           if (key === '__time') {
-            let xaxis = []
+            // Explicitly setting the X axis values always wins
             if (this.xAxis) {
+              xaxis = []
               let x = this.xAxis.start
               for (let i = 0; i < this.data[1].length; i++) {
                 xaxis.push(x)
                 x += this.xAxis.step
               }
             } else {
-              xaxis = Array.from({ length: this.data[1].length }, (_, i) => i)
+              // If we don't have an array of X values we generate them
+              if (xaxis.length === 0) {
+                xaxis = Array.from({ length: this.data[1].length }, (_, i) => i)
+              }
             }
             this.data[0] = xaxis
           }
           let key_index = this.indexes[key]
           if (key_index) {
-            this.data[key_index] = value
+            // Check for the array of arrays case
+            if (Array.isArray(value[0])) {
+              this.data[key_index] = value[1]
+              xaxis = value[0]
+            } else {
+              this.data[key_index] = value
+            }
           }
         }
       }

diff --git a/openc3/data/config/widgets.yaml b/openc3/data/config/widgets.yaml
@@ -246,7 +246,11 @@ Telemetry Widgets:
         ARRAY INST HEALTH_STATUS ARY 250 80 "0x%x" 6 FORMATTED
         ARRAY INST HEALTH_STATUS ARY2 200 100 nil 4 WITH_UNITS
     ARRAYPLOT:
-      summary: Plot an array of values
+      summary: Plot an array of values.
+      description:
+        The item can either be a simple array or a 2D array of x values and y values, e.g. [[x1, x2, x3], [y1, y2, y3]].
+        If the X_AXIS setting is not specified, the X axis starts with 0 and increments by 1.
+        If the X_AXIS setting is used the x values of a 2D array will be ignored.
       settings:
         TITLE:
           summary: Title of the plot