From f54e32a4150778b0da625d7b6e8a15e6e9cf1446 Mon Sep 17 00:00:00 2001 From: Paul Grimstrup Date: Fri, 28 May 2021 10:43:31 +1200 Subject: [PATCH 1/4] Removed CancasId from ConfigBase, added ChartId to Chart --- src/ChartJs.Blazor/Chart.razor | 2 +- src/ChartJs.Blazor/Chart.razor.cs | 6 ++++++ src/ChartJs.Blazor/Common/ConfigBase.cs | 6 ------ 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/ChartJs.Blazor/Chart.razor b/src/ChartJs.Blazor/Chart.razor index ac20d2f..525a5fa 100644 --- a/src/ChartJs.Blazor/Chart.razor +++ b/src/ChartJs.Blazor/Chart.razor @@ -1 +1 @@ - + diff --git a/src/ChartJs.Blazor/Chart.razor.cs b/src/ChartJs.Blazor/Chart.razor.cs index d499190..748d495 100644 --- a/src/ChartJs.Blazor/Chart.razor.cs +++ b/src/ChartJs.Blazor/Chart.razor.cs @@ -44,6 +44,12 @@ public partial class Chart [Parameter] public int? Height { get; set; } + /// + /// Gets the id for the html canvas element associated with this chart. + /// This property is initialized to a random GUID-string upon creation. + /// + public string ChartId { get; } = $"ChartJS_{Guid.NewGuid()}"; + /// protected override async Task OnAfterRenderAsync(bool firstRender) { diff --git a/src/ChartJs.Blazor/Common/ConfigBase.cs b/src/ChartJs.Blazor/Common/ConfigBase.cs index 7e3725a..a7dc3fa 100644 --- a/src/ChartJs.Blazor/Common/ConfigBase.cs +++ b/src/ChartJs.Blazor/Common/ConfigBase.cs @@ -24,12 +24,6 @@ protected ConfigBase(ChartType chartType) /// public ChartType Type { get; } - /// - /// Gets the id for the html canvas element associated with this chart. - /// This property is initialized to a random GUID-string upon creation. - /// - public string CanvasId { get; } = Guid.NewGuid().ToString(); - /// /// Gets the list of inline plugins for this chart. Consider /// registering global plugins (through JavaScript) or assigning the From 2040799c64923f597e6b093c6932033c801652ec Mon Sep 17 00:00:00 2001 From: Paul Grimstrup Date: Fri, 28 May 2021 12:37:18 +1200 Subject: [PATCH 2/4] Restored CanvasId in ConfigBase. --- .../Client/Pages/Workarounds/Gradient.razor | 5 +++-- src/ChartJs.Blazor/Chart.razor.cs | 16 ++++++++++++++-- src/ChartJs.Blazor/Common/ConfigBase.cs | 6 ++++++ 3 files changed, 23 insertions(+), 4 deletions(-) diff --git a/ChartJs.Blazor.Samples/Client/Pages/Workarounds/Gradient.razor b/ChartJs.Blazor.Samples/Client/Pages/Workarounds/Gradient.razor index 30b9cdb..ce5f676 100644 --- a/ChartJs.Blazor.Samples/Client/Pages/Workarounds/Gradient.razor +++ b/ChartJs.Blazor.Samples/Client/Pages/Workarounds/Gradient.razor @@ -3,12 +3,13 @@ @layout SampleLayout @inject IJSRuntime jsRuntime - + @code { private const int InitalCount = 7; private LineConfig _config; private Random _rng = new Random(); + private Chart _chart; protected override void OnInitialized() { @@ -61,5 +62,5 @@ } private async Task SetupCompletedCallback() => - await jsRuntime.InvokeVoidAsync("workaroundGradient", _config.CanvasId); + await jsRuntime.InvokeVoidAsync("workaroundGradient", _chart.ChartId); } diff --git a/src/ChartJs.Blazor/Chart.razor.cs b/src/ChartJs.Blazor/Chart.razor.cs index 748d495..4fc032d 100644 --- a/src/ChartJs.Blazor/Chart.razor.cs +++ b/src/ChartJs.Blazor/Chart.razor.cs @@ -12,6 +12,8 @@ namespace ChartJs.Blazor /// public partial class Chart { + private ConfigBase _config; + /// /// This event is fired when the chart has been setup through interop and /// the JavaScript chart object is available. Use this callback if you need to setup @@ -30,7 +32,17 @@ public partial class Chart /// Gets or sets the configuration of the chart. /// [Parameter] - public ConfigBase Config { get; set; } + public ConfigBase Config + { + get => _config; + set + { + // Need to synchronize the Config.CanvasId with Chart.ChartId + if (_config != null) _config.CanvasId = null; + _config = value; + if (_config != null) _config.CanvasId = ChartId; + } + } /// /// Gets or sets the width of the canvas HTML element. @@ -48,7 +60,7 @@ public partial class Chart /// Gets the id for the html canvas element associated with this chart. /// This property is initialized to a random GUID-string upon creation. /// - public string ChartId { get; } = $"ChartJS_{Guid.NewGuid()}"; + public string ChartId { get; } = Guid.NewGuid().ToString(); /// protected override async Task OnAfterRenderAsync(bool firstRender) diff --git a/src/ChartJs.Blazor/Common/ConfigBase.cs b/src/ChartJs.Blazor/Common/ConfigBase.cs index a7dc3fa..38062df 100644 --- a/src/ChartJs.Blazor/Common/ConfigBase.cs +++ b/src/ChartJs.Blazor/Common/ConfigBase.cs @@ -19,6 +19,12 @@ protected ConfigBase(ChartType chartType) Type = chartType; } + /// + /// Gets or sets the id for the html canvas element associated with this chart. + /// This property must be set to the ChartId of the chart. + /// + public string CanvasId { get; internal set; } + /// /// Gets the type of chart this config is for. /// From f39a58a9a7a668bf94940246ef09874381b71394 Mon Sep 17 00:00:00 2001 From: PaulG Date: Sat, 29 May 2021 12:57:34 +1200 Subject: [PATCH 3/4] Added Hidden property to DataSet. Added sample to VBarChart. --- .../Client/Pages/Charts/Bar/Vertical.razor | 10 +++++++--- src/ChartJs.Blazor/Common/Dataset.cs | 6 ++++++ .../Interop/TypeScript/ChartJsInterop.ts | 1 + 3 files changed, 14 insertions(+), 3 deletions(-) diff --git a/ChartJs.Blazor.Samples/Client/Pages/Charts/Bar/Vertical.razor b/ChartJs.Blazor.Samples/Client/Pages/Charts/Bar/Vertical.razor index 418bdea..98618c1 100644 --- a/ChartJs.Blazor.Samples/Client/Pages/Charts/Bar/Vertical.razor +++ b/ChartJs.Blazor.Samples/Client/Pages/Charts/Bar/Vertical.razor @@ -6,7 +6,8 @@ - + + @@ -79,7 +80,7 @@ _chart.Update(); } - private void AddDataset() + private void AddDataset(bool? hidden = null) { Color color = ChartColors.All[_config.Data.Datasets.Count % ChartColors.All.Count]; IDataset dataset = new BarDataset(RandomScalingFactor(_config.Data.Labels.Count)) @@ -87,13 +88,16 @@ Label = $"Dataset {_config.Data.Datasets.Count}", BackgroundColor = ColorUtil.FromDrawingColor(Color.FromArgb(128, color)), BorderColor = ColorUtil.FromDrawingColor(color), - BorderWidth = 1 + BorderWidth = 1, + Hidden = hidden }; + _config.Data.Datasets.Add(dataset); _chart.Update(); } + private void RemoveDataset() { IList datasets = _config.Data.Datasets; diff --git a/src/ChartJs.Blazor/Common/Dataset.cs b/src/ChartJs.Blazor/Common/Dataset.cs index b119a38..2864a0b 100644 --- a/src/ChartJs.Blazor/Common/Dataset.cs +++ b/src/ChartJs.Blazor/Common/Dataset.cs @@ -45,6 +45,12 @@ protected Dataset(ChartType type, string id = null) : base(new List()) Type = type; } + /// + /// Sets the dataset to be hidden when rendered. The label will still show in the Legend so + /// that the user can click on it and show the data. + /// + public bool? Hidden { get; set; } + /// /// Adds the elements of the specified collection to the end of the . /// diff --git a/src/ChartJs.Blazor/Interop/TypeScript/ChartJsInterop.ts b/src/ChartJs.Blazor/Interop/TypeScript/ChartJsInterop.ts index 54324b2..dd71c86 100644 --- a/src/ChartJs.Blazor/Interop/TypeScript/ChartJsInterop.ts +++ b/src/ChartJs.Blazor/Interop/TypeScript/ChartJsInterop.ts @@ -26,6 +26,7 @@ class ChartJsInterop { BlazorCharts = new Map(); public setupChart(config: ChartConfiguration): boolean { + console.debug("ChartJS.Blazor.ChartJSInterop", config); if (!this.BlazorCharts.has(config.canvasId)) { this.wireUpCallbacks(config); From 773cd5499f7c0dd4890f8d9fddbc5ea7c58b1321 Mon Sep 17 00:00:00 2001 From: PaulG Date: Sat, 29 May 2021 14:31:07 +1200 Subject: [PATCH 4/4] Added a Debug flag to the ConfigBase for use in Javascript --- src/ChartJs.Blazor/Common/ConfigBase.cs | 10 ++++++++++ .../Interop/TypeScript/ChartJsInterop.ts | 5 ++++- 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/src/ChartJs.Blazor/Common/ConfigBase.cs b/src/ChartJs.Blazor/Common/ConfigBase.cs index 38062df..dff2ec0 100644 --- a/src/ChartJs.Blazor/Common/ConfigBase.cs +++ b/src/ChartJs.Blazor/Common/ConfigBase.cs @@ -25,6 +25,16 @@ protected ConfigBase(ChartType chartType) /// public string CanvasId { get; internal set; } + /// + /// Gets a value indicating whether debug messages should be written to the console + /// in the Javascript code. + /// +#if DEBUG + public bool Debug => System.Diagnostics.Debugger.IsAttached; +#else + public bool Debug => false; +#endif + /// /// Gets the type of chart this config is for. /// diff --git a/src/ChartJs.Blazor/Interop/TypeScript/ChartJsInterop.ts b/src/ChartJs.Blazor/Interop/TypeScript/ChartJsInterop.ts index dd71c86..0869829 100644 --- a/src/ChartJs.Blazor/Interop/TypeScript/ChartJsInterop.ts +++ b/src/ChartJs.Blazor/Interop/TypeScript/ChartJsInterop.ts @@ -1,6 +1,7 @@ /// interface ChartConfiguration extends Chart.ChartConfiguration { + debug: boolean; canvasId: string; } @@ -26,7 +27,9 @@ class ChartJsInterop { BlazorCharts = new Map(); public setupChart(config: ChartConfiguration): boolean { - console.debug("ChartJS.Blazor.ChartJSInterop", config); + if(config.debug) + console.debug("ChartJS.Blazor.ChartJSInterop", config); + if (!this.BlazorCharts.has(config.canvasId)) { this.wireUpCallbacks(config);