Bug/color-theme-options: Resolved color theme issue opensearch-projec…

…t#960 (opensearch-project#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>
natebower · Sep 7, 2022 · d9f5846 · d9f5846
1 parent 5970b0e
commit d9f5846
Showing 1 changed file with 10 additions and 3 deletions.
diff --git a/.../explorer/visualizations/config_panel/config_panes/config_controls/config_color_theme.tsx b/.../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,
   }));