Skip to content

Basic charting for metrics using plotly.js rather than Mud Blazor. #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Basic charting for metrics using plotly.js rather than Mud Blazor. #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
03f016a
Basic charting for metrics using plotly.js rather than Mud Blazor.
Sep 15, 2023
85465a7
Histogram graphs, improved graph settings
Sep 15, 2023
5daba33
further cleanup
Sep 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion OTLPView/Components/DimensionedCounterView.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
<MudCardContent>
<MudStack Row="true">
<MudPaper>
<MudChart ChartType="ChartType.Line" ChartSeries="@chartValues" XAxisLabels="@chartLabels" Width="500x" Height="400px"></MudChart>
<div id="@chartDivId" style="width:500px; height:400px"></div>
</MudPaper>
<MudPaper>
<div>Recent Values:</div>
Expand Down
55 changes: 38 additions & 17 deletions OTLPView/Components/DimensionedCounterView.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,24 @@
using Microsoft.JSInterop;
using static System.Runtime.InteropServices.JavaScript.JSType;

namespace OTLPView.Components;

public sealed partial class DimensionedCounterView
{
static int lastId = 0;

// Define the size of the graph based on the number of points and the duration of each point
private const int GRAPH_POINT_COUNT = 18; // 3 minutes
private const int GRAPH_POINT_SIZE = 10; // 10s

[Inject]
private IJSRuntime JSRuntime { get; set; }

private DimensionScope _dimension;
private string[] chartLabels;
private List<ChartSeries> chartValues;
private readonly int _instanceID = ++lastId;

private double[] _chartLabels;
private double[] _chartValues;

[Parameter, EditorRequired]
public required DimensionScope Dimension
Expand All @@ -18,32 +27,27 @@ public required DimensionScope Dimension
set
{
_dimension = value;
chartValues = new List<ChartSeries>()
{
new ChartSeries()
{
Name = Counter?.CounterName ?? "unknown",
Data = CalcChartValues(_dimension, GRAPH_POINT_COUNT, GRAPH_POINT_SIZE)
}
};
_chartValues = CalcChartValues(_dimension, GRAPH_POINT_COUNT, GRAPH_POINT_SIZE);
}
}

[Parameter, EditorRequired]
public required Counter Counter { get; set; }

private string chartDivId => $"lineChart{_instanceID}";

protected override void OnInitialized()
{
chartLabels = CalcLabels(GRAPH_POINT_COUNT, GRAPH_POINT_SIZE);
_chartLabels = _CalcLabels(GRAPH_POINT_COUNT, GRAPH_POINT_SIZE);
}

