added story to show focus using bar ref

stories/victory-bar.stories.js

@@ -1,13 +1,14 @@
 /* eslint-disable no-magic-numbers*/
 /* eslint-disable react/no-multi-comp*/
-import React from "react";
+import React, { useRef } from "react";
 import { VictoryBar, Bar } from "victory-bar";
 import { VictoryChart } from "victory-chart";
 import { VictoryGroup } from "victory-group";
 import { VictoryStack } from "victory-stack";
 import { VictoryTooltip } from "victory-tooltip";
 import { VictoryTheme, VictoryLabel } from "victory-core";
 import { VictoryPolarAxis } from "victory-polar-axis";
+import { VictoryAxis } from "victory-axis";
 import {
   getData,
   getStackedData,
@@ -1028,3 +1029,158 @@ export const DisableInlineStyles = () => {
     </div>
   );
 };
+
+const CustomFocusLabel = (props) => (
+  <g>
+    <VictoryLabel {...props} dy={-8} x={12} textAnchor="start" />;
+    <VictoryTooltip {...props} />
+  </g>
+);
+
+const CustomFocusBar = (props) => {
+  // eslint-disable-next-line react/prop-types
+  const xRange = props.scale.x.range();
+  const x0 = xRange[0] + 20;
+  const x = xRange[1] - 10;
+  // eslint-disable-next-line react/prop-types
+  const y = props.y;
+
+  return <Bar {...props} x={x} x0={x0} y={y - 4} tabIndex={0} />;
+};
+
+export const FocusWithRefs = () => {
+  const barsRef = useRef(null);
+
+  const getMap = () => {
+    if (!barsRef.current) {
+      // Initialize the Map on first usage.
+      barsRef.current = new Map();
+    }
+    return barsRef.current;
+  };
+
+  const focusOnBar = (id) => {
+    const map = getMap();
+    const node = map.get(id);
+    node.focus();
+  };
+
+  const appUsageData = [
+    { sourceName: "UTube", dataUsage: 123 },
+    { sourceName: "Lookout", dataUsage: 105 },
+    { sourceName: "Slacky", dataUsage: 100 },
+    { sourceName: "Application", dataUsage: 97 },
+    { sourceName: "Another app", dataUsage: 76 },
+    { sourceName: "Some new app", dataUsage: 58 },
+    { sourceName: "Good application", dataUsage: 54 },
+    { sourceName: "GDrive", dataUsage: 42 },
+  ];
+
+  const MAX_VALUE = 160;
+  const addTo100Percent = appUsageData.map((datum) => ({
+    sourceName: datum.sourceName,
+    dataUsage: MAX_VALUE - datum.dataUsage,
+  }));
+
+  const barChartColors = {
+    used: "#2B9CD8",
+    usedInactive: "#C6D2D9",
+    unused: "#E8E8E8",
+    axisColor: "#E8E8E8",
+    tooltipBorderColor: "#E8E8E8",
+    linkColor: "#1471DA",
+  };
+
+  return (
+    <div style={containerStyle}>
+      <h1>
+        Focus on any bar border then press enter to focus on the inner bar
+      </h1>
+      <VictoryChart
+        {...defaultChartProps}
+        theme={VictoryTheme.material}
+        domain={{ x: [0, 10], y: [0, MAX_VALUE] }}
+        padding={20}
+        horizontal
+      >
+        <VictoryBar
+          data={appUsageData}
+          x="sourceName"
+          y={() => MAX_VALUE}
+          barWidth={28}
+          dataComponent={<CustomFocusBar />}
+          style={{
+            data: {
+              fill: "none",
+              stroke: "grey",
+              strokeWidth: 0.5,
+            },
+          }}
+          events={[
+            {
+              target: "data",
+              eventHandlers: {
+                onKeyDown: (e) => {
+                  // Enter key
+                  if (e.keyCode === 13) {
+                    const indexId = e.target.attributes.index.value;
+                    focusOnBar(indexId);
+                  }
+                },
+              },
+            },
+          ]}
+        />
+        <VictoryStack>
+          <VictoryBar
+            barRatio={0.2}
+            data={appUsageData}
+            x="sourceName"
+            y="dataUsage"
+            labels={({ datum }) => datum.sourceName}
+            labelComponent={<CustomFocusLabel />}
+            dataComponent={
+              <Bar
+                tabIndex={0}
+                ref={(node) => {
+                  const map = getMap();
+                  if (node) {
+                    map.set(node.attributes.index.value, node);
+                  }
+                }}
+              />
+            }
+            style={{
+              data: { fill: barChartColors.usedInactive }, // depends on a bar chart style! (used/usedInactive)
+              labels: { fontSize: 6, fontWeight: 400 },
+            }}
+          />
+          <VictoryBar
+            barRatio={0.2}
+            data={addTo100Percent}
+            x="sourceName"
+            y="dataUsage"
+            labels={({ datum }) => `${MAX_VALUE - datum.dataUsage}GB`}
+            labelComponent={<VictoryLabel dy={-8} dx={0} textAnchor="end" />}
+            style={{
+              data: { fill: barChartColors.unused },
+              labels: { fontSize: 6, fontWeight: 400 },
+            }}
+          />
+        </VictoryStack>
+        <VictoryAxis
+          dependentAxis
+          crossAxis={false}
+          style={{
+            axis: { stroke: barChartColors.axisColor },
+            ticks: { stroke: barChartColors.axisColor, size: 5 },
+            tickLabels: { fontSize: 5, padding: 0 },
+            grid: { stroke: "none" },
+          }}
+          tickCount={8}
+          tickFormat={(t) => `${Math.round(t)} GB`}
+        />
+      </VictoryChart>
+    </div>
+  );
+};