Add high contrast mode support

kullJul · Jul 18, 2024 · 7cb8c8b · 7cb8c8b
1 parent 53aa6a3
commit 7cb8c8b
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 8 deletions.
diff --git a/src/behavior/visualBehavior.ts b/src/behavior/visualBehavior.ts
@@ -99,6 +99,14 @@ export class VisualBehavior implements IInteractiveBehavior {
                 !dataPoint.selected && this.options.hasHighlights);
         });
 
+        this.options.bars.style("stroke-opacity", (dataPoint: MekkoChartColumnDataPoint) => {
+            return utils.getFillOpacity(
+                dataPoint.selected,
+                dataPoint.highlight,
+                !dataPoint.highlight && hasSelection,
+                !dataPoint.selected && this.options.hasHighlights);
+        });
+
         const series: Selection<any, any, any, any> = this.options.mainGraphicsContext
         .selectAll(MekkoChart.SeriesSelector.selectorName);
 

diff --git a/src/columnChart/baseColumnChart.ts b/src/columnChart/baseColumnChart.ts
@@ -122,7 +122,7 @@ import * as axisType from "./../axis/type";
 
 import IViewport = powerbi.IViewport;
 import IVisualHost = powerbi.extensibility.visual.IVisualHost;
-import IColorPalette = powerbi.extensibility.IColorPalette;
+import ISandboxExtendedColorPalette = powerbi.extensibility.ISandboxExtendedColorPalette;
 import ILocalizationManager = powerbi.extensibility.ILocalizationManager;
 import DataViewCategorical = powerbi.DataViewCategorical;
 import DataViewMetadataColumn = powerbi.DataViewMetadataColumn;
