|
@@ -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 (
|