Time series/scatter bugs fixed (opensearch-project#1113)

* Fixed threshold crashes and color theme not applying on bar, line, scatter and histogram Signed-off-by: ruchika-narang <[email protected]> * bugs fixed testing: in progress Signed-off-by: Ramneet Chopra <[email protected]> * testing + fixing done Signed-off-by: Ramneet Chopra <[email protected]> * bar crash fixed Signed-off-by: Ramneet Chopra <[email protected]> * histogrm color theme options fixed Signed-off-by: Ramneet Chopra <[email protected]> * log removed Signed-off-by: Ramneet Chopra <[email protected]> Signed-off-by: ruchika-narang <[email protected]> Signed-off-by: Ramneet Chopra <[email protected]> Co-authored-by: ruchika-narang <[email protected]>
mengweieric · Oct 12, 2022 · 6241760 · 6241760
1 parent 4816219
commit 6241760
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 57 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
@@ -17,8 +17,9 @@ import {
   EuiComboBox,
 } from '@elastic/eui';
 import { isEmpty } from 'lodash';
-import { ADD_BUTTON_TEXT } from '../../../../../../../../common/constants/explorer';
+import { ADD_BUTTON_TEXT, AGGREGATIONS } from '../../../../../../../../common/constants/explorer';
 import { VIS_CHART_TYPES } from '../../../../../../../../common/constants/shared';
+import { getPropName } from '../../../../../../../components/event_analytics/utils/utils';
 
 export const ConfigColorTheme = ({
   visualizations,
@@ -38,15 +39,16 @@ export const ConfigColorTheme = ({
     color: '#FC0505',
   });
 
-  const options = (dataConfig?.valueOptions?.metrics && dataConfig.valueOptions.metrics.length !== 0
-    ? dataConfig.valueOptions.metrics
+  const options = (dataConfig[AGGREGATIONS] && dataConfig[AGGREGATIONS].length !== 0
+    ? dataConfig[AGGREGATIONS]
     : vis.name === VIS_CHART_TYPES.Histogram
     ? defaultAxes.yaxis ?? []
     : fields
   ).map((item) => ({
     ...item,
-    label: item.name,
+    label: vis.name === VIS_CHART_TYPES.Histogram ? item.name : getPropName(item),
   }));
+
   const getUpdatedOptions = () =>
     options.filter((option) => !vizState.some((vizOpt) => option.name === vizOpt?.name?.name));
 

diff --git a/public/components/visualizations/charts/bar/bar.tsx b/public/components/visualizations/charts/bar/bar.tsx
@@ -23,7 +23,7 @@ import { IVisualizationContainerProps } from '../../../../../common/types/explor
 import { AvailabilityUnitType } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_availability';
 import { ThresholdUnitType } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds';
 import { EmptyPlaceholder } from '../../../event_analytics/explorer/visualizations/shared_components/empty_placeholder';
-import { getPropName } from '../../../event_analytics/utils/utils';
+import { getPropName, hexToRgb } from '../../../event_analytics/utils/utils';
 import { Plt } from '../../plotly/plot';
 
 export const Bar = ({ visualizations, layout, config }: any) => {
@@ -54,7 +54,7 @@ export const Bar = ({ visualizations, layout, config }: any) => {
   const fillOpacity =
     dataConfig?.chartStyles?.fillOpacity !== undefined
       ? dataConfig?.chartStyles?.fillOpacity / FILLOPACITY_DIV_FACTOR
-      : visMetaData.fillOpacity / FILLOPACITY_DIV_FACTOR;
+      : visMetaData.fillopacity / FILLOPACITY_DIV_FACTOR;
   const barWidth = 1 - (dataConfig?.chartStyles?.barWidth || visMetaData.barwidth);
   const groupWidth = 1 - (dataConfig?.chartStyles?.groupWidth || visMetaData.groupwidth);
   const showLegend = !(
@@ -65,8 +65,7 @@ export const Bar = ({ visualizations, layout, config }: any) => {
   const legendSize = dataConfig?.legend?.legendSize;
   const getSelectedColorTheme = (field: any, index: number) =>
     (dataConfig?.colorTheme?.length > 0 &&
-      dataConfig.colorTheme.find((colorSelected) => colorSelected.name.name === field.label)
-        ?.color) ||
+      dataConfig.colorTheme.find((colorSelected) => colorSelected.name.name === field)?.color) ||
     PLOTLY_COLOR[index % PLOTLY_COLOR.length];
 
   let bars;
@@ -119,14 +118,16 @@ export const Bar = ({ visualizations, layout, config }: any) => {
   }, [queriedVizData, xaxes, yaxes]);
 
   bars = yaxes?.map((yMetric, idx) => {
+    const selectedColor = getSelectedColorTheme(yMetric.name, idx);
+    const fillColor = hexToRgb(selectedColor, fillOpacity);
     return {
       y: isVertical ? queriedVizData[getPropName(yMetric)] : chartAxis,
       x: isVertical ? chartAxis : queriedVizData[getPropName(yMetric)],
       type: visMetaData.type,
       marker: {
-        color: getSelectedColorTheme(yMetric, idx),
+        color: fillColor,
         line: {
-          color: getSelectedColorTheme(yMetric, idx),
+          color: selectedColor,
           width: lineWidth,
         },
       },

diff --git a/public/components/visualizations/charts/histogram/histogram.tsx b/public/components/visualizations/charts/histogram/histogram.tsx
@@ -58,12 +58,10 @@ export const Histogram = ({ visualizations, layout, config }: any) => {
     xbins.start = dataConfig[GROUPBY][0].bucketOffset;
   }
 
-  const selectedColorTheme = (field: any, index: number, opacity?: number) => {
+  const selectedColorTheme = (field: string, index: number, opacity?: number) => {
     let newColor;
     if (dataConfig?.colorTheme && dataConfig?.colorTheme.length !== 0) {
-      newColor = dataConfig.colorTheme.find(
-        (colorSelected) => colorSelected.name.name === field.name
-      );
+      newColor = dataConfig.colorTheme.find((colorSelected) => colorSelected.name.name === field);
     }
     return hexToRgb(newColor ? newColor.color : PLOTLY_COLOR[index % PLOTLY_COLOR.length], opacity);
   };
@@ -76,9 +74,9 @@ export const Histogram = ({ visualizations, layout, config }: any) => {
         name: field.name,
         hoverinfo: tooltipMode === 'hidden' ? 'none' : tooltipText,
         marker: {
-          color: selectedColorTheme(field, index, fillOpacity),
+          color: selectedColorTheme(field.name, index, fillOpacity),
           line: {
-            color: selectedColorTheme(field, index),
+            color: selectedColorTheme(field.name, index),
             width: lineWidth,
           },
         },

diff --git a/public/components/visualizations/charts/lines/line.tsx b/public/components/visualizations/charts/lines/line.tsx
@@ -33,9 +33,6 @@ export const Line = ({ visualizations, layout, config }: any) => {
   } = DEFAULT_CHART_STYLES;
   const {
     data: {
-      defaultAxes,
-      indexFields,
-      query,
       rawVizData: {
         data: queriedVizData,
         metadata: { fields },
@@ -46,9 +43,7 @@ export const Line = ({ visualizations, layout, config }: any) => {
   }: IVisualizationContainerProps = visualizations;
   const { dataConfig = {}, layoutConfig = {}, availabilityConfig = {} } = userConfigs;
 
-  const yaxis = dataConfig[AGGREGATIONS]
-    ? dataConfig[AGGREGATIONS].filter((item) => item.label)
-    : [];
+  const yaxis = dataConfig[AGGREGATIONS] ? dataConfig[AGGREGATIONS] : [];
   const tooltipMode =
     dataConfig?.tooltipOptions?.tooltipMode !== undefined
       ? dataConfig.tooltipOptions.tooltipMode
@@ -81,8 +76,7 @@ export const Line = ({ visualizations, layout, config }: any) => {
 
   const getSelectedColorTheme = (field: any, index: number) =>
     (dataConfig?.colorTheme?.length > 0 &&
-      dataConfig.colorTheme.find((colorSelected) => colorSelected.name.name === field.name)
-        ?.color) ||
+      dataConfig.colorTheme.find((colorSelected) => colorSelected.name.name === field)?.color) ||
     PLOTLY_COLOR[index % PLOTLY_COLOR.length];
   let xaxis;
   const timestampField = find(fields, (field) => field.type === 'timestamp');
@@ -93,26 +87,14 @@ export const Line = ({ visualizations, layout, config }: any) => {
     xaxis = dataConfig[GROUPBY];
   }
 
-  if (isEmpty(xaxis) || isEmpty(yaxis)) return <EmptyPlaceholder icon={visMetaData?.icontype} />;
-
-  let valueSeries;
-  if (!isEmpty(xaxis) && !isEmpty(yaxis)) {
-    valueSeries = [...yaxis];
-  } else {
-    valueSeries = (
-      defaultAxes.yaxis || take(fields, lastIndex > 0 ? lastIndex : 1)
-    ).map((item, i) => ({ ...item, side: i === 0 ? 'left' : 'right' }));
-  }
-
-  const isDimensionTimestamp = isEmpty(xaxis)
-    ? defaultAxes?.xaxis?.length && defaultAxes.xaxis[0].type === 'timestamp'
-    : xaxis.length === 1 && xaxis[0].type === 'timestamp';
+  if (!timestampField || xaxis.length !== 1 || isEmpty(yaxis))
+    return <EmptyPlaceholder icon={visMetaData?.icontype} />;
 
   let multiMetrics = {};
   const [calculatedLayout, lineValues] = useMemo(() => {
     const isBarMode = mode === 'bar';
-    let calculatedLineValues = valueSeries.map((field: any, index: number) => {
-      const selectedColor = getSelectedColorTheme(field, index);
+    let calculatedLineValues = yaxis.map((field: any, index: number) => {
+      const selectedColor = getSelectedColorTheme(field.name, index);
       const fillColor = hexToRgb(selectedColor, fillOpacity);
       const barMarker = {
         color: fillColor,
@@ -144,7 +126,7 @@ export const Line = ({ visualizations, layout, config }: any) => {
       };
 
       return {
-        x: queriedVizData[!isEmpty(xaxis) ? xaxis[0]?.label : fields[lastIndex].name],
+        x: queriedVizData[!isEmpty(xaxis) ? xaxis[0]?.name : fields[lastIndex].name],
         y: queriedVizData[getPropName(field)],
         type: isBarMode ? 'bar' : 'scatter',
         name: getPropName(field),
@@ -167,6 +149,14 @@ export const Line = ({ visualizations, layout, config }: any) => {
     const layoutForBarMode = {
       barmode: 'group',
     };
+    const axisLabelsStyle = {
+      automargin: true,
+      tickfont: {
+        ...(labelSize && {
+          size: labelSize,
+        }),
+      },
+    };
     const mergedLayout = {
       ...layout,
       ...layoutConfig.layout,
@@ -180,14 +170,13 @@ export const Line = ({ visualizations, layout, config }: any) => {
           },
         }),
       },
+      autosize: true,
       xaxis: {
         tickangle: tickAngle,
-        automargin: true,
-        tickfont: {
-          ...(labelSize && {
-            size: labelSize,
-          }),
-        },
+        ...axisLabelsStyle,
+      },
+      yaxis: {
+        ...axisLabelsStyle,
       },
       showlegend: showLegend,
       ...(isBarMode && layoutForBarMode),
@@ -200,6 +189,7 @@ export const Line = ({ visualizations, layout, config }: any) => {
         y: [],
         mode: 'text',
         text: [],
+        showlegend: false,
       };
       const thresholds = dataConfig.thresholds ? dataConfig.thresholds : [];
       const levels = availabilityConfig.level ? availabilityConfig.level : [];
@@ -208,16 +198,16 @@ export const Line = ({ visualizations, layout, config }: any) => {
         return list.map((thr: ThresholdUnitType) => {
           thresholdTraces.x.push(
             queriedVizData[
-              !isEmpty(xaxis) ? xaxis[xaxis.length - 1]?.label : fields[lastIndex].name
+              !isEmpty(xaxis) ? xaxis[xaxis.length - 1]?.name : fields[lastIndex].name
             ][0]
           );
           thresholdTraces.y.push(thr.value * (1 + 0.06));
           thresholdTraces.text.push(thr.name);
           return {
             type: 'line',
-            x0: queriedVizData[!isEmpty(xaxis) ? xaxis[0]?.label : fields[lastIndex].name][0],
+            x0: queriedVizData[!isEmpty(xaxis) ? xaxis[0]?.name : fields[lastIndex].name][0],
             y0: thr.value,
-            x1: last(queriedVizData[!isEmpty(xaxis) ? xaxis[0]?.label : fields[lastIndex].name]),
+            x1: last(queriedVizData[!isEmpty(xaxis) ? xaxis[0]?.name : fields[lastIndex].name]),
             y1: thr.value,
             name: thr.name || '',
             opacity: 0.7,
@@ -231,13 +221,16 @@ export const Line = ({ visualizations, layout, config }: any) => {
       };
 
       mergedLayout.shapes = [
-        ...mapToLine(thresholds, { dash: 'dashdot' }),
+        ...mapToLine(
+          thresholds.filter((i: ThresholdUnitType) => i.value !== ''),
+          { dash: 'dashdot' }
+        ),
         ...mapToLine(levels, {}),
       ];
       calculatedLineValues = [...calculatedLineValues, thresholdTraces];
     }
     return [mergedLayout, calculatedLineValues];
-  }, [queriedVizData, fields, lastIndex, layout, layoutConfig, xaxis, yaxis, mode, valueSeries]);
+  }, [queriedVizData, fields, lastIndex, layout, layoutConfig, xaxis, mode, yaxis, labelSize]);
 
   const mergedConfigs = useMemo(
     () => ({
@@ -247,9 +240,5 @@ export const Line = ({ visualizations, layout, config }: any) => {
     [config, layoutConfig.config]
   );
 
-  return isDimensionTimestamp ? (
-    <Plt data={lineValues} layout={calculatedLayout} config={mergedConfigs} />
-  ) : (
-    <EmptyPlaceholder icon={visMetaData?.icontype} />
-  );
+  return <Plt data={lineValues} layout={calculatedLayout} config={mergedConfigs} />;
 };