From 624176034172ef44924d038ced4ff33d69c6ad0a Mon Sep 17 00:00:00 2001 From: ramneet-persistent <105915936+ramneet-persistent@users.noreply.github.com> Date: Thu, 13 Oct 2022 05:29:52 +0530 Subject: [PATCH] Time series/scatter bugs fixed (#1113) * Fixed threshold crashes and color theme not applying on bar, line, scatter and histogram Signed-off-by: ruchika-narang * bugs fixed testing: in progress Signed-off-by: Ramneet Chopra * testing + fixing done Signed-off-by: Ramneet Chopra * bar crash fixed Signed-off-by: Ramneet Chopra * histogrm color theme options fixed Signed-off-by: Ramneet Chopra * log removed Signed-off-by: Ramneet Chopra Signed-off-by: ruchika-narang Signed-off-by: Ramneet Chopra Co-authored-by: ruchika-narang --- .../config_controls/config_color_theme.tsx | 10 +-- .../visualizations/charts/bar/bar.tsx | 13 ++-- .../charts/histogram/histogram.tsx | 10 ++- .../visualizations/charts/lines/line.tsx | 71 ++++++++----------- 4 files changed, 47 insertions(+), 57 deletions(-) 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 227fefbfa..f91c03843 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 9f67d0f35..c6ddc9a3a 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 dab7ff564..9335d39af 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 d9b6a79fb..ba6740775 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 ; };