Consolidate charts

README.md

@@ -27,7 +27,7 @@ Don't know what Blazor is? Read [here](https://dotnet.microsoft.com/apps/aspnet/
 You need an IDE that supports Blazor and .Net Core SDK 3.x+
 
 1. [Visual Studio 2019](https://visualstudio.microsoft.com/downloads/) (Community Edition is fine) or [VisualStudio for Mac](https://visualstudio.microsoft.com/vs/mac/) or [Jetbrains Rider](https://www.jetbrains.com/rider/)
-2. [.NET Core 3.0](https://dotnet.microsoft.com/download/dotnet-core/3.0)
+2. [.NET Core 3.0](https://dotnet.microsoft.com/download/dotnet-core/3.0) or newer
 
 
 ## Installation
@@ -84,15 +84,19 @@ Then add a few `@using` statements
 @using ChartJs.Blazor.Util
 ```
 
-Below the `@using` statements add a `ChartJsPieChart` component
+Below the `@using` statements add a `Chart` component
 ```html
-<ChartJsPieChart @ref="_pieChartJs" Config="@_config" Width="600" Height="300"/>
+<Chart @ref="_pieChartJs"
+        Config="@_config"
+        TConfig="PieConfig"
+        Width="600"
+        Height="300"/>
 ```
-The last step is to make the `ChartJsPieChart` from above, reachable from your code to configure it and to give it some data to display. In the `@code` section of your .razor file create matching variables to reference the chart and its configuration. Finally, give your chart a title and some data. The finished code should look like this:
+The last step is to make the `Chart` from above, reachable from your code to configure it and to give it some data to display. In the `@code` section of your .razor file create matching variables to reference the chart and its configuration. Finally, give your chart a title and some data. The finished code should look like this:
 
 ```csharp
     private PieConfig _config;
-    private ChartJsPieChart _pieChartJs;
+    private Chart<PieConfig> _pieChartJs;
 
     protected override void OnInitialized()
     {
@@ -137,7 +141,9 @@ First, in your  `Index.html`/`_Host.cshtml` you've added references to static as
 
 Then, you've imported `ChartJs.Blazor` in your `_Imports.razor`. The Blazor Team mentioned that this shouldn't be necessary in the future.
 
-In your .razor file you added the `ChartJsPieChart` component and gave it some width and height. You specified that the component should use the variable `_config`` as the chart's configuration object. You also told Blazor that you want a direct reference to the chart and that the reference should be saved in your `_pieChartJs`` variable.
+In your .razor file you added the `Chart` component and gave it some width and height. You specified that the component should use the variable `_config` as the chart's configuration object. You also told Blazor that you want a direct reference to the chart and that the reference should be saved in your `_pieChartJs` variable.
+
+Note: for the moment you need to explicitly specify the type of the configuration object `TConfig="PieConfig"`. That won't be necessary in the future.
 
 When your page's `OnInitialized()` method is executed you're setting the chart's configuration and dataset to be displayed.
 

samples/ClientSide/ChartJs.Blazor.Sample.ClientSide/Pages/Test.razor

@@ -12,13 +12,19 @@
 @using ChartJs.Blazor.Interop
 @using Newtonsoft.Json.Linq;
 
-<ChartJsBarChart @ref="barChartJs" Config="@_config" Height="250"/>
+<Chart @ref="barChartJs"
+        Config="@_config"
+        TConfig="ChartJs.Blazor.ChartJS.BarChart.BarConfig"
+        Height="250"/>
 
-<textarea rows="@Rows" @bind-value="@EventArgs" @bind-value:event="oninput" style="width: 100%; resize: both; height:auto "></textarea>
+<textarea rows="@Rows"
+          @bind-value="@EventArgs"
+          @bind-value:event="oninput"
+          style="width: 100%; resize: both; height:auto "></textarea>
 
 @code {
 
-    private ChartJsBarChart barChartJs;
+    private Chart<BarConfig> barChartJs;
     private BarConfig _config;
     public int Rows { get; set; } = 3;
     private BarDataset<double> _barDataSet;

samples/ServerSide/ChartJs.Blazor.Sample.ServerSide/Pages/Test.razor

@@ -3,21 +3,20 @@
 @using System.Globalization
 @using ChartJs.Blazor.Charts
 @using ChartJs.Blazor.ChartJS.PieChart
-@using ChartJs.Blazor.ChartJS.Common
 @using ChartJs.Blazor.ChartJS.Common.Properties
 @using ChartJs.Blazor.Util
-@using ChartJs.Blazor.ChartJS.BarChart
-@using ChartJs.Blazor.ChartJS.BarChart.Axes
 @using ChartJs.Blazor.ChartJS.Common.Enums
-@using ChartJs.Blazor.ChartJS.Common.Axes
-@using ChartJs.Blazor.ChartJS.Common.Axes.Ticks
 @using ChartJs.Blazor.ChartJS.Common.Handlers
 @using ChartJs.Blazor.Interop
 @using System.Text.Json
 
 <h1>Pie Chart with legend callbacks</h1>
 
-<ChartJsPieChart @ref="_pieChartJs" Config="@_config" Width="600" Height="300" />
+<Chart @ref="_pieChartJs"
+       Config="@_config"
+       TConfig="PieConfig"
+       Width="600"
+       Height="300" />
 
 <div class="container">
     <div class="row">
@@ -40,7 +39,7 @@
 
 @code {
     private PieConfig _config;
-    private ChartJsPieChart _pieChartJs;
+    private Chart<PieConfig> _pieChartJs;
 
     protected override void OnInitialized()
     {
@@ -151,4 +150,4 @@
 
         return shown;
     }
-}
+}

samples/Shared/ChartJs.Blazor.Sample.Shared/Components/BarCharts/HorizontalBarChartComponent.razor

@@ -10,15 +10,16 @@
     <button class="btn btn-primary" @onclick="AddData">Add Data</button>
     <button class="btn btn-primary" @onclick="RemoveData">Remove Data</button>
 </div>
-<ChartJsBarChart @ref="_barChart"
-                 Config="@_barChartConfig"
-                 Width="600"
-                 Height="300" />
+<Chart @ref="_barChart"
+       Config="@_barChartConfig"
+       TConfig="ChartJs.Blazor.ChartJS.BarChart.BarConfig"
+       Width="600"
+       Height="300" />
 
 @code
 {
     private BarConfig _barChartConfig;
-    private ChartJsBarChart _barChart;
+    private Chart<BarConfig> _barChart;
     private BarDataset<double> _barDataSet;
 
     protected override Task OnInitializedAsync()
@@ -94,4 +95,4 @@
 
         await _barChart.Update();
     }
-}
+}

samples/Shared/ChartJs.Blazor.Sample.Shared/Components/BarCharts/SimpleBarChartComponent.razor

@@ -15,16 +15,16 @@
         Remove Data
     </button>
 </div>
-<ChartJsBarChart @ref="_barChart"
-                 Config="@_barChartConfig"
-                 Width="600"
-                 Height="300" />
+<Chart @ref="_barChart"
+        Config="@_barChartConfig"
+        TConfig="ChartJs.Blazor.ChartJS.BarChart.BarConfig"
+        Width="600"
+        Height="300"/>
 
 @code
 {
-
     private BarConfig _barChartConfig;
-    private ChartJsBarChart _barChart;
+    private Chart<BarConfig> _barChart;
     private BarDataset<double> _barDataSet;
 
     protected override void OnInitialized()
@@ -102,4 +102,4 @@
 
         await _barChart.Update();
     }
-}
+}

