From 02291864be8cd79408e0574fa6691bbadc8f79a5 Mon Sep 17 00:00:00 2001 From: Adilet Soronov <74559101+adiletelf@users.noreply.github.com> Date: Mon, 4 Dec 2023 13:36:10 +0600 Subject: [PATCH 1/4] Remove outline on non-keyboard focus. Fix focus order --- src/visual.ts | 18 +++++------------- style/visual.less | 4 ++++ 2 files changed, 9 insertions(+), 13 deletions(-) diff --git a/src/visual.ts b/src/visual.ts index 637c12b..dfc6bf6 100644 --- a/src/visual.ts +++ b/src/visual.ts @@ -1096,6 +1096,8 @@ export class StreamGraph implements IVisual { duration: number, hasHighlights: boolean = false ): Selection { + // Reverse the order of the series so that the last series is on top. + stackedSeries = stackedSeries.reverse(); const { width, height } = this.viewport; @@ -1140,8 +1142,6 @@ 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 = this.dataPointsContainer .selectAll(StreamGraph.LayerSelector.selectorName) @@ -1158,7 +1158,9 @@ export class StreamGraph implements IVisual { .style("fill", (d, index) => isHighContrast ? null : series[index].color) .style("stroke", (d, index) => isHighContrast ? series[index].color : null); - this.reverseOrderOfSeries(selectionMerged); + selectionMerged + .attr("tabindex", 0) + .attr("focusable", true); selectionMerged .transition() @@ -1262,16 +1264,6 @@ export class StreamGraph implements IVisual { return selectionMerged .attr("focusable", true); } - /** - * Reverse the order of the series so that the focus goes from up to down. - */ - private reverseOrderOfSeries(selectionMerged: Selection) { - const selectionMergedSize = selectionMerged.size(); - selectionMerged - .attr("tabindex", (d, index) => selectionMergedSize > 1 ? selectionMergedSize - index : 0) - .attr("focusable", true); - } - private localizeLegendOrientationDropdown(enableLegendCardSettings : EnableLegendCardSettings) { const strToBeLocalized : string = "Visual_LegendPosition_"; diff --git a/style/visual.less b/style/visual.less index 24f9d6a..38c6e2d 100644 --- a/style/visual.less +++ b/style/visual.less @@ -63,6 +63,10 @@ path { &:focus { outline: none; + } + + &:focus-visible { + outline: none; stroke: black; stroke-width: 3px; } From 29db9f1c1e4efbf1d1c01d10daf35ec75e692dee Mon Sep 17 00:00:00 2001 From: Adilet Soronov <74559101+adiletelf@users.noreply.github.com> Date: Mon, 4 Dec 2023 13:37:09 +0600 Subject: [PATCH 2/4] Remove tslint.json and specify Chromium path for karma tests --- karma.conf.ts | 2 +- tslint.json | 81 --------------------------------------------------- 2 files changed, 1 insertion(+), 82 deletions(-) delete mode 100644 tslint.json diff --git a/karma.conf.ts b/karma.conf.ts index 9686e8c..17b4055 100644 --- a/karma.conf.ts +++ b/karma.conf.ts @@ -34,7 +34,7 @@ const testRecursivePath = "test/visualTest.ts"; const srcOriginalRecursivePath = "src/**/*.ts"; const coverageFolder = "coverage"; -require("playwright").chromium.executablePath(); +process.env.CHROME_BIN = require("playwright").chromium.executablePath(); module.exports = (config) => { config.set({ diff --git a/tslint.json b/tslint.json deleted file mode 100644 index 77a1e89..0000000 --- a/tslint.json +++ /dev/null @@ -1,81 +0,0 @@ -{ - "rules": { - "insecure-random": true, - "no-banned-terms": true, - "no-delete-expression": true, - "no-disable-auto-sanitization": true, - "no-document-domain": true, - "no-document-write": true, - "no-exec-script": true, - "no-function-constructor-with-string-args": true, - "no-http-string": [ - true - ], - "no-inner-html": true, - "no-octal-literal": true, - "no-reserved-keywords": true, - "no-string-based-set-immediate": true, - "no-string-based-set-interval": true, - "no-string-based-set-timeout": true, - "non-literal-require": true, - "possible-timing-attack": true, - "react-anchor-blank-noopener": true, - "react-iframe-missing-sandbox": true, - "react-no-dangerous-html": true, - "no-eval": true, - "class-name": true, - "comment-format": [ - true, - "check-space" - ], - "indent": [ - true, - "spaces" - ], - "no-duplicate-variable": true, - "no-internal-module": false, - "no-trailing-whitespace": true, - "no-unsafe-finally": true, - "no-var-keyword": true, - "no-unused-expression": true, - "one-line": [ - true, - "check-open-brace", - "check-whitespace" - ], - "quotemark": [ - true, - "double" - ], - "semicolon": [ - true, - "always" - ], - "triple-equals": [ - true, - "allow-null-check" - ], - "typedef-whitespace": [ - true, - { - "call-signature": "nospace", - "index-signature": "nospace", - "parameter": "nospace", - "property-declaration": "nospace", - "variable-declaration": "nospace" - } - ], - "variable-name": [ - true, - "ban-keywords" - ], - "whitespace": [ - true, - "check-branch", - "check-decl", - "check-operator", - "check-separator", - "check-type" - ] - } -} From 879f2302c73c59dad676e0d6b27c0e87dab490e6 Mon Sep 17 00:00:00 2001 From: Adilet Soronov <74559101+adiletelf@users.noreply.github.com> Date: Thu, 7 Dec 2023 14:11:46 +0600 Subject: [PATCH 3/4] Fix focus order: goes from down to up --- .gitignore | 5 ++++- src/visual.ts | 2 -- style/visual.less | 2 +- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/.gitignore b/.gitignore index e836ade..93bde54 100644 --- a/.gitignore +++ b/.gitignore @@ -8,4 +8,7 @@ typings /coverage webpack.statistics.html webpack.statistics.dev.html -webpack.statistics.prod.html \ No newline at end of file +webpack.statistics.prod.html + +# JetBrains +.idea \ No newline at end of file diff --git a/src/visual.ts b/src/visual.ts index dfc6bf6..9efeeaa 100644 --- a/src/visual.ts +++ b/src/visual.ts @@ -1096,8 +1096,6 @@ export class StreamGraph implements IVisual { duration: number, hasHighlights: boolean = false ): Selection { - // Reverse the order of the series so that the last series is on top. - stackedSeries = stackedSeries.reverse(); const { width, height } = this.viewport; diff --git a/style/visual.less b/style/visual.less index 38c6e2d..22d6deb 100644 --- a/style/visual.less +++ b/style/visual.less @@ -60,7 +60,7 @@ text-anchor: middle; } - path { + path.layer { &:focus { outline: none; } From de0b926c0d25280ea1d37d5602cba1d0ad646039 Mon Sep 17 00:00:00 2001 From: Adilet Soronov <74559101+adiletelf@users.noreply.github.com> Date: Thu, 7 Dec 2023 14:31:04 +0600 Subject: [PATCH 4/4] Fix version to use 4 digits --- package-lock.json | 4 ++-- package.json | 2 +- pbiviz.json | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 009b95f..2b359d7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "powerbi-visuals-streamgraph", - "version": "3.0.4", + "version": "3.0.4.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "powerbi-visuals-streamgraph", - "version": "3.0.4", + "version": "3.0.4.0", "license": "MIT", "dependencies": { "d3-array": "^3.2.4", diff --git a/package.json b/package.json index 471fb93..20049cc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "powerbi-visuals-streamgraph", - "version": "3.0.4", + "version": "3.0.4.0", "description": "A stacked area chart with smooth interpolation. Often used to display values over time.", "repository": { "type": "git", diff --git a/pbiviz.json b/pbiviz.json index c48b569..90a547d 100644 --- a/pbiviz.json +++ b/pbiviz.json @@ -1,7 +1,7 @@ { "visual": { "name": "StreamGraph", - "displayName": "Stream Graph 3.0.4", + "displayName": "Stream Graph 3.0.4.0", "guid": "StreamGraph1446659696222", "visualClassName": "StreamGraph", "version": "3.0.4.0",