Make the "Dimensions of well-being" diagram clickable

[tanius]

We (and esp. @ladyniasan) would like to have a clickable version of the "Dimensions of Wellbeing" diagram, to use as a secondary way of navigating the content on the edgeryders.eu website.

Requirements:

1. The diagram should be embedded on a static page of the website, which will be created the same way as the pages referred from the menu. Means, as a closed topic in the Menu Pages category.

2. Each element in the diagram (both the diagram proper and the diagram key) should be linked to a Discourse tag. Which element belongs to which tag is shown on this page.

3. The diagram should be created in three versions: one English, one Arabic, one French (French only if French translations are provided in time). The English texts and Arabic translations are available again on this page, and French translations will be added there, too.

Since this will be used as a relatively prominent navigation feature, please first research technically clean ways to implement this and discuss with @tanius to find a common decision which to use. Alternatives include at least:

• A diagram made with a third-party online graphing / diagramming web service. For example, Grafana seems to be a great choice for this; a well known, open source diagramming tool that includes a SaaS web service and widgets. Widgets are for example embedable in Riot, a Matrix protocol instant messaging software.

• A diagram done with a JavaScript diagramming library, perhaps using SVG.

• A simple HTML imagemap, but that will have problems width screen width etc. in the mobile version. Because Discourse will scale the image automatically, but the image map coordinates will not scale.

The problem is how to add these to a Discourse topic without including the same JavaScript on every page. That could be done with an iframe element, but Discourse probably does not allow these as HTML elements. A cleaner solution would be the Onebox feature, extending it as necessary to create a dynamic embedded content as it happens for example for Google Maps links. Might be better to extend the Onebox mechanism with a new type of embeddings, in a custom plugin. There are example repositories around of how to do that as a custom Discourse plugin.

[damingo]

As discussed with @tanius this is now implemented with a standard picture, which can be viewed in detail in a popup, and a color coded list which enables convenient navigation on smartphones. See: https://edgeryders.eu/t/wellbeing-indicators/6978

[tanius]

For smartphone navigation, the list is fine. In the medium term, we (well, @ladyniasan :-) ) want a real clickable diagram for the desktop version though.

For that, the solution detailed above with an external diagramming or drawing web service plus Onebox embedding seems the most applicable for this, but it's also quite a bit of effort.