Gapit htmlgraphics panel

[ghost]

Grafana panel for displaying metric sensitive HTML and SVG graphics.
More information in the readme.md.

[ghost]

Oh, did not realize all those commits would've been added.
Any good way to remove them?

[ghost]

Figured it out. Now there's only the commit that should be there.

[marcusolsson]

Thank you for your patience while waiting for us to review your plugin.

We're working hard at improving the plugin experience for both users and authors. I'd like to share some important information on how to package and publish plugins going forward.

Since Grafana 7.3, we require all plugins to be signed. By signing your plugin, users can guarantee the integrity of the plugin and that the plugin version they've installed hasn't been modified since it was released. For more information on how to sign your plugin, refer to Sign a plugin.

With this, we now require plugins to be packaged before we publish them. This means that instead of a commit containing a dist directory, you will need to submit a link to a ZIP archive containing your plugin. For more information on how to package your plugin, refer to Package a plugin.

Once you've packaged your plugin, you'll need to update your entry to repo.json to the new format. You can read more on how to do this under Add a plugin to repo.json.

To summarize, to publish your plugin, make sure that you:

1. Sign your plugin
2. Package your plugin
3. Create a new GitHub release and upload the packaged plugin as a release asset
4. Update your repo.json entry

Here's an example of a properly packaged plugin. In the same repository, you can find a GitHub Action that signs, packages, and releases the plugin whenever you create a new tag.

Once you've created a GitHub release with the packaged plugin, you can right-click the release asset, copy the link, and validate it using the plugin validator.

Finally, in the November community call, I'll be walking through the steps needed to sign and package your plugin. A recording will be made available on our YouTube account, in case you can't make it.

[ZuperZee]

Erhm, I updated the plugin to use the new sign and package method.
I don't really know how to fix the lint error. Would be great with som input :)

[marcusolsson]

Looks good! I will review this during the coming week. In the meantime, could you please update the repo.json to only list the signed version (which is the one you want me to review and publish). Hopefully that will fix the merge conflicts?

Don't worry about the linter for now. We need to update it do account for the new plugin structure.

[marcusolsson]

Again, thank you for considering contributing your plugin! It's a really cool plugin that provides a ton of flexibility for the user! This could become a really powerful plugin if we can make it a little more user-friendly towards more casual users as well. My initial impression is that the panel targets a rather technical user.

I think the main points of improvement is:

1. Make field names and descriptions easier to understand, with less implementation details.
2. Provide a default configuration/example so that the user don't have to go to the GitHub page to understand basic usage.

Here are a few comments I wrote down while review the plugin:

• Display
  • "Add 100%" could be rewritten as "Fit content to panel", or "Expand content to fill panel" rather than explaining the attributes added.
  • The description for "Center content" is also rather technical
• Polyfill
  • Why is this optional? Would anyone turn this off?
• Code data
  • "Code data" is rather generic. What about "Custom variables", "Custom properties", or "Custom settings"?
  • "Advanced mode" could be renamed to just "Edit as JSON", which removes the need for the description.
  • It seems like you can only add properties when editing JSON, so should it be enabled by default?
• Would it make sense to group onRender and onInit under a "JavaScript" category? Alternatively, I think you could group all of these under "Display" as every category only have a single field, which repeats the category.
• I would've loved to have a working configuration out-of-the-box, using the built-in Grafana data source. One that shows how to connect CSS, HTML and JS.

I'd like to have at least a few of these points addressed before I publish this, to make sure that it's easy to figure out how to use it.

[ZuperZee]

@marcusolsson , to address some points of your comments.

• Polyfill

  • Why is this optional? Would anyone turn this off?

Since polyfill alters the content of the code I thought it would be smart to make it optional.
The current polyfill is "SVG base fix" which adds the url to the xlink property which some implementers might not want.

I doubt anyone would turn it off, but it's always good to have a way of turning something unwanted off.
Flexibility > restricted :D

• Code data

  • It seems like you can only add properties when editing JSON, so should it be enabled by default?

How I saw someone use this plugin was one person would build the code data the way it is used in the javascript, and someone else changes the values to what they are supposed to be in the code data on the panel. (perefable they would use the htmlgraphics-bundler-template htmlgraphics-bundler-example).
To explicitly change the property type or add a property you have to switch to advanced (json view).
This is intentional.

I will be working on implementing the rest of the points, I think they will be good improvements.

[ZuperZee]

Replaced v1.0.0 with v1.1.0.

Most of the points in your comment have been added.

v1.1.0 (2020-12-4)

Features / enhancements

• Repo: Add default configuration to show how to connect CSS, HTML, JS, and customProperties.
• Repo: codeData has been renamed customProperties. codeData is still available, and most of the internal code still uses codeData for backwards compatibility.
• Options: Simplify field names and description.
• Options: Move CSS, HTML, onRender, and onInit to the Display category.

Bug fixes

• HTML/SVG document: Fix html not updating after removing all code
• Fit content to panel: Fix html elements not fitting to panel

[marcusolsson]

Thank you! 🙏

v1.1.0 is a massive improvement! So much easier to understand and to experiment with. Well done!

I think this is ready to publish. We're currently working out some kinks with the publishing script, but I'll publish this as soon I've worked it out!

[marcusolsson]

Published! 🎉

[marcusolsson]

Seems to be a conflict with the repo.json though. Do you mind fixing it so I can merge this?

[ZuperZee]

Should be fixed now @marcusolsson