Просмотр исходного кода

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 год назад
Родитель
Сommit
02878d3668
1 измененных файлов с 13 добавлено и 3 удалено
  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 {Theme} from '@emotion/react';
 import styled from '@emotion/styled';
 import styled from '@emotion/styled';
 import {useHover} from '@react-aria/interactions';
 import {useHover} from '@react-aria/interactions';
@@ -63,7 +63,13 @@ export function MetricChart({
   });
   });
 
 
   const unit = series[0]?.unit;
   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
   // TODO(ddm): This assumes that all series have the same bucket size
   const bucketSize = seriesToShow[0]?.data[1]?.name - seriesToShow[0]?.data[0]?.name;
   const bucketSize = seriesToShow[0]?.data[1]?.name - seriesToShow[0]?.data[0]?.name;
@@ -101,7 +107,6 @@ export function MetricChart({
         return '';
         return '';
       },
       },
     },
     },
-
     yAxis: {
     yAxis: {
       axisLabel: {
       axisLabel: {
         formatter: (value: number) => {
         formatter: (value: number) => {
@@ -109,6 +114,11 @@ export function MetricChart({
         },
         },
       },
       },
     },
     },
+    xAxis: {
+      axisPointer: {
+        snap: true,
+      },
+    },
   };
   };
 
 
   return (
   return (