samples/Shared/ChartJs.Blazor.Sample.Shared/Components/BarCharts/StackedBarChartComponent.razor

@@ -7,11 +7,15 @@
 
 <h1>Stacked Bar Chart</h1>
 
-<ChartJsBarChart @ref="_barChartJs" Config="@_config" Width="600" Height="300" />
+<Chart @ref="_barChartJs"
+           Config="@_config"
+           TConfig="ChartJs.Blazor.ChartJS.BarChart.BarConfig"
+           Width="600"
+           Height="300" />
 
 @code {
     private BarConfig _config;
-    private ChartJsBarChart _barChartJs;
+    private Chart<BarConfig> _barChartJs;
 
     protected override void OnInitialized()
     {
@@ -83,4 +87,4 @@
         barSet3.AddRange(new double[] { 5, 6, 7, 8 });
         _config.Data.Datasets.Add(barSet3);
     }
-}
+}

samples/Shared/ChartJs.Blazor.Sample.Shared/Components/BarCharts/TimeBarChartComponent.razor

@@ -10,11 +10,15 @@
 
 <h1>Time Bar Chart</h1>
 
-<ChartJsBarChart @ref="_barChartJs" Config="@_config" Width="600" Height="300" />
+<Chart @ref="_barChartJs"
+       Config="@_config"
+       TConfig="ChartJs.Blazor.ChartJS.BarChart.BarConfig"
+       Width="600"
+       Height="300" />
 
 @code {
     private BarConfig _config;
-    private ChartJsBarChart _barChartJs;
+    private Chart<BarConfig> _barChartJs;
 
     protected override void OnInitialized()
     {
@@ -40,9 +44,9 @@
                             },
                             Offset = true
                         }
