[8.6] [profiling] Ensure constant colors in profiling bar chart (#146696

) (#146776)

# Backport

This will backport the following commits from `main` to `8.6`:
- [[profiling] Ensure constant colors in profiling bar chart
(#146696)](#146696)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Thomas
Dullien","email":"thomas.dullien@googlemail.com"},"sourceCommit":{"committedDate":"2022-12-01T11:11:49Z","message":"[profiling]
Ensure constant colors in profiling bar chart (#146696)\n\n##
Summary\r\n\r\nMake sure that identical objects in the bar chart always
get assigned\r\nthe same colors.\r\n\r\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by: Tim
Rühsen
<tim.ruhsen@elastic.co>","sha":"0a065f3c1d18b881209f510c574c7f463c401ffc","branchLabelMapping":{"^v8.7.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v8.7.0","v8.6.1"],"number":146696,"url":"https://github.com/elastic/kibana/pull/146696","mergeCommit":{"message":"[profiling]
Ensure constant colors in profiling bar chart (#146696)\n\n##
Summary\r\n\r\nMake sure that identical objects in the bar chart always
get assigned\r\nthe same colors.\r\n\r\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by: Tim
Rühsen
<tim.ruhsen@elastic.co>","sha":"0a065f3c1d18b881209f510c574c7f463c401ffc"}},"sourceBranch":"main","suggestedTargetBranches":["8.6"],"targetPullRequestStates":[{"branch":"main","label":"v8.7.0","labelRegex":"^v8.7.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/146696","number":146696,"mergeCommit":{"message":"[profiling]
Ensure constant colors in profiling bar chart (#146696)\n\n##
Summary\r\n\r\nMake sure that identical objects in the bar chart always
get assigned\r\nthe same colors.\r\n\r\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by: Tim
Rühsen
<tim.ruhsen@elastic.co>","sha":"0a065f3c1d18b881209f510c574c7f463c401ffc"}},{"branch":"8.6","label":"v8.6.1","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Thomas Dullien <thomas.dullien@googlemail.com>
Co-authored-by: Tim Rühsen <tim.ruhsen@elastic.co>

x-pack/plugins/profiling/common/topn.ts

@@ -255,10 +255,22 @@ export function groupSamplesByCategory({
     rotations: Math.ceil(subcharts.length / 10),
   });
 
+  // We want the mapping from the category string to the color to be constant,
+  // so that the same category string will always map to the same color.
+  const stringhash = (s: string): number => {
+    let hash: number = 0;
+    for (let i = 0; i < s.length; i++) {
+      const ch = s.charCodeAt(i);
+      hash = (hash << 5) - hash + ch; // eslint-disable-line no-bitwise
+      hash &= hash; // eslint-disable-line no-bitwise
+    }
+    return hash % subcharts.length;
+  };
+
   return orderBy(subcharts, ['Percentage', 'Category'], ['desc', 'asc']).map((chart, index) => {
     return {
       ...chart,
-      Color: colors[index],
+      Color: colors[stringhash(chart.Category)],
       Index: index + 1,
       Series: chart.Series.map((value) => {
         return {