diff --git a/examples/example_dashboards.yaml b/examples/example_dashboards.yaml index 00b0688..464218a 100644 --- a/examples/example_dashboards.yaml +++ b/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" diff --git a/src/dashboard.rs b/src/dashboard.rs index 3e00cb8..76a0f32 100644 --- a/src/dashboard.rs +++ b/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, pub yaxes: Vec, pub plots: Vec, pub span: Option, diff --git a/src/routes.rs b/src/routes.rs index 0720665..b8c59e7 100644 --- a/src/routes.rs +++ b/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>>; #[derive(Serialize, Deserialize)] pub struct GraphPayload { + pub legend_orientation: Option, pub yaxes: Vec, pub plots: Vec, } @@ -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>) -> Router { diff --git a/static/lib.js b/static/lib.js index ac5a345..739afa4 100644 --- a/static/lib.js +++ b/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); } }