Skip to content

Robust js interop #70

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Joelius300 merged 33 commits into from
May 22, 2020
Merged

Robust js interop #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
7fa3ca1
CamelCase -> PascalCase, add/improve summaries
Joelius300 Jan 3, 2020
fa43d02
Update another sample, update xml-docs
Joelius300 Jan 3, 2020
99eeda4
First attempt at unifying the handler stuff
Joelius300 Dec 28, 2019
e3e8fcf
Implement c# -> javascript interop using new system
Joelius300 Dec 29, 2019
4b7f192
Update samples, finish no-returns, start with return support for c#
Joelius300 Dec 29, 2019
c36e254
Add js-fiddle link
Joelius300 Dec 29, 2019
c188768
Fix deserializing in js->c# part, comments & debugging
Joelius300 Dec 30, 2019
5266ea2
Improve handling of ExpandoObjects in StripNull, better comments
Joelius300 Dec 30, 2019
b3c993e
Add clarification in comment and SO link
Joelius300 Dec 31, 2019
e7e876c
Support return value for client-side, server-side fallback to default
Joelius300 Jan 1, 2020
58870b6
Add ticks-callback (#62)
Joelius300 Jan 1, 2020
f885d0c
Finish axis-ticks callback, integrate in samples
Joelius300 Jan 4, 2020
b4883b7
Add StringEnumReader which converts strings to StringEnums
Joelius300 Jan 4, 2020
2cdddfe
Use typed LegendItem instead of just JsonElement for LegendItemMouseE…
Joelius300 Jan 4, 2020
8a63ddf
Small improvements (remove unnecessary checks, static caching, less e…
Joelius300 Feb 4, 2020
00d70b6
Add ObsoleteAttribute to non-generic IMethodHandler
Joelius300 Feb 28, 2020
333d921
Use json.net for deserializing StringEnum
Joelius300 Feb 28, 2020
9e8606e
Merge master (with String/Object-Enum deserialization) into robust-js…
Joelius300 Mar 21, 2020
ce0511e
Make ChartJsInterop internal
Joelius300 Mar 29, 2020
ef9b921
Make ExpandoObjectExtensions internal
Joelius300 Mar 29, 2020
f3253b2
Add BrowserEvent as StringEnum
Joelius300 Mar 29, 2020
529dddd
Remove ArgValidation-helper
Joelius300 Mar 29, 2020
93e5584
Add DatasetIndex to LegendItem, clarify/improve summaries
Joelius300 Mar 29, 2020
8762c89
Move interop classes to ChartJs.Blazor.Interop
Joelius300 Apr 3, 2020
46992e7
Stringify before the interop-call
Joelius300 Apr 7, 2020
8347cc0
Unify JsonSerializerSettings (one static instance)
Joelius300 Apr 7, 2020
2a559c5
Add attribute to ignore callback value
Joelius300 Apr 8, 2020
943f783
Don't stringify parameters when ignored
Joelius300 Apr 9, 2020
fb82af2
Rename Javascript -> JavaScript, improve summaries
Joelius300 Apr 9, 2020
e41f7b7
Rework JavaScript part of the interop
Joelius300 May 21, 2020
9866195
Update chart.js types, remove comments from output, refactoring
Joelius300 May 22, 2020
f30bd11
Fix versions, Remove garbage
Joelius300 May 22, 2020
08b4f28
Replace data-array-reference instead of updating it
Joelius300 May 22, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions global.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"sdk": {
"version": "3.1.100",
"rollForward": "latestFeature",
"allowPrerelease": false
}
}
3 changes: 3 additions & 0 deletions ...les/ClientSide/ChartJs.Blazor.Sample.ClientSide/Pages/Callbacks/LegendCallbacksPage.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@page "/LegendCallbacks"

<LegendCallbacksComponent />
3 changes: 3 additions & 0 deletions samples/ClientSide/ChartJs.Blazor.Sample.ClientSide/Pages/Callbacks/OnClickHandlerPage.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@page "/OnClickHandler"

<ClickAndHoverHandlerComponent />
3 changes: 0 additions & 3 deletions samples/ClientSide/ChartJs.Blazor.Sample.ClientSide/Pages/Handlers/OnClickHandlerPage.razor
View file
Open in desktop

This file was deleted.

29 changes: 18 additions & 11 deletions samples/ClientSide/ChartJs.Blazor.Sample.ClientSide/Pages/Test.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,13 @@
@using ChartJs.Blazor.Util
@using ChartJs.Blazor.ChartJS.BarChart
@using ChartJs.Blazor.ChartJS.BarChart.Axes
@using ChartJs.Blazor.ChartJS.Common
@using ChartJs.Blazor.ChartJS.Common.Axes
@using ChartJs.Blazor.ChartJS.Common.Wrappers
@using ChartJs.Blazor.ChartJS.Common.Axes.Ticks
@using ChartJs.Blazor.ChartJS.Common.Handlers.OnClickHandler
@using Newtonsoft.Json
@using ChartJs.Blazor.ChartJS.Common.Handlers
@using ChartJs.Blazor.Interop
@using Newtonsoft.Json.Linq;

<ChartJsBarChart @ref="barChartJs" Config="@_config" Height="250"/>

Expand Down Expand Up @@ -56,7 +58,11 @@
}
}
},
OnClick = new DotNetInstanceClickHandler(OnClickHandler),
OnClick = new DelegateHandler<ChartMouseEvent>((e, elems) => Console.WriteLine(e.ToString())),
Legend = new Legend
{
OnClick = new DelegateHandler<LegendItemMouseEvent>(StaticInterop.TestInterop)
},
MaintainAspectRatio = false,
Responsive = true
}
Expand All @@ -79,18 +85,19 @@
_config.Data.Datasets.Add(_barDataSet);
}

