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

…rom the api
influxdata · Sep 24, 2020 · 0d6d20a · 0d6d20a
1 parent 651f2a6
commit 0d6d20a
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 36 deletions.
diff --git a/src/shared/components/BandPlot.tsx b/src/shared/components/BandPlot.tsx
@@ -30,6 +30,7 @@ import {
   BAND_LINE_WIDTH,
   BAND_SHADE_OPACITY,
   LEGEND_OPACITY_DEFAULT,
+  LEGEND_OPACITY_MINIMUM,
   VIS_THEME,
   VIS_THEME_LIGHT,
 } from 'src/shared/constants'
@@ -107,12 +108,15 @@ const BandPlot: FC<Props> = ({
     [selectedFunctions, upperColumnName, mainColumn, lowerColumnName]
   )
 
-  const tooltipOpacity = useMemo(() => {
-    if (isFlagEnabled('legendOrientation')) {
-      return legendOpacity
-    }
-    return LEGEND_OPACITY_DEFAULT
-  }, [legendOpacity])
+  const tooltipOpacity = Math.max(
+    useMemo(() => {
+      if (isFlagEnabled('legendOrientation')) {
+        return legendOpacity
+      }
+      return LEGEND_OPACITY_DEFAULT
+    }, [legendOpacity]),
+    LEGEND_OPACITY_MINIMUM
+  )
 
   const tooltipOrientationThreshold = useMemo(() => {
     if (isFlagEnabled('legendOrientation')) {

diff --git a/src/shared/components/HeatmapPlot.tsx b/src/shared/components/HeatmapPlot.tsx
@@ -16,6 +16,7 @@ import {getFormatter} from 'src/shared/utils/vis'
 // Constants
 import {
   LEGEND_OPACITY_DEFAULT,
+  LEGEND_OPACITY_MINIMUM,
   VIS_THEME,
   VIS_THEME_LIGHT,
 } from 'src/shared/constants'
@@ -60,12 +61,15 @@ const HeatmapPlot: FunctionComponent<Props> = ({
 }) => {
   const columnKeys = table.columnKeys
 
-  const tooltipOpacity = useMemo(() => {
-    if (isFlagEnabled('legendOrientation')) {
-      return legendOpacity
-    }
-    return LEGEND_OPACITY_DEFAULT
-  }, [legendOpacity])
+  const tooltipOpacity = Math.max(
+    useMemo(() => {
+      if (isFlagEnabled('legendOrientation')) {
+        return legendOpacity
+      }
+      return LEGEND_OPACITY_DEFAULT
+    }, [legendOpacity]),
+    LEGEND_OPACITY_MINIMUM
+  )
 
   const tooltipOrientationThreshold = useMemo(() => {
     if (isFlagEnabled('legendOrientation')) {

diff --git a/src/shared/components/HistogramPlot.tsx b/src/shared/components/HistogramPlot.tsx
@@ -13,6 +13,7 @@ import {getFormatter} from 'src/shared/utils/vis'
 // Constants
 import {
   LEGEND_OPACITY_DEFAULT,
+  LEGEND_OPACITY_MINIMUM,
   VIS_THEME,
   VIS_THEME_LIGHT,
 } from 'src/shared/constants'
@@ -49,12 +50,15 @@ const HistogramPlot: FunctionComponent<Props> = ({
 }) => {
   const columnKeys = table.columnKeys
 
-  const tooltipOpacity = useMemo(() => {
-    if (isFlagEnabled('legendOrientation')) {
-      return legendOpacity
-    }
-    return LEGEND_OPACITY_DEFAULT
-  }, [legendOpacity])
+  const tooltipOpacity = Math.max(
+    useMemo(() => {
+      if (isFlagEnabled('legendOrientation')) {
+        return legendOpacity
+      }
+      return LEGEND_OPACITY_DEFAULT
+    }, [legendOpacity]),
+    LEGEND_OPACITY_MINIMUM
+  )
 
   const tooltipOrientationThreshold = useMemo(() => {
     if (isFlagEnabled('legendOrientation')) {

diff --git a/src/shared/components/MosaicPlot.tsx b/src/shared/components/MosaicPlot.tsx
@@ -16,6 +16,7 @@ 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'
@@ -65,12 +66,15 @@ const MosaicPlot: FunctionComponent<Props> = ({
   }
   const columnKeys = table.columnKeys
 
-  const tooltipOpacity = useMemo(() => {
-    if (isFlagEnabled('legendOrientation')) {
-      return legendOpacity
-    }
-    return LEGEND_OPACITY_DEFAULT
-  }, [legendOpacity])
+  const tooltipOpacity = Math.max(
+    useMemo(() => {
+      if (isFlagEnabled('legendOrientation')) {
+        return legendOpacity
+      }
+      return LEGEND_OPACITY_DEFAULT
+    }, [legendOpacity]),
+    LEGEND_OPACITY_MINIMUM
+  )
 
   const tooltipOrientationThreshold = useMemo(() => {
     if (isFlagEnabled('legendOrientation')) {

diff --git a/src/shared/components/ScatterPlot.tsx b/src/shared/components/ScatterPlot.tsx
@@ -20,6 +20,7 @@ import {
 // Constants
 import {
   LEGEND_OPACITY_DEFAULT,
+  LEGEND_OPACITY_MINIMUM,
   VIS_THEME,
   VIS_THEME_LIGHT,
 } from 'src/shared/constants'
@@ -70,12 +71,15 @@ const ScatterPlot: FunctionComponent<Props> = ({
 
   const columnKeys = table.columnKeys
 
-  const tooltipOpacity = useMemo(() => {
-    if (isFlagEnabled('legendOrientation')) {
-      return legendOpacity
-    }
-    return LEGEND_OPACITY_DEFAULT
-  }, [legendOpacity])
+  const tooltipOpacity = Math.max(
+    useMemo(() => {
+      if (isFlagEnabled('legendOrientation')) {
+        return legendOpacity
+      }
+      return LEGEND_OPACITY_DEFAULT
+    }, [legendOpacity]),
+    LEGEND_OPACITY_MINIMUM
+  )
 
   const tooltipOrientationThreshold = useMemo(() => {
     if (isFlagEnabled('legendOrientation')) {

diff --git a/src/shared/components/XYPlot.tsx b/src/shared/components/XYPlot.tsx
@@ -30,6 +30,7 @@ import {
 // Constants
 import {
   LEGEND_OPACITY_DEFAULT,
+  LEGEND_OPACITY_MINIMUM,
   VIS_THEME,
   VIS_THEME_LIGHT,
 } from 'src/shared/constants'
@@ -85,12 +86,15 @@ const XYPlot: FC<Props> = ({
   },
   theme,
 }) => {
-  const tooltipOpacity = useMemo(() => {
-    if (isFlagEnabled('legendOrientation')) {
-      return legendOpacity
-    }
-    return LEGEND_OPACITY_DEFAULT
-  }, [legendOpacity])
+  const tooltipOpacity = Math.max(
+    useMemo(() => {
+      if (isFlagEnabled('legendOrientation')) {
+        return legendOpacity
+      }
+      return LEGEND_OPACITY_DEFAULT
+    }, [legendOpacity]),
+    LEGEND_OPACITY_MINIMUM
+  )
 
   const tooltipOrientationThreshold = useMemo(() => {
     if (isFlagEnabled('legendOrientation')) {