Pr chartjs plugins

BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor

@@ -6,33 +6,33 @@
 
 <h1>Blazor Line Chart</h1>
 <div class="lead mb-3">
-    A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time.
-    It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.
+  A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time.
+  It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.
 </div>
 
 <CarbonAds />
 
 <SectionHeading Size="HeadingSize.H4" Text="Prerequisites" PageUrl="@pageUrl" HashTagName="prerequisites" />
 <div class="mb-3">
-    Refer to the <a href="/getting-started/blazor-webassembly">getting started guide</a> for setting up charts.
+  Refer to the <a href="/getting-started/blazor-webassembly">getting started guide</a> for setting up charts.
 </div>
 
 <SectionHeading Size="HeadingSize.H4" Text="How it works" PageUrl="@pageUrl" HashTagName="how-it-works" />
 <div class="mb-3">
-    In the following example, a <a href="/utils/color-utility#categorical-12-color">categorical 12-color</a> palette is used.
+  In the following example, a <a href="/utils/color-utility#categorical-12-color">categorical 12-color</a> palette is used.
 </div>
 <Callout Heading="TIP" Color="CalloutColor.Success">
-    For data visualization, you can use the predefined palettes <code>ColorUtility.CategoricalTwelveColors</code> for a 12-color palette and <code>ColorUtility.CategoricalSixColors</code> for a 6-color palette.
-    These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.
+  For data visualization, you can use the predefined palettes <code>ColorUtility.CategoricalTwelveColors</code> for a 12-color palette and <code>ColorUtility.CategoricalSixColors</code> for a 6-color palette.
+  These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.
 </Callout>
 <Demo Type="typeof(LineChart_Demo_01_A_Examples)" Tabs="true" />
 <div class="my-3"></div>
 <Demo Type="typeof(LineChart_Demo_01_B_Examples)" Tabs="true" />
 
 <SectionHeading Size="HeadingSize.H4" Text="Locale" PageUrl="@pageUrl" HashTagName="locale" />
 <div class="my-3">
-    By default, the chart is using the default locale of the platform on which it is running.
-    In the following example, you will see the chart in the <b>German</b> locale (<b>de_DE</b>).
+  By default, the chart is using the default locale of the platform on which it is running.
+  In the following example, you will see the chart in the <b>German</b> locale (<b>de_DE</b>).
 </div>
 <Demo Type="typeof(LineChart_Demo_02_Locale)" Tabs="true" />
 
@@ -48,9 +48,12 @@
 <SectionHeading Size="HeadingSize.H4" Text="Fill between datasets" PageUrl="@pageUrl" HashTagName="dataset-fill" />
 <Demo Type="typeof(LineChart_Demo_06_Dataset_Fill)" Tabs="true" />
 
+<SectionHeading Size="HeadingSize.H4" Text="(Custom) Plugins" PageUrl="@pageUrl" HashTagName="plugins" />
+<Demo Type="typeof(LineChart_Demo_08_Plugins)" Tabs="true" />
+
 @code {
-    private readonly string pageUrl = "/charts/line-chart";
-    private readonly string title = "Blazor Line Chart";
-    private readonly string description = "A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.";
-    private readonly string imageUrl = "https://i.imgur.com/8b7jH0D.png";
+  private readonly string pageUrl = "/charts/line-chart";
+  private readonly string title = "Blazor Line Chart";
+  private readonly string description = "A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.";
+  private readonly string imageUrl = "https://i.imgur.com/8b7jH0D.png";
 }

BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_08_Plugins.razor

