- {payload?.map((entry: any, index: any) => (
-
-
{
- onLegendClick(null, entry, payload);
- }}
- className={`l-content`}
- onMouseOver={() => {
- setHighlight({ ...highlight, [groupBy]: entry.value });
- }}
+
+
+
+
+
+
+
+ {payload?.map((entry: any, index: any) => (
+
+
{
+ onLegendClick(null, entry, payload);
+ }}
+ className={`l-content`}
+ onMouseOver={() => {
+ setHighlight({ ...highlight, [groupBy]: entry.value });
+ }}
+ >
+
+
-
+
+
- ))}
-
+
-1
+ ? "1"
+ : ".4",
+ }}
+ >
+ {truncate(entry.value, 56)}
+
+
+
+
+ ))}
+
);
};
export const TimeSeriesChart = ({
- chartData,
- title,
- groupBy,
- metric,
- yFormatter = (y: any) => y,
- yUnit,
- valueRounding,
- filterChart,
- setFilterChart,
- highlight,
- setHighlight,
- labelKey,
- events,
- }: any) => {
+ chartData,
+ title,
+ groupBy,
+ metric,
+ yFormatter = (y: any) => y,
+ yUnit,
+ valueRounding,
+ filterChart,
+ setFilterChart,
+ highlight,
+ setHighlight,
+ labelKey,
+ events,
+ description
+}: any) => {
const [showThreshold, setShowThreshold] = useState(false);
+ const [isLabelHovered, setIsLabelHovered] = useState(false);
const handleCheckboxChange = (event: any) => {
setShowThreshold(!showThreshold);
@@ -219,21 +222,22 @@ export const TimeSeriesChart = ({
const LegendMemo = useMemo(() => {
return (
-
- }
- />
+
+ }
+ />
);
}, [
groupBy,
@@ -244,62 +248,87 @@ export const TimeSeriesChart = ({
filterChart,
setFilterChart,
showThreshold,
+ isLabelHovered
]);
const TooltipMemo = useMemo(() => {
return (
-
- }
- cursor={true}
- position={{ y: 0 }}
- allowEscapeViewBox={{ x: false, y: true }}
- />
+
+ }
+ cursor={true}
+ position={{ y: 0 }}
+ allowEscapeViewBox={{ x: false, y: true }}
+ />
);
- }, [chartData, filterChart, showThreshold]);
+ }, [chartData, filterChart, showThreshold, isLabelHovered]);
- const YAxisMemo = useMemo(() => {
+ const CustomYLabel = ({ x, y, value, tooltipContent }: any) => {
+ const handleMouseEnter = (e: React.MouseEvent) => {
+ setIsLabelHovered(true)
+ }
+
+ const handleMouseLeave = (e: React.MouseEvent) => {
+ setIsLabelHovered(false)
+ }
return (
-
roundNumber(y, valueRounding) + ``}
- style={{ fontSize: ".9em" }}
+
+
-
-
+ {value}
+
+
);
- }, [chartData]);
+ };
- const XAxisMemo = useMemo(() => {
+ const YAxisMemo = useMemo(() => {
return (
-
- moment(unixTime * 1000).format("HH:mm")
- }
- type="number"
+ roundNumber(y, valueRounding) + ``}
+ style={{ fontSize: ".9em" }}
+ >
+ }
/>
+
+ );
+ }, [chartData, isLabelHovered]);
+
+ const XAxisMemo = useMemo(() => {
+ return (
+
+ moment(unixTime * 1000).format("HH:mm")
+ }
+ type="number"
+ />
);
}, []);
@@ -310,54 +339,54 @@ export const TimeSeriesChart = ({
const transform = `translate(${x - r - 0} ${y - d - 10})`;
const randomKey = Math.random().toString();
return (
-
- Events
- {Object.keys(event?.events)?.map((k) => {
- const eventItem = event.events[k];
- return (
-
- {k}
-
- {eventItem.count}
-
-
- );
- })}
-