fix(bug_339): show tooltip on chart bars hover (#340)

Signed-off-by: Nastya Rusina <[email protected]>

package.json

@@ -200,7 +200,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",

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<BarChartItemProps> = ({
+export const BarChartItem: React.FC<BarChartItemProps> = ({
   value,
   color,
   isSelected,
@@ -80,41 +80,21 @@ const BarChartItem: React.FC<BarChartItemProps> = ({
   const [position, setPosition] = React.useState({ x: 0, y: 0 });
 
   const content = (
-    <>
-      <div
-        className={styles.itemBar}
-        style={{
-          backgroundColor: color,
-          height: `${value}%`,
-          opacity: isSelected ? '100%' : '50%',
-        }}
-        onClick={onClick}
-      />
-    </>
+    <div
+      className={styles.itemBar}
+      style={{
+        backgroundColor: color,
+        height: `${value}%`,
+        opacity: isSelected ? '100%' : '50%',
+      }}
+      onClick={onClick}
+    />
   );
 
   return (
     <div className={styles.item}>
       {tooltip ? (
-        <Tooltip
-          title={tooltip}
-          TransitionComponent={Zoom}
-          onMouseMove={(e) => 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 title={<>{tooltip}</>} TransitionComponent={Zoom}>
           {content}
         </Tooltip>
       ) : (

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 = (
+  <div style={{ display: 'flex', flexDirection: 'column' }}>
+    <span>
+      Execution Id: <strong>ei0ud0veie</strong>
+    </span>
+    <span>Running time: 9s</span>
+    <span>Started at: 3/22/2022 8:26:46 PM UTC</span>
+  </div>
+);
+
+const stories = storiesOf('Common', module);
+stories.add('BarChartItem', () => {
+  const styles = useStyles();
+  return (
+    <div className={styles.body} style={{ width: '150px' }}>
+      <BarChartItem isSelected={false} value={50} color={'green'} />
+      <BarChartItem isSelected={true} value={100} color={'green'} tooltip={tooltipMock} />
+      <BarChartItem isSelected={false} value={75} color={'red'} tooltip={tooltipMock} />
+      <BarChartItem isSelected={false} value={12} color={'red'} tooltip={tooltipMock} />
+    </div>
+  );
+});

src/components/hooks/useFetchableData.ts

@@ -61,7 +61,7 @@ function createFetchFn<T extends object, DataType>({
 
     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<T extends object, DataType>({
         // 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)));
     }
   };
 }

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;
 }

yarn.lock

@@ -18823,10 +18823,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"