diff --git a/samples/TestApplication/Pages/Index - Copy.cshtml b/samples/TestApplication/Pages/Index - Copy.cshtml new file mode 100644 index 0000000..a12b070 --- /dev/null +++ b/samples/TestApplication/Pages/Index - Copy.cshtml @@ -0,0 +1,81 @@ +@page "/backup" +@using BlazorComponents.Shared + +
+

Chart JS charts using Blazor

+
+ +
+ +
+ + +@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() { "Red", "Blue", "Yellow", "Green", "Purple", "Orange" }, + Datasets = new List() + { + new ChartJsBarDataset() + { + Label = "# of Votes from blazor", + BackgroundColor = "#cc65fe", + BorderColor = "#cc65fe", + PointHoverRadius = 2, + Data = new List(){ 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(){ 30,10,15,13,13,12}.Select(i=> i).ToList() + } + } + } + }; + } + + public async Task 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 {20,21,12,3,4,4}, + // Fill = true, + // BorderWidth = 2, + // PointRadius = 3, + // PointBorderWidth = 1 + //}); + + //var done = await barChartJs.UpdateChart(blazorBarChartJS); + //StateHasChanged(); + + return true; + } +} \ No newline at end of file diff --git a/samples/TestApplication/Pages/Index.cshtml b/samples/TestApplication/Pages/Index.cshtml index 75fa8c8..9ee0a59 100644 --- 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(){ 19,12,5,3,3,2} + PointHoverRadius = 2, + Data = new List(){ 19.187,12.2253,5.5,3,3,2} }, new ChartJsBarDataset() { Label = "# of Likes from blazor", BackgroundColor = "#36a2eb", BorderColor = "#36a2eb", - Data = new List(){ 30,10,15,13,13,12} + PointHoverRadius = 2, + Data = new List(){ 30,10,15,13,13,12}.Select(i=> i).ToList() } } } }; } - public void UpdateChart() + public async Task 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; } } \ No newline at end of file diff --git a/samples/TestApplication/Pages/LineChart.cshtml b/samples/TestApplication/Pages/LineChart.cshtml index 2c77487..4cc92ee 100644 --- 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{ 19,12,5,3,3,2}, + Data = new List{ 19,12,5,3,3,2}.Select(i=> i).ToList(), Fill = false, BorderWidth = 2, PointRadius = 3, @@ -68,5 +68,6 @@ //}); lineChartJs.UpdateChart(blazorLineChartJS); + StateHasChanged(); } } \ No newline at end of file diff --git a/samples/TestApplication/Pages/MutipleCharts.cshtml b/samples/TestApplication/Pages/MutipleCharts.cshtml new file mode 100644 index 0000000..87ec57e --- /dev/null +++ b/samples/TestApplication/Pages/MutipleCharts.cshtml @@ -0,0 +1,112 @@ +@page "/multiple" +@using BlazorComponents.Shared + +
+

Chart JS Bar Chart Using Blazor

+
+ +
+ + +

Chart JS Line Chart Using Blazor

