ui: Color the gridlines in the plots.

src/query.rs

@@ -21,18 +21,20 @@ use prometheus_http_query::{
 use serde::{Deserialize, Serialize};
 use tracing::debug;
 
-#[derive(Deserialize, Clone)]
+#[derive(Deserialize, Clone, Debug)]
 pub enum QueryType {
     Range,
     Scalar,
 }
 
+#[derive(Debug)]
 pub struct TimeSpan {
     pub end: DateTime<Utc>,
     pub duration: chrono::Duration,
     pub step_seconds: i64,
 }
 
+#[derive(Debug)]
 pub struct QueryConn<'conn> {
     source: &'conn str,
     query: &'conn str,

src/routes.rs

@@ -115,7 +115,7 @@ pub async fn dash_ui(State(config): State<Config>, Path(dash_idx): Path<usize>)
         .collect::<Vec<(usize, &Graph)>>();
     html!(
         h1 { (dash.title) }
-        span-selector {}
+        span-selector class="row-flex" {}
         @for (idx, graph) in &graph_iter {
             (graph_component(dash_idx, *idx, *graph))
         }

static/lib.js

@@ -12,6 +12,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+function getCssVariableValue(variableName) {
+    return getComputedStyle(document.documentElement).getPropertyValue(variableName);
+}
+
 class TimeseriesGraph extends HTMLElement {
     #uri;
     #width;
@@ -33,6 +37,9 @@ class TimeseriesGraph extends HTMLElement {
         this.#height = 600;
         this.#pollSeconds = 30;
         this.#menuContainer = this.appendChild(document.createElement('div'));
+        // TODO(jwall): These should probably be done as template clones so we have less places
+        // to look for class attributes.
+        this.#menuContainer.setAttribute("class", "row-flex");
         this.#targetNode = this.appendChild(document.createElement("div"));
     }
 
@@ -218,6 +225,12 @@ class TimeseriesGraph extends HTMLElement {
                     this.populateFilterData(labels);
                 }
             }
+            if (subplot.Scalar) {
+                for (const triple of subplot.Scalar) {
+                    const labels = triple[0];
+                    this.populateFilterData(labels);
+                }
+            }
         }
     }
 
@@ -234,6 +247,14 @@ class TimeseriesGraph extends HTMLElement {
         var layout = {
             displayModeBar: false,
             responsive: true,
+            plot_bgcolor: getCssVariableValue('--paper-background-color').trim(),
+            paper_bgcolor: getCssVariableValue('--paper-background-color').trim(),
+            font: {
+                color: getCssVariableValue('--text-color').trim()
+            },
+            xaxis: {
+                gridcolor: getCssVariableValue("--accent-color")
+            }
         };
         var traces = [];
         for (var subplot_idx in data) {
@@ -255,6 +276,7 @@ class TimeseriesGraph extends HTMLElement {
                     // https://plotly.com/javascript/reference/layout/yaxis/
                     layout["yaxis" + subplotCount] = {
                         anchor: yaxis,
+                        gridcolor: getCssVariableValue("--accent-color"),
                         tickformat: meta["d3_tick_format"] || this.#d3TickFormat
                     };
                     const series = triple[2];
@@ -278,8 +300,18 @@ class TimeseriesGraph extends HTMLElement {
                 }
             } else if (subplot.Scalar) {
                 // https://plotly.com/javascript/reference/bar/
-                for (const triple of subplot.Scalar) {
+                layout["yaxis"] = {
+                    tickformat: this.#d3TickFormat,
+                    gridcolor: getCssVariableValue("--accent-color")
+                };
+                loopScalar: for (const triple of subplot.Scalar) {
                     const labels = triple[0];
+                    for (var label in labels) {
+                        var show = this.#filteredLabelSets[label];
+                        if (show && !show.includes(labels[label])) {
+                            continue loopScalar;
+                        }
+                    }
                     const meta = triple[1];
                     const series = triple[2];
                     var trace = {
@@ -329,6 +361,7 @@ class SpanSelector extends HTMLElement {
 
     connectedCallback() {
         const self = this;
+        // TODO(jwall): We should probably show a loading indicator of some kind.
         self.#updateInput.onclick = function(_evt) {
             self.updateGraphs()
         };

static/site.css

@@ -1,3 +1,66 @@
+:root {
+    /* Base colors */
+    --background-color: #FFFFFF; /* Light background */
+    --text-color: #333333; /* Dark text for contrast */
+    --paper-background-color: #F0F0F0;
+    --accent-color: #6200EE; /* For buttons and interactive elements */
+
+    /* Graph colors */
+    --graph-color-1: #007BFF; /* Blue */
+    --graph-color-2: #28A745; /* Green */
+    --graph-color-3: #DC3545; /* Red */
+    --graph-color-4: #FFC107; /* Yellow */
+    --graph-color-5: #17A2B8; /* Cyan */
+    --graph-color-6: #6C757D; /* Gray */
+
+    /* Axis and grid lines */
+    --axis-color: #CCCCCC;
+    --grid-line-color: #EEEEEE;
+
+    /* Tooltip background */
+    --tooltip-background-color: #FFFFFF;
+    --tooltip-text-color: #000000;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        /* Solarized Dark Base Colors */
+        --background-color: #002b36; /* base03 */
+        --paper-background-color: #003c4a;
+        --text-color: #839496; /* base0 */
+        --accent-color: #268bd2; /* blue */
+
+        /* Graph colors - Solarized Accent Colors */
+        --graph-color-1: #b58900; /* yellow */
+        --graph-color-2: #cb4b16; /* orange */
+        --graph-color-3: #dc322f; /* red */
+        --graph-color-4: #d33682; /* magenta */
+        --graph-color-5: #6c71c4; /* violet */
+        --graph-color-6: #2aa198; /* cyan */
+
+        /* Axis and grid lines */
+        --axis-color: #586e75; /* base01 */
+        --grid-line-color: #073642; /* base02 */
+
+        /* Tooltip background */
+        --tooltip-background-color: #002b36; /* base03 */
+        --tooltip-text-color: #839496; /* base0 */
+    }
+}
+
+body {
+    background-color: var(--background-color);
+    color: var(--text-color);
+}
+
+input, textarea, select, option, button {
+    background-color: var(--paper-background-color);
+    border: 1px solid var(--accent-color);
+    color: var(--text-color);
+    padding: 8px;
+    border-radius: 4px;
+}
+
 body * {
     padding-left: .3em;
     padding-right: .3em;
@@ -20,3 +83,10 @@ body * {
 .flex-item-shrink {
    flex: 0 1 auto;
 }
+
+timeseries-graph {
+    background-color: var(--paper-background-color);
+    border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+}