Reverse the order of the series so that the focus goes from up to down.

.github/workflows/build.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [14.x, 16.x, 18.x]
+        node-version: [18.x, 20.x]
     steps:
     - uses: actions/checkout@v2
     - name: Use Node.js ${{ matrix.node-version }}

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 3.0.2.0
+* Add keyboard navigation
+* UPD: powerbi-visuals-tools has been updated to 5.2.1
+
 ## 2.0.2
 * UPD: powerbi-visuals-tools has been updated to 3.0.9 to add IE11 support
 * UPD: API has been updated to 2.3.0 to add IE11 support

README.md

@@ -2,7 +2,8 @@
 
 > A stacked area chart with smooth interpolation. Often used to display values over time.
 
-![stacked area chart screenshot](https://github.com/microsoft/powerbi-visuals-streamgraph/blob/master/assets/screenshot.png)
+![stacked area chart screenshot](assets/screenshot.png)
+
 # Overview
 A stream graph, is a type of stacked area graph which is displaced around a central axis, resulting in a flowing, organic shape.
 

package.json

@@ -63,7 +63,7 @@
     "playwright": "^1.36.0",
     "powerbi-models": "1.12.6",
     "powerbi-visuals-api": "~5.4.0",
-    "powerbi-visuals-tools": "^4.3.2",
+    "powerbi-visuals-tools": "^5.2.1",
     "powerbi-visuals-utils-chartutils": "^6.0.1",
     "powerbi-visuals-utils-colorutils": "6.0.1",
     "powerbi-visuals-utils-dataviewutils": "^6.0.1",

pbiviz.json

@@ -4,7 +4,7 @@
     "displayName": "Stream Graph 3.0.1",
     "guid": "StreamGraph1446659696222",
     "visualClassName": "StreamGraph",
-    "version": "3.0.1",
+    "version": "3.0.2.0",
     "description": "A stacked area chart with smooth interpolation. Often used to display values over time.",
     "supportUrl": "https://aka.ms/customvisualscommunity",
     "gitHubUrl": "https://github.com/Microsoft/powerbi-visuals-streamgraph"

src/visual.ts

@@ -1140,6 +1140,9 @@ export class StreamGraph implements IVisual {
 
         const isHighContrast: boolean = this.colorPalette.isHighContrast;
 
+        // Reverse the order of the series so that the last series is on top.
+        // stackedSeries = stackedSeries.reverse();
+
         const selection: Selection<BaseType, any, any, any> = this.dataPointsContainer
             .selectAll(StreamGraph.LayerSelector.selectorName)
             .data(stackedSeries);
@@ -1153,9 +1156,9 @@ export class StreamGraph implements IVisual {
             .classed(StreamGraph.LayerSelector.className, true)
             .style("opacity", DefaultOpacity)
             .style("fill", (d, index) => isHighContrast ? null : series[index].color)
-            .style("stroke", (d, index) => isHighContrast ? series[index].color : null)
-            .attr("tabindex", 0)
-            .attr("focusable", true);
+            .style("stroke", (d, index) => isHighContrast ? series[index].color : null);
+
+        this.reverseOrderOfSeries(selectionMerged);
 
         selectionMerged
             .transition()
@@ -1256,7 +1259,17 @@ export class StreamGraph implements IVisual {
             dataLabelUtils.cleanDataLabels(this.svg);
         }
 
-        return selectionMerged;
+        return selectionMerged        .attr("focusable", true);
+    }
+
+    /**
+     *  Reverse the order of the series so that the focus goes from up to down.
+     */
+    private reverseOrderOfSeries(selectionMerged: Selection<BaseType, any, any, any>) {
+        const selectionMergedSize = selectionMerged.size();
+        selectionMerged
+            .attr("tabindex", (d, index) => selectionMergedSize > 1 ? selectionMergedSize - index - 1 : 0)
+            .attr("focusable", true);
     }
 
     private localizeLegendOrientationDropdown(enableLegendCardSettings : EnableLegendCardSettings)