refactor: put legendOpacity and legendOrientationThreshold into their…

… own hooks
influxdata · Sep 24, 2020 · aa8280a · aa8280a
1 parent 0d6d20a
commit aa8280a
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 132 deletions.
diff --git a/src/shared/components/BandPlot.tsx b/src/shared/components/BandPlot.tsx
@@ -7,7 +7,10 @@ import {Config, Table} from '@influxdata/giraffe'
 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,
@@ -29,8 +32,6 @@ import {
   BAND_LINE_OPACITY,
   BAND_LINE_WIDTH,
   BAND_SHADE_OPACITY,
-  LEGEND_OPACITY_DEFAULT,
-  LEGEND_OPACITY_MINIMUM,
   VIS_THEME,
   VIS_THEME_LIGHT,
 } from 'src/shared/constants'
@@ -108,23 +109,11 @@ const BandPlot: FC<Props> = ({
     [selectedFunctions, upperColumnName, mainColumn, lowerColumnName]
   )
 
-  const tooltipOpacity = Math.max(
-    useMemo(() => {
-      if (isFlagEnabled('legendOrientation')) {
-        return legendOpacity
-      }
-      return LEGEND_OPACITY_DEFAULT
-    }, [legendOpacity]),
-    LEGEND_OPACITY_MINIMUM
+  const tooltipOpacity = useLegendOpacity(legendOpacity)
+  const tooltipOrientationThreshold = useLegendOrientationThreshold(
+    legendOrientationThreshold
   )
 
-  const tooltipOrientationThreshold = useMemo(() => {
-    if (isFlagEnabled('legendOrientation')) {
-      return legendOrientationThreshold
-    }
-    return undefined
-  }, [legendOrientationThreshold])
-
   const storedXDomain = useMemo(() => parseXBounds(xBounds), [xBounds])
   const storedYDomain = useMemo(() => parseYBounds(yBounds), [yBounds])
   const xColumn = storedXColumn || defaultXColumn(table, '_time')

diff --git a/src/shared/components/HeatmapPlot.tsx b/src/shared/components/HeatmapPlot.tsx
@@ -1,25 +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,
-  LEGEND_OPACITY_MINIMUM,
-  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'
 
@@ -61,23 +59,11 @@ const HeatmapPlot: FunctionComponent<Props> = ({
 }) => {
   const columnKeys = table.columnKeys
 
-  const tooltipOpacity = Math.max(
-    useMemo(() => {
-      if (isFlagEnabled('legendOrientation')) {
-        return legendOpacity
-      }
-      return LEGEND_OPACITY_DEFAULT
-    }, [legendOpacity]),
-    LEGEND_OPACITY_MINIMUM
+  const tooltipOpacity = useLegendOpacity(legendOpacity)
+  const tooltipOrientationThreshold = useLegendOrientationThreshold(
+    legendOrientationThreshold
   )
 
-  const tooltipOrientationThreshold = useMemo(() => {
-    if (isFlagEnabled('legendOrientation')) {
-      return legendOrientationThreshold
-    }
-    return undefined
-  }, [legendOrientationThreshold])
-
   const [xDomain, onSetXDomain, onResetXDomain] = useVisXDomainSettings(
     storedXDomain,
     table.getColumn(xColumn, 'number'),

diff --git a/src/shared/components/HistogramPlot.tsx b/src/shared/components/HistogramPlot.tsx
@@ -1,22 +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,
-  LEGEND_OPACITY_MINIMUM,
-  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'
 
@@ -50,23 +48,11 @@ const HistogramPlot: FunctionComponent<Props> = ({
 }) => {
   const columnKeys = table.columnKeys
 
-  const tooltipOpacity = Math.max(
-    useMemo(() => {
-      if (isFlagEnabled('legendOrientation')) {
-        return legendOpacity
-      }
-      return LEGEND_OPACITY_DEFAULT
-    }, [legendOpacity]),
-    LEGEND_OPACITY_MINIMUM
+  const tooltipOpacity = useLegendOpacity(legendOpacity)
+  const tooltipOrientationThreshold = useLegendOrientationThreshold(
+    legendOrientationThreshold
   )
 
-  const tooltipOrientationThreshold = useMemo(() => {
-    if (isFlagEnabled('legendOrientation')) {
-      return legendOrientationThreshold
-    }
-    return undefined
-  }, [legendOrientationThreshold])
-
   const [xDomain, onSetXDomain, onResetXDomain] = useVisXDomainSettings(
     storedXDomain,
     table.getColumn(xColumn, 'number')

diff --git a/src/shared/components/MosaicPlot.tsx b/src/shared/components/MosaicPlot.tsx
@@ -1,25 +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,
-  LEGEND_OPACITY_MINIMUM,
-  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'
 
@@ -66,23 +64,11 @@ const MosaicPlot: FunctionComponent<Props> = ({
   }
   const columnKeys = table.columnKeys
 
-  const tooltipOpacity = Math.max(
-    useMemo(() => {
-      if (isFlagEnabled('legendOrientation')) {
-        return legendOpacity
-      }
-      return LEGEND_OPACITY_DEFAULT
-    }, [legendOpacity]),
-    LEGEND_OPACITY_MINIMUM
+  const tooltipOpacity = useLegendOpacity(legendOpacity)
+  const tooltipOrientationThreshold = useLegendOrientationThreshold(
+    legendOrientationThreshold
   )
 
-  const tooltipOrientationThreshold = useMemo(() => {
-    if (isFlagEnabled('legendOrientation')) {
-      return legendOrientationThreshold
-    }
-    return undefined
-  }, [legendOrientationThreshold])
-
   const [xDomain, onSetXDomain, onResetXDomain] = useVisXDomainSettings(
     storedXDomain,
     table.getColumn(xColumn, 'number'),

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,12 +21,7 @@ import {
 } from 'src/shared/utils/vis'
 
 // Constants
-import {
-  LEGEND_OPACITY_DEFAULT,
-  LEGEND_OPACITY_MINIMUM,
-  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'
 
@@ -71,23 +69,11 @@ const ScatterPlot: FunctionComponent<Props> = ({
 
   const columnKeys = table.columnKeys
 
-  const tooltipOpacity = Math.max(
-    useMemo(() => {
-      if (isFlagEnabled('legendOrientation')) {
-        return legendOpacity
-      }
-      return LEGEND_OPACITY_DEFAULT
-    }, [legendOpacity]),
-    LEGEND_OPACITY_MINIMUM
+  const tooltipOpacity = useLegendOpacity(legendOpacity)
+  const tooltipOrientationThreshold = useLegendOrientationThreshold(
+    legendOrientationThreshold
   )
 
-  const tooltipOrientationThreshold = useMemo(() => {
-    if (isFlagEnabled('legendOrientation')) {
-      return legendOrientationThreshold
-    }
-    return undefined
-  }, [legendOrientationThreshold])
-
   const [xDomain, onSetXDomain, onResetXDomain] = useVisXDomainSettings(
     storedXDomain,
     table.getColumn(xColumn, 'number')

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,12 +31,7 @@ import {
 } from 'src/shared/utils/vis'
 
 // Constants
-import {
-  LEGEND_OPACITY_DEFAULT,
-  LEGEND_OPACITY_MINIMUM,
-  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'
 
@@ -86,23 +84,11 @@ const XYPlot: FC<Props> = ({
   },
   theme,
 }) => {
-  const tooltipOpacity = Math.max(
-    useMemo(() => {
-      if (isFlagEnabled('legendOrientation')) {
-        return legendOpacity
-      }
-      return LEGEND_OPACITY_DEFAULT
-    }, [legendOpacity]),
-    LEGEND_OPACITY_MINIMUM
+  const tooltipOpacity = useLegendOpacity(legendOpacity)
+  const tooltipOrientationThreshold = useLegendOrientationThreshold(
+    legendOrientationThreshold
   )
 
-  const tooltipOrientationThreshold = useMemo(() => {
-    if (isFlagEnabled('legendOrientation')) {
-      return legendOrientationThreshold
-    }
-    return undefined
-  }, [legendOrientationThreshold])
-
   const storedXDomain = useMemo(() => parseXBounds(xBounds), [xBounds])
   const storedYDomain = useMemo(() => parseYBounds(yBounds), [yBounds])
   const xColumn = storedXColumn || defaultXColumn(table, '_time')

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])