@@ -0,0 +1,203 @@
+@using System.Text.Json.Serialization
+<div class="container-fluid overflow-x-auto">
+  <LineChart @ref="lineChart" Width="800" />
+</div>
+<small>This line chart has the Zoom (built-in), Annotations (built-in), DragData (locally defined) and Crosshair (anonymous) plugins enabled.</small>
+
+<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@3/dist/chartjs-plugin-annotation.min.js" integrity="sha256-8BDDxChCyYOB80/6VhOpmr7qI5EIDyDPzxsWePPFVfo=" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-crosshair@2/dist/chartjs-plugin-crosshair.min.js" integrity="sha256-5bTtdEYtbjO36pQbMCXOsoYW5u5jfYfyI41LelMTTbQ=" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2/dist/chartjs-plugin-zoom.min.js" integrity="sha256-UDxwmAK+KFxnav4Dab9fcgZtCwwjkpGIwxWPNcAyepw=" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-dragdata@2/dist/chartjs-plugin-dragdata.min.js" integrity="sha256-TVzMefO8VbXaQ5GV1xGhZbFEGUGOm/x/y7bQGhxyKuE=" crossorigin="anonymous"></script>
+
+@code {
+  private LineChart lineChart = default!;
+  private LineChartOptions lineChartOptions = default!;
+  private ChartData chartData = default!;
+
+  protected override void OnInitialized()
+  {
+    var colors = ColorUtility.CategoricalTwelveColors;
+    var labels = new List<string> { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" };
+    var datasets = new List<IChartDataset>();
+
+    var dataset1 = new LineChartDataset
+      {
+        Label = "Windows",
+        Data = new List<double?> { 7265791, 5899643, 6317759, 6315641, 5338211, 8496306, 7568556, 8538933, 8274297, 8657298, 7548388, 7764845 },
+        BorderWidth = 2,
+        HoverBorderWidth = 4,
+        BackgroundColor = colors[ 0 ],
+        BorderColor = colors[ 0 ],
+      };
+    datasets.Add( dataset1 );
+
+    var dataset2 = new LineChartDataset
+      {
+        Label = "macOS",
+        Data = new List<double?> { 1809499, 1816642, 2122410, 1809499, 1850793, 1846743, 1954797, 2391313, 1983430, 2469918, 2633303, 2821149 },
+        BorderWidth = 2,
+        HoverBorderWidth = 4,
+        BackgroundColor = colors[ 1 ],
+        BorderColor = colors[ 1 ],
+      };
+    datasets.Add( dataset2 );
+
+    var dataset3 = new LineChartDataset
+      {
+        Label = "Other",
+        Data = new List<double?> { 1081241, 1100363, 1118136, 1073255, 1120315, 1395736, 1488788, 1489466, 1489947, 1414739, 1735811, 1820171 },
+        BorderWidth = 2,
+        HoverBorderWidth = 4,
+        BackgroundColor = colors[ 2 ],
+        BorderColor = colors[ 2 ],
+      };
+    datasets.Add( dataset3 );
+
+    chartData = new ChartData { Labels = labels, Datasets = datasets };
+
+    lineChartOptions = new();
+    lineChartOptions.Responsive = true;
+    lineChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index };
+
+    lineChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "2019", Display = true };
+    lineChartOptions.Scales.Y!.Title = new ChartAxesTitle { Text = "Visitors", Display = true };
+
+    lineChartOptions.Plugins.Title!.Text = "Operating system";
+    lineChartOptions.Plugins.Title.Display = true;
+
+    EnableDragDataPlugin();
+    EnableZoomPlugin();
+    EnableAnnotationsPlugin();
+    EnableCrosshairsPlugin();
+  }
+
+  [JsonSourceGenerationOptions( DefaultIgnoreCondition = JsonIgnoreCondition.WhenWritingNull, PropertyNamingPolicy = JsonKnownNamingPolicy.CamelCase )]
+  public class DragDataPlugin : ChartPlugin
+  {
+    public bool? DragX { get; set; }
+    public bool? DragY { get; set; }
+    public bool? ShowTooltip { get; set; }
+  }
+
+  private void EnableDragDataPlugin()
+  {
+    // Example of a plugin class deriving from ChartPlugin that is defined locally
+    lineChartOptions.Plugins.Add( "dragData", new DragDataPlugin() { DragX = true, ShowTooltip = false } );
+
+    // Alternative way to access the plugin:
+    var plugin = lineChartOptions.Plugins.Get<DragDataPlugin>();
+    plugin.ShowTooltip = true;
+  }
+
+  private void EnableAnnotationsPlugin()
+  {
+    // Example of the built-in Annotation plugin class.
+    var annotations = new ChartPluginsAnnotation()
+      {
+        Annotations = new List<Annotation>()
+      };
+
+    foreach( LineChartDataset dataset in chartData.Datasets )
+    {
+      var average = dataset.Data.Average();
+      annotations.Annotations.Add( new LineAnnotation()
+        {
+          BorderColor = dataset.BorderColor,
+          BorderDash = [ 2, 2 ],
+          YMin = average,
+          YMax = average
+        } );
+    }
+
+    annotations.Annotations.Add( new BoxAnnotation()
+      {
+        XMin = 3.5,
+        XMax = 8.75,
+        YMin = 1250000,
+        YMax = 4750000,
+        BorderWidth = 2,
+        BorderColor = "gray",
+        BorderDash = [ 1, 1 ],
+        BackgroundColor = "rgba(255, 255, 0, 0.1)",
+        ShadowOffsetX = 5,
+        ShadowOffsetY = 5
+      } );
+
+    lineChartOptions.Plugins.Add( "annotation", annotations );
+  }
+
+  private void EnableZoomPlugin()
+  {
+    // Example of the built-in Zoom plugin class.
+    var zoom = new ChartPluginsZoom()
+      {
+        Zoom = new()
+        {
+          Wheel = new()
+          {
+            Enabled = true
+          },
+          Pinch = new()
+          {
+            Enabled = true
+          },
+          Mode = ZoomMode.Y,
+          ScaleMode = ZoomMode.XY,
+        },
+        Pan = new()
+        {
+          Enabled = true,
+          Mode = ZoomMode.XY
+        },
+        Limits = new()
+        {
+          X = new() { MinimumIsOriginal = true, MaximumIsOriginal = true, MinRange = 1.0 },
+          Y = new() { MinimumIsOriginal = true, MaximumIsOriginal = true, MinRange = 1.0 }
+        }
+      };
+
+    lineChartOptions.Plugins.Add( "zoom", zoom );
+  }
+
+  private void EnableCrosshairsPlugin()
+  {
+    // Example of an anonymous plugin class, i.e. one that does not derive from ChartPlugin.
+    // Note that you cannot .Get() or .TryGet() it later.
+    // Demo configuration taken directly from https://github.com/abelheinsbroek/chartjs-plugin-crosshair
+    var crossHairs = new
+    {
+      line = new
+      {
+        color = "#F66",
+        width = 1,
+      },
+      sync = new
+      {
+        enabled = true,
+        group = 1,
+        suppressTooltips = false
+      },
+      zoom = new
+      {
+        enabled = true,
+        zoomboxBackgroundColor = "rgba(66,133,244,0.2)",
+        zoomboxBorderColor = "#48F",
+        zoomButtonText = "Reset Zoom",
+        zoomButtonClass = "reset-zoom",
+      }
+    };
+
+    lineChartOptions.Plugins.AddObject( "crosshairs", crossHairs );
+  }
+
+
+  protected override async Task OnAfterRenderAsync( bool firstRender )
+  {
+    if( firstRender )
+    {
+      await lineChart.InitializeAsync( chartData, lineChartOptions );
+    }
+    await base.OnAfterRenderAsync( firstRender );
+  }
+
+}

blazorbootstrap/Enums/DrawTime.cs

@@ -0,0 +1,24 @@
+namespace BlazorBootstrap;
+
+public enum DrawTime
+{
+  /// <summary>
+  /// Occurs before any drawing takes place
+  /// </summary>
+  BeforeDraw,
+
+  /// <summary>
+  /// Occurs after drawing of axes, but before datasets
+  /// </summary>
+  BeforeDatasetsDraw,
+
+  /// <summary>
+  /// Occurs after drawing of datasets but before items such as the tooltip
+  /// </summary>
+  AfterDatasetsDraw,
+
+  /// <summary>
+  /// After other drawing is completed.
+  /// </summary>
+  AfterDraw
+}

blazorbootstrap/Enums/PointStyle.cs

@@ -0,0 +1,21 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace BlazorBootstrap;
+
+public enum PointStyle
+{
+  Circle,
+  Cross,
+  CrossRot,
+  Dash,
+  Line,
+  Rect,
+  RectRounded,
+  RectRot,
+  Star,
+  Triangle
+}