Graphs are not themeable

[daniel-beck]

hudson.util.Graph is used around Jenkins and not (really) themeable. While it can consume some limited query parameters for background color, they're neither set nor work in a way that suits the existing CSS variable approach AFAICT.

On the plus side, if the color definitions are never set we can probably get away with adding an extension point to override them.

Examples

[timja]

The issue with these graphs are that they are rendered server side.

Any idea how we would handle 'System' theme preference with an extension point?

I migrated the junit plugin to use echarts (https://github.com/jenkinsci/echarts-api-plugin) instead of trying to fight with this as it's rendered client side and can lookup CSS variables.

#127 is a similar issue, although slightly easier as we can probably bundle a custom theme which has the extra CCS required for 'system' preference.

[daniel-beck]

Any idea how we would handle 'System' theme preference with an extension point?

Would try to wrap the graphs in a client side wrapper that passes the appropriate colors as query parameters, not unlike the JS that handles dynamic graph width today (but less amateurish). Probably won't handle color scheme changes while the page is being viewed unless we're spending real time on this, but probably good enough?

[daniel-beck]

To clarify, I currently have no specific plans to implement this myself. I think I'm out of my depth here with the CSS/JS required to make this work properly.

[timja]

There's at least two approaches I think,

1. Extension point in core where you can override the colour's in Java code or pass them as query parameters
2. Rewrite them using echarts, probably detaching them from core, and then it's a lot easier

I have no intention in the short term of working on it, possibly later on though

[daniel-beck]

Extension point in core where you can override the colour's in Java code or pass them as query parameters

Limited query parameter support exists.

I think this can potentially be done more simply, as described in #141 (comment), which wouldn't require a new extension point. It is based on the assumption that CSS variable values can be accessed by JS.

[timja]

They can be accessed:

https://github.com/jenkinsci/echarts-api-plugin/blob/decf466eebce561413c0e414fe1b85b5576e8716/src/main/webapp/js/pie-chart.js#L45