fix: prevent invisible tooltips for the zero value of legendOpacity f…

…rom the api (#102) * fix: prevent invisible tooltips for the zero value of legendOpacity from the api * refactor: put legendOpacity and legendOrientationThreshold into their own hooks
influxdata · Sep 24, 2020 · b7dd3ed · b7dd3ed
1 parent 7209a98
commit b7dd3ed
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 114 deletions.
diff --git a/src/shared/components/BandPlot.tsx b/src/shared/components/BandPlot.tsx
@@ -8,7 +8,10 @@ import {get} from 'lodash'
 import EmptyGraphMessage from 'src/shared/components/EmptyGraphMessage'
 
 // Utils
-import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+import {
+  useLegendOpacity,
+  useLegendOrientationThreshold,
+} from 'src/shared/utils/useLegendOrientation'
 import {
   useVisXDomainSettings,
   useVisYDomainSettings,
@@ -30,7 +33,6 @@ import {
   BAND_LINE_OPACITY,
   BAND_LINE_WIDTH,
   BAND_SHADE_OPACITY,
-  LEGEND_OPACITY_DEFAULT,
   QUERY_BUILDER_MODE,
   VIS_THEME,
   VIS_THEME_LIGHT,
@@ -119,19 +121,10 @@ const BandPlot: FC<Props> = ({
     )
   }, [activeQueryIndex, queries, upperColumnName, mainColumn, lowerColumnName])
 
-  const tooltipOpacity = useMemo(() => {
-    if (isFlagEnabled('legendOrientation')) {
-      return legendOpacity
-    }
-    return LEGEND_OPACITY_DEFAULT
-  }, [legendOpacity])
-
-  const tooltipOrientationThreshold = useMemo(() => {
-    if (isFlagEnabled('legendOrientation')) {
-      return legendOrientationThreshold
-    }
-    return undefined
-  }, [legendOrientationThreshold])
+  const tooltipOpacity = useLegendOpacity(legendOpacity)
+  const tooltipOrientationThreshold = useLegendOrientationThreshold(
+    legendOrientationThreshold
+  )
 
   const storedXDomain = useMemo(() => parseXBounds(xBounds), [xBounds])
   const storedYDomain = useMemo(() => parseYBounds(yBounds), [yBounds])

diff --git a/src/shared/components/HeatmapPlot.tsx b/src/shared/components/HeatmapPlot.tsx
@@ -1,24 +1,23 @@
 // Libraries
-import React, {FunctionComponent, useMemo} from 'react'
+import React, {FunctionComponent} from 'react'
 import {Config, Table} from '@influxdata/giraffe'
 
 // Components
 import EmptyGraphMessage from 'src/shared/components/EmptyGraphMessage'
 
 // Utils
-import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+import {
+  useLegendOpacity,
+  useLegendOrientationThreshold,
+} from 'src/shared/utils/useLegendOrientation'
 import {
   useVisXDomainSettings,
   useVisYDomainSettings,
 } from 'src/shared/utils/useVisDomainSettings'
 import {getFormatter} from 'src/shared/utils/vis'
 
 // Constants
-import {
-  LEGEND_OPACITY_DEFAULT,
-  VIS_THEME,
-  VIS_THEME_LIGHT,
-} from 'src/shared/constants'
+import {VIS_THEME, VIS_THEME_LIGHT} from 'src/shared/constants'
 import {DEFAULT_LINE_COLORS} from 'src/shared/constants/graphColorPalettes'
 import {INVALID_DATA_COPY} from 'src/shared/copy/cell'
 
@@ -60,19 +59,10 @@ const HeatmapPlot: FunctionComponent<Props> = ({
 }) => {
   const columnKeys = table.columnKeys
 
-  const tooltipOpacity = useMemo(() => {
-    if (isFlagEnabled('legendOrientation')) {
-      return legendOpacity
-    }
-    return LEGEND_OPACITY_DEFAULT
-  }, [legendOpacity])
-
-  const tooltipOrientationThreshold = useMemo(() => {
-    if (isFlagEnabled('legendOrientation')) {
-      return legendOrientationThreshold
-    }
-    return undefined
-  }, [legendOrientationThreshold])
+  const tooltipOpacity = useLegendOpacity(legendOpacity)
+  const tooltipOrientationThreshold = useLegendOrientationThreshold(
+    legendOrientationThreshold
+  )
 
   const [xDomain, onSetXDomain, onResetXDomain] = useVisXDomainSettings(
     storedXDomain,

diff --git a/src/shared/components/HistogramPlot.tsx b/src/shared/components/HistogramPlot.tsx
@@ -1,21 +1,20 @@
 // Libraries
-import React, {FunctionComponent, useMemo} from 'react'
+import React, {FunctionComponent} from 'react'
 import {Config, Table} from '@influxdata/giraffe'
 
 // Components
 import EmptyGraphMessage from 'src/shared/components/EmptyGraphMessage'
 
 // Utils
-import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+import {
+  useLegendOpacity,
+  useLegendOrientationThreshold,
+} from 'src/shared/utils/useLegendOrientation'
 import {useVisXDomainSettings} from 'src/shared/utils/useVisDomainSettings'
 import {getFormatter} from 'src/shared/utils/vis'
 
 // Constants
-import {
-  LEGEND_OPACITY_DEFAULT,
-  VIS_THEME,
-  VIS_THEME_LIGHT,
-} from 'src/shared/constants'
+import {VIS_THEME, VIS_THEME_LIGHT} from 'src/shared/constants'
 import {DEFAULT_LINE_COLORS} from 'src/shared/constants/graphColorPalettes'
 import {INVALID_DATA_COPY} from 'src/shared/copy/cell'
 
@@ -49,19 +48,10 @@ const HistogramPlot: FunctionComponent<Props> = ({
 }) => {
   const columnKeys = table.columnKeys
 
-  const tooltipOpacity = useMemo(() => {
-    if (isFlagEnabled('legendOrientation')) {
-      return legendOpacity
-    }
-    return LEGEND_OPACITY_DEFAULT
-  }, [legendOpacity])
-
-  const tooltipOrientationThreshold = useMemo(() => {
-    if (isFlagEnabled('legendOrientation')) {
-      return legendOrientationThreshold
-    }
-    return undefined
-  }, [legendOrientationThreshold])
+  const tooltipOpacity = useLegendOpacity(legendOpacity)
+  const tooltipOrientationThreshold = useLegendOrientationThreshold(
+    legendOrientationThreshold
+  )
 
   const [xDomain, onSetXDomain, onResetXDomain] = useVisXDomainSettings(
     storedXDomain,

diff --git a/src/shared/components/MosaicPlot.tsx b/src/shared/components/MosaicPlot.tsx
@@ -1,24 +1,23 @@
 // Libraries
-import React, {FunctionComponent, useMemo} from 'react'
+import React, {FunctionComponent} from 'react'
 import {Config, Table} from '@influxdata/giraffe'
 
 // Components
 import EmptyGraphMessage from 'src/shared/components/EmptyGraphMessage'
 
 // Utils
-import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+import {
+  useLegendOpacity,
+  useLegendOrientationThreshold,
+} from 'src/shared/utils/useLegendOrientation'
 import {
   useVisXDomainSettings,
   useVisYDomainSettings,
 } from 'src/shared/utils/useVisDomainSettings'
 import {getFormatter, defaultXColumn, mosaicYcolumn} from 'src/shared/utils/vis'
 
 // Constants
-import {
-  LEGEND_OPACITY_DEFAULT,
-  VIS_THEME,
-  VIS_THEME_LIGHT,
-} from 'src/shared/constants'
+import {VIS_THEME, VIS_THEME_LIGHT} from 'src/shared/constants'
 import {DEFAULT_LINE_COLORS} from 'src/shared/constants/graphColorPalettes'
 import {INVALID_DATA_COPY} from 'src/shared/copy/cell'
 
@@ -65,19 +64,10 @@ const MosaicPlot: FunctionComponent<Props> = ({
   }
   const columnKeys = table.columnKeys
 
-  const tooltipOpacity = useMemo(() => {
-    if (isFlagEnabled('legendOrientation')) {
-      return legendOpacity
-    }
-    return LEGEND_OPACITY_DEFAULT
-  }, [legendOpacity])
-
-  const tooltipOrientationThreshold = useMemo(() => {
-    if (isFlagEnabled('legendOrientation')) {
-      return legendOrientationThreshold
-    }
-    return undefined
-  }, [legendOrientationThreshold])
+  const tooltipOpacity = useLegendOpacity(legendOpacity)
+  const tooltipOrientationThreshold = useLegendOrientationThreshold(
+    legendOrientationThreshold
+  )
 
   const [xDomain, onSetXDomain, onResetXDomain] = useVisXDomainSettings(
     storedXDomain,

diff --git a/src/shared/components/ScatterPlot.tsx b/src/shared/components/ScatterPlot.tsx
@@ -1,12 +1,15 @@
 // Libraries
-import React, {FunctionComponent, useMemo} from 'react'
+import React, {FunctionComponent} from 'react'
 import {Config, Table} from '@influxdata/giraffe'
 
 // Components
 import EmptyGraphMessage from 'src/shared/components/EmptyGraphMessage'
 
 // Utils
-import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+import {
+  useLegendOpacity,
+  useLegendOrientationThreshold,
+} from 'src/shared/utils/useLegendOrientation'
 import {
   useVisXDomainSettings,
   useVisYDomainSettings,
@@ -18,11 +21,7 @@ import {
 } from 'src/shared/utils/vis'
 
 // Constants
-import {
-  LEGEND_OPACITY_DEFAULT,
-  VIS_THEME,
-  VIS_THEME_LIGHT,
-} from 'src/shared/constants'
+import {VIS_THEME, VIS_THEME_LIGHT} from 'src/shared/constants'
 import {DEFAULT_LINE_COLORS} from 'src/shared/constants/graphColorPalettes'
 import {INVALID_DATA_COPY} from 'src/shared/copy/cell'
 
@@ -70,19 +69,10 @@ const ScatterPlot: FunctionComponent<Props> = ({
 
   const columnKeys = table.columnKeys
 
-  const tooltipOpacity = useMemo(() => {
-    if (isFlagEnabled('legendOrientation')) {
-      return legendOpacity
-    }
-    return LEGEND_OPACITY_DEFAULT
-  }, [legendOpacity])
-
-  const tooltipOrientationThreshold = useMemo(() => {
-    if (isFlagEnabled('legendOrientation')) {
-      return legendOrientationThreshold
-    }
-    return undefined
-  }, [legendOrientationThreshold])
+  const tooltipOpacity = useLegendOpacity(legendOpacity)
+  const tooltipOrientationThreshold = useLegendOrientationThreshold(
+    legendOrientationThreshold
+  )
 
   const [xDomain, onSetXDomain, onResetXDomain] = useVisXDomainSettings(
     storedXDomain,

diff --git a/src/shared/components/XYPlot.tsx b/src/shared/components/XYPlot.tsx
@@ -12,7 +12,10 @@ import {
 import EmptyGraphMessage from 'src/shared/components/EmptyGraphMessage'
 
 // Utils
-import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+import {
+  useLegendOpacity,
+  useLegendOrientationThreshold,
+} from 'src/shared/utils/useLegendOrientation'
 import {
   useVisXDomainSettings,
   useVisYDomainSettings,
@@ -28,11 +31,7 @@ import {
 } from 'src/shared/utils/vis'
 
 // Constants
-import {
-  LEGEND_OPACITY_DEFAULT,
-  VIS_THEME,
-  VIS_THEME_LIGHT,
-} from 'src/shared/constants'
+import {VIS_THEME, VIS_THEME_LIGHT} from 'src/shared/constants'
 import {DEFAULT_LINE_COLORS} from 'src/shared/constants/graphColorPalettes'
 import {INVALID_DATA_COPY} from 'src/shared/copy/cell'
 
@@ -85,19 +84,10 @@ const XYPlot: FC<Props> = ({
   },
   theme,
 }) => {
-  const tooltipOpacity = useMemo(() => {
-    if (isFlagEnabled('legendOrientation')) {
-      return legendOpacity
-    }
-    return LEGEND_OPACITY_DEFAULT
-  }, [legendOpacity])
-
-  const tooltipOrientationThreshold = useMemo(() => {
-    if (isFlagEnabled('legendOrientation')) {
-      return legendOrientationThreshold
-    }
-    return undefined
-  }, [legendOrientationThreshold])
+  const tooltipOpacity = useLegendOpacity(legendOpacity)
+  const tooltipOrientationThreshold = useLegendOrientationThreshold(
+    legendOrientationThreshold
+  )
 
   const storedXDomain = useMemo(() => parseXBounds(xBounds), [xBounds])
   const storedYDomain = useMemo(() => parseYBounds(yBounds), [yBounds])

diff --git a/src/shared/utils/useLegendOrientation.ts b/src/shared/utils/useLegendOrientation.ts
@@ -0,0 +1,27 @@
+import {useMemo} from 'react'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+import {
+  LEGEND_OPACITY_DEFAULT,
+  LEGEND_OPACITY_MINIMUM,
+} from 'src/shared/constants'
+
+export const useLegendOpacity = (legendOpacity: number) =>
+  useMemo(() => {
+    if (
+      !isFlagEnabled('legendOrientation') ||
+      legendOpacity < LEGEND_OPACITY_MINIMUM
+    ) {
+      return LEGEND_OPACITY_DEFAULT
+    }
+    return legendOpacity
+  }, [legendOpacity])
+
+export const useLegendOrientationThreshold = (
+  legendOrientationThreshold: number
+) =>
+  useMemo(() => {
+    if (isFlagEnabled('legendOrientation')) {
+      return legendOrientationThreshold
+    }
+    return undefined
+  }, [legendOrientationThreshold])