AG-13216 Fix keynav on radial gauges with bar.enabled: false

We'll add invisible bars (fill: 'rgba(0,0,0,0)') so that it can still be picked
by the RadialGaugeSeries.pickFocus method. Also add an e2e test for all
permutations of bar/needle visibilities.

packages/ag-charts-enterprise/src/series/radial-gauge/radialGaugeSeries.ts

@@ -454,7 +454,7 @@ export class RadialGaugeSeries
         const maxTicks = Math.ceil(normalizeAngle360Inclusive(containerEndAngle - containerStartAngle) * radius);
         let segments = segmentation.enabled ? segmentation.interval.getSegments(angleAxis.scale, maxTicks) : undefined;
 
-        const barFill = bar.fill ?? this.createConicGradient(bar.fills, bar.fillMode);
+        const barFill = !bar.enabled ? 'rgba(0,0,0,0)' : bar.fill ?? this.createConicGradient(bar.fills, bar.fillMode);
         const scaleFill =
             scale.fill ??
             (bar.enabled && scale.fills.length === 0 ? scale.defaultFill : undefined) ??
@@ -466,25 +466,23 @@ export class RadialGaugeSeries
             const appliedCornerRadius = Math.min(cornerRadius, (outerRadius - innerRadius) / 2);
             const angleInset = appliedCornerRadius / ((innerRadius + outerRadius) / 2);
 
-            if (bar.enabled) {
-                nodeData.push({
-                    series: this,
-                    itemId: `value`,
-                    datum,
-                    type: NodeDataType.Node,
-                    centerX,
-                    centerY,
-                    outerRadius,
-                    innerRadius,
-                    startAngle: containerStartAngle - angleInset,
-                    endAngle: containerEndAngle + angleInset,
-                    clipStartAngle: undefined,
-                    clipEndAngle: undefined,
-                    startCornerRadius: cornerRadius,
-                    endCornerRadius: cornerRadius,
-                    fill: barFill,
-                });
-            }
+            nodeData.push({
+                series: this,
+                itemId: `value`,
+                datum,
+                type: NodeDataType.Node,
+                centerX,
+                centerY,
+                outerRadius,
+                innerRadius,
+                startAngle: containerStartAngle - angleInset,
+                endAngle: containerEndAngle + angleInset,
+                clipStartAngle: undefined,
+                clipEndAngle: undefined,
+                startCornerRadius: cornerRadius,
+                endCornerRadius: cornerRadius,
+                fill: barFill,
+            });
 
             scaleData.push({
                 series: this,
@@ -517,25 +515,23 @@ export class RadialGaugeSeries
                 const itemStartAngle = angleScale.convert(segmentStart);
                 const itemEndAngle = angleScale.convert(segmentEnd);
 
-                if (bar.enabled) {
-                    nodeData.push({
-                        series: this,
-                        itemId: `value-${i}`,
-                        datum,
-                        type: NodeDataType.Node,
-                        centerX,
-                        centerY,
-                        outerRadius,
-                        innerRadius,
-                        startAngle: itemStartAngle,
-                        endAngle: itemEndAngle,
-                        clipStartAngle: containerStartAngle,
-                        clipEndAngle: containerEndAngle,
-                        startCornerRadius: cornersOnAllItems || isStart ? cornerRadius : 0,
-                        endCornerRadius: cornersOnAllItems || isEnd ? cornerRadius : 0,
-                        fill: barFill,
-                    });
-                }
+                nodeData.push({
+                    series: this,
+                    itemId: `value-${i}`,
+                    datum,
+                    type: NodeDataType.Node,
+                    centerX,
+                    centerY,
+                    outerRadius,
+                    innerRadius,
+                    startAngle: itemStartAngle,
+                    endAngle: itemEndAngle,
+                    clipStartAngle: containerStartAngle,
+                    clipEndAngle: containerEndAngle,
+                    startCornerRadius: cornersOnAllItems || isStart ? cornerRadius : 0,
+                    endCornerRadius: cornersOnAllItems || isEnd ? cornerRadius : 0,
+                    fill: barFill,
+                });
 
                 scaleData.push({
                     series: this,

packages/ag-charts-website/e2e/keyboard-nav.spec.ts

@@ -251,4 +251,44 @@ test.describe('keyboard-nav', () => {
         await page.keyboard.press('ArrowUp');
         await expect(page.locator(SELECTORS.canvasCenter)).toHaveScreenshot(`linear-gauge-bar-highlight.png`);
     });
+
+    test('radial gauge chart with needle', async ({ page }) => {
+        const { url } = toExamplePageUrl('radial-gauge', 'needle', 'vanilla');
+
+        await gotoExample(page, url);
+
+        const canvas = page.locator(SELECTORS.canvasCenter).first();
+        const hideNeedle = page.getByText('Hide Needle').first();
+        const showNeedle = page.getByText('Show Needle').first();
+        const hideBar = page.getByText('Hide Bar').first();
+        const showBar = page.getByText('Show Bar').first();
+
+        await canvas.click();
+        await page.keyboard.press('ArrowLeft');
+        await expect(canvas).toHaveScreenshot(`radial-gauge-showNeedle-hideBar.png`);
+
+        await hideNeedle.click();
+        await hideBar.click();
+        await canvas.click();
+        await page.keyboard.press('ArrowLeft');
+        await expect(canvas).toHaveScreenshot(`radial-gauge-hideNeedle-hideBar.png`);
+
+        await hideNeedle.click();
+        await showBar.click();
+        await canvas.click();
+        await page.keyboard.press('ArrowLeft');
+        await expect(canvas).toHaveScreenshot(`radial-gauge-hideNeedle-showBar.png`);
+
+        await showNeedle.click();
+        await hideBar.click();
+        await canvas.click();
+        await page.keyboard.press('ArrowLeft');
+        await expect(canvas).toHaveScreenshot(`radial-gauge-showNeedle-hideBar.png`);
+
+        await showNeedle.click();
+        await showBar.click();
+        await canvas.click();
+        await page.keyboard.press('ArrowLeft');
+        await expect(canvas).toHaveScreenshot(`radial-gauge-showNeedle-showBar.png`);
+    });
 });