[Dashboard] Add Ability to Customize Appearance

[stacey-gammon]

Ability to customize dashboard style and appearance

Background

Kibana 4 dashboards had a different background color from panel color, panel borders, and margins. When we introduced Kibana 5, we got rid of all of that because some users found that style to clutter their dashboards, especially if they used many small visualizations. After we did that, we heard from community members who did not like the borderless variation (#9701).

If we give users the ability to customize the look and feel of each dashboard to their own liking, this could solve this problem. Other ways to solve it are by simply adding a border toggle, or introducing a couple new themes (#14123).

Attributes to become customizable

Per dashboard:

• Dashboard background color
• Default panel background color
• Margins
• Padding
• Title color (or we can auto determine it black or white based on luminosity of bg color)

Per Panel:

• Background colors
• Title color (or we can auto determine it black or white based on luminosity of bg color)
• Margins
• Padding
• Custom title

Pros

• Make everyone happy by giving them the tools to set the style themselves.

Cons

• Can create ugly dashboards.
• Slipper slope of attributes added to maintain a good appearance - e.g. Title background color? Icon colors? Font Size? Font family?

Use cases

• Embedded dashboards, to match the look and feel of the area they are being embedded in
• To highlight, or categorize certain panels
  • e.g. a panel that shows error codes could be colored red.
• To categorize or theme certain dashboards
  • e.g. Kibana dashboards could be colored pink and green, while Logstash dashboards could be colored green and yellow

Mocks:

Implementation Details

• Take the simple approach for phase 1 and use inline style overrides.
• We might also want to pass the custom configuration object in to the renderer, so each visualization can be in charge of combining it's styling with the panel.
  • e.g. we can have color={panelBackgroundColor} in an outer element, but a particular visualization may have it's own inline styles that will override that. Since we support custom visualization plugins, authors may need/want to adjust their styling.

Interaction with dark theme

• Selecting dark theme would reset the settings, which can then overridden.

Sources

• https://discuss.elastic.co/t/how-can-we-change-background-color-of-dashboard/35508

• https://discuss.elastic.co/t/how-to-change-the-background-color/49291

• https://discuss.elastic.co/t/kibana-5-0-step-back/66019

• Thor
  Examples of customized thor visualizations:
  
  
  
  

• Canvas

[ycombinator]

Ability to change panel background color also requested in https://discuss.elastic.co/t/change-color/75585.

One of the windows contains very important information for our users. 
I would like to know if someone have a solution to spotlight this window only. 
I was thinking about or: 
- changing the background color of this windows
- or changing the color of the font (red or green), since that all the other windows are in a grey colour font.

[narschang]

+1

[SnchitGrover]

+1

[tuxton]

+1

[georgezoto]

+1

[kkr78]

+1

[Darryn-George]

+1

[Harish346]

+1

[francisca-lima]

+1

[ebalmeida]

+1

[PiotrBB]

+1

[Mufi123]

Support for uploading the gif or image in dashboard

[ThomThomson]

@Mufi123 the ability to add an image to a dashboard will be added with version 8.7.

Leaving this open, but I've added impact:low to it, as we haven't triaged exactly which customizations we will allow on the dashboard level at the moment.

[Baklap4]

Any change we can have this feature be implemented?
We currently use a Text to differentiate between test/production dashboards.. but changing the background color should suffice aswell as to save some precious space with packed dashboards

[ThomThomson]

@Baklap4, we haven't prioritized this functionality at the moment. You can track this issue to know when we do.

[ThomThomson]

Closing this for the time being, as it's likely that this theming will mostly be up to the individual chart types for the foreseeable future. For instance, the new metric chart is in charge of its own background color:

From a dashbaord point of view, we may add slight styling settings for gutter size, padding, etc, but it is unlikely that we will offer color customizations. If our priorities change, we can potentially reopen this issue.

[Baklap4]

@ThomThomson is this background color only per individual charts? So not changable for the different dashboards you put it on?

As OP also asked i'd love to make multiple dashboards and be able to see on a screen far away to what i'm looking at. So for example if the screen is green we're looking at production, if the screen is orange we're looking at test. This way we don't have to use labels which we have to read