Updated samples

mariusmuntean · mariusmuntean · Jun 2, 2020 · May 24, 2020 · May 24, 2020 · May 24, 2020
commit 04d4bbc2b8f0cf73a46642302d933c65f1e1b79b
diff --git a/samples/ClientSide/ChartJs.Blazor.Sample.ClientSide/Pages/Test.razor b/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;

diff --git a/samples/ServerSide/ChartJs.Blazor.Sample.ServerSide/Pages/Test.razor b/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;
     }
-}
+}
diff --git a/...hared/ChartJs.Blazor.Sample.Shared/Components/BarCharts/HorizontalBarChartComponent.razor b/...hared/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();
     }
-}
+}
diff --git a/...es/Shared/ChartJs.Blazor.Sample.Shared/Components/BarCharts/SimpleBarChartComponent.razor b/...es/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();
     }
-}
+}
diff --git a/...s/Shared/ChartJs.Blazor.Sample.Shared/Components/BarCharts/StackedBarChartComponent.razor b/...s/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);
     }
-}
+}
diff --git a/samples/Shared/ChartJs.Blazor.Sample.Shared/Components/BarCharts/TimeBarChartComponent.razor b/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);
     }
-}
+}
diff --git a/samples/Shared/ChartJs.Blazor.Sample.Shared/Components/BubbleChartComponent.razor b/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)
     };
-}
+}
diff --git a/...red/ChartJs.Blazor.Sample.Shared/Components/Callbacks/ClickAndHoverHandlerComponent.razor b/...red/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;

diff --git a/...s/Shared/ChartJs.Blazor.Sample.Shared/Components/Callbacks/LegendCallbacksComponent.razor b/...s/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()
     {

diff --git a/samples/Shared/ChartJs.Blazor.Sample.Shared/Components/DoughnutChartComponent.razor b/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()
     {

diff --git a/samples/Shared/ChartJs.Blazor.Sample.Shared/Components/Fun/SineLineChartComponent.razor b/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();
     }
-}
+}
diff --git a/...s/Shared/ChartJs.Blazor.Sample.Shared/Components/LineChart/LinearLineChartComponent.razor b/...s/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} °";
     }
-}
+}
diff --git a/...red/ChartJs.Blazor.Sample.Shared/Components/LineChart/LogarithmicLineChartComponent.razor b/...red/ChartJs.Blazor.Sample.Shared/Components/LineChart/LogarithmicLineChartComponent.razor
@@ -5,18 +5,20 @@
 @using ChartJs.Blazor.ChartJS.LineChart
 @using ChartJs.Blazor.ChartJS.Common.Axes
 @using ChartJs.Blazor.ChartJS.Common.Axes.Ticks
-@using ChartJs.Blazor.ChartJS.Common.Handlers
-@using ChartJs.Blazor.Interop
 @using ChartJs.Blazor.Sample.Shared.Services
 @using ChartJs.Blazor.Util
 
 <h2>Logarithmic Line Chart</h2>
-<ChartJsLineChart @ref="_lineChartJs" Config="@_lineConfig" Width="600" Height="300" />
+<Chart @ref="_lineChartJs"
+        Config="@_lineConfig"
+        TConfig="LineConfig"
+        Width="600"
+        Height="300"/>
 
 @code
 {
     LineConfig _lineConfig;
-    ChartJsLineChart _lineChartJs;
+    Chart<LineConfig> _lineChartJs;
 
     WeatherForecastService _forecastService = new WeatherForecastService();
 

diff --git a/...les/Shared/ChartJs.Blazor.Sample.Shared/Components/LineChart/TimeLineChartComponent.razor b/...les/Shared/ChartJs.Blazor.Sample.Shared/Components/LineChart/TimeLineChartComponent.razor
@@ -1,5 +1,4 @@
 @using ChartJs.Blazor.Charts
-@using ChartJs.Blazor.ChartJS
 @using ChartJs.Blazor.ChartJS.Common.Properties
 @using ChartJs.Blazor.ChartJS.Common.Enums
 @using ChartJs.Blazor.ChartJS.Common.Axes
@@ -13,7 +12,11 @@
 @inject IJSRuntime JsRuntime
 
 <h2>Time Line Chart</h2>
-<ChartJsLineChart @ref="_lineChartJs" Config="@_lineConfig" Width="600" Height="300" />
+<Chart @ref="_lineChartJs"
+       Config="@_lineConfig"
+       TConfig="LineConfig"
+       Width="600"
+       Height="300" />
 
 <div class="row">
     <button class="btn btn-primary" @onclick="OnClick">Fill On/Off</button>
@@ -22,7 +25,7 @@
 @code
 {
     LineConfig _lineConfig;
-    ChartJsLineChart _lineChartJs;
+    Chart<LineConfig> _lineChartJs;
     const string DeCh = "de-ch";
     LineDataset<TimePoint> _tempDataSet;
     private bool _localeChangeWasAttempted = false;