fix for #13 and #6

muqeet-khan · Oct 8, 2018 · 7a2ea2a · 7a2ea2a
1 parent 232a8d0
commit 7a2ea2a
Show file tree

Hide file tree

Showing 12 changed files with 316 additions and 69 deletions.
diff --git a/samples/TestApplication/Pages/Index - Copy.cshtml b/samples/TestApplication/Pages/Index - Copy.cshtml
@@ -0,0 +1,81 @@
+@page "/backup"
+@using BlazorComponents.Shared
+
+<div class="container">
+    <h2>Chart JS charts using Blazor</h2>
+    <div class="row">
+        <button class="btn btn-primary" onclick="@UpdateChart">Update Chart </button>
+    </div>
+    <ChartJsBarChart ref="barChartJs" Chart="@blazorBarChartJS" Width="600" Height="300" />
+</div>
+
+
+@functions {
+
+    public ChartJSBarChart blazorBarChartJS { get; set; } = new ChartJSBarChart();
+    ChartJsBarChart barChartJs;
+
+    protected override void OnInit()
+    {
+        blazorBarChartJS = new ChartJSBarChart()
+        {
+            ChartType = "bar",
+            CanvasId = "myFirstBarChart",
+            Options = new ChartJsOptions()
+            {
+                Text = "Sample chart from Blazor",
+                BorderWidth = 1,
+                Display = true
+            },
+            Data = new ChartJsBarData()
+            {
+                Labels = new List<string>() { "Red", "Blue", "Yellow", "Green", "Purple", "Orange" },
+                Datasets = new List<ChartJsBarDataset>()
+                {
+                    new ChartJsBarDataset()
+                    {
+                        Label = "# of Votes from blazor",
+                        BackgroundColor = "#cc65fe",
+                        BorderColor = "#cc65fe",
+                        PointHoverRadius = 2,
+                        Data = new List<double>(){ 19.187,12.2253,5.5,3,3,2}
+                    },
+                    new ChartJsBarDataset()
+                    {
+                        Label = "# of Likes from blazor",
+                        BackgroundColor = "#36a2eb",
+                        BorderColor = "#36a2eb",
+                        PointHoverRadius = 2,
+                        Data = new List<int>(){ 30,10,15,13,13,12}.Select<int,double>(i=> i).ToList()
+                    }
+                }
+            }
+        };
+    }
+
+    public async Task<bool> UpdateChart()
+    {
+        //Update existing dataset
+        blazorBarChartJS.Data.Labels.Add($"New{DateTime.Now.Second}");
+        var firstDataSet = blazorBarChartJS.Data.Datasets[0];
+        firstDataSet.Data.Add(DateTime.Now.Second);
+        StateHasChanged();
+        //Add new dataset
+        //blazorLineChartJS.Data.Datasets.Add(new ChartJsLineDataset()
+        //{
+        //    BackgroundColor = "#cc65fe",
+        //    BorderColor = "#cc65fe",
+        //    Label = "# of Votes from blazor 1",
+        //    Data = new List<int> {20,21,12,3,4,4},
+        //    Fill = true,
+        //    BorderWidth = 2,
+        //    PointRadius = 3,
+        //    PointBorderWidth = 1
+        //});
+
+        //var done = await barChartJs.UpdateChart(blazorBarChartJS);
+        //StateHasChanged();
+        
+        return true;
+    }
+}
diff --git a/samples/TestApplication/Pages/Index.cshtml b/samples/TestApplication/Pages/Index.cshtml
@@ -17,6 +17,7 @@
 
     protected override void OnInit()
     {
+
         blazorBarChartJS = new ChartJSBarChart()
         {
             ChartType = "bar",
@@ -37,27 +38,29 @@
                         Label = "# of Votes from blazor",
                         BackgroundColor = "#cc65fe",
                         BorderColor = "#cc65fe",
-                        Data = new List<int>(){ 19,12,5,3,3,2}
+                        PointHoverRadius = 2,
+                        Data = new List<double>(){ 19.187,12.2253,5.5,3,3,2}
                     },
                     new ChartJsBarDataset()
                     {
                         Label = "# of Likes from blazor",
                         BackgroundColor = "#36a2eb",
                         BorderColor = "#36a2eb",
-                        Data = new List<int>(){ 30,10,15,13,13,12}
+                        PointHoverRadius = 2,
+                        Data = new List<int>(){ 30,10,15,13,13,12}.Select<int,double>(i=> i).ToList()
                     }
                 }
             }
         };
     }
 
