Fix render bugs and enhance readability in high contrast mode (#82)

* Fix "Data Labels" Card, remove redundant slicer "show"

* Make label color visible in high contrast mode when it's the same as background color

* Force high contrast colors in high contrast mode

CHANGELOG.md

@@ -1,3 +1,6 @@
+## 3.0.7.0
+* Improve data labels readability in high contrast mode
+
 ## 3.0.6.0
 * Add Context Menu calls on empty space
 * Update packages

package.json

@@ -1,6 +1,6 @@
 {
   "name": "powerbi-visuals-streamgraph",
-  "version": "3.0.6.0",
+  "version": "3.0.7.0",
   "description": "A stacked area chart with smooth interpolation. Often used to display values over time.",
   "repository": {
     "type": "git",

pbiviz.json

@@ -1,15 +1,15 @@
 {
   "visual": {
     "name": "StreamGraph",
-    "displayName": "Stream Graph 3.0.6.0",
+    "displayName": "Stream Graph 3.0.7.0",
     "guid": "StreamGraph1446659696222",
     "visualClassName": "StreamGraph",
-    "version": "3.0.6.0",
+    "version": "3.0.7.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"
   },
-  "apiVersion": "5.4.0",
+  "apiVersion": "5.7.0",
   "author": {
     "name": "Microsoft",
     "email": "[email protected]"

src/streamGraphSettingsModel.ts

@@ -221,10 +221,10 @@ export class EnableLegendCardSettings extends Card {
     name: string = "legend";
     displayName: string = "Legend";
     displayNameKey: string = "Visual_Legend";
-    slices = [this.show, this.positionDropDown, this.showAxisTitle, this.legendName, this.labelColor, this.fontSize];
+    slices = [this.positionDropDown, this.showAxisTitle, this.legendName, this.labelColor, this.fontSize];
 }
 
-export class EnableDataLabelsCardSettings extends Card{
+export class EnableDataLabelsCardSettings extends Card {
     show = new formattingSettings.ToggleSwitch({
         name: "show",
         displayName: undefined,
@@ -268,7 +268,7 @@ export class EnableDataLabelsCardSettings extends Card{
     name: string = "labels";
     displayName: string = "Data Labels";
     displayNameKey: string = "Visual_DataPointsLabels";
-    slices = [this.show, this.showValues, this.color, this.fontSize];
+    slices = [this.showValues, this.color, this.fontSize];
 }
 
 export class EnableGraphCurvatureCardSettings extends Card{

src/visual.ts

@@ -1071,9 +1071,13 @@ export class StreamGraph implements IVisual {
     private static getStreamGraphLabelLayout(
         xScale: ScaleLinear<number, number>,
         yScale: ScaleLinear<number, number>,
-        enableDataLabelsCardSettings: EnableDataLabelsCardSettings
+        enableDataLabelsCardSettings: EnableDataLabelsCardSettings,
+        colorPalette: ISandboxExtendedColorPalette
     ): ILabelLayout {
 
+        const colorHelper = new ColorHelper(colorPalette);
+        const color = enableDataLabelsCardSettings.color.value.value;
+
         const fontSize: string = PixelConverter.fromPoint(enableDataLabelsCardSettings.fontSize.value);
 
         return {
@@ -1086,7 +1090,7 @@ export class StreamGraph implements IVisual {
                 return d != null && d.text != null;
             },
             style: {
-                "fill": enableDataLabelsCardSettings.color.value.value,
+                "fill": colorHelper.isHighContrast ? colorHelper.getHighContrastColor("foreground", color) : color,
                 "font-size": fontSize,
             },
         };
@@ -1185,7 +1189,8 @@ export class StreamGraph implements IVisual {
             const layout: ILabelLayout = StreamGraph.getStreamGraphLabelLayout(
                 labelsXScale,
                 yScale,
-                this.data.formattingSettings.enableDataLabelsCardSettings);
+                this.data.formattingSettings.enableDataLabelsCardSettings,
+                this.colorPalette);
 
             // Merge all points into a single array
             let dataPointsArray: StreamDataPoint[] = [];
@@ -1262,8 +1267,6 @@ export class StreamGraph implements IVisual {
             dataLabelUtils.cleanDataLabels(this.svg);
         }
 
-        selectionMerged.attr("focusable", true);
-
         return selectionMerged;
     }