diff --git a/src/plugins/vis_type_timeseries/common/empty_label.ts b/src/plugins/vis_type_timeseries/common/empty_label.ts index d55a58f17dbf3..d95e8fe3f7f16 100644 --- a/src/plugins/vis_type_timeseries/common/empty_label.ts +++ b/src/plugins/vis_type_timeseries/common/empty_label.ts @@ -11,3 +11,10 @@ import { i18n } from '@kbn/i18n'; export const emptyLabel = i18n.translate('visTypeTimeseries.emptyTextValue', { defaultMessage: '(empty)', }); + +export const getValueOrEmpty = (value: unknown) => { + if (value === '' || value === null || value === undefined) { + return emptyLabel; + } + return `${value}`; +}; diff --git a/src/plugins/vis_type_timeseries/public/application/components/lib/convert_series_to_vars.js b/src/plugins/vis_type_timeseries/public/application/components/lib/convert_series_to_vars.js index 3616a8c8b348d..816bce5dac75b 100644 --- a/src/plugins/vis_type_timeseries/public/application/components/lib/convert_series_to_vars.js +++ b/src/plugins/vis_type_timeseries/public/application/components/lib/convert_series_to_vars.js @@ -9,7 +9,7 @@ import { set } from '@elastic/safer-lodash-set'; import _ from 'lodash'; import { getLastValue } from '../../../../common/last_value_utils'; -import { emptyLabel } from '../../../../common/empty_label'; +import { getValueOrEmpty, emptyLabel } from '../../../../common/empty_label'; import { createTickFormatter } from './tick_formatter'; import { labelDateFormatter } from './label_date_formatter'; import moment from 'moment'; @@ -20,7 +20,12 @@ export const convertSeriesToVars = (series, model, dateFormat = 'lll', getConfig series .filter((row) => _.startsWith(row.id, seriesModel.id)) .forEach((row) => { - const label = row.label ? _.snakeCase(row.label) : emptyLabel; + let label = getValueOrEmpty(row.label); + + if (label !== emptyLabel) { + label = _.snakeCase(label); + } + const varName = [label, _.snakeCase(seriesModel.var_name)].filter((v) => v).join('.'); const formatter = createTickFormatter( diff --git a/src/plugins/vis_type_timeseries/public/application/components/vis_types/table/vis.js b/src/plugins/vis_type_timeseries/public/application/components/vis_types/table/vis.js index 8f19644132d3f..4dd8f672c9ea3 100644 --- a/src/plugins/vis_type_timeseries/public/application/components/vis_types/table/vis.js +++ b/src/plugins/vis_type_timeseries/public/application/components/vis_types/table/vis.js @@ -18,7 +18,7 @@ import { replaceVars } from '../../lib/replace_vars'; import { fieldFormats } from '../../../../../../../plugins/data/public'; import { FormattedMessage } from '@kbn/i18n/react'; import { getFieldFormats, getCoreStart } from '../../../../services'; -import { emptyLabel } from '../../../../../common/empty_label'; +import { getValueOrEmpty } from '../../../../../common/empty_label'; function getColor(rules, colorKey, value) { let color; @@ -98,7 +98,7 @@ class TableVis extends Component { }); return ( - {rowDisplay || emptyLabel} + {getValueOrEmpty(rowDisplay)} {columns} ); diff --git a/src/plugins/vis_type_timeseries/public/application/components/vis_with_splits.js b/src/plugins/vis_type_timeseries/public/application/components/vis_with_splits.js index 4b933bc81d882..e55c5d708e481 100644 --- a/src/plugins/vis_type_timeseries/public/application/components/vis_with_splits.js +++ b/src/plugins/vis_type_timeseries/public/application/components/vis_with_splits.js @@ -10,7 +10,7 @@ import React, { useCallback } from 'react'; import { getDisplayName } from './lib/get_display_name'; import { labelDateFormatter } from './lib/label_date_formatter'; import { findIndex, first } from 'lodash'; -import { emptyLabel } from '../../../common/empty_label'; +import { getValueOrEmpty } from '../../../common/empty_label'; import { getSplitByTermsColor } from '../lib/get_split_by_terms_color'; export function visWithSplits(WrappedComponent) { @@ -110,7 +110,7 @@ export function visWithSplits(WrappedComponent) { visData={newVisData} onBrush={props.onBrush} onFilterClick={props.onFilterClick} - additionalLabel={additionalLabel || emptyLabel} + additionalLabel={getValueOrEmpty(additionalLabel)} backgroundColor={props.backgroundColor} getConfig={props.getConfig} /> diff --git a/src/plugins/vis_type_timeseries/public/application/lib/get_split_by_terms_color.ts b/src/plugins/vis_type_timeseries/public/application/lib/get_split_by_terms_color.ts index 028ce3d028997..e02965c1b0657 100644 --- a/src/plugins/vis_type_timeseries/public/application/lib/get_split_by_terms_color.ts +++ b/src/plugins/vis_type_timeseries/public/application/lib/get_split_by_terms_color.ts @@ -10,7 +10,7 @@ import { PALETTES } from '../../../common/enums'; import type { PanelData } from '../../../common/types'; import { computeGradientFinalColor } from './compute_gradient_final_color'; import { rainbowColors } from './rainbow_colors'; -import { emptyLabel } from '../../../common/empty_label'; +import { getValueOrEmpty } from '../../../common/empty_label'; interface PaletteParams { colors: string[]; @@ -61,7 +61,7 @@ export const getSplitByTermsColor = ({ const outputColor = palettesRegistry?.get(paletteName || 'default').getCategoricalColor( [ { - name: seriesName || emptyLabel, + name: getValueOrEmpty(seriesName), rankAtDepth: seriesById.findIndex(({ id }) => id === seriesId), totalSeriesAtDepth: seriesById.length, }, diff --git a/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js b/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js index a4d834ea8d217..ed62c0909e51b 100644 --- a/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js +++ b/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js @@ -31,7 +31,7 @@ import { BarSeriesDecorator } from './decorators/bar_decorator'; import { getStackAccessors } from './utils/stack_format'; import { getBaseTheme, getChartClasses } from './utils/theme'; import { TOOLTIP_MODES } from '../../../../../common/enums'; -import { emptyLabel } from '../../../../../common/empty_label'; +import { getValueOrEmpty } from '../../../../../common/empty_label'; import { getSplitByTermsColor } from '../../../lib/get_split_by_terms_color'; import { renderEndzoneTooltip } from '../../../../../../charts/public'; import { getAxisLabelString } from '../../../components/lib/get_axis_label_string'; @@ -237,7 +237,7 @@ export const TimeSeries = ({ key={key} seriesId={id} seriesGroupId={groupId} - name={seriesName || emptyLabel} + name={getValueOrEmpty(seriesName)} data={data} hideInLegend={hideInLegend} bars={bars} @@ -262,7 +262,7 @@ export const TimeSeries = ({ key={key} seriesId={id} seriesGroupId={groupId} - name={seriesName || emptyLabel} + name={getValueOrEmpty(seriesName)} data={data} hideInLegend={hideInLegend} lines={lines} diff --git a/src/plugins/vis_type_timeseries/public/application/visualizations/views/top_n.js b/src/plugins/vis_type_timeseries/public/application/visualizations/views/top_n.js index 0c43ab157fbbb..9d6381f21b11f 100644 --- a/src/plugins/vis_type_timeseries/public/application/visualizations/views/top_n.js +++ b/src/plugins/vis_type_timeseries/public/application/visualizations/views/top_n.js @@ -10,7 +10,7 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { getLastValue, isEmptyValue } from '../../../../common/last_value_utils'; import { labelDateFormatter } from '../../components/lib/label_date_formatter'; -import { emptyLabel } from '../../../../common/empty_label'; +import { getValueOrEmpty } from '../../../../common/empty_label'; import reactcss from 'reactcss'; const RENDER_MODES = { @@ -131,7 +131,7 @@ export class TopN extends Component { return ( - {label || emptyLabel} + {getValueOrEmpty(label)}