+
+ +
+ +
+ + +@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() { "Red", "Blue", "Yellow", "Green", "Purple", "Orange" }, + Datasets = new List() + { + new ChartJsBarDataset() + { + Label = "# of Votes from blazor", + BackgroundColor = "#cc65fe", + BorderColor = "#cc65fe", + PointHoverRadius = 2, + Data = new List(){ 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(){ 30,10,15,13,13,12}.Select(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() { "Red", "Blue", "Yellow", "Green", "Purple", "Orange" }, + Datasets = new List() + { + new ChartJsLineDataset() + { + BackgroundColor = "#ff6384", + BorderColor = "#ff6384", + Label = "# of Votes from blazor", + Data = new List{ 19,12,5,3,3,2}.Select(i=> i).ToList(), + Fill = false, + BorderWidth = 2, + PointRadius = 3, + PointBorderWidth=1 + } + } + } + }; + } + + public async Task 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); + } +} \ No newline at end of file diff --git a/samples/TestApplication/Pages/RadarChart.cshtml b/samples/TestApplication/Pages/RadarChart.cshtml index d6c40fc..0a2428e 100644 --- a/samples/TestApplication/Pages/RadarChart.cshtml +++ b/samples/TestApplication/Pages/RadarChart.cshtml @@ -34,7 +34,7 @@ { BackgroundColor = "#ff6384", Label = "1st Dataset", - Data = new List{ 19,12,5,3,3,2}, + Data = new List{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 { 20, 21, 12, 3, 4, 4 }, + Data = new List { 20, 21, 12, 3, 4, 4 }.Select(i => i).ToList(), BorderWidth = 2, PointRadius = 3, PointBorderWidth = 1 diff --git a/samples/TestApplication/Shared/NavMenu.cshtml b/samples/TestApplication/Shared/NavMenu.cshtml index 52bc711..b43f162 100644 --- a/samples/TestApplication/Shared/NavMenu.cshtml +++ b/samples/TestApplication/Shared/NavMenu.cshtml @@ -22,6 +22,11 @@ Radar Chart +
  • + + Mutiple Chart + +
    • diff --git a/samples/TestApplication/TestApplication.csproj b/samples/TestApplication/TestApplication.csproj index 8ec5402..4191af4 100644 --- a/samples/TestApplication/TestApplication.csproj +++ b/samples/TestApplication/TestApplication.csproj @@ -17,4 +17,10 @@ + + + $(IncludeRazorContentInPack) + + + diff --git a/samples/TestApplication/wwwroot/index.html b/samples/TestApplication/wwwroot/index.html index bbee708..b033b98 100644 --- a/samples/TestApplication/wwwroot/index.html +++ b/samples/TestApplication/wwwroot/index.html @@ -17,6 +17,6 @@ - + diff --git a/src/BlazorComponents/ChartJS/ChartJsBarDataset.cs b/src/BlazorComponents/ChartJS/ChartJsBarDataset.cs index 4403f2a..7bc6223 100644 --- 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 index 4b7c1c5..93d2909 100644 --- 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. /// - public List Data { get; set; } = new List(); + public List Data { get; set; } = new List(); /// /// 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 index 6692f01..11218cf 100644 --- 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); - } } diff --git a/src/BlazorComponents/dist/BlazorComponents.js b/src/BlazorComponents/dist/BlazorComponents.js index bf34140..fb99077 100644 --- a/src/BlazorComponents/dist/BlazorComponents.js +++ b/src/BlazorComponents/dist/BlazorComponents.js @@ -1,75 +1,115 @@  -var BlazorCharts = []; - -Blazor.BlazorCharts = BlazorCharts; window.BlazorComponents = window.BlazorComponents || {}; +window.BlazorComponents.BlazorCharts = []; +console.log(window.BlazorComponents.BlazorCharts) window.BlazorComponents.ChartJSInterop = { InitializeBarChart: function (data) { - let thisChart = initializeChartjsChart(data, 'bar'); + + if (window.BlazorComponents.BlazorCharts.length > 0) { + if (!window.BlazorComponents.BlazorCharts.find(currentChart => currentChart.id === data.canvasId)) { + let thisChart = initializeChartjsChart(data, 'bar'); + window.BlazorComponents.BlazorCharts.push({ id: data.canvasId, chart: thisChart }); + } else { - if (!BlazorCharts.find(currentChart => currentChart.id === data.canvasId)) - BlazorCharts.push({ id: data.canvasId, chart: thisChart }); - return true; - }, - InitializeLineChart: function (data) { - let thisChart = initializeChartjsChart(data, 'line'); - if (!BlazorCharts.find(currentChart => currentChart.id === data.canvasId)) - BlazorCharts.push({ id: data.canvasId, chart: thisChart }); + let myChart = window.BlazorComponents.BlazorCharts.find(currentChart => currentChart.id === data.canvasId); - return true; - }, - InitializeRadarChart: function (data) { - let thisChart = initializeChartjsChart(data, 'radar'); + let myChartIndex = window.BlazorComponents.BlazorCharts.findIndex(currentChart => currentChart.id === data.canvasId); - if (!BlazorCharts.find(currentChart => currentChart.id === data.canvasId)) - BlazorCharts.push({ id: data.canvasId, chart: thisChart }); + if (myChartIndex !== -1) { + myChart.chart.destroy(); + window.BlazorComponents.BlazorCharts.splice(myChartIndex, 1); + let thisChart = initializeChartjsChart(data, 'bar'); + window.BlazorComponents.BlazorCharts.push({ id: data.canvasId, chart: thisChart }); + } + } + } + else { + let thisChart = initializeChartjsChart(data, 'bar'); + window.BlazorComponents.BlazorCharts.push({ id: data.canvasId, chart: thisChart }); + } return true; }, - UpdateLineChart: function (data) { - if (!BlazorCharts.find(currentChart => currentChart.id === data.canvasId)) - throw `Could not find a chart with the given id. ${data.canvasId}`; - - let myChart = BlazorCharts.find(currentChart => currentChart.id === data.canvasId); - - let myChartIndex = BlazorCharts.findIndex(currentChart => currentChart.id === data.canvasId); - - myChart.chart = {}; - let newChart = initializeChartjsChart(data, 'line'); - myChart.chart = newChart; + InitializeLineChart: function (data) { + if (window.BlazorComponents.BlazorCharts.length > 0) { + if (!window.BlazorComponents.BlazorCharts.find(currentChart => currentChart.id === data.canvasId)) { + let thisChart = initializeChartjsChart(data, 'line'); + window.BlazorComponents.BlazorCharts.push({ id: data.canvasId, chart: thisChart }); + } else { + + let myChart = window.BlazorComponents.BlazorCharts.find(currentChart => currentChart.id === data.canvasId); + + let myChartIndex = window.BlazorComponents.BlazorCharts.findIndex(currentChart => currentChart.id === data.canvasId); + + if (myChartIndex !== -1) { + myChart.chart.destroy(); + window.BlazorComponents.BlazorCharts.splice(myChartIndex, 1); + let thisChart = initializeChartjsChart(data, 'line'); + window.BlazorComponents.BlazorCharts.push({ id: data.canvasId, chart: thisChart }); + } + } + } + else { + let thisChart = initializeChartjsChart(data, 'line'); + window.BlazorComponents.BlazorCharts.push({ id: data.canvasId, chart: thisChart }); + } return true; }, - UpdateBarChart: function (data) { - if (!BlazorCharts.find(currentChart => currentChart.id === data.canvasId)) - throw `Could not find a chart with the given id. ${data.canvasId}`; - - let myChart = BlazorCharts.find(currentChart => currentChart.id === data.canvasId); - - let myChartIndex = BlazorCharts.findIndex(currentChart => currentChart.id === data.canvasId); - - myChart.chart = {}; - let newChart = initializeChartjsChart(data, 'bar'); - myChart.chart = newChart; + InitializeRadarChart: function (data) { + if (window.BlazorComponents.BlazorCharts.length > 0) { + if (!window.BlazorComponents.BlazorCharts.find(currentChart => currentChart.id === data.canvasId)) { + let thisChart = initializeChartjsChart(data, 'radar'); + window.BlazorComponents.BlazorCharts.push({ id: data.canvasId, chart: thisChart }); + } else { + + let myChart = window.BlazorComponents.BlazorCharts.find(currentChart => currentChart.id === data.canvasId); + + let myChartIndex = window.BlazorComponents.BlazorCharts.findIndex(currentChart => currentChart.id === data.canvasId); + + if (myChartIndex !== -1) { + myChart.chart.destroy(); + window.BlazorComponents.BlazorCharts.splice(myChartIndex, 1); + let thisChart = initializeChartjsChart(data, 'radar'); + window.BlazorComponents.BlazorCharts.push({ id: data.canvasId, chart: thisChart }); + } + } + } + else { + let thisChart = initializeChartjsChart(data, 'radar'); + window.BlazorComponents.BlazorCharts.push({ id: data.canvasId, chart: thisChart }); + } return true; }, - UpdateRadarChart: function (data) { - if (!BlazorCharts.find(currentChart => currentChart.id === data.canvasId)) - throw `Could not find a chart with the given id. ${data.canvasId}`; - - let myChart = BlazorCharts.find(currentChart => currentChart.id === data.canvasId); - - let myChartIndex = BlazorCharts.findIndex(currentChart => currentChart.id === data.canvasId); - - myChart.chart = {}; - let newChart = initializeChartjsChart(data, 'radar'); - myChart.chart = newChart; - - return true; - } + //UpdateLineChart: function (data) { + + // return true; + //}, + //UpdateBarChart: function (data) { + + // if (!window.BlazorComponents.BlazorCharts.find(currentChart => currentChart.id === data.canvasId)) + // throw `Could not find a chart with the given id. ${canvasId}`; + + // let myChart = window.BlazorComponents.BlazorCharts.find(currentChart => currentChart.id === data.canvasId); + + // let myChartIndex = window.BlazorComponents.BlazorCharts.findIndex(currentChart => currentChart.id === data.canvasId); + + // if (myChartIndex !== -1) { + // myChart.chart.destroy(); + // window.BlazorComponents.BlazorCharts.splice(myChartIndex, 1); + // } + + // let thisChart = initializeChartjsChart(data, 'bar'); + // window.BlazorComponents.BlazorCharts.push({ id: data.canvasId, chart: thisChart }); + // return true; + //}, + //UpdateRadarChart: function (data) { + + // return true; + //} };