Skip to content
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

Jump to bottom

Add basic plotly.js support and improve lazy loading #432

Merged
merged 1 commit into from
Jun 17, 2024
Merged

Add basic plotly.js support and improve lazy loading #432

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1 change: 0 additions & 1 deletion Plotly.Blazor.Examples/Components/Scatter3DChart.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="ExportImage">Show Image</MudButton>
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="DownloadImage">Download</MudButton>
</div>
<p>NumPoints: @numPoints</p>

@if (imgSource != null)
{
Expand Down
73 changes: 37 additions & 36 deletions Plotly.Blazor.Examples/Plotly.Blazor.Examples.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,39 @@
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
<PropertyGroup>
<TargetFrameworks>net6.0;net7.0;net8.0</TargetFrameworks>
<ImplicitUsings>enable</ImplicitUsings>
<ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
<GHPages>true</GHPages>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" />
<PackageReference Include="MudBlazor" />
<PackageReference Include="Newtonsoft.Json" />
<PackageReference Include="PublishSPAforGitHubPages.Build" />
</ItemGroup>
<ItemGroup>
<ProjectReference Include="..\Plotly.Blazor\Plotly.Blazor.csproj" />
</ItemGroup>
<ItemGroup>
<ServiceWorker Include="wwwroot\service-worker.js" PublishedContent="wwwroot\service-worker.published.js" />
</ItemGroup>
<ItemGroup>
<Content Update="wwwroot\2011_february_aa_flight_paths.csv">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</Content>
<Content Update="wwwroot\js\highlight.min.js">
<CopyToOutputDirectory>Never</CopyToOutputDirectory>
</Content>
<Content Update="wwwroot\js\interop.js">
<CopyToOutputDirectory>Never</CopyToOutputDirectory>
</Content>
<Content Update="wwwroot\mt_bruno_elevation.csv">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</Content>
</ItemGroup>
<ItemGroup>
<Folder Include="wwwroot\css\highlight\" />
</ItemGroup>
<PropertyGroup>
<TargetFrameworks>net6.0;net7.0;net8.0</TargetFrameworks>
<ImplicitUsings>enable</ImplicitUsings>
<ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
<GHPages>true</GHPages>
<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" />
<PackageReference Include="MudBlazor" />
<PackageReference Include="Newtonsoft.Json" />
<PackageReference Include="PublishSPAforGitHubPages.Build" />
</ItemGroup>
<ItemGroup>
<ProjectReference Include="..\Plotly.Blazor\Plotly.Blazor.csproj" />
</ItemGroup>
<ItemGroup>
<ServiceWorker Include="wwwroot\service-worker.js" PublishedContent="wwwroot\service-worker.published.js" />
</ItemGroup>
<ItemGroup>
<Content Update="wwwroot\2011_february_aa_flight_paths.csv">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</Content>
<Content Update="wwwroot\js\highlight.min.js">
<CopyToOutputDirectory>Never</CopyToOutputDirectory>
</Content>
<Content Update="wwwroot\js\interop.js">
<CopyToOutputDirectory>Never</CopyToOutputDirectory>
</Content>
<Content Update="wwwroot\mt_bruno_elevation.csv">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</Content>
</ItemGroup>
<ItemGroup>
<Folder Include="wwwroot\css\highlight\" />
</ItemGroup>
</Project>
171 changes: 69 additions & 102 deletions Plotly.Blazor.Generator/Plotly.Blazor.Generator.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,104 +1,71 @@
<Project Sdk="Microsoft.NET.Sdk">
<PropertyGroup>
<OutputType>Exe</OutputType>
<TargetFrameworks>net6.0;net7.0;net8.0</TargetFrameworks>
</PropertyGroup>
<ItemGroup>
<Compile Remove="src\ArrayAttribute.cs" />
<Compile Remove="src\DateTimeConverter.cs" />
<Compile Remove="src\EnumConverter.cs" />
<Compile Remove="src\Extensions.cs" />
<Compile Remove="src\ImageFormat.cs" />
<Compile Remove="src\Interop\EventDataPoint.cs" />
<Compile Remove="src\Interop\RelayoutEventData.cs" />
<Compile Remove="src\PlotlyChart.razor.cs" />
<Compile Remove="src\PlotlyConverter.cs" />
<Compile Remove="src\PlotlyJsInterop.cs" />
<Compile Remove="src\PolymorphicConverter.cs" />
<Compile Remove="src\SubplotAttribute.cs" />
</ItemGroup>
<ItemGroup>
<None Remove="English %28American%29.aff" />
<None Remove="English %28American%29.dic" />
</ItemGroup>
<ItemGroup>
<PackageReference Include="Stubble.Core" />
<PackageReference Include="WeCantSpell.Hunspell" />
</ItemGroup>
<ItemGroup>
<None Update="CustomDic.txt">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</None>
<None Update="src\PlotlyChart.razor">
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</None>
<None Update="src\wwwroot\plotly-interop-2.33.0.js">
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</None>
<None Update="src\_Imports.razor">
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</None>
<None Update="Templates\Class\Class.txt">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</None>
<None Update="Templates\Flag\Flag.txt">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</None>
<None Update="Templates\Enumerated\Enumerated.txt">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</None>
<None Update="Templates\Interface\Interface.txt">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</None>
</ItemGroup>
<ItemGroup>
<Content Include="English %28American%29.aff">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</Content>
<Content Include="English %28American%29.dic">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</Content>
</ItemGroup>
<ItemGroup>
<None Include="src\ArrayAttribute.cs">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</None>
<None Include="src\DateTimeConverter.cs">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</None>
<None Include="src\EnumConverter.cs">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</None>
<None Include="src\Extensions.cs">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</None>
<None Include="src\ImageFormat.cs">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</None>
<None Include="src\Interop\EventDataPoint.cs">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</None>
<None Include="src\Interop\RelayoutEventData.cs">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</None>
<None Include="src\PlotlyChart.razor.cs">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</None>
<None Include="src\PlotlyConverter.cs">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</None>
<None Include="src\PlotlyJsInterop.cs">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</None>
<None Include="src\PolymorphicConverter.cs">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</None>
<None Include="src\SubplotAttribute.cs">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</None>
</ItemGroup>
<PropertyGroup>
<OutputType>Exe</OutputType>
<TargetFrameworks>net6.0;net7.0;net8.0</TargetFrameworks>
</PropertyGroup>
<ItemGroup>
<Compile Remove="src\ArrayAttribute.cs" />
<Compile Remove="src\DateTimeConverter.cs" />
<Compile Remove="src\EnumConverter.cs" />
<Compile Remove="src\Extensions.cs" />
<Compile Remove="src\ImageFormat.cs" />
<Compile Remove="src\Interop\EventDataPoint.cs" />
<Compile Remove="src\Interop\RelayoutEventData.cs" />
<Compile Remove="src\PlotlyChart.razor.cs" />
<Compile Remove="src\PlotlyConverter.cs" />
<Compile Remove="src\PlotlyJsInterop.cs" />
<Compile Remove="src\PolymorphicConverter.cs" />
<Compile Remove="src\SubplotAttribute.cs" />
</ItemGroup>
<ItemGroup>
<None Remove="English %28American%29.aff" />
<None Remove="English %28American%29.dic" />
</ItemGroup>
<ItemGroup>
<PackageReference Include="Stubble.Core" />
<PackageReference Include="WeCantSpell.Hunspell" />
</ItemGroup>
<ItemGroup>
<None Update="CustomDic.txt">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</None>
<None Update="src\PlotlyChart.razor">
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</None>
<None Update="src\wwwroot\plotly-interop-2.33.0.js">
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</None>
<None Update="src\_Imports.razor">
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</None>
<None Update="Templates\Class\Class.txt">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</None>
<None Update="Templates\Flag\Flag.txt">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</None>
<None Update="Templates\Enumerated\Enumerated.txt">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</None>
<None Update="Templates\Interface\Interface.txt">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</None>
</ItemGroup>
<ItemGroup>
<Content Include="English %28American%29.aff">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</Content>
<Content Include="English %28American%29.dic">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</Content>
</ItemGroup>
<ItemGroup>
<None Include="src\**\*.*">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</None>
</ItemGroup>
</Project>
8 changes: 7 additions & 1 deletion Plotly.Blazor.Generator/src/PlotlyChart.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,12 @@ public partial class PlotlyChart
[Parameter]
public string Id { get; set; }

/// <summary>
/// Set to true, when the basic minified version of plotly.js should be used.
/// </summary>
[Parameter]
public bool UseBasicVersion { get; set; }

/// <summary>
/// Data of the charts.
/// </summary>
Expand Down Expand Up @@ -98,7 +104,7 @@ public partial class PlotlyChart
/// <inheritdoc />
protected override void OnInitialized()
{
Interop = new PlotlyJsInterop(JsRuntime, this);
Interop = new PlotlyJsInterop(JsRuntime, this, UseBasicVersion);
base.OnInitialized();
}

Expand Down
26 changes: 20 additions & 6 deletions Plotly.Blazor.Generator/src/PlotlyJsInterop.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@ namespace Plotly.Blazor;
public class PlotlyJsInterop
{
private const string InteropPath = "./_content/Plotly.Blazor/plotly-interop-2.33.0.js";
private const string PlotlyPath = "./_content/Plotly.Blazor/plotly-2.33.0.min.js";
private const string PlotlyBasicPath = "./_content/Plotly.Blazor/plotly-basic-1.58.5.min.js";

private readonly DotNetObjectReference<PlotlyChart> dotNetObj;
private readonly Lazy<Task<IJSObjectReference>> moduleTask;

Expand All @@ -23,11 +26,20 @@ public class PlotlyJsInterop
/// </summary>
/// <param name="jsRuntime"></param>
/// <param name="chart"></param>
public PlotlyJsInterop(IJSRuntime jsRuntime, PlotlyChart chart)
/// <param name="useBasicVersion"></param>
public PlotlyJsInterop(IJSRuntime jsRuntime, PlotlyChart chart, bool useBasicVersion)
{
dotNetObj = DotNetObjectReference.Create(chart);
moduleTask = new Lazy<Task<IJSObjectReference>>(
() => jsRuntime.InvokeAsync<IJSObjectReference>("import", InteropPath).AsTask());
moduleTask = new(LoadModulesAsync(jsRuntime, useBasicVersion));
}

private static async Task<IJSObjectReference> LoadModulesAsync(IJSRuntime jsRuntime, bool useBasicVersion)
{
var jsObject = await jsRuntime.InvokeAsync<IJSObjectReference>("import", InteropPath);

await jsObject.InvokeVoidAsync("importScript", "plotly-import", useBasicVersion ? PlotlyBasicPath : PlotlyPath);

return jsObject;
}

internal static readonly JsonSerializerOptions SerializerOptions = new()
Expand Down Expand Up @@ -105,13 +117,14 @@ await jsRuntime.InvokeVoidAsync("extendTraces",
dotNetObj.Value.Id,
x, y, indices, max);
}


/// <summary>
/// Can be used to add data to an existing trace.
/// </summary>
/// <param name="x">X-Values.</param>
/// <param name="y">Y-Values</param>
/// <param name="z"></param>
/// <param name="indices">Indices.</param>
/// <param name="max">Max Points.</param>
/// <param name="cancellationToken">CancellationToken</param>
Expand Down Expand Up @@ -160,12 +173,13 @@ await jsRuntime.InvokeVoidAsync("prependTraces",
dotNetObj.Value.Id,
x, y, indices, max);
}

/// <summary>
/// Can be used to prepend data to an existing 3D trace.
/// </summary>
/// <param name="x">X-Values.</param>
/// <param name="y">Y-Values</param>
/// <param name="z"></param>
/// <param name="indices">Indices.</param>
/// <param name="max">Max Points.</param>
/// <param name="cancellationToken">CancellationToken</param>
Expand Down
21 changes: 21 additions & 0 deletions Plotly.Blazor.Generator/src/wwwroot/plotly-basic-1.58.5.min.js
View file
Open in desktop

Large diffs are not rendered by default.

Loading