diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_theme.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_theme.tsx
index 227fefbfa6..f91c038436 100644
--- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_theme.tsx
+++ b/public/components/event_analytics/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
index 9f67d0f355..c6ddc9a3a6 100644
--- 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
index dab7ff564d..9335d39af9 100644
--- 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
index d9b6a79fb6..ba67407755 100644
--- 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 ;
-
- 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 ;
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 ? (
-
- ) : (
-
- );
+ return ;
};