[JSInvokable]
public void OnClickHandler(object sender, object args)
{
EventArgs += JsonConvert.SerializeObject(JsonConvert.DeserializeObject($"{Environment.NewLine}{args}"), Formatting.Indented);
Rows = Math.Max(3, EventArgs.Split(new[] {Environment.NewLine}, StringSplitOptions.None).Length + 1);
StateHasChanged();
}

private void OnClear()
{
EventArgs = string.Empty;
StateHasChanged();
}

private static class StaticInterop
{
private static int s_eventCount = 0;

public static void TestInterop(JObject @event, LegendItem args)
{
Console.WriteLine($"{System.Threading.Interlocked.Increment(ref s_eventCount)}. event");
}
}
}
205 changes: 105 additions & 100 deletions samples/ClientSide/ChartJs.Blazor.Sample.ClientSide/Shared/NavMenu.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,108 +1,113 @@
<div class="top-row pl-4 navbar navbar-dark">
<a class="navbar-brand" href="">ChartJs.Blazor Samples</a>
<button class="navbar-toggler" @onclick="ToggleNavMenu">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<span class="navbar-toggler-icon"></span>
</button>
</div>

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
<ul class="nav flex-column">
<li class="nav-item px-3">
<NavLink class="nav-link" href="welcome">
<span class="oi oi-home" aria-hidden="true"></span>Welcome
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="SimpleBarChart">
<span class="oi oi-bar-chart" aria-hidden="true"></span>Simple BarChart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="HorizontalBarChart">
<span class="oi oi-bar-chart" aria-hidden="true"></span>Horizontal BarChart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="StackedBarChart">
<span class="oi oi-bar-chart" aria-hidden="true"></span>Stacked BarChart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="TimeBarChart">
<span class="oi oi-bar-chart" aria-hidden="true"></span>Time BarChart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="LinearLineChart">
<span class="oi oi-graph" aria-hidden="true"></span>Linear LineChart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="LogarithmicLineChart">
<span class="oi oi-graph" aria-hidden="true"></span>Logarithmic LineChart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="TimeLineChart">
<span class="oi oi-graph" aria-hidden="true"></span>Time LineChart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="DoughnutChart">
<span class="oi oi-graph" aria-hidden="true"></span>DoughChart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="PieChart">
<span class="oi oi-pie-chart" aria-hidden="true"></span>PieChart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="PolarAreaChart">
<span class="oi oi-graph" aria-hidden="true"></span>PolarAreaChart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="BubbleChart">
<span class="oi oi-graph" aria-hidden="true"></span>Bubble Chart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="ScatterChart">
<span class="oi oi-graph" aria-hidden="true"></span>Scatter Chart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="RadarChart">
<span class="oi oi-graph" aria-hidden="true"></span>Radar Chart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="OnClickHandler">
<span class="oi oi-info" aria-hidden="true"></span>OnClickHandler
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="SineLineChart">
<span class="oi oi-info" aria-hidden="true"></span>Sine Line Chart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="about">
<span class="oi oi-info" aria-hidden="true"></span>About
</NavLink>
</li>
</ul>
</div>
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
<ul class="nav flex-column">
<li class="nav-item px-3">
<NavLink class="nav-link" href="welcome">
<span class="oi oi-home" aria-hidden="true"></span>Welcome
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="SimpleBarChart">
<span class="oi oi-bar-chart" aria-hidden="true"></span>Simple BarChart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="HorizontalBarChart">
<span class="oi oi-bar-chart" aria-hidden="true"></span>Horizontal BarChart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="StackedBarChart">
<span class="oi oi-bar-chart" aria-hidden="true"></span>Stacked BarChart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="TimeBarChart">
<span class="oi oi-bar-chart" aria-hidden="true"></span>Time BarChart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="LinearLineChart">
<span class="oi oi-graph" aria-hidden="true"></span>Linear LineChart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="LogarithmicLineChart">
<span class="oi oi-graph" aria-hidden="true"></span>Logarithmic LineChart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="TimeLineChart">
<span class="oi oi-graph" aria-hidden="true"></span>Time LineChart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="DoughnutChart">
<span class="oi oi-graph" aria-hidden="true"></span>DoughChart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="PieChart">
<span class="oi oi-pie-chart" aria-hidden="true"></span>PieChart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="PolarAreaChart">
<span class="oi oi-graph" aria-hidden="true"></span>PolarAreaChart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="BubbleChart">
<span class="oi oi-graph" aria-hidden="true"></span>Bubble Chart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="ScatterChart">
<span class="oi oi-graph" aria-hidden="true"></span>Scatter Chart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="RadarChart">
<span class="oi oi-graph" aria-hidden="true"></span>Radar Chart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="OnClickHandler">
<span class="oi oi-info" aria-hidden="true"></span>Click and Hover handler
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="LegendCallbacks">
<span class="oi oi-info" aria-hidden="true"></span>Legend callbacks
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="SineLineChart">
<span class="oi oi-info" aria-hidden="true"></span>Sine Line Chart
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="about">
<span class="oi oi-info" aria-hidden="true"></span>About
</NavLink>
</li>
</ul>
</div>