private string[] CalcLabels(int pointCount, int pointSize)
private double[] _CalcLabels(int pointCount, int pointSize)
{
var duration = pointSize * pointCount;
var labels = new string[pointCount];
var labels = new double[pointCount];
for (var i = 0; i < pointCount; i++)
{
labels[i] = (i < pointCount - 1) ? $"{(pointSize * (i + 1)) - duration}s" : "Now";
labels[i] = (pointSize * (i + 1)) - duration;
}
return labels;
}
Expand All @@ -57,11 +61,11 @@ private double[] CalcChartValues(DimensionScope dimension, int pointCount, int p
var now = DateTime.UtcNow;
foreach (var point in dimension.Values)
{
var start = CalcOffset(now-point.Start, pointCount, pointSize);
var end = CalcOffset(now-point.End, pointCount, pointSize);
var start = CalcOffset(now - point.Start, pointCount, pointSize);
var end = CalcOffset(now - point.End, pointCount, pointSize);
if (start is not null && end is not null)
{
for (var i = start.GetValueOrDefault(0); i <= end.GetValueOrDefault(pointCount-1); i++)
for (var i = start.GetValueOrDefault(0); i <= end.GetValueOrDefault(pointCount - 1); i++)
{
values[i] = point switch
{
Expand Down Expand Up @@ -95,6 +99,23 @@ private double[] CalcFakeValues(int pointCount)
return values;
}

protected override async Task OnAfterRenderAsync(bool firstRender)
{
var data = new[]{ new {
x= _chartLabels,
y= _chartValues,
type= "scatter"
} };

var layout = new {
title = Counter?.CounterName ?? "unknown",
showlegend = false,
xaxis = new {
title = "Time (s)"
}
};
var options = new { staticPlot = true };

await JSRuntime.InvokeVoidAsync("Plotly.newPlot", chartDivId, data, layout, options);
}
}
2 changes: 1 addition & 1 deletion OTLPView/Components/DimensionedHistogramView.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
<MudCardContent>
<MudStack>
<MudPaper>
<MudChart ChartType="ChartType.Bar" ChartSeries="@_chartValues" XAxisLabels="@_chartLabels" Width="500x" Height="400px"></MudChart>
<div id="@chartDivId" style="width:800px; height:400px"></div>
</MudPaper>
<MudPaper>
<MudTable Items="@Dimension._values" Dense="true">
Expand Down
50 changes: 36 additions & 14 deletions OTLPView/Components/DimensionedHistogramView.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
using Microsoft.JSInterop;
using static System.Runtime.InteropServices.JavaScript.JSType;

namespace OTLPView.Components;

public sealed partial class DimensionedHistogramView
Expand All @@ -6,10 +9,16 @@ public sealed partial class DimensionedHistogramView
private const int GRAPH_POINT_COUNT = 18; // 3 minutes
private const int GRAPH_POINT_SIZE = 10; // 10s

static int lastId = 0;
private readonly int _instanceID = ++lastId;

[Inject]
private IJSRuntime JSRuntime { get; set; }

private DimensionScope _dimension;
private string[] _chartLabels;
private List<ChartSeries> _chartValues;
//private List<ChartSeries> _chartValues;
private double[] _chartValues;

[Parameter, EditorRequired]
public required DimensionScope Dimension
Expand All @@ -19,30 +28,25 @@ public required DimensionScope Dimension
{
_dimension = value;
_chartLabels = CalcLabels((Dimension.Values?.First() as HistogramValue).ExplicitBounds);
_chartValues = new List<ChartSeries>()
{
new ChartSeries()
{
Name = Counter?.CounterName ?? "unknown",
Data = (Dimension.Values.First() as HistogramValue).Values.Select(v => (double)v).ToArray()
}
};
_chartValues = (Dimension.Values.First() as HistogramValue).Values.Select(v => (double)v).ToArray();
}
}

[Parameter, EditorRequired]
public required Counter Counter { get; set; }

private string chartDivId => $"barChart{_instanceID}";

protected override void OnInitialized()
{
}

private string[] CalcLabels(double[] bounds)
{
var labels = new string[bounds.Length+1];
var labels = new string[bounds.Length + 1];
for (var i = 0; i < bounds.Length; i++)
{
labels[i] = $"{bounds[i]}{Counter.CounterUnit??"s"}";
labels[i] = $"{bounds[i]}{Counter.CounterUnit ?? "s"}";
}
labels[bounds.Length] = "Inf";
return labels;
Expand All @@ -57,11 +61,11 @@ private double[] CalcChartValues(DimensionScope dimension, int pointCount, int p
var now = DateTime.UtcNow;
foreach (var point in dimension.Values)
{
var start = CalcOffset(now-point.Start, pointCount, pointSize);
var end = CalcOffset(now-point.End, pointCount, pointSize);
var start = CalcOffset(now - point.Start, pointCount, pointSize);
var end = CalcOffset(now - point.End, pointCount, pointSize);
if (start is not null && end is not null)
{
for (var i = start.GetValueOrDefault(0); i <= end.GetValueOrDefault(pointCount-1); i++)
for (var i = start.GetValueOrDefault(0); i <= end.GetValueOrDefault(pointCount - 1); i++)
{
values[i] = point switch
{
Expand Down Expand Up @@ -95,5 +99,23 @@ private double[] CalcFakeValues(int pointCount)
return values;
}

protected override async Task OnAfterRenderAsync(bool firstRender)
{
var data = new[]{ new {
x= _chartLabels,
y= _chartValues,
type= "bar"
} };

var layout = new {
title = Counter?.CounterName ?? "unknown",
showlegend = false,
xaxis = new {
title = $"Time ({Counter?.CounterUnit})"
}
};
var options = new { staticPlot = true };

await JSRuntime.InvokeVoidAsync("Plotly.newPlot", chartDivId, data, layout, options);
}
}
6 changes: 6 additions & 0 deletions OTLPView/Extensions/Helpers.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,12 @@ public static DateTime UnixNanoSecondsToDateTime(ulong unixTimeNanoSeconds)
return DateTimeOffset.FromUnixTimeMilliseconds(milliseconds).DateTime;
}

public static string ToJSArray(this double[] values) =>
$"[{string.Join(",", values)}]";

public static string ToJSArray(this string[] values) =>
$"['{string.Join("','", values)}']";

public static string ToHexString(this Google.Protobuf.ByteString bytes)
{
if (bytes is null or { Length: 0 })
Expand Down
1 change: 1 addition & 0 deletions OTLPView/Pages/_Host.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,5 +36,6 @@

<script src="_framework/blazor.server.js"></script>
<script src="_content/MudBlazor/MudBlazor.min.js"></script>
<script src='https://cdn.plot.ly/plotly-2.25.2.min.js'></script>
</body>
</html>