Setting custom themes in echarts

[Evernight]

This is an attempt to make the echarts theme configurable. It sorta works but sending as a RFC to ask if you see a better ways to do things.

The themes documentation is here: https://echarts.apache.org/handbook/en/concepts/style/#
And the few actual themes are stolen from here: https://echarts.apache.org/en/theme-builder.html .

The theme is customizable per panel. This is a bit too much but felt like the most natural place to put the customization.
I don't like that the theme may be registered several times. Also

const themeNameForComponent = "customTheme";

currently doesn't cause problems I guess because on changing the theme every component re-renders, but in theory different configurations could be registered under the same name (in a global registry?).
The solutions I see kinda all feel like an overkill of sorts:

1. Maybe configure with a pair (themeName, themeConfig)
2. hash themeConfig and use customTheme-${themeConfig} as a theme name
   Maybe 1) would be cleaner or maybe there's another I'm missing?

The user can provide own configuration in dashboards.tsx, of course.

If the general approach seems fine, I will add variable use to other places in dashboards.tsx and also add remaining themes from the echarts examples.

[andreasgerstmayr]

This is an attempt to make the echarts theme configurable. It sorta works but sending as a RFC to ask if you see a better ways to do things.

Thanks for creating a RFC first!

The theme is customizable per panel. This is a bit too much but felt like the most natural place to put the customization.

I would suggest to define the theme globally, I don't see the use case of having a different theme per panel (e.g. in Grafana and Perses, the theme is configurable per user).

I think the best place would be to extend the Config type here:

fava-dashboards/frontend/src/schemas/v2/dashboard.ts

Lines 6 to 8 in 4d8213e

	export interface Config {
	dashboards: Dashboard[];
	}

and add a new theme property with an echarts property, which contains the echarts theme (the second parameter of registerTheme()):

  theme: {
    echarts: echarts.ThemeOption;
  };

Then all echarts panels will use this theme.

With this structure, we could also allow customization of the default MUI theme (another property under the theme property).

What do you think?