From 349003bd6feba54f88743c3c1583d1b245ffc99a Mon Sep 17 00:00:00 2001
From: Jeremy Wall <jeremy@marzhillstudios.com>
Date: Fri, 16 Feb 2024 15:01:22 -0500
Subject: [PATCH] feat: Allow formatting the yaxis tick marks

---
 examples/example_dashboards.yaml | 10 ++++++----
 src/dashboard.rs                 |  1 +
 src/routes.rs                    |  6 +++++-
 static/lib.js                    | 20 ++++++++++++++++----
 4 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/examples/example_dashboards.yaml b/examples/example_dashboards.yaml
index 51f38b3..676887d 100644
--- a/examples/example_dashboards.yaml
+++ b/examples/example_dashboards.yaml
@@ -3,12 +3,12 @@
   graphs:
     - title: Node cpu
       source: http://heimdall:9001
-      query: 'sum by (instance)(irate(node_cpu_seconds_total{mode="system",job="nodestats"}[5m])) * 100'
+      query: 'sum by (instance)(irate(node_cpu_seconds_total{job="nodestats"}[5m]))'
       query_type: Range
       span:
         end: now
         duration: 1d
-        step_duration: 1h
+        step_duration: 10min
       name_label: instance
 - title: Test Dasbboard 2
   span:
@@ -16,9 +16,11 @@
     duration: 2 days
     step_duration: 1 minute
   graphs:
-    - title: Node cpu
+    - title: Node cpu sytem percent
       source: http://heimdall:9001
-      query: 'sum by (instance)(irate(node_cpu_seconds_total{mode="system",job="nodestats"}[5m])) * 100'
+      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]))
+      d3_tick_format: "~%"
       query_type: Range
       name_label: instance
     - title: Node memory
diff --git a/src/dashboard.rs b/src/dashboard.rs
index d9e1c9a..4a2e859 100644
--- a/src/dashboard.rs
+++ b/src/dashboard.rs
@@ -44,6 +44,7 @@ pub struct Graph {
     pub span: Option<GraphSpan>,
     pub name_label: String,
     pub query_type: QueryType,
+    pub d3_tick_format: Option<String>,
 }
 
 fn duration_from_string(duration_string: &str) -> Option<Duration> {
diff --git a/src/routes.rs b/src/routes.rs
index a34e8dc..ea7cfc7 100644
--- a/src/routes.rs
+++ b/src/routes.rs
@@ -82,7 +82,11 @@ pub fn graph_component(dash_idx: usize, graph_idx: usize, graph: &Graph) -> Mark
     html!(
         div {
             h2 { (graph.title) }
-            timeseries-graph uri=(graph_data_uri) id=(graph_id) label=(graph.name_label) { }
+            @if graph.d3_tick_format.is_some() { 
+                timeseries-graph uri=(graph_data_uri) id=(graph_id) label=(graph.name_label) d3-tick-format=(graph.d3_tick_format.as_ref().unwrap()) { }
+            } @else {
+                timeseries-graph uri=(graph_data_uri) id=(graph_id) label=(graph.name_label) { }
+            }
         }
     )
 }
diff --git a/static/lib.js b/static/lib.js
index a3537a7..04716be 100644
--- a/static/lib.js
+++ b/static/lib.js
@@ -22,6 +22,7 @@ class TimeseriesGraph extends HTMLElement {
     #end;
     #duration;
     #step_duration;
+    #d3TickFormat = "~s";
     #targetNode = null;
     constructor() {
         super();
@@ -31,7 +32,7 @@ class TimeseriesGraph extends HTMLElement {
         this.#targetNode = this.appendChild(document.createElement("div"));
     }
 
-    static observedAttributes = ['uri', 'width', 'height', 'poll-seconds', 'end', 'duration', 'step-duration'];
+    static observedAttributes = ['uri', 'width', 'height', 'poll-seconds', 'end', 'duration', 'step-duration', 'd3-tick-format'];
 
     attributeChangedCallback(name, _oldValue, newValue) {
         switch (name) {
@@ -59,6 +60,9 @@ class TimeseriesGraph extends HTMLElement {
             case 'step-duration':
                 this.#step_duration = newValue;
                 break;
+            case 'd3-tick-format':
+                this.#d3TickFormat = newValue;
+                break;
             default: // do nothing;
                 break;
         }
@@ -74,6 +78,7 @@ class TimeseriesGraph extends HTMLElement {
         this.#end = this.getAttribute('end') || null;
         this.#duration = this.getAttribute('duration') || null;
         this.#step_duration = this.getAttribute('step-duration') || null;
+        this.#d3TickFormat = this.getAttribute('d3-tick-format') || this.#d3TickFormat;
         this.resetInterval()
     }
 
@@ -131,8 +136,15 @@ class TimeseriesGraph extends HTMLElement {
         };
         const layout = {
             displayModeBar: false,
-            responsive: true
+            responsive: true,
+            yaxis: {
+                tickformat: this.#d3TickFormat,
+                //showticksuffix: 'all',
+                //ticksuffix: '%',
+                //exponentFormat: 'SI'
+            }
         };
+        console.debug("layout", layout);
         if (data.Series) {
             // https://plotly.com/javascript/reference/scatter/
             var traces = [];
@@ -155,7 +167,7 @@ class TimeseriesGraph extends HTMLElement {
                 traces.push(trace);
             }
             // https://plotly.com/javascript/plotlyjs-function-reference/#plotlyreact
-            Plotly.react(this.getTargetNode(), traces, config, layout);
+            Plotly.react(this.getTargetNode(), traces, layout, config);
         } else if (data.Scalar) {
             // https://plotly.com/javascript/reference/bar/
             var traces = [];
@@ -173,7 +185,7 @@ class TimeseriesGraph extends HTMLElement {
                 trace.y.push(series.value);
                 traces.push(trace);
             }
-            Plotly.react(this.getTargetNode(), traces, config, layout);
+            Plotly.react(this.getTargetNode(), traces, layout, config);
         }
     }
 }