From eb6dd947ee96052ac230fa66b0edd4f3d383c0d6 Mon Sep 17 00:00:00 2001 From: Nastya Rusina Date: Tue, 22 Mar 2022 16:47:20 -0700 Subject: [PATCH] fix(bug_339): show tooltip on chart bars hover Signed-off-by: Nastya Rusina --- package.json | 2 +- src/components/common/BarChart.tsx | 44 +++++-------------- .../common/__stories__/BarChart.stories.tsx | 37 ++++++++++++++++ src/components/hooks/useFetchableData.ts | 4 +- .../AdminEntity/transformRequestError.ts | 6 ++- yarn.lock | 8 ++-- 6 files changed, 60 insertions(+), 41 deletions(-) create mode 100644 src/components/common/__stories__/BarChart.stories.tsx diff --git a/package.json b/package.json index ec31cf6d6..7beac1978 100644 --- a/package.json +++ b/package.json @@ -199,7 +199,7 @@ "ts-jest": "^26.3.0", "ts-loader": "^9.2.6", "ts-node": "^8.0.2", - "typescript": "^4.1.2", + "typescript": "^4.6.2", "url-search-params": "^0.10.0", "use-react-router": "^1.0.7", "webpack": "^5.68.0", diff --git a/src/components/common/BarChart.tsx b/src/components/common/BarChart.tsx index 83b95c156..2abf87bb4 100644 --- a/src/components/common/BarChart.tsx +++ b/src/components/common/BarChart.tsx @@ -48,7 +48,7 @@ interface BarChartData { value: number; color: string; metadata?: any; - tooltip?: string; + tooltip?: React.ReactChild; } interface BarChartItemProps extends BarChartData { @@ -69,7 +69,7 @@ interface BarChartProps { * @param color * @constructor */ -const BarChartItem: React.FC = ({ +export const BarChartItem: React.FC = ({ value, color, isSelected, @@ -80,41 +80,21 @@ const BarChartItem: React.FC = ({ const [position, setPosition] = React.useState({ x: 0, y: 0 }); const content = ( - <> -
- +
); return (
{tooltip ? ( - setPosition({ x: e.pageX, y: e.pageY - window.scrollY })} - PopperProps={{ - anchorEl: { - clientHeight: 0, - clientWidth: 0, - getBoundingClientRect: () => ({ - top: position.y, - left: position.x, - right: position.x, - bottom: position.y, - width: 0, - height: 0, - }), - }, - }} - > + {tooltip}} TransitionComponent={Zoom}> {content} ) : ( diff --git a/src/components/common/__stories__/BarChart.stories.tsx b/src/components/common/__stories__/BarChart.stories.tsx new file mode 100644 index 000000000..581bfa5a5 --- /dev/null +++ b/src/components/common/__stories__/BarChart.stories.tsx @@ -0,0 +1,37 @@ +import * as React from 'react'; +import { makeStyles, Theme } from '@material-ui/core/styles'; +import { storiesOf } from '@storybook/react'; +import { BarChartItem } from '../BarChart'; + +const useStyles = makeStyles((theme: Theme) => ({ + body: { + display: 'flex', + alignItems: 'stretch', + borderLeft: '1.04174px dashed #C1C1C1', + borderRight: '1.04174px dashed #C1C1C1', + minHeight: theme.spacing(10.5), + }, +})); + +const tooltipMock = ( +
+ + Execution Id: ei0ud0veie + + Running time: 9s + Started at: 3/22/2022 8:26:46 PM UTC +
+); + +const stories = storiesOf('Common', module); +stories.add('BarChartItem', () => { + const styles = useStyles(); + return ( +
+ + + + +
+ ); +}); diff --git a/src/components/hooks/useFetchableData.ts b/src/components/hooks/useFetchableData.ts index 9c72751be..d4a397783 100644 --- a/src/components/hooks/useFetchableData.ts +++ b/src/components/hooks/useFetchableData.ts @@ -61,7 +61,7 @@ function createFetchFn({ try { const response = await doFetch(data, context.value); - let mergedValue = response; + let mergedValue: T = response; if (useCache) { if (cacheKey === undefined) { log(`${debugName} failed to cache value. Unexpected empty cache key`); @@ -75,7 +75,7 @@ function createFetchFn({ // Trigger auth flow apiContext.loginStatus.setExpired(true); } - return Promise.reject(error instanceof Error ? error : new Error(error)); + return Promise.reject(error instanceof Error ? error : new Error(JSON.stringify(error))); } }; } diff --git a/src/models/AdminEntity/transformRequestError.ts b/src/models/AdminEntity/transformRequestError.ts index 9f80a939d..54dc0b6fb 100644 --- a/src/models/AdminEntity/transformRequestError.ts +++ b/src/models/AdminEntity/transformRequestError.ts @@ -2,11 +2,12 @@ import { AxiosError } from 'axios'; import { NotAuthorizedError, NotFoundError } from 'errors/fetchErrors'; /** Detects special cases for errors returned from Axios and lets others pass through. */ -export function transformRequestError(e: Error, path: string) { - const error = e as AxiosError; +export function transformRequestError(err: unknown, path: string) { + const error = err as AxiosError; if (!error.response) { return error; } + // For some status codes, we'll throw a special error to allow // client code and components to handle separately if (error.response.status === 404) { @@ -15,5 +16,6 @@ export function transformRequestError(e: Error, path: string) { if (error.response.status === 401) { return new NotAuthorizedError(); } + return error; } diff --git a/yarn.lock b/yarn.lock index 8e0341149..603cc47cc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -18777,10 +18777,10 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c= -typescript@^4.1.2: - version "4.1.2" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.1.2.tgz#6369ef22516fe5e10304aae5a5c4862db55380e9" - integrity sha512-thGloWsGH3SOxv1SoY7QojKi0tc+8FnOmiarEGMbd/lar7QOEd3hvlx3Fp5y6FlDUGl9L+pd4n2e+oToGMmhRQ== +typescript@^4.6.2: + version "4.6.2" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.2.tgz#fe12d2727b708f4eef40f51598b3398baa9611d4" + integrity sha512-HM/hFigTBHZhLXshn9sN37H085+hQGeJHJ/X7LpBWLID/fbc2acUMfU+lGD98X81sKP+pFa9f0DZmCwB9GnbAg== uc.micro@^1.0.1: version "1.0.6"