Browse Source

fix(ddm): Bar chart hover glitch (#62360)

Disable hover, on series in bar chart.
Enable snapping for the xAxis pointer.

- closes https://github.com/getsentry/sentry/issues/62362
ArthurKnaus 1 year ago
parent
commit
02878d3668
1 changed files with 13 additions and 3 deletions
  1. 13 3
      static/app/views/ddm/chart.tsx

+ 13 - 3
static/app/views/ddm/chart.tsx

@@ -1,4 +1,4 @@
-import {useEffect, useRef} from 'react';
+import {useEffect, useMemo, useRef} from 'react';
 import {Theme} from '@emotion/react';
 import styled from '@emotion/styled';
 import {useHover} from '@react-aria/interactions';
@@ -63,7 +63,13 @@ export function MetricChart({
   });
 
   const unit = series[0]?.unit;
-  const seriesToShow = series.filter(s => !s.hidden);
+  const seriesToShow = useMemo(
+    () =>
+      series
+        .filter(s => !s.hidden)
+        .map(s => ({...s, silent: displayType === MetricDisplayType.BAR})),
+    [series, displayType]
+  );
 
   // TODO(ddm): This assumes that all series have the same bucket size
   const bucketSize = seriesToShow[0]?.data[1]?.name - seriesToShow[0]?.data[0]?.name;
@@ -101,7 +107,6 @@ export function MetricChart({
         return '';
       },
     },
-
     yAxis: {
       axisLabel: {
         formatter: (value: number) => {
@@ -109,6 +114,11 @@ export function MetricChart({
         },
       },
     },
+    xAxis: {
+      axisPointer: {
+        snap: true,
+      },
+    },
   };
 
   return (