From aa8280affbaf8db03e30befeaf2b0437a552a841 Mon Sep 17 00:00:00 2001 From: Timmy Luong Date: Thu, 24 Sep 2020 12:54:53 -0700 Subject: [PATCH] refactor: put legendOpacity and legendOrientationThreshold into their own hooks --- src/shared/components/BandPlot.tsx | 25 ++++++------------ src/shared/components/HeatmapPlot.tsx | 32 +++++++----------------- src/shared/components/HistogramPlot.tsx | 32 +++++++----------------- src/shared/components/MosaicPlot.tsx | 32 +++++++----------------- src/shared/components/ScatterPlot.tsx | 32 +++++++----------------- src/shared/components/XYPlot.tsx | 30 ++++++---------------- src/shared/utils/useLegendOrientation.ts | 27 ++++++++++++++++++++ 7 files changed, 78 insertions(+), 132 deletions(-) create mode 100644 src/shared/utils/useLegendOrientation.ts diff --git a/src/shared/components/BandPlot.tsx b/src/shared/components/BandPlot.tsx index 9fc02113e9a..c0033c0c583 100644 --- 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 = ({ [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 index f1b4c90f716..1cf9fe4aa58 100644 --- a/src/shared/components/HeatmapPlot.tsx +++ b/src/shared/components/HeatmapPlot.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, @@ -14,12 +17,7 @@ import { 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 = ({ }) => { 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 index 606ba7a7b41..6e335d70d28 100644 --- 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 = ({ }) => { 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 index d5ba78eafa2..74bbc42ddf1 100644 --- a/src/shared/components/MosaicPlot.tsx +++ b/src/shared/components/MosaicPlot.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, @@ -14,12 +17,7 @@ import { 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 = ({ } 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 index 45c527e262e..8f71e455359 100644 --- 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 = ({ 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 index 5c7ac894e95..870207a6dee 100644 --- 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 = ({ }, 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 new file mode 100644 index 00000000000..bb11b20a67a --- /dev/null +++ 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])