Implement GraphWidget with inline SVG area chart

src/Blashing.Core.Tests/GraphWidgetTest.cs

@@ -7,7 +7,7 @@ namespace Blashing.Core.Tests;
 public class GraphWidgetTest : BunitContext
 {
     [Fact]
-    public void CommentsWidgetMarkupShouldContainPassedInValues()
+    public void GraphWidgetMarkupShouldContainPassedInValues()
     {
         var title = "Graph 1";
         var moreInfo = "This graph contains lots of useful data";
@@ -17,11 +17,6 @@ public void CommentsWidgetMarkupShouldContainPassedInValues()
                 .Add(p => p.MoreInfo, moreInfo)
             );
 
-        //var widget = @"
-        //    <h1 class=""title"">@Title</h1>
-        //    <h2 class="value" data-bind="current | prettyNumber | prepend prefix | append suffix" b-lgoxk5ilas=""></h2>
-        //    <p class=""more-info"">@MoreInfo</p>";
-
         var expectedTitleMarkup = $"<h1 class=\"title\">{title}</h1>";
         cut.FindAll("h1")[0].MarkupMatches(expectedTitleMarkup);
 
@@ -30,7 +25,7 @@ public void CommentsWidgetMarkupShouldContainPassedInValues()
     }
 
     [Fact]
-    public void CommentsWidgetShouldContainPassedInValues()
+    public void GraphWidgetShouldContainPassedInValues()
     {
         var title = "Graph 1";
         var moreInfo = "This graph contains lots of useful data";
@@ -44,4 +39,81 @@ public void CommentsWidgetShouldContainPassedInValues()
         Assert.Equal(graphWidget.Title, title);
         Assert.Equal(graphWidget.MoreInfo, moreInfo);
     }
+
+    [Fact]
+    public void GraphWidgetWithCurrentValueShouldRenderValue()
+    {
+        var title = "Graph 1";
+        var current = "42";
+        var prefix = "$";
+        var suffix = "k";
+
+        var cut = Render<GraphWidget>(parameters => parameters
+                .Add(p => p.Title, title)
+                .Add(p => p.Current, current)
+                .Add(p => p.Prefix, prefix)
+                .Add(p => p.Suffix, suffix)
+            );
+
+        var graphWidget = cut.Instance;
+        Assert.Equal(graphWidget.Current, current);
+        Assert.Equal(graphWidget.Prefix, prefix);
+        Assert.Equal(graphWidget.Suffix, suffix);
+
+        var h2 = cut.FindAll("h2")[0];
+        h2.MarkupMatches($"<h2 class=\"value\">{prefix}{current}{suffix}</h2>");
+    }
+
+    [Fact]
+    public void GraphWidgetWithPointsShouldRenderSvg()
+    {
+        var points = new List<double> { 10, 20, 15, 30, 25 };
+
+        var cut = Render<GraphWidget>(parameters => parameters
+                .Add(p => p.Title, "Graph")
+                .Add(p => p.Points, points)
+            );
+
+        var graphWidget = cut.Instance;
+        Assert.Equal(graphWidget.Points, points);
+
+        var svgs = cut.FindAll("svg");
+        Assert.Single(svgs);
+    }
+
+    [Fact]
+    public void GraphWidgetWithoutPointsShouldNotRenderSvg()
+    {
+        var cut = Render<GraphWidget>(parameters => parameters
+                .Add(p => p.Title, "Graph")
+            );
+
+        var svgs = cut.FindAll("svg");
+        Assert.Empty(svgs);
+    }
+
+    [Fact]
+    public void GenerateSvgPathShouldReturnEmptyForFewerThanTwoPoints()
+    {
+        var cut = Render<GraphWidget>(parameters => parameters
+                .Add(p => p.Points, new List<double> { 42 })
+            );
+
+        var path = cut.Instance.GenerateSvgPath();
+        Assert.Equal(string.Empty, path);
+    }
+
+    [Fact]
+    public void GenerateSvgPathShouldReturnValidPathForTwoPoints()
+    {
+        var cut = Render<GraphWidget>(parameters => parameters
+                .Add(p => p.Points, new List<double> { 10, 20 })
+            );
+
+        var path = cut.Instance.GenerateSvgPath();
+        Assert.NotEmpty(path);
+        Assert.StartsWith("M ", path);
+        Assert.Contains(" C ", path);
+        Assert.EndsWith(" Z", path);
+    }
 }

src/Blashing.Core/Components/Graph/GraphWidget.razor

@@ -1,9 +1,20 @@
 @inherits BaseWidget;
 
 <div class="widget-graph" style="background-color:@BackgroundColor">
+    @if (Points != null && Points.Any())
+    {
+        <svg viewBox="0 0 @SvgViewBoxWidth @SvgViewBoxHeight" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"
+             width="100%" height="100%">
+            <path d="@GenerateSvgPath()" fill="white" />
+        </svg>
+    }
+
     <h1 class="title">@Title</h1>
 
-    <h2 class="value" data-bind="current | prettyNumber | prepend prefix | append suffix"></h2>
+    @if (!string.IsNullOrEmpty(Current))
+    {
+        <h2 class="value">@Prefix@Current@Suffix</h2>
+    }
 
     <p class="more-info">@MoreInfo</p>
 </div>

src/Blashing.Core/Components/Graph/GraphWidget.razor.cs

@@ -1,3 +1,4 @@
+using System.Text;
 using Microsoft.AspNetCore.Components;
 
 namespace Blashing.Core.Components.Graph;
@@ -7,11 +8,62 @@ public partial class GraphWidget : BaseWidget
     [Parameter]
     public string? Title { get; set; }
 
