Visualizations with different colors

[asteriscos]

Wazuh	Rev	Browser
X.Y.Z	xyzw	Chrome, Firefox, Safari, etc

Description
Some visualizations use darker colors than the standard ones. This behavior happens at different "random" moments without apparent cause.

Preconditions
1.

Steps to reproduce

1. Navigate to any Dashboard

Expected Result

1. All visualizations should use the same colors

Actual Result

1. Some visualization use darker colors

Screenshots

[gdiazlo]

Related to: opensearch-project/OpenSearch-Dashboards#5422

[Desvelao]

The default colors of charts are defined by OpenSearch Dashboards in https://github.com/opensearch-project/OpenSearch-Dashboards/blob/2.10.0/src/plugins/charts/public/services/colors/mapped_colors.ts#L109-L112

[Desvelao]

The darker and lighter colors appear when the results of the visualization are more than 10, this causes the standard colors could not be used.

Reducing the aggregation size could mitigate the problems with the colors. @yenienserrano found this workaround doesn't work for any visualizations whose possible results are more than 10 as:
. We could replace the visualization definition taking in account this limitation.

In this screenshot, the colors assigned for the labels 3 and Brute force are the same ones.

[Desvelao]

OSD 2.10.0 Dashboard app: same colors for different labels

Wazuh 4.6.0: different color for different label

OSD 2.8.0 Dashboard app: different color for different label

[chantal-kelm]

We have raised the OpenSearch bug in their repository and they are currently working on it.

We have continued our research to find a solution to fix the bug.

Assigning colours to dynamic data #5838 (comment)

[Desvelao]

@asteriscos tried to use order: 'middle-out' in https://github.com/opensearch-project/OpenSearch-Dashboards/blob/2.10.0/src/plugins/charts/public/services/colors/mapped_colors.ts#L109-L112, we got this result:

[Desvelao]

Video related to assigning colors to visualizations: https://youtu.be/U8by9Qikkhg?si=SerRIpbt8668h-Cj&t=497

[yenienserrano]

A possible solution to the problem could be to overwrite the function that sets the colors of the graphs in our application with a few modifications.
Modifications:

• Adding the already mapped colors to the alreadyUsedColors variable.

      alreadyUsedColors.push(...Object.values(this._mapping));

• Change the data of the alreadyUsedColors variable to lowercase

      alreadyUsedColors = alreadyUsedColors.map(color =>
        color.toLocaleLowerCase(),
      );

• Change the values of the object passed to the euiPaletteColorBlind function. For this:

      const colorPalette = euiPaletteColorBlind({
        rotations: Math.ceil(
          (keysToMap.length + alreadyUsedColors.length) / 10,
        ),
        direction: core.uiSettings.get('theme:darkMode') ? 'darker' : 'lighter',
      })
        .filter(color => !alreadyUsedColors.includes(color.toLowerCase()))
        .slice(0, keysToMap.length);

This causes, as labels are added to the visualizations, the color palette to expand and, depending on the theme, display light or dark colors in the graphics.

I share a patch with the changes: paletteColor.txt

Screenshots

[chantal-kelm]

I share a new patch that fixes the error in the colours of the visualisations:

patch.txt