-                },
-                YAxes = new List<CartesianAxis>
-                {
+                    },
+                    YAxes = new List<CartesianAxis>
+                    {
                         new BarLinearCartesianAxis
                         {
                             Ticks = new LinearCartesianTicks
@@ -72,4 +76,4 @@
         barSet.AddRange(Enumerable.Range(2, 4).Select(i => new TimePoint(now.AddHours(i), rnd.NextDouble() * 4)));
         _config.Data.Datasets.Add(barSet);
     }
-}
+}

samples/Shared/ChartJs.Blazor.Sample.Shared/Components/BubbleChartComponent.razor

@@ -6,11 +6,16 @@
 <div class="row">
     <button class="btn btn-primary" @onclick="OnClick">Add Dataset</button>
 </div>
-<ChartJsBubbleChart @ref="_bubbleChartJs" Config="@_config" Width="600" Height="300" />
+
+<Chart @ref="_bubbleChartJs"
+        Config="@_config"
+        TConfig="BubbleConfig"
+        Width="600"
+        Height="300"/>
 
 @code {
     private BubbleConfig _config;
-    private ChartJsBubbleChart _bubbleChartJs;
+    private Chart<BubbleConfig> _bubbleChartJs;
 
     private Random _rand = new Random();
 
@@ -23,7 +28,7 @@
                 Title = new ChartJS.Common.Properties.OptionsTitle
                 {
                     Display = true,
-                    Text = new[] { "Simple Bar Chart", "with two lines of title" },
+                    Text = new[] {"Simple Bar Chart", "with two lines of title"},
                     FontStyle = ChartJS.Common.Enums.FontStyle.Italic
                 }
             }
@@ -60,4 +65,4 @@
         new BubblePoint(_rand.NextDouble(), _rand.NextDouble(), 5 + _rand.NextDouble() * 10),
         new BubblePoint(_rand.NextDouble(), _rand.NextDouble(), 5 + _rand.NextDouble() * 10)
     };
-}
+}

samples/Shared/ChartJs.Blazor.Sample.Shared/Components/Callbacks/ClickAndHoverHandlerComponent.razor

@@ -17,7 +17,11 @@
 
 <button class="btn btn-primary" @onclick="AddData">Add data</button>
 
-<ChartJsPieChart @ref="_doughnutChartJs" Config="@_config" Width="600" Height="300" />
+<Chart @ref="_doughnutChartJs"
+       Config="@_config"
+       TConfig="PieConfig"
+       Width="600"
+       Height="300" />
 
 <text>In each entry, the property "index" refers to the data index in that dataset</text>
 <br />