@code {
private bool collapseNavMenu = true;
@code {
private bool collapseNavMenu = true;

private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;

private void ToggleNavMenu()
{
collapseNavMenu = !collapseNavMenu;
}
private void ToggleNavMenu()
{
collapseNavMenu = !collapseNavMenu;
}

}
}
2 changes: 1 addition & 1 deletion samples/ClientSide/ChartJs.Blazor.Sample.ClientSide/_Imports.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
@using ChartJs.Blazor.Sample.Shared.Components;
@using ChartJs.Blazor.Sample.Shared.Components.BarCharts;
@using ChartJs.Blazor.Sample.Shared.Components.LineChart;
@using ChartJs.Blazor.Sample.Shared.Components.Handlers;
@using ChartJs.Blazor.Sample.Shared.Components.Callbacks;
@using ChartJs.Blazor.Sample.Shared.Components.Fun;
@using ChartJs.Blazor;
@using ChartJs.Blazor.Sample;
24 changes: 18 additions & 6 deletions samples/ClientSide/ChartJs.Blazor.Sample.ClientSide/wwwroot/SampleInterop.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,21 @@
window.SampleInterop = {

OnHover: function (sender, args) {
if (args && args.length > 0) {
sender.srcElement.style.opacity = "0.5";
PrintEventAndArgs: function (event, args) {
console.log("event: ");
console.log(event);
console.log("args: ");
console.log(args)
},

CreateLabels: chart => {
let labels = Chart.defaults.pie.legend.labels.generateLabels(chart);
for (var i = 0; i < labels.length; i++) {
labels[i].lineWidth *= 2;
labels[i].text += ' [from callback]';
labels[i].lineCap = 'butt';
}
}
}
;

return labels;
},
MsTicksCallback: (value, index, values) => value + " ms"
}
31 changes: 15 additions & 16 deletions samples/ClientSide/ChartJs.Blazor.Sample.ClientSide/wwwroot/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,28 +9,27 @@
<link href="css/site.css" rel="stylesheet"/>
</head>
<body>
<app>Loading...</app>
<app>Loading...</app>

