examples/example_dashboards.yaml

@@ -1,24 +1,20 @@
---- # A list of dashboards
+---
 - title: Test Dasbboard 1
-  graphs: # Each Dashboard can have 1 or more graphs in it.
+  graphs:
-    - title: Node cpu # Graphs have titles
+    - title: Node cpu
-      query_type: Range # The type of graph. Range for timeseries and Scalar for point in time
+      d3_tick_format: "~s"
-      d3_tick_format: "~s" # Default tick format for the graph y axis
+      plots:
-      plots: # List of pluts to show on the graph
+        - source: http://heimdall:9001
-        - source: http://heimdall:9001 # Prometheus source uri for this plot
+          query: 'sum by (instance)(irate(node_cpu_seconds_total{job="nodestats"}[5m]))'
-          query: 'sum by (instance)(irate(node_cpu_seconds_total{job="nodestats"}[5m]))' # The PromQL query for this plot
+          meta:
-          meta: # metadata for this plot
+            name_label: instance
-            name_label: instance # Grab a trace name from the query tags 
+      query_type: Range
-            #d3_tick_format: "~%" # d3 tick format override for this plot's yaxis
+      span:
-            #name_prefix: "Prefix" # A prefix for this sublots trace names
+        end: now
-            #name_suffix: "Suffix" # A suffix for this subplots trace names
+        duration: 1d
-            #named_axis: "y" # yaxis name to use for this subplots traces
+        step_duration: 10min
-      span: # The span for this range query
-        end: now # Where the span ends. RFC3339 format with special handling for the now keyword
-        duration: 1d # duration of the span. Uses SI formatting for duration amounts.
-        step_duration: 10min # step size for the duration amounts.
 - title: Test Dasbboard 2
-  span: # Dashboards can have default spans that get used if there is no override for the graph
+  span:
     end: 2024-02-10T00:00:00.00Z
     duration: 2 days
     step_duration: 1 minute
@@ -31,18 +27,16 @@
           query: |
             sum by (instance)(irate(node_cpu_seconds_total{mode="system",job="nodestats"}[5m])) / sum by (instance)(irate(node_cpu_seconds_total{job="nodestats"}[5m]))
           meta:
-            d3_tick_format: "~%"
+            d3_tick_format: "~s"
             name_label: instance
             name_prefix: "System"
-            named_axis: "y"
         - source: http://heimdall:9001
           query: |
             sum by (instance)(irate(node_cpu_seconds_total{mode="user",job="nodestats"}[5m])) / sum by (instance)(irate(node_cpu_seconds_total{job="nodestats"}[5m]))
           meta:
-            d3_tick_format: "~%"
+            #d3_tick_format: "~s"
             name_label: instance
             name_suffix: "User"
-            named_axis: "y"
     - title: Node memory
       query_type: Scalar
       plots:

src/query.rs

@@ -120,7 +120,6 @@ pub struct PlotMeta {
     name_prefix: Option<String>,
     name_suffix: Option<String>,
     name_label: Option<String>,
-    named_axis: Option<String>,
     d3_tick_format: Option<String>,
 }
 

static/lib.js

@@ -137,14 +137,12 @@ class TimeseriesGraph extends HTMLElement {
         for (var subplot_idx in data) {
             const subplot = data[subplot_idx];
             const subplotCount = Number(subplot_idx) + 1;
-            const default_yaxis = "y" + subplotCount
+            const yaxis = "y" + subplotCount
             if (subplot.Series) {
                 // https://plotly.com/javascript/reference/scatter/
                 for (const triple of subplot.Series) {
                     const labels = triple[0];
                     const meta = triple[1];
-                    const yaxis = meta["named_axis"] || default_yaxis;
-                    // https://plotly.com/javascript/reference/layout/yaxis/
                     layout["yaxis" + subplotCount] = {
                         anchor: yaxis,
                         tickformat: meta["d3_tick_format"] || this.#d3TickFormat
@@ -155,8 +153,6 @@ class TimeseriesGraph extends HTMLElement {
                         mode: "lines+text",
                         x: [],
                         y: [],
-                        // We always share the x axis for timeseries graphs.
-                        xaxis: "x",
                         yaxis: yaxis,
                         yhoverformat: meta["d3_tick_format"],
                     };
@@ -205,6 +201,7 @@ class TimeseriesGraph extends HTMLElement {
                 }
             }
         }
+        console.debug("traces: ", traces);
         // https://plotly.com/javascript/plotlyjs-function-reference/#plotlyreact
         Plotly.react(this.getTargetNode(), traces, layout, config);
     }