fix(ui): improve single stat computation

The method we used to compute a single stat / gauge value previously did
account for missing data. If the latest value in a response was part of
a numeric column but was null/NaN/not defined, the single stat
computation would fail and a user would see an error message "Could not
display single stat because your values are non-numeric".

This commit updates the single stat computation to find the latest
*defined* numeric values.

If no latest valid numeric values are found, we will either:

- Display an error message if using the compuation within a single stat
  visualization
- Display nothing if using the computation within a within a line +
  single stat visualization (i.e. display the line vis only)

If multiple latest values are found, we make an arbitrary selection
(same as previous behavior). The goal is to eventually expose UI
elements to the user so they can make this selection themselves.

This commit also updates the single stat computation to use the
@influxdata/vis `Table` format as an intermediate/parsed representation
of a Flux CSV response. This unlocks the possibility for performance
gains in our CSV parsing. See #13852.

Closes #13824

CHANGELOG.md

@@ -11,6 +11,7 @@
 1. [13800](https://github.com/influxdata/influxdb/pull/13800): Generate more idiomatic Flux in query builder
 1. [13797](https://github.com/influxdata/influxdb/pull/13797): Expand tab key presses to 2 spaces in the Flux editor
 1. [13823](https://github.com/influxdata/influxdb/pull/13823): Prevent dragging of Variable Dropdowns when dragging a scrollbar inside the dropdown
+1. [13853](https://github.com/influxdata/influxdb/pull/13853): Improve single stat computation
 
 ### UI Improvements
 1. [#13835](https://github.com/influxdata/influxdb/pull/13835): Render checkboxes in query builder tag selection lists

ui/src/shared/components/GaugeChart.test.tsx

@@ -4,71 +4,29 @@ import Gauge from 'src/shared/components/Gauge'
 import GaugeChart from 'src/shared/components/GaugeChart'
 import {ViewType, ViewShape, GaugeView} from 'src/types/dashboards'
 
-const tables = [
-  {
-    id: '54797afd-734d-4ca3-94b6-3a7870c53b27',
-    data: [
-      ['', 'result', 'table', '_time', 'mean', '_measurement'],
-      ['', '', '0', '2018-09-27T16:50:10Z', '2', 'cpu'],
-    ],
-    name: '_measurement=cpu',
-    groupKey: {
-      _measurement: 'cpu',
-    },
-    dataTypes: {
-      '': '#datatype',
-      result: 'string',
-      table: 'long',
-      _time: 'dateTime:RFC3339',
-      mean: 'double',
-      _measurement: 'string',
-    },
-  },
-]
-
-const properties: GaugeView = {
-  queries: [],
-  colors: [],
-  shape: ViewShape.ChronografV2,
-  type: ViewType.Gauge,
-  prefix: '',
-  suffix: '',
-  note: '',
-  showNoteWhenEmpty: false,
-  decimalPlaces: {
-    digits: 10,
-    isEnforced: false,
-  },
-}
-
-const defaultProps = {
-  tables: [],
-  properties,
-}
-
-const setup = (overrides = {}) => {
-  const props = {
-    ...defaultProps,
-    ...overrides,
-  }
-
-  return shallow(<GaugeChart {...props} />)
-}
-
 describe('GaugeChart', () => {
   describe('render', () => {
-    describe('when data is empty', () => {
-      it('renders the correct number', () => {
-        const wrapper = setup()
-
-        expect(wrapper.find(Gauge).exists()).toBe(true)
-        expect(wrapper.find(Gauge).props().gaugePosition).toBe(0)
-      })
-    })
-
     describe('when data has a value', () => {
       it('renders the correct number', () => {
-        const wrapper = setup({tables})
+        const props = {
+          value: 2,
+          properties: {
+            queries: [],
+            colors: [],
+            shape: ViewShape.ChronografV2,
+            type: ViewType.Gauge,
+            prefix: '',
+            suffix: '',
+            note: '',
+            showNoteWhenEmpty: false,
+            decimalPlaces: {
+              digits: 10,
+              isEnforced: false,
+            },
+          } as GaugeView,
+        }
+
+        const wrapper = shallow(<GaugeChart {...props} />)
 
         expect(wrapper.find(Gauge).exists()).toBe(true)
         expect(wrapper.find(Gauge).props().gaugePosition).toBe(2)

ui/src/shared/components/GaugeChart.tsx

@@ -1,35 +1,26 @@
 // Libraries
 import React, {PureComponent} from 'react'
-import memoizeOne from 'memoize-one'
 import _ from 'lodash'
 
 // Components
 import Gauge from 'src/shared/components/Gauge'
 
-// Parsing
-import {lastValue} from 'src/shared/parsing/flux/lastValue'
-
 // Types
-import {FluxTable} from 'src/types'
 import {GaugeView} from 'src/types/dashboards'
 
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props {
-  tables: FluxTable[]
+  value: number
   properties: GaugeView
 }
 
 @ErrorHandling
 class GaugeChart extends PureComponent<Props> {
-  private lastValue = memoizeOne(lastValue)
-
   public render() {
-    const {tables} = this.props
+    const {value} = this.props
     const {colors, prefix, suffix, decimalPlaces} = this.props.properties
 
-    const lastValue = this.lastValue(tables) || 0
-
     return (
       <div className="single-stat">
         <Gauge
@@ -38,7 +29,7 @@ class GaugeChart extends PureComponent<Props> {
           colors={colors}
           prefix={prefix}
           suffix={suffix}
-          gaugePosition={lastValue}
+          gaugePosition={value}
           decimalPlaces={decimalPlaces}
         />
       </div>

ui/src/shared/components/LatestValueTransform.tsx

@@ -0,0 +1,40 @@
+// Libraries
+import React, {useMemo, FunctionComponent} from 'react'
+import {Table} from '@influxdata/vis'
+
+// Components
+import EmptyGraphMessage from 'src/shared/components/EmptyGraphMessage'
+
+// Utils
+import {latestValues as getLatestValues} from 'src/shared/utils/latestValues'
+
+interface Props {
+  table: Table
+  children: (latestValue: number) => JSX.Element
+
+  // If `quiet` is set and a latest value can't be found, this component will
+  // display nothing instead of an empty graph error message
+  quiet?: boolean
+}
+
+const LatestValueTransform: FunctionComponent<Props> = ({
+  table,
+  quiet = false,
+  children,
+}) => {
+  const latestValues = useMemo(() => getLatestValues(table), [table])
+
+  if (latestValues.length === 0 && quiet) {
+    return null
+  }
+
+  if (latestValues.length === 0) {
+    return <EmptyGraphMessage message="No latest value found" />
+  }
+
+  const latestValue = latestValues[0]
+
+  return children(latestValue)
+}
+
+export default LatestValueTransform