ui: Configure legend positioning

closes #18

examples/example_dashboards.yaml

@@ -4,6 +4,7 @@
     - title: Node cpu # Graphs have titles
       query_type: Range # The type of graph. Range for timeseries and Scalar for point in time
       d3_tickformat: "~s" # Default tick format for the graph y axis
+      legend_orientation: h
       yaxes:
         - anchor: "y"
           # overlaying: "y"

src/dashboard.rs

@@ -84,9 +84,18 @@ pub struct SubPlot {
     pub meta: PlotMeta,
 }
 
+#[derive(Deserialize, Serialize, Clone)]
+pub enum Orientation {
+    #[serde(rename = "h")]
+    Horizontal,
+    #[serde(rename = "v")]
+    Vertical,
+}
+
 #[derive(Deserialize)]
 pub struct Graph {
     pub title: String,
+    pub legend_orientation: Option<Orientation>,
     pub yaxes: Vec<AxisDefinition>,
     pub plots: Vec<SubPlot>,
     pub span: Option<GraphSpan>,

src/routes.rs

@@ -25,13 +25,14 @@ use maud::{html, Markup};
 use serde::{Serialize, Deserialize};
 use tracing::debug;
 
-use crate::dashboard::{Dashboard, Graph, GraphSpan, AxisDefinition, query_data};
+use crate::dashboard::{Dashboard, Graph, GraphSpan, AxisDefinition, Orientation, query_data};
 use crate::query::QueryResult;
 
 type Config = State<Arc<Vec<Dashboard>>>;
 
 #[derive(Serialize, Deserialize)]
 pub struct GraphPayload {
+    pub legend_orientation: Option<Orientation>,
     pub yaxes: Vec<AxisDefinition>,
     pub plots: Vec<QueryResult>,
 }
@@ -62,7 +63,7 @@ pub async fn graph_query(
         }
     };
     let plots = query_data(graph, dash, query_span).await.expect("Unable to get query results");
-    Json(GraphPayload{yaxes: graph.yaxes.clone(), plots})
+    Json(GraphPayload{legend_orientation: graph.legend_orientation.clone(), yaxes: graph.yaxes.clone(), plots})
 }
 
 pub fn mk_api_routes(config: Arc<Vec<Dashboard>>) -> Router<Config> {

static/lib.js

@@ -255,11 +255,6 @@ class TimeseriesGraph extends HTMLElement {
         }
         var data = graph.plots;
         var yaxes = graph.yaxes;
-        const config = {
-            legend: {
-                orientation: 'h'
-            }
-        };
         var layout = {
             displayModeBar: false,
             responsive: true,
@@ -270,8 +265,14 @@ class TimeseriesGraph extends HTMLElement {
             },
             xaxis: {
                 gridcolor: getCssVariableValue("--accent-color")
+            },
+            legend: {
+                orientation: 'v'
             }
         };
+        if (graph.legend_orientation) {
+            layout.legend.orientation = graph.legend_orientation;
+        }
         var nextYaxis = this.yaxisNameGenerator();
         for (const yaxis of yaxes) {
             yaxis.tickformat = yaxis.tickformat || this.#d3TickFormat;
@@ -345,7 +346,7 @@ class TimeseriesGraph extends HTMLElement {
             }
         }
         // https://plotly.com/javascript/plotlyjs-function-reference/#plotlyreact
-        Plotly.react(this.getTargetNode(), traces, layout, config);
+        Plotly.react(this.getTargetNode(), traces, layout, null);
     }
 }