Add keyboard listener on dimensions popover

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, Text } 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 }) => (
   </Flex>
 )
 
-const Dimension = ({ id, strong, rowFlavour }) => {
+const Dimension = ({ id, index, strong, rowFlavour }) => {
   const visible = useVisibleDimensionId(id)
 
   const chart = useChart()
@@ -73,6 +73,9 @@ const Dimension = ({ id, strong, rowFlavour }) => {
 
   return (
     <GridRow opacity={visible ? null : "weak"}>
+      <Flex flex="grow" alignItems="center">
+        <Text>{index < 9 ? index + 1 : ""}</Text>
+      </Flex>
       <Flex alignItems="center" gap={1} position="relative">
         <ColorBackground
           id={id}

src/components/line/popover/dimensions.js

@@ -6,6 +6,7 @@ import Units from "@/components/line/dimensions/units"
 import UpdateEvery from "./updateEvery"
 import Timestamp from "./timestamp"
 import Dimension from "./dimension"
+import useKeyboardListener from "./useKeyboardListener"
 
 const Container = styled(Flex).attrs({
   round: true,
@@ -23,7 +24,7 @@ const Container = styled(Flex).attrs({
 const Grid = styled.div`
   display: grid;
   width: 100%;
-  grid-template-columns: minmax(150px, max-content) 60px 60px minmax(80px, auto);
+  grid-template-columns: 30px minmax(150px, max-content) 60px 60px minmax(80px, auto);
   align-items: center;
 `
 
@@ -97,6 +98,8 @@ const Dimensions = () => {
 
   const rowFlavour = rowFlavours[row] || rowFlavours.default
 
+  useKeyboardListener({ chart, ids })
+
   return (
     <Container data-testid="chartPopover-dimensions" gap={2}>
       <Flex column gap={1}>
@@ -108,6 +111,7 @@ const Dimensions = () => {
       </Flex>
       <Grid gap={1} column>
         <GridHeader>
+          <TextMicro strong>Key</TextMicro>
           <TextMicro strong>Dimension</TextMicro>
           <TextMicro
             color={rowFlavour === rowFlavours.default ? "text" : "textLite"}
@@ -140,8 +144,8 @@ const Dimensions = () => {
             Info
           </TextMicro>
         </GridHeader>
-        {ids.map(id => (
-          <Dimension key={id} id={id} strong={row === id} rowFlavour={rowFlavour} />
+        {ids.map((id, index) => (
+          <Dimension key={id} id={id} index={index} strong={row === id} rowFlavour={rowFlavour} />
         ))}
       </Grid>
       <Flex flex={false} height={3}>

src/components/line/popover/useKeyboardListener.js

@@ -0,0 +1,27 @@
+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]
+      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