@@ -197,7 +197,7 @@ export class BaseColumnChart implements IColumnChart {
 
     private data: MekkoColumnChartData;
 
-    private colorPalette: IColorPalette;
+    private colorPalette: ISandboxExtendedColorPalette;
     private visualHost: IVisualHost;
     private localizationManager: ILocalizationManager;
 
@@ -289,7 +289,7 @@ export class BaseColumnChart implements IColumnChart {
     public static converter(
         visualHost: IVisualHost,
         categorical: DataViewCategorical,
-        colors: IColorPalette,
+        colors: ISandboxExtendedColorPalette,
         is100PercentStacked: boolean = false,
         isScalar: boolean = false,
         supportsOverflow: boolean = false,

diff --git a/src/converterStrategy/baseConverterStrategy.ts b/src/converterStrategy/baseConverterStrategy.ts
@@ -29,7 +29,7 @@ import { legendInterfaces } from "powerbi-visuals-utils-chartutils";
 import * as formattingUtils from "./../formattingUtils";
 import { max, sum, min } from "d3-array";
 
-import IColorPalette = powerbi.extensibility.IColorPalette;
+import ISandboxExtendedColorPalette = powerbi.extensibility.ISandboxExtendedColorPalette;
 import IVisualHost = powerbi.extensibility.visual.IVisualHost;
 import DataViewCategorical = powerbi.DataViewCategorical;
 import DataViewMetadataColumn = powerbi.DataViewMetadataColumn;
@@ -65,6 +65,7 @@ export class BaseConverterStrategy implements ConverterStrategy {
     private static YColumnName: string = "Y";
 
     private static SortField: string = "categoryValue";
+    private static DefaultLegendLabelColor: string = "black";
 
     private dataView: DataViewCategorical;
     private visualHost: IVisualHost;
@@ -79,7 +80,7 @@ export class BaseConverterStrategy implements ConverterStrategy {
     }
 
     // eslint-disable-next-line max-lines-per-function
-    public getLegend(colorPalette: IColorPalette, settingsModel: VisualFormattingSettingsModel): LegendSeriesInfo {
+    public getLegend(colorPalette: ISandboxExtendedColorPalette, settingsModel: VisualFormattingSettingsModel): LegendSeriesInfo {
         const legend: MekkoLegendDataPoint[] = [];
         const seriesSources: DataViewMetadataColumn[] = [];
         const seriesObjects: DataViewObjects[][] = [];
@@ -171,7 +172,7 @@ export class BaseConverterStrategy implements ConverterStrategy {
                     }
 
                     legend.push({
-                        color,
+                        color: colorPalette.isHighContrast ? colorPalette.background.value : color,
                         label,
                         markerShape: LegendIcon.circle,
                         identity: selectionId,
@@ -193,10 +194,13 @@ export class BaseConverterStrategy implements ConverterStrategy {
                 : "";
         }
 
+        const labelColor: string = colorPalette.isHighContrast ? colorPalette.foreground.value : BaseConverterStrategy.DefaultLegendLabelColor;
+
         const legendData: ILegendData = {
             title: legendTitle,
             dataPoints: legend,
             grouped: grouped,
+            labelColor: labelColor
         };
 
         return {

diff --git a/src/dataInterfaces.ts b/src/dataInterfaces.ts
@@ -29,7 +29,7 @@ import PrimitiveValue = powerbi.PrimitiveValue;
 import NumberRange = powerbi.NumberRange;
 import IViewport = powerbi.IViewport;
 import IVisualHost = powerbi.extensibility.visual.IVisualHost;
-import IColorPalette = powerbi.extensibility.IColorPalette;
+import ISandboxExtendedColorPalette = powerbi.extensibility.ISandboxExtendedColorPalette;
 import DataViewMetadataColumn = powerbi.DataViewMetadataColumn;
 import CustomVisualOpaqueIdentity = powerbi.visuals.CustomVisualOpaqueIdentity;
 import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
@@ -128,7 +128,7 @@ export interface ILegendGroup extends ILegend {
 
 export interface IMekkoChartVisualHost {
     updateLegend(data: ILegendData): void;
-    getSharedColors(): IColorPalette;
+    getSharedColors(): ISandboxExtendedColorPalette;
     triggerRender(suppressAnimations: boolean): void;
 }
 

diff --git a/src/settings.ts b/src/settings.ts
@@ -1,4 +1,5 @@
 import powerbi from "powerbi-visuals-api";
+import ISandboxExtendedColorPalette = powerbi.extensibility.ISandboxExtendedColorPalette;
 import ISelectionId = powerbi.visuals.ISelectionId;
 
 import { valueFormatter } from "powerbi-visuals-utils-formattingutils";
@@ -398,6 +399,7 @@ export class ValueAxisSettings extends FormattingSettingsSimpleCard {
 export class DataPointSettings extends FormattingSettingsSimpleCard {
     public name: string = "dataPoint";
     public displayNameKey:string = "Visual_Data_Colors";
+    public defaultStrokeColor: string = "transparent";
 
     public defaultColor = new formattingSettings.ColorPicker({
         name: "defaultColor",
@@ -457,6 +459,26 @@ export class VisualFormattingSettingsModel extends FormattingSettingsModel {
         this.drillControl
     ];
 
+    public setHighContrastMode(colorPalette: ISandboxExtendedColorPalette): void {
+        const isHighContrastMode: boolean = colorPalette.isHighContrast;
+        if (isHighContrastMode){
+            const foregroundColor: string = colorPalette.foreground.value;
+            const backgroundColor: string = colorPalette.background.value;
+
+            this.columnBorder.color.value.value = backgroundColor;
+            this.labels.color.value.value = foregroundColor;
+            this.categoryAxis.labelColor.value.value = foregroundColor;
+            this.valueAxis.labelColor.value.value = foregroundColor;
+            this.dataPoint.defaultStrokeColor = foregroundColor;
+        }
+
+        this.dataPoint.visible = !isHighContrastMode;
+        this.columnBorder.color.visible = !isHighContrastMode;
+        this.labels.color.visible = !isHighContrastMode;
+        this.categoryAxis.labelColor.visible = !isHighContrastMode;
+        this.valueAxis.labelColor.visible = !isHighContrastMode;
+    }
+
     public setDataPointColorPickerSlices(layers: IColumnChart[]) {
         for (let i: number = 0; i < layers.length; i++) {
             for (const series of (<BaseColumnChart>layers[i]).getData().series) {

diff --git a/src/visual.ts b/src/visual.ts
@@ -41,6 +41,7 @@ import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructor
 import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
 import IVisual = powerbi.extensibility.visual.IVisual;
 import ILocalizationManager = powerbi.extensibility.ILocalizationManager;
+import ISandboxExtendedColorPalette = powerbi.extensibility.ISandboxExtendedColorPalette;
 
 import {
     MekkoColumnChartData,
@@ -290,6 +291,7 @@ export class MekkoChart implements IVisual {
     public static OuterPaddingRatio: number = 0.4;
     public static InnerPaddingRatio: number = 0.2;
     public static TickLabelPadding: number = 2;
+    public static DefaultAxisLinesColor: string = "black";
 
     private rootElement: Selection;
     private legendParent: Selection;
@@ -350,6 +352,7 @@ export class MekkoChart implements IVisual {
     private formattingSettingsService: FormattingSettingsService;
     private localizationManager: ILocalizationManager;
     private selectionManager: ISelectionManager;
+    private colorPalette: ISandboxExtendedColorPalette;
 
     public settingsModel: VisualFormattingSettingsModel;
 
@@ -360,6 +363,7 @@ export class MekkoChart implements IVisual {
     public init(options: VisualConstructorOptions) {
         this.visualInitOptions = options;
         this.visualHost = options.host;
+        this.colorPalette = options.host.colorPalette;
 
         select("body").style(
             "-webkit-tap-highlight-color", "transparent"
@@ -687,6 +691,7 @@ export class MekkoChart implements IVisual {
 
         if (this.dataViews && this.dataViews.length > 0) {
             this.settingsModel = this.formattingSettingsService.populateFormattingSettingsModel(VisualFormattingSettingsModel, this.dataViews[0]);
+            this.settingsModel.setHighContrastMode(this.colorPalette);
         }
 
         for (let layerIndex: number = 0, length: number = this.layers.length; layerIndex < length; layerIndex++) {
@@ -965,6 +970,10 @@ export class MekkoChart implements IVisual {
                 if (this.layerLegendData.grouped) {
                     legendData.grouped = true;
                 }
+
+                if (this.layerLegendData.labelColor){
+                    legendData.labelColor = this.layerLegendData.labelColor;
+                }
             }
         }
 
@@ -1102,6 +1111,7 @@ export class MekkoChart implements IVisual {
                     dataPoints: reducedLegends[index].data
                 };
 
+
                 LegendData.update(legendData, legendProperties);
                 legend.drawLegend(legendData, this.currentViewport);
             });

diff --git a/src/visualStrategy/baseVisualStrategy.ts b/src/visualStrategy/baseVisualStrategy.ts
@@ -580,6 +580,7 @@ export class BaseVisualStrategy implements IVisualStrategy {
                     hasSelection,
                     data.hasHighlights)
             )
+            .style("stroke", settingsModel.dataPoint.defaultStrokeColor)
             .attr("height", layout.shapeLayout.height)
             .attr("width", layout.shapeLayout.width)
             .attr("x", layout.shapeLayout.x)

diff --git a/style/visual.less b/style/visual.less
@@ -44,6 +44,8 @@
     }
 
     .series .column {
+        stroke-width: 2px;
+
         &:focus {
             outline: none;
         }