-    public void UpdateChart()
+    public async Task<bool> UpdateChart()
     {
         //Update existing dataset
         blazorBarChartJS.Data.Labels.Add($"New{DateTime.Now.Second}");
         var firstDataSet = blazorBarChartJS.Data.Datasets[0];
         firstDataSet.Data.Add(DateTime.Now.Second);
-
+        //var done = await barChartJs.UpdateChart();
         //Add new dataset
         //blazorLineChartJS.Data.Datasets.Add(new ChartJsLineDataset()
         //{
@@ -71,6 +74,9 @@
         //    PointBorderWidth = 1
         //});
 
-        barChartJs.UpdateChart(blazorBarChartJS);
+        //var done = await barChartJs.UpdateChart(blazorBarChartJS);
+        //StateHasChanged();
+
+        return true;
     }
 }
diff --git a/samples/TestApplication/Pages/LineChart.cshtml b/samples/TestApplication/Pages/LineChart.cshtml
@@ -36,7 +36,7 @@
                             BackgroundColor = "#ff6384",
                             BorderColor = "#ff6384",
                             Label = "# of Votes from blazor",
-                            Data = new List<int>{ 19,12,5,3,3,2},
+                            Data = new List<int>{ 19,12,5,3,3,2}.Select<int,double>(i=> i).ToList(),
                             Fill = false,
                             BorderWidth = 2,
                             PointRadius = 3,
@@ -68,5 +68,6 @@
         //});
 
         lineChartJs.UpdateChart(blazorLineChartJS);
+        StateHasChanged();
     }
 }