+    [Parameter]
+    public string? Current { get; set; }
+
+    [Parameter]
+    public string? Prefix { get; set; }
+
+    [Parameter]
+    public string? Suffix { get; set; }
+
     [Parameter]
     public string? MoreInfo { get; set; }
-
+
+    [Parameter]
+    public IEnumerable<double> Points { get; set; } = [];
+
     protected override void OnParametersSet()
     {
-        BackgroundColor ??= "#ff9618";
+        // #dc5945 matches the $background-color in GraphWidget.razor.scss
+        BackgroundColor ??= "#dc5945";
+    }
+
+    private const int SvgViewBoxWidth = 300;
+    private const int SvgViewBoxHeight = 200;
+    private const double SvgTopPadding = 10;
+
+    public string GenerateSvgPath()
+    {
+        var pointsList = Points?.ToList();
+        if (pointsList == null || pointsList.Count < 2)
+            return string.Empty;
+
+        var min = pointsList.Min();
+        var max = pointsList.Max();
+        var range = max - min;
+        if (range == 0) range = 1;
+
+        var n = pointsList.Count;
+        var coords = pointsList.Select((y, i) => (
+            x: (double)i / (n - 1) * SvgViewBoxWidth,
+            y: (SvgViewBoxHeight - SvgTopPadding) - ((y - min) / range) * (SvgViewBoxHeight - SvgTopPadding)
+        )).ToList();
+
+        var sb = new StringBuilder();
+        sb.Append(FormattableString.Invariant($"M {coords[0].x:F1} {coords[0].y:F1}"));
+
+        for (int i = 0; i < coords.Count - 1; i++)
+        {
+            double midX = (coords[i].x + coords[i + 1].x) / 2;
+            sb.Append(FormattableString.Invariant(
+                $" C {midX:F1} {coords[i].y:F1}, {midX:F1} {coords[i + 1].y:F1}, {coords[i + 1].x:F1} {coords[i + 1].y:F1}"));
+        }
+
+        sb.Append(FormattableString.Invariant($" L {coords[^1].x:F1} {SvgViewBoxHeight}.0"));
+        sb.Append(FormattableString.Invariant($" L {coords[0].x:F1} {SvgViewBoxHeight}.0"));
+        sb.Append(" Z");
+
+        return sb.ToString();
     }
 }

src/Blashing.Core/Components/Graph/GraphWidget.razor.css

@@ -20,6 +20,8 @@ svg {
     fill-opacity: 0.4;
     left: 0px;
     top: 0px;
+    width: 100%;
+    height: 100%;
 }
 
 .title, .value {

src/Blashing.Core/Components/Graph/GraphWidget.razor.scss

@@ -22,6 +22,8 @@ $tick-color: rgba(0, 0, 0, 0.4);
         fill-opacity: 0.4;
         left: 0px;
         top: 0px;
+        width: 100%;
+        height: 100%;
     }
 
     .title, .value {

src/Blashing.Shared/Pages/Demo.razor

@@ -34,7 +34,7 @@
 
                 <Element Row="1" Column="1" ColumnSpan="2" style="border: none; box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0,0,0,.12)">
                     @*<div style="height: 100%; width: 100%; background-color: #dc5945"></div>*@
-                    <GraphWidget Title="Convergence" MoreInfo="" />
+                    <GraphWidget Title="Convergence" Current="65" MoreInfo="" Points="@GraphPoints" />
                 </Element>
 
             </Dashboard>
@@ -45,4 +45,5 @@
 
 @code {
     List<(string label, string value)>? Items = new() { ("Turn-key", "0"), ("Synergy", "4"), ("Exit strategy", "11"), ("Paridigm shift", "3"), ("Enterprise", "20"), ("Pivoting", "7"), ("Web 2.0", "16"), ("Leverage", "25"), ("Streamlininess", "9") };
+    List<double> GraphPoints = new() { 10, 30, 25, 50, 45, 70, 60, 80, 65 };
 }

src/Blashing.Shared/Pages/Index.razor

@@ -16,7 +16,7 @@
 
 <br />
 
-<GraphWidget Title="Graph Widget" MoreInfo="f" />
+<GraphWidget Title="Graph Widget" Current="65" MoreInfo="f" Points="@GraphPoints" />
 
 <br />
 
@@ -42,4 +42,5 @@
 
 @code {
     List<(string label, string value)>? Items = new() { ("a", "b"), ("c", "d") };
+    List<double> GraphPoints = new() { 10, 30, 25, 50, 45, 70, 60, 80, 65 };
 }

src/Blashing.Stories/Stories/GraphWidget.stories.razor

@@ -5,19 +5,23 @@
 <Stories TComponent="GraphWidget">
 
     <ArgType For="_ => _.Title" Control="ControlType.Default" />
+    <ArgType For="_ => _.Current" Control="ControlType.Default" />
+    <ArgType For="_ => _.Prefix" Control="ControlType.Default" />
+    <ArgType For="_ => _.Suffix" Control="ControlType.Default" />
     <ArgType For="_ => _.MoreInfo" Control="ControlType.Default" />
 
     <Story Name="Default">
 
         <Arguments>
-            <Arg For="_ => _.Title" Value='"e"' />
-            <Arg For="_ => _.MoreInfo" Value='"f"' />
+            <Arg For="_ => _.Title" Value='"Convergence"' />
+            <Arg For="_ => _.Current" Value='"65"' />
+            <Arg For="_ => _.MoreInfo" Value='"at the next meeting"' />
         </Arguments>
 
         <Template>
-            <GraphWidget @attributes="context.Args">
+            <GraphWidget @attributes="context.Args"
+                         Points="@(new List<double> { 10, 30, 25, 50, 45, 70, 60, 80, 65 })">
             </GraphWidget>
-            @* <GraphWidget Title="e" MoreInfo="f" /> *@
         </Template>
 
     </Story>