@@ -32,7 +36,7 @@
 
 @code {
     private PieConfig _config;
-    private ChartJsPieChart _doughnutChartJs;
+    private Chart<PieConfig> _doughnutChartJs;
 
     public string EventArgs { get; set; } = "";
     public int Rows { get; set; } = 3;

samples/Shared/ChartJs.Blazor.Sample.Shared/Components/Callbacks/LegendCallbacksComponent.razor

@@ -10,7 +10,11 @@
 
 <h1>Pie Chart with legend callbacks</h1>
 
-<ChartJsPieChart @ref="_pieChartJs" Config="@_config" Width="600" Height="300" />
+<Chart @ref="_pieChartJs"
+                 Config="@_config"
+                 TConfig="PieConfig"
+                 Width="600"
+                 Height="300" />
 
 <div class="container">
     <div class="row">
@@ -33,7 +37,7 @@
 
 @code {
     private PieConfig _config;
-    private ChartJsPieChart _pieChartJs;
+    private Chart<PieConfig> _pieChartJs;
 
     protected override void OnInitialized()
     {

samples/Shared/ChartJs.Blazor.Sample.Shared/Components/DoughnutChartComponent.razor

@@ -5,11 +5,15 @@
 
 <h1>Doughnut Chart</h1>
 
-<ChartJsPieChart @ref="_doughnutChartJs" Config="@_config" Width="600" Height="300" />
+<Chart @ref="_doughnutChartJs"
+        Config="@_config"
+        TConfig="PieConfig"
+        Width="600"
+        Height="300"/>
 
 @code {
     private PieConfig _config;
-    private ChartJsPieChart _doughnutChartJs;
+    private Chart<PieConfig> _doughnutChartJs;
 
     protected override void OnInitialized()
     {

samples/Shared/ChartJs.Blazor.Sample.Shared/Components/Fun/SineLineChartComponent.razor

@@ -14,14 +14,19 @@
 @implements IDisposable
 
 <h2>Sine Line Chart</h2>
-<ChartJsLineChart @ref="_lineChartJs" Config="@_lineConfig" Width="600" Height="300" />
-<button @onclick="Start">Start</button>
-<button @onclick="Stop">Stop</button>
+<Chart @ref="_lineChartJs"
+        Config="@_lineConfig"
+        TConfig="LineConfig"
+        Width="600"
+        Height="300"/>
+
+<button class="btn btn-primary" @onclick="Start">Start</button>
+<button class="btn btn-primary" @onclick="Stop">Stop</button>
 
 @code
 {
     LineConfig _lineConfig;
-    ChartJsLineChart _lineChartJs;
+    Chart<LineConfig> _lineChartJs;
 
     private LineDataset<Point> _sineSet;
 
@@ -126,4 +131,4 @@
     {
         _timer?.Dispose();
     }
-}
+}

samples/Shared/ChartJs.Blazor.Sample.Shared/Components/LineChart/LinearLineChartComponent.razor

@@ -12,14 +12,18 @@
 @using Newtonsoft.Json.Linq;
 
 <h2>Linear Line Chart</h2>
-<ChartJsLineChart @ref="_lineChartJs" Config="@_lineConfig" Width="600" Height="300" />
-<Button @onclick="UpdateChart">Add random point</Button>
+<Chart @ref="_lineChartJs"
+       Config="@_lineConfig"
+       TConfig="LineConfig"
+       Width="600"
+       Height="300" />
+<Button class="btn btn-primary" @onclick="UpdateChart">Add random point</Button>
 
 @code
 {
     readonly WeatherForecastService _forecastService = new WeatherForecastService();
     LineConfig _lineConfig;
-    ChartJsLineChart _lineChartJs;
+    Chart<LineConfig> _lineChartJs;
 
     private LineDataset<Point> _tempPerHourSet;
 
@@ -143,4 +147,4 @@
     {
         return $"{value} °";
     }
-}
+}