diff --git a/src/components/line/popover/dimension.js b/src/components/line/popover/dimension.js index f616f6ac..9332794c 100644 --- a/src/components/line/popover/dimension.js +++ b/src/components/line/popover/dimension.js @@ -1,6 +1,6 @@ import React from "react" import styled from "styled-components" -import { Flex } from "@netdata/netdata-ui" +import { Flex, TextMicro } from "@netdata/netdata-ui" import Color, { ColorBar } from "@/components/line/dimensions/color" import Name from "@/components/line/dimensions/name" import Value, { Value as ValuePart } from "@/components/line/dimensions/value" @@ -64,7 +64,7 @@ const AnnotationsValue = ({ children: annotations, showFull, ...rest }) => ( ) -const Dimension = ({ id, strong, rowFlavour }) => { +const Dimension = ({ id, index, strong, rowFlavour }) => { const visible = useVisibleDimensionId(id) const chart = useChart() @@ -73,6 +73,7 @@ const Dimension = ({ id, strong, rowFlavour }) => { return ( + {index < 9 ? index + 1 : ""} { const rowFlavour = rowFlavours[row] || rowFlavours.default + useKeyboardListener({ chart, ids }) + return ( @@ -108,6 +112,7 @@ const Dimensions = () => { + Key Dimension { Info - {ids.map(id => ( - + {ids.map((id, index) => ( + ))} diff --git a/src/components/line/popover/index.js b/src/components/line/popover/index.js index 6f57902e..e795b56b 100644 --- a/src/components/line/popover/index.js +++ b/src/components/line/popover/index.js @@ -34,6 +34,10 @@ const Popover = ({ uiName }) => { targetRef.current = target updatePositionRef.current = useMakeUpdatePosition(target, dropRef, align, stretch) + const [dimKey, setDimKey] = useState(0) + + chart.onAttributeChange("selectedLegendDimensions", () => setDimKey(prev => prev + 1)) + useEffect(() => { return unregister( chart.getUI(uiName).on("mousemove", event => { @@ -79,7 +83,7 @@ const Popover = ({ uiName }) => { data-testid="drop" sx={{ pointerEvents: "none" }} > - + , el )} diff --git a/src/components/line/popover/useKeyboardListener.js b/src/components/line/popover/useKeyboardListener.js new file mode 100644 index 00000000..66bc403e --- /dev/null +++ b/src/components/line/popover/useKeyboardListener.js @@ -0,0 +1,28 @@ +import { useCallback, useEffect } from "react" + +const digitRegexp = new RegExp(/^Digit\d+$/) + +const useKeyboardListener = ({ chart, ids }) => { + const keyDownHandler = useCallback( + e => { + const isDigit = digitRegexp.test(e.code) + if (!isDigit) return + const digit = e.code.replace(/^Digit/, "") + if (digit === null || isNaN(digit)) return + const id = ids[parseInt(digit) - 1] + if (!id) return + const merge = e.shiftKey || e.ctrlKey || e.metaKey + chart.toggleDimensionId(id, { merge }) + }, + [chart, ids] + ) + + useEffect(() => { + window.addEventListener("keydown", keyDownHandler) + return () => { + window.removeEventListener("keydown", keyDownHandler) + } + }, [chart, ids]) +} + +export default useKeyboardListener