Displaying the default message if invalid value (#36737) (#36963)

x-pack/plugins/monitoring/public/components/chart/horizontal_legend.js

@@ -19,27 +19,48 @@ class HorizontalLegendUI extends React.Component {
   }
 
   /**
-   * @param {Number} value The value to format and show in the horizontal
-   * legend. A null means no data for the time bucket and will be formatted as
-  * 'N/A'
+   * @param {Number} value Final value to display
    */
-  formatter(value) {
-    if (value === null) {
+  displayValue(value) {
+    return (
+      <span className="monRhythmChart__legendValue">
+        { value }
+      </span>
+    );
+  }
+
+  /**
+   * @param {Number} value True if value is falsy and/or not a number
+   */
+  validValue(value) {
+    return value !== null && value !== undefined && (typeof value === 'string' || !isNaN(value));
+  }
+
+  /**
+   * @param {Number} value The value to format and show in the horizontallegend.
+   * A null means no data for the time bucket and will be formatted as 'N/A'
+   * @param {Object} row Props passed form a parent by row index
+   */
+  formatter(value, row) {
+    if (!this.validValue(value)) {
       return (<FormattedMessage
         id="xpack.monitoring.chart.horizontalLegend.notAvailableLabel"
         defaultMessage="N/A"
       />);
     }
-    if (isFunction(this.props.tickFormatter)) {
-      return this.props.tickFormatter(value);
+
+    if (row && row.tickFormatter) {
+      return this.displayValue(row.tickFormatter(value));
     }
-    return value;
+
+    if (isFunction(this.props.tickFormatter)) {
+      return this.displayValue(this.props.tickFormatter(value));
+    }
+    return this.displayValue(value);
   }
 
   createSeries(row, rowIdx) {
     const { intl } = this.props;
-    const formatter = row.tickFormatter || this.formatter;
-    const value = formatter(this.props.seriesValues[row.id]);
     const classes = ['col-md-4 col-xs-6 monRhythmChart__legendItem'];
 
     if (!includes(this.props.seriesFilter, row.id)) {
@@ -69,11 +90,9 @@ class HorizontalLegendUI extends React.Component {
                 defaultMessage: 'toggle button'
               })}
             />
-            { ' ' + row.label }
-          </span>
-          <span className="monRhythmChart__legendValue">
-            { ' ' + value }
+            { ' ' + row.label + ' ' }
           </span>
+          { this.formatter(this.props.seriesValues[row.id], row) }
         </div>
       </EuiKeyboardAccessible>
     );