<script src="_framework/blazor.webassembly.js"></script>
<script src="_framework/blazor.webassembly.js"></script>

<!-- Here I'm referencing the static resources from the library -->
<!-- In case you need another version of any of the included javascript files, you can adjust the script tags to include the version you need, e.g. from a CDN or your wwwroot directory. -->
<!-- Since ChartJs is dependent on moment.js, it is important to first include the reference to moment.js and then to ChartJs -->
<!-- Here I'm referencing the static resources from the library -->
<!-- In case you need another version of any of the included javascript files, you can adjust the script tags to include the version you need, e.g. from a CDN or your wwwroot directory. -->
<!-- Since ChartJs is dependent on moment.js, it is important to first include the reference to moment.js and then to ChartJs -->
<!-- Reference the included moment.js javascript file. -->
<script src="_content/ChartJs.Blazor/moment-with-locales.min.js" type="text/javascript" language="javascript"></script>

<!-- Reference the included moment.js javascript file. -->
<script src="_content/ChartJs.Blazor/moment-with-locales.min.js" type="text/javascript" language="javascript"></script>
<!-- Reference the included ChartJs javascript file. -->
<script src="_content/ChartJs.Blazor/Chart.min.js" type="text/javascript" language="javascript"></script>

<!-- Reference the included ChartJs javascript file. -->
<script src="_content/ChartJs.Blazor/Chart.min.js" type="text/javascript" language="javascript"></script>
<!-- This is the glue between the C# code and the ChartJs charts -->
<script src="_content/ChartJs.Blazor/ChartJsBlazorInterop.js" type="text/javascript" language="javascript"></script>

<!-- This is the glue between the C# code and the ChartJs charts -->
<script src="_content/ChartJs.Blazor/ChartJsBlazorInterop.js" type="text/javascript" language="javascript"></script>
<!-- Some styling -->
<link rel="stylesheet" href="_content/ChartJs.Blazor/ChartJSBlazor.css" />

<!-- Some styling -->
<link rel="stylesheet" href="_content/ChartJs.Blazor/ChartJSBlazor.css"/>

<!-- OPTIONAL: some local interop -->
<script src="SampleInterop.js" type="text/javascript" language="JavaScript"></script>
<!-- OPTIONAL: some local interop -->
<script src="SampleInterop.js" type="text/javascript" language="JavaScript"></script>

</body>
</html>
1 change: 0 additions & 1 deletion samples/ServerSide/ChartJs.Blazor.Sample.ServerSide/ChartJs.Blazor.Sample.ServerSide.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@

<ItemGroup>
<PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="3.1.0" />
<PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="3.1.0" />
</ItemGroup>

<ItemGroup>
Expand Down
3 changes: 3 additions & 0 deletions ...les/ServerSide/ChartJs.Blazor.Sample.ServerSide/Pages/Callbacks/LegendCallbacksPage.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@page "/LegendCallbacks"

<LegendCallbacksComponent />
3 changes: 3 additions & 0 deletions samples/ServerSide/ChartJs.Blazor.Sample.ServerSide/Pages/Callbacks/OnClickHandlerPage.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@page "/OnClickHandler"

<ClickAndHoverHandlerComponent/>
Loading