Merge pull request #19 from macias/main

crosshair

Author: erossini

ChartjsDemo/Pages/LineSimple.razor

@@ -50,6 +50,19 @@ protected override async Task OnInitializedAsync()
     {
         _config1 = new LineChartConfig()
         {
+            Options = new Options()
+            {
+                Plugins = new Plugins()
+                {
+                    Crosshair = new Crosshair()
+                    {
+                        Vertical = new CrosshairLine()
+                        {
+                            Color = Colors.PaletteBorder1[0],
+                        }
+                    }                
+                }
+            }
         };
 
         _config1.Data.Labels = LineDataExamples.SimpleLineText;

src/Chart.razor

@@ -1,6 +1,6 @@
 @inject IJSRuntime JSRuntime
 
 <div id="@("chartcontainer" + Config.CanvasId)" class="chart-container @Class" 
-     style="height:@Height; width:@Width; @(Style)" @onmouseout="async (args) => await OnMouseOut(args)">
+     style="height:@Height; width:@Width; @(Style)" @onmouseout="async (args) => await OnMouseOutAsync(args)">
     <canvas id="@Config.CanvasId" style="@(Height != null ? $"height:{Height}" : "") @(Width != null ? $"width:{Width};" : "")"></canvas>
 </div>

src/Chart.razor.cs

@@ -105,7 +105,7 @@ public void Dispose()
             this.oldReference?.Dispose();
         }
 
-        private ValueTask OnMouseOut(MouseEventArgs mouseEventArgs)
+        private ValueTask OnMouseOutAsync(MouseEventArgs mouseEventArgs)
         {
             if (Config.Options is Options { OnMouseOutAsync: { } } options)
                 return options.OnMouseOutAsync(mouseEventArgs);

src/Models/Common/Crosshair.cs

@@ -0,0 +1,18 @@
+namespace PSC.Blazor.Components.Chartjs.Models.Common
+{
+    public sealed class Crosshair
+    {
+        [JsonPropertyName("cursor")]
+        [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+        public string? Cursor { get; set; }
+
+        [JsonPropertyName("vertical")]
+        [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+        public CrosshairLine? Vertical { get; set; }
+        
+        [JsonPropertyName("horizontal")]
+        [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+        public CrosshairLine? Horizontal { get; set; }
+
+    }
+}

src/Models/Common/CrosshairLine.cs

@@ -0,0 +1,17 @@
+namespace PSC.Blazor.Components.Chartjs.Models.Common
+{
+    public sealed class CrosshairLine
+    {
+        [JsonPropertyName("color")]
+        [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+        public string? Color { get; set; }
+
+        [JsonPropertyName("width")] 
+        public int Width { get; set; } = 1;
+
+        [JsonPropertyName("dash")]
+        [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+        public int[]? Dash { get; set; }
+
+    }
+}

src/Models/Common/Plugins.cs

@@ -24,5 +24,9 @@ public class Plugins
         [JsonPropertyName("tooltip")]
         [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
         public Tooltip? Tooltip { get; set; }
+
+        [JsonPropertyName("crosshair")]
+        [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+        public Crosshair? Crosshair { get; set; }
     }
 }

src/wwwroot/Chart.js

@@ -1,4 +1,51 @@
-window.setup = (id, dotnetConfig, jsonConfig) => {
+function crosshairLine(chart,evt,plugin)
+{
+    // https://www.youtube.com/watch?v=M3SOJJOf6L8
+    const { canvas, ctx, chartArea: {left, right, top, bottom}}=chart;
+    
+    chart.update("none");
+    
+    if (plugin.cursor) {
+        if (evt.offsetX >= left && evt.offsetX <= right && evt.offsetY <= bottom && evt.offsetY >= top) {
+            canvas.style.cursor = plugin.cursor;
+        } else
+            canvas.style.cursor = "default";
+    }
+
+    if (plugin.vertical && evt.offsetX>=left && evt.offsetX<=right) {
+        let line = plugin.vertical;
+        
+        ctx.save();
+        ctx.beginPath();
+        ctx.moveTo(evt.offsetX, top);
+        ctx.lineTo(evt.offsetX, bottom);
+        ctx.lineWidth = line.width;
+        if (line.color)
+        ctx.strokeStyle =  line.color;
+        if (line.dash)
+        ctx.setLineDash(line.dash);
+        ctx.stroke();
+        ctx.restore();
+    }
+    
+    if (plugin.horizontal && evt.offsetY<=bottom && evt.offsetY>=top) {
+        let line = plugin.horizontal;
+
+        ctx.save();
+        ctx.beginPath();
+        ctx.moveTo(left, evt.offsetY);
+        ctx.lineTo(right, evt.offsetY);
+        ctx.lineWidth = line.width;
+        if (line.color)
+            ctx.strokeStyle =  line.color;
+        if (line.dash)
+            ctx.setLineDash(line.dash);
+        ctx.stroke();
+        ctx.restore();
+    }    
+}
+
+window.setup = (id, dotnetConfig, jsonConfig) => {
     document.getElementById("chartcontainer" + id).style.display = 'none';
     document.getElementById("chartcontainer" + id).innerHTML = '&nbsp;';
     document.getElementById("chartcontainer" + id).innerHTML = '<canvas id="' + id + '"></canvas>';
@@ -14,6 +61,12 @@
         };
     }
 
+    let crosshair_plugin = config?.options?.plugins?.crosshair;
+    if (config?.options?.plugins?.crosshair)
+    {
+        config.options.plugins.crosshair = undefined;
+    }
+    
     if (config?.options?.hasOnHoverAsync) {
         config.options.hasOnHoverAsync = undefined;
         config.options.onHover = function (evt, activeElements, ch) {
@@ -29,6 +82,11 @@
     }
 
     var chart = new Chart(context2d, config);
+    if (crosshair_plugin) {
+        chart.canvas.addEventListener("mousemove", (evt) => {
+            crosshairLine(chart, evt,crosshair_plugin);
+        });
+    }
 
     chart.options.onClick = function (event, array) {
         var rtn = -1;