Proof of concept custom raw charts with inject hook

[gffuma]

A proof of concept demo of custom raw charts.

This demo can load a new chart(s) and auto save it when you reload the pages using the caches api.

How does it work?

This demo expose d3 and rawgraphsCore on the window object thanks to this the custom charts can mark this dependencies as global and with the changes of rawgraphs/rawgraphs-charts#110 the baseline size of a chart including the svg icons is ~7KB.
This demo expose a global "stack" on window (RAWGRAPH_APP_INJECT_HOOK) this approach is similar to how google analytics, react dev tools and other libraries works.

When a new chart is loaded we append a script to head (this is how code splitting works), we wait them and we pop all the stack inside the inject hook. This approach is much better instead of exposing static prop Ex RAWGRAPH_CUSTOM_CHART = ... because we can executed scripts in parallel an wait for all them and them simply pop the stack.

For the purpose of the demo i use a naive approach to compute "the name of the script" i simply split the chart graph and take the first piece this is the name of our pack and i used to save it to the storage cache.

The only temp downside of this demo is that i disabled WebWorkers for simplicity, (we can still easy use web workers for core charts) to use WebWorker for custom charts we need to make also the chart imported a worker this need future investigation.

How can i try this???

• Start the repo on this branch.

• Clone this: https://github.com/gffuma/custom-rawcharts-template-test

• Hack your custom chart.

• Run npm install and npm run build from the custom chart repo.

• Upload to RawApp the file inside the custom chart repo called lib/index.iife.js

• Now you can see your chart! 🚀

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[gffuma]

Got web workers work also for custom charts @bianchimro 😎

[gffuma]

Thanks to the suggestions of @bianchimro and @osioalberto i write a tiny AMD loader that also works with WebWorkers.
So now we can simply load UMD / AMD bundled javascript.
As above we can optionally host d3 and raw core as dependencies, no more, other dependencies should be bundled (for now).
To identify an uploaded file i use the sha512 hash algorithm.
Thanks to these changes we can now load custom charts from npm or urls or a dropped file (all this formats suppose to be bundled as UMD / AMD).
I make the .rawgraphs protocol works with custom charts see rawgraphs/rawgraphs-core#26.
I also add an experimental feature (just for test if can works) to load a project from ?url=https://url-to-my-project.

Yes, as UMD you can load the charts itself using for example: https://cdn.jsdelivr.net/npm/@rawgraphs/rawgraphs-charts

I also notify the user to be careful to load third party javascript with a simple modal.
(A simple whitelist system is already in place so in future we can whitelist good charts from community).

To have a friendly url to try i upload the bundled version of https://github.com/gffuma/custom-rawcharts-template-test
here:

• CHART -> https://cdn.giova.fun/hello-chart.js
• PROJECT -> https://cdn.giova.fun/hello.rawgraphs

So if your starts the app from this branch and link the correct version of the core ... if you visit:
http://localhost:3000/?url=https://cdn.giova.fun/hello.rawgraphs

You will see:

The caution modal:

... If you continue the custom chart: