apexcharts / Blazor-ApexCharts

A blazor wrapper for ApexCharts.js
https://apexcharts.github.io/Blazor-ApexCharts
MIT License
788 stars 91 forks source link

custom url for loading the js/css assets #361

Closed HrvojeJuric closed 4 months ago

HrvojeJuric commented 9 months ago

please allow us to provide a custom url for loading js/css assets like it was in v1 i am trying to add this to orchard core and im having a difficult time working out multitenancy maybe add a IAssetResolver that could give u the url - u provide the default implementation that points to the current files and i could make my own that points to the tenanted files i know this is a very niche request but please try to understand and my hope is that you would at least accept a pr

joadan commented 9 months ago

Hello,

Do you know what the issue is in Orchard?

If you would like to provide a PR to have an option to provide javascript files that would be interesting.

grofit commented 5 months ago

Hey I think I am being stung by this issue too, sorry to necro the issue but it seemed more sensible to just tack on to this users one than create a new one.

The app loads plugins dynamically so they come from their own directory, historically we used to load the js files as the plugin would define where the stuff needed to be loaded from (to some extent).

I can see now that you load it the assumption is that it is going to reside in the localhost _content folder but thats not the case for us https://github.com/apexcharts/Blazor-ApexCharts/blob/master/src/Blazor-ApexCharts/ApexChart.razor.cs#L363

Due to this I get the error:

TypeError: Failed to fetch dynamically imported module: http://localhost/_content/Blazor-ApexCharts/js/blazor-apexcharts.js
Microsoft.JSInterop.JSException: Failed to fetch dynamically imported module: http://localhost/_content/Blazor-ApexCharts/js/blazor-apexcharts.js
TypeError: Failed to fetch dynamically imported module: http://localhost/_content/Blazor-ApexCharts/js/blazor-apexcharts.js
2024-04-04 09:06:25 [Error] (Microsoft.AspNetCore.Components.Web.IErrorBoundaryLogger.) Failed to fetch dynamically imported module: http://localhost/_content/Blazor-ApexCharts/js/blazor-apexcharts.js

We used to do this via:

await JS.InvokeVoidAsync("loadJsFile", $"{StremPathHelper.GetPluginRootPath("Strem.Plugins.Analytics.Viewer")}/wwwroot/js/apexcharts.fixed.js");
await JS.InvokeVoidAsync("loadJsFile", $"{StremPathHelper.GetPluginRootPath("Strem.Plugins.Analytics.Viewer")}/wwwroot/_content/Blazor-ApexCharts/js/blazor-apex-charts.js");

As mentioned the plugin is completely separate to the main app in its own repo etc, they get put in a /Plugins directory and when a plugin is loaded it can optionally register files to be made available on the internally running web host, so this then is added to localhost/<plugin-name>/....

Is there any way to provide an override or turn off the new self loading behaviour and let the client provide the files if needed as I understand the benefit of the client no longer needing to do it themselves, but in cases where the files wont reside in the root _content directory this library wont work.

joadan commented 5 months ago

Hi,

I made an option to provide an fullpath to the javascript file, please check https://apexcharts.github.io/Blazor-ApexCharts/features/blazor-options

Do you think this will work for you?

Please note, this is not yet relesed.

grofit commented 5 months ago

This looks like it would resolve my issues, are you able to push out a pre-release on nuget?

If so I can give it a go and report back, if not no worries. If it's null/empty I assume it defaults to the regular path so wouldn't cause any breaking changes to behaviour for existing users.

joadan commented 5 months ago

This is now release as part of v3.2.0 Please close issue if it resolves your issue.

Thank you

grofit commented 5 months ago

I have updated but I still have some issues, unsure whats making it blow up, trying to look into it more, but I can see the file is there:

TypeError: Failed to fetch dynamically imported module: http://localhost:30212/Plugins/Strem.Plugins.Analytics.Viewer/wwwroot/_content/Blazor-ApexCharts/js/blazor-apexcharts.js
Microsoft.JSInterop.JSException: Failed to fetch dynamically imported module: http://localhost:30212/Plugins/Strem.Plugins.Analytics.Viewer/wwwroot/_content/Blazor-ApexCharts/js/blazor-apexcharts.js
TypeError: Failed to fetch dynamically imported module: http://localhost:30212/Plugins/Strem.Plugins.Analytics.Viewer/wwwroot/_content/Blazor-ApexCharts/js/blazor-apexcharts.js
2024-04-07 11:51:36 [Error] (Microsoft.AspNetCore.Components.Web.IErrorBoundaryLogger.) Failed to fetch dynamically imported module: http://localhost:30212/Plugins/Strem.Plugins.Analytics.Viewer/wwwroot/_content/Blazor-ApexCharts/js/blazor-apexcharts.js

I can see the file is there as I can load it in the browser:

image

I will see if I can work out whats going on, maybe its something to do with mime types or some capturing of underlying errors.

The folder has the other required js file: image

joadan commented 5 months ago

Have you tried to point to, https://apexcharts.github.io/Blazor-ApexCharts/_content/Blazor-ApexCharts/js/blazor-apexcharts.js

grofit commented 5 months ago

hmm it does work with that one, but I have no idea what is different really, as I can resolve the required esm file too from the expected url, and it is doing it via a http call (although its not https, but I doubt that matters). I will see if I can get any more debug information, as its odd its not giving an internal error as it should be able to find the file, its just when processing it that its probably blowing up.

grofit commented 5 months ago

Ok on further looking into it, I can see there is a CORS related flag in the browser, I think the way we were loading it before was like the old JSONP style include where it just lobbed the src tag in or something, will see if I can add the CORS headers on to all queries on the running API and get back to you.

grofit commented 5 months ago

ok added open CORS requests for any origin etc and then it blew up with:

ReferenceError: SVG is not defined
Microsoft.JSInterop.JSException: SVG is not defined
    at http://localhost:30212/Plugins/Strem.Plugins.Analytics.Viewer/wwwroot/_content/Blazor-ApexCharts/js/apexcharts.esm.js:10:10051
    at http://localhost:30212/Plugins/Strem.Plugins.Analytics.Viewer/wwwroot/_content/Blazor-ApexCharts/js/apexcharts.esm.js:10:19
ReferenceError: SVG is not defined
2024-04-07 17:30:46 [Error] (Microsoft.AspNetCore.Components.Web.IErrorBoundaryLogger.) SVG is not defined

Went and added back in the explicit first include for apexcharts.fixed.js before I load the apex chart stuff then it worked, so hopefully that will sort it now, thanks a lot for including this and taking the time out to assist.