diff --git a/samples/TestApplication/Pages/MutipleCharts.cshtml b/samples/TestApplication/Pages/MutipleCharts.cshtml
@@ -0,0 +1,112 @@
+@page "/multiple"
+@using BlazorComponents.Shared
+
+<div class="container">
+    <h2>Chart JS Bar Chart Using Blazor</h2>
+    <div class="row">
+        <button class="btn btn-primary" onclick="@UpdateBarChart">Update Chart </button>
+    </div>
+    <ChartJsBarChart ref="barChartJs" Chart="@blazorBarChartJS" Width="600" Height="300" />
+
+    <h2>Chart JS Line Chart Using Blazor</h2>
+    <div class="row">
+        <button class="btn btn-primary" onclick="@UpdateLineChart">Update Chart </button>
+    </div>
+    <ChartJsLineChart ref="lineChartJs" Chart="@blazorLineChartJS" Width="600" Height="300" />
+</div>
+
+
+@functions {
+
+    public ChartJSBarChart blazorBarChartJS { get; set; } = new ChartJSBarChart();
+    ChartJsBarChart barChartJs;
+    public ChartJSLineChart blazorLineChartJS { get; set; } = new ChartJSLineChart();
+    ChartJsLineChart lineChartJs;
+
+    protected override void OnInit()
+    {
+
+        blazorBarChartJS = new ChartJSBarChart()
+        {
+            ChartType = "bar",
+            CanvasId = "myFirstBarChart",
+            Options = new ChartJsOptions()
+            {
+                Text = "Sample chart from Blazor",
+                BorderWidth = 1,
+                Display = true
+            },
+            Data = new ChartJsBarData()
+            {
+                Labels = new List<string>() { "Red", "Blue", "Yellow", "Green", "Purple", "Orange" },
+                Datasets = new List<ChartJsBarDataset>()
+                        {
+                        new ChartJsBarDataset()
+                        {
+                        Label = "# of Votes from blazor",
+                        BackgroundColor = "#cc65fe",
+                        BorderColor = "#cc65fe",
+                        PointHoverRadius = 2,
+                        Data = new List<double>(){ 19.187,12.2253,5.5,3,3,2}
+                        },
+                        new ChartJsBarDataset()
+                        {
+                        Label = "# of Likes from blazor",
+                        BackgroundColor = "#36a2eb",
+                        BorderColor = "#36a2eb",
+                        PointHoverRadius = 2,
+                        Data = new List<int>(){ 30,10,15,13,13,12}.Select<int,double>(i=> i).ToList()
+                        }
+            }
+            }
+        };
+
+        blazorLineChartJS = new ChartJSLineChart()
+        {
+            ChartType = "line",
+            CanvasId = "myFirstLineChart",
+            Options = new ChartJsOptions()
+            {
+                Text = "Sample chart from Blazor",
+                Display = true,
+                Responsive = false
+            },
+            Data = new ChartJsLineData()
+            {
+                Labels = new List<string>() { "Red", "Blue", "Yellow", "Green", "Purple", "Orange" },
+                Datasets = new List<ChartJsLineDataset>()
+            {
+                new ChartJsLineDataset()
+                {
+                    BackgroundColor = "#ff6384",
+                    BorderColor = "#ff6384",
+                    Label = "# of Votes from blazor",
+                    Data = new List<int>{ 19,12,5,3,3,2}.Select<int,double>(i=> i).ToList(),
+                    Fill = false,
+                    BorderWidth = 2,
+                    PointRadius = 3,
+                    PointBorderWidth=1
+                }
+            }
+            }
+        };
+    }
+
+    public async Task<bool> UpdateBarChart()
+    {
+        //Update existing dataset
+        blazorBarChartJS.Data.Labels.Add($"New{DateTime.Now.Second}");
+        var firstDataSet = blazorBarChartJS.Data.Datasets[0];
+        firstDataSet.Data.Add(DateTime.Now.Second);
+
+        return true;
+    }
+
+    public void UpdateLineChart()
+    {
+        //Update existing dataset
+        blazorLineChartJS.Data.Labels.Add($"New{DateTime.Now.Second}");
+        var firstDataSet = blazorLineChartJS.Data.Datasets[0];
+        firstDataSet.Data.Add(DateTime.Now.Second);
+    }
+}
diff --git a/samples/TestApplication/Pages/RadarChart.cshtml b/samples/TestApplication/Pages/RadarChart.cshtml
@@ -34,7 +34,7 @@
                 {
                     BackgroundColor = "#ff6384",
                     Label = "1st Dataset",
-                    Data = new List<int>{ 19,12,5,3,3,2},
+                    Data = new List<double>{19.195,12.75,5.25,3,3,2},
                     BorderWidth = 2,
                     RadarChartPointStyle = RadarChartPointStyles.star,
                     PointBackgroundColor = "#a4cef0",
@@ -60,7 +60,7 @@
             BackgroundColor = "#cc65fe",
             BorderColor = "#cc65fe",
             Label = "2nd Dataset",
-            Data = new List<int> { 20, 21, 12, 3, 4, 4 },
+            Data = new List<int> { 20, 21, 12, 3, 4, 4 }.Select<int, double>(i => i).ToList(),
             BorderWidth = 2,
             PointRadius = 3,
             PointBorderWidth = 1

diff --git a/samples/TestApplication/Shared/NavMenu.cshtml b/samples/TestApplication/Shared/NavMenu.cshtml
@@ -22,6 +22,11 @@
                 <span class="oi oi-bar-chart" aria-hidden="true"></span> Radar Chart
             </NavLink>
         </li>
+        <li class="nav-item px-3">
+            <NavLink class="nav-link" href="/multiple">
+                <span class="oi oi-bar-chart" aria-hidden="true"></span> Mutiple Chart
+            </NavLink>
+        </li>
     </ul>
 </div>
 

diff --git a/samples/TestApplication/TestApplication.csproj b/samples/TestApplication/TestApplication.csproj
@@ -17,4 +17,10 @@
     <ProjectReference Include="..\..\src\BlazorComponents\BlazorComponents.csproj" />
   </ItemGroup>
 
+  <ItemGroup>
+    <Content Update="Pages\Index - Copy.cshtml">
+      <Pack>$(IncludeRazorContentInPack)</Pack>
+    </Content>
+  </ItemGroup>
+
 </Project>
diff --git a/samples/TestApplication/wwwroot/index.html b/samples/TestApplication/wwwroot/index.html
@@ -17,6 +17,6 @@
     <!--<script type="blazor-boot">
     </script>-->
     <script src="_framework/blazor.webassembly.js"></script>
-    <script src="BlazorComponents.js"></script>
+    <!--<script src="BlazorComponents.js"></script>-->
 </body>
 </html>
diff --git a/src/BlazorComponents/ChartJS/ChartJsBarDataset.cs b/src/BlazorComponents/ChartJS/ChartJsBarDataset.cs
@@ -3,5 +3,6 @@
     public class ChartJsBarDataset : ChartJsDataset
     {
         public int BorderWidth { get; set; } = 1;
+        public int PointHoverRadius { get; set; } = 1;
     }
 }
diff --git a/src/BlazorComponents/ChartJS/ChartJsDataset.cs b/src/BlazorComponents/ChartJS/ChartJsDataset.cs
@@ -12,7 +12,7 @@ public abstract class ChartJsDataset
         /// Actual data. This is an int array.
         /// TO-DO: Explore if it makes any sense to have this as decimal.
         /// </summary>
-        public List<int> Data { get; set; } = new List<int>();
+        public List<double> Data { get; set; } = new List<double>();
         /// <summary>
         /// The fill color under the line. 
         /// AS-IS: We only accept colors as string values. Normal colors and HTML Hex colors are ok to use.

diff --git a/src/BlazorComponents/Shared/ChartJsBarChart.cshtml b/src/BlazorComponents/Shared/ChartJsBarChart.cshtml
@@ -19,9 +19,4 @@
     {
         ChartJSInterop.InitializeBarChart(Chart);
     }
-
-    public void UpdateChart(ChartJSBarChart updatedChart)
-    {
-        ChartJSInterop.UpdateBarChart(updatedChart);
-    }
 }