Bug/color-theme-options: Resolved color theme issue #960 (#971)

* Resolved to show only metrics in the dropdown instead of all the fields

Signed-off-by: ruchika-narang <ruchika_narang@persistent.com>

* Removed unncessary import

Signed-off-by: ruchika-narang <ruchika_narang@persistent.com>

* Updated snapshots after rebasing with main

Signed-off-by: ruchika-narang <ruchika_narang@persistent.com>

Signed-off-by: ruchika-narang <ruchika_narang@persistent.com>

public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_theme.tsx

@@ -18,7 +18,7 @@ import {
 } from '@elastic/eui';
 import { isEmpty } from 'lodash';
 import { ADD_BUTTON_TEXT } from '../../../../../../../../common/constants/explorer';
-import { NUMERICAL_FIELDS } from '../../../../../../../../common/constants/shared';
+import { visChartTypes } from '../../../../../../../../common/constants/shared';
 
 export const ConfigColorTheme = ({
   visualizations,
@@ -27,16 +27,23 @@ export const ConfigColorTheme = ({
   handleConfigChange,
   sectionName = 'Color theme',
 }: any) => {
-  const { data } = visualizations;
+  const { data, vis } = visualizations;
+  const { defaultAxes = {} } = data;
   const { data: vizData = {}, metadata: { fields = [] } = {} } = data?.rawVizData;
+  const { dataConfig = {} } = data?.userConfigs;
   const addButtonText = ADD_BUTTON_TEXT;
   const getColorThemeRow = () => ({
     ctid: htmlIdGenerator('ct')(),
     name: '',
     color: '#FC0505',
   });
 
-  const options = fields.map((item) => ({
+  const options = (dataConfig?.valueOptions?.metrics && dataConfig.valueOptions.metrics.length !== 0
+    ? dataConfig.valueOptions.metrics
+    : vis.name === visChartTypes.Histogram
+    ? defaultAxes.yaxis ?? []
+    : fields
+  ).map((item) => ({
     ...item,
     label: item.name,
   }));