diff --git a/OTLPView/Components/DimensionedCounterView.razor b/OTLPView/Components/DimensionedCounterView.razor index 9fc62f6..5203778 100644 --- a/OTLPView/Components/DimensionedCounterView.razor +++ b/OTLPView/Components/DimensionedCounterView.razor @@ -25,7 +25,7 @@ - +
Recent Values:
diff --git a/OTLPView/Components/DimensionedCounterView.razor.cs b/OTLPView/Components/DimensionedCounterView.razor.cs index f4f7e6f..8aa9706 100644 --- a/OTLPView/Components/DimensionedCounterView.razor.cs +++ b/OTLPView/Components/DimensionedCounterView.razor.cs @@ -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 chartValues; + private readonly int _instanceID = ++lastId; + + private double[] _chartLabels; + private double[] _chartValues; [Parameter, EditorRequired] public required DimensionScope Dimension @@ -18,32 +27,27 @@ public required DimensionScope Dimension set { _dimension = value; - chartValues = new List() - { - 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; } @@ -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 { @@ -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); + } } diff --git a/OTLPView/Components/DimensionedHistogramView.razor b/OTLPView/Components/DimensionedHistogramView.razor index 4e440a2..d3f1f00 100644 --- a/OTLPView/Components/DimensionedHistogramView.razor +++ b/OTLPView/Components/DimensionedHistogramView.razor @@ -25,7 +25,7 @@ - +
diff --git a/OTLPView/Components/DimensionedHistogramView.razor.cs b/OTLPView/Components/DimensionedHistogramView.razor.cs index 4b6fa90..53298e0 100644 --- a/OTLPView/Components/DimensionedHistogramView.razor.cs +++ b/OTLPView/Components/DimensionedHistogramView.razor.cs @@ -1,3 +1,6 @@ +using Microsoft.JSInterop; +using static System.Runtime.InteropServices.JavaScript.JSType; + namespace OTLPView.Components; public sealed partial class DimensionedHistogramView @@ -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 _chartValues; + //private List _chartValues; + private double[] _chartValues; [Parameter, EditorRequired] public required DimensionScope Dimension @@ -19,30 +28,25 @@ public required DimensionScope Dimension { _dimension = value; _chartLabels = CalcLabels((Dimension.Values?.First() as HistogramValue).ExplicitBounds); - _chartValues = new List() - { - 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; @@ -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 { @@ -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); + } } diff --git a/OTLPView/Extensions/Helpers.cs b/OTLPView/Extensions/Helpers.cs index 6beadb1..bb0d8b6 100644 --- a/OTLPView/Extensions/Helpers.cs +++ b/OTLPView/Extensions/Helpers.cs @@ -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 }) diff --git a/OTLPView/Pages/_Host.cshtml b/OTLPView/Pages/_Host.cshtml index 8116a6e..64cbff6 100644 --- a/OTLPView/Pages/_Host.cshtml +++ b/OTLPView/Pages/_Host.cshtml @@ -36,5 +36,6 @@ +