Example 'new visualisation' PRs no longer work

[Smilebags]

Reviewing the documentation and example PRs for how to add a new visualisation, I have followed those steps as closely as possible (apart from some folders which seem to have been moved). When adding the new visualiation to a dashboard, I get the following error:

An error occurred while rendering the visualization: Error: Item with key "custom_vis" is not registered.

Expected results

The visualisation loads

Actual results

A yellow box displays with the error, along with the same message through console.warn.

How to reproduce the bug

Follow the structure of #3013 in order to create a new visualisation, run npm run build and npm run sync-backend, start server. Add new chart using the visualisation, and add to dashboard. Visit dashboard.

Environment

• superset version: v0.29rc7
• python version: Python 3.7.3
• node.js version: v11.11.0
• npm version: 6.7.0

Checklist

Make sure these boxes are checked before submitting your issue - thank you!

• I have checked the superset logs for python stacktraces and included it here as text if there are any.
• I have reproduced the issue with at least the latest released version of superset.
• I have checked the issue tracker for the same issue and I haven't found one similar.

[issue-label-bot]

Issue-Label Bot is automatically applying the label #bug to this issue, with a confidence of 0.86. Please mark this comment with 👍 or 👎 to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. For admin, please label this issue .pinned to prevent stale bot from closing the issue.

[andreaslordos]

New documentation must be written in order to specify how to create a new visualization, as Superset visualizations are now dependent on plugins, see PR #6838. Unfortunately there is no existing documentation on how to write & integrate a plugin.

If you want to try and build your own plugin without documentation, clone superset-ui-plugins, write your plugin (use other plugins as templates), and use Storybook to make sure your chart displays correctly. Then, try integrating your plugin into this repository by looking at how other plugins are imported/integrated.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. For admin, please label this issue .pinned to prevent stale bot from closing the issue.

[hefeng11725]

ot from closing the issue.
It's still a problem that bothers me，
and I think it 's not only for me.
New documentation is very necessary for us

[trepmag]

@andreaslordos, tried to build the superset-ui-plugins repo but it fails as yarn test:watch... Would you have any further help to go on track with developing a custom plugin?

Update 1: found some guidance here @superset-ui-plugins/demo but still yarn build fail...

Update 2: this build issue looks like to be threatened in this issue; could successfully build using the kristw--nimbus branch...

Update 3: build issue fixed...

[Smilebags]

Is there any update on this? It would be really useful to have some documentation (even in the form of an example PR) which shows what needs to be added to superset to add a new visualisation.

I have managed to build the superset-ui-plugins repository after deleting a few of the visualisations which were causing more trouble than it was worth (icicle event, word cloud and superset-ui-preset-chart-xy), and installing a number of unlisted dependencies (@airbnb/lunar, dompurify and @types/dompurify), this has enabled me to duplicate packages/superset-ui-plugin-chart-table to packages/superset-ui-plugin-chart-new-viz.

I've then rebuilt superset-ui-plugins, cd'ed into the new viz folder, run npm link. After this I've returned to the main superset repo, linked the package and then modified superset/assets/src/visualizations/presets/MainPreset.js to ensure new-viz is being called in the same manner as the other visualisations. Webpack has no problem building with my new visualisation included, but it has no effect on what is actually available in the 'Select a visualization type' window.

I can't find anywhere else that needs configuration updated and can't find any documentation on how to do this with the new visualisation structure. Any guidance would be appreciated.

[andreaslordos]

@Smilebags I don't know if this is any help, but I cloned the Superset repository and successfully added a local visualization (Funnel graph) - you can view the repository here. What I think will be more helpful to you is viewing this page, as you can see all the files in which the new viz was referenced. For example, have you added your visualization to the list in assets/src/explore/components/controls/VizTypeControl.jsx?

[Smilebags]

Thanks for that @andreaslordos, I managed to get it to work by creating a new visualisation repo like superset-ui-plugins and importing that inside of MainPreset.js. I was running into a cache issue and also discovered the fact that the useLegacyApi seemingly does nothing, and a modification to viz.py is still required.

Once the useLegacyApi issue (and related issues) is resolved, an example visualisation shouldn't be too hard to make, since it'll only require a one line change to superset, and is isolated to the external plugin repository.