zaphar/Heracles
1
0
Fork 0
mirror of https://github.com/zaphar/Heracles.git synced 2025-07-23 04:29:48 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat: Allow formatting the yaxis tick marks

Browse Source
This commit is contained in:
Jeremy Wall 2024-02-16 15:01:22 -05:00
parent 26782b2bfc
commit 349003bd6f
4 changed files with 28 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
examples/example_dashboards.yaml
View File

@ -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

1
src/dashboard.rs
View File

@ -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> {

6
src/routes.rs
View File

@ -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) { }
}
}
)
}

20
static/lib.js
View File

@ -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);
}
}
}