ui: Allow you to specify the fill for a trace

examples/example_dashboards.yaml

@@ -9,6 +9,7 @@
           query: 'sum by (instance)(irate(node_cpu_seconds_total{job="nodestats"}[5m]))' # The PromQL query for this plot
           meta: # metadata for this plot
             name_format: "`${labels.instance}`" # javascript template literal to format the trace name
+            fill: tozeroy
             #d3_tick_format: "~%" # d3 tick format override for this plot's yaxis
             #named_axis: "y" # yaxis name to use for this subplots traces
       span: # The span for this range query

src/query.rs

@@ -117,10 +117,27 @@ pub struct DataPoint {
     value: f64,
 }
 
+#[derive(Serialize, Deserialize, Debug, Clone)]
+pub enum FillTypes {
+    #[serde(rename = "tonexty")]
+    ToNextY,
+    #[serde(rename = "tozeroy")]
+    ToZeroY,
+    #[serde(rename = "tonextx")]
+    ToNextX,
+    #[serde(rename = "tozerox")]
+    ToZeroX,
+    #[serde(rename = "toself")]
+    ToSelf,
+    #[serde(rename = "tonext")]
+    ToNext,
+}
+
 #[derive(Serialize, Deserialize, Debug, Clone)]
 pub struct PlotMeta {
     name_format: Option<String>,
     named_axis: Option<String>,
+    fill: Option<FillTypes>,
     d3_tick_format: Option<String>,
 }
 

static/lib.js

@@ -287,6 +287,9 @@ class TimeseriesGraph extends HTMLElement {
                         yaxis: yaxis,
                         yhoverformat: meta["d3_tick_format"],
                     };
+                    if (meta.fill) {
+                        trace.fill = meta.fill;
+                    }
                     var name = this.formatName(meta, labels);
                     if (name) { trace.name = name; }
                     for (const point of series) {