[TSVB] fix wrong labels, for values that are implicitly cast to false (#103631)

* [TSVB] fix wrong labels, for values that are implicitly cast to false

* getMeaningfulValueOrEmpty  -> getValueOrEmpty

* fix CI

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}`;
+};

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(

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 (
       <tr key={row.key}>
-        <td>{rowDisplay || emptyLabel}</td>
+        <td>{getValueOrEmpty(rowDisplay)}</td>
         {columns}
       </tr>
     );

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}
           />

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,
       },

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}

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 (
         <tr key={key} onClick={this.handleClick({ lastValue, ...item })} style={styles.row}>
           <td title={item.label} className="tvbVisTopN__label" style={styles.label}>
-            {label || emptyLabel}
+            {getValueOrEmpty(label)}
           </td>
           <td width="100%" className="tvbVisTopN__bar">
             <div className="tvbVisTopN__innerBar" style={styles.innerBar}>