fix(ui): improve single stat computation

CHANGELOG.md

@@ -7,6 +7,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