Charts: Send theme parameter for default charts

[hreichert]

Take a matching chart theme for the current habpanel theme and send it to the ESH chart servlet.

---

The ESH DefaultChartProvider recently got a new feature to support different themes:
eclipse-archived/smarthome#4291

This change adds the &theme=xxx parameter to the servlet URL, based on the current habpanel theme.

[ghys]

@hreichert thanks for your PR, appreciate the effort! 👍

Unsure about the approach with the switch block though - as new themes are eventually added (and while they're hardcoded right now, they might be dynamically added in the future) we'd have to deal with those switch cases as well.

What I would suggest instead is adding 2 additional settings to the chart widget so that the user could choose between the dark or light theme and whether to display the legend while configuring the widget. Those options would only appear if the "default" chart type is selected.

Let me know what you think 😃

[hreichert]

@ghys Thanks for your response!

At least in ESH, the consens was, that the "UI provider" has to decide, which theme gets rendered.
As I'm not a very experienced JS/HTML5/CSS3 developer, I could'nt find a good way to integrate the matching "chart theme name" into the existing themes, so I decided for the kind of ugly switch-case block.

In my personal opinion, I find the "automatic" solution better, but I could live with a manual setting.
But please note:

• The default of the switch-case is: do not send any theme parameter, so the default chart theme gets renderes - as before
• If a user changes his theme setting, all charts get automatically rendered in the right theme without manually changing ALL chart widgets

Do you see any kind of possibility to integrate the "chart theme name" in the existing theme files, to have a cleaner implementation?

[ghys]

All things considered, you're right, the chart theme should be tied to the HABPanel theme.

Do you see any kind of possibility to integrate the "chart theme name" in the existing theme files, to have a cleaner implementation?

Absolutely, I even have a clean solution in mind.
The HABPanel themes rely heavily on CSS variables - a relatively recent feature. Additionally, HABPanel defines what's called an AngularJS "filter" to retrieve a CSS variable value for initializing default values and similar scenarios, it's even injected into the chart widget controller because it's used in chart.widget.js line 183:

themeValueFilter(vm.widget.series[i].color, 'primary-color')

themeValueFilter checks the value of the first argument and if not set ("falsy") returns the value of the CSS variable specified in the second argument.

Therefore it makes perfect sense to add a new theme variable for the chart's theme - let's say --chart-default-theme; the switch block you added can be replaced by something like:

var chartTheme = themeValueFilter(vm.widget.theme, 'chart-default-theme');
...
if (chartTheme) {
    ret += '&theme=' + chartTheme.replace(/"/g, '');
}

Here we use vm.widget.theme to allow forcing the theme in the widget configuration even if it's not available to the user in the settings dialog. By default it won't be set so the theme value will be used. We also have to get rid of the surrounding quotes (it will always be double quotes).

Then in each of the CSS files in web/assets/styles/themes you would need to add a new variable like:

    --chart-default-theme: "dark";

(for instance after --chart-tooltip)

[hreichert]

Well, that sounds like a plan!
That's a good chance to dig a bit deeper into this stuff.
I try to implement it and come back to you.

[hreichert]

Pushed a update based on your suggestions.
Please have a look at it.

Screenshots

Material:

Material dark:

Translucent:

[ghys]

@hreichert looks good!
Many thanks!