Merge pull request #269 from AUS-DOH-Safety-and-Quality/high-contrast…

…-support Add support for high contrast mode
AUS-DOH-Safety-and-Quality · Apr 1, 2024 · 03da158 · 03da158
2 parents a0ff7c7 + a4f3bae
commit 03da158
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 10 deletions.
diff --git a/src/Classes/plotPropertiesClass.ts b/src/Classes/plotPropertiesClass.ts
@@ -3,6 +3,7 @@ import { truncate, min, max, type dataObject } from "../Functions";
 import type powerbi from "powerbi-visuals-api";
 type VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
 import type { defaultSettingsType, plotData, controlLimitsObject, derivedSettingsClass } from "../Classes";
+import { colourPaletteType } from "./viewModelClass";
 
 export type axisProperties = {
   lower: number,
@@ -49,7 +50,8 @@ export default class plotPropertiesClass {
           controlLimits: controlLimitsObject,
           inputData: dataObject,
           inputSettings: defaultSettingsType,
-          derivedSettings: derivedSettingsClass): void {
+          derivedSettings: derivedSettingsClass,
+          colorPalette: colourPaletteType): void {
 
     // Get the width and height of plotting space
     this.width = options.viewport.width;
@@ -119,35 +121,35 @@ export default class plotPropertiesClass {
       upper: xUpperLimit,
       start_padding: inputSettings.canvas.left_padding + leftLabelPadding,
       end_padding: inputSettings.canvas.right_padding,
-      colour: inputSettings.x_axis.xlimit_colour,
+      colour: colorPalette.isHighContrast ? colorPalette.foregroundColour : inputSettings.x_axis.xlimit_colour,
       ticks: inputSettings.x_axis.xlimit_ticks,
       tick_size: `${xTickSize}px`,
       tick_font: inputSettings.x_axis.xlimit_tick_font,
-      tick_colour: inputSettings.x_axis.xlimit_tick_colour,
+      tick_colour: colorPalette.isHighContrast ? colorPalette.foregroundColour : inputSettings.x_axis.xlimit_tick_colour,
       tick_rotation: inputSettings.x_axis.xlimit_tick_rotation,
       tick_count: inputSettings.x_axis.xlimit_tick_count,
       label: inputSettings.x_axis.xlimit_label,
       label_size: `${inputSettings.x_axis.xlimit_label_size}px`,
       label_font: inputSettings.x_axis.xlimit_label_font,
-      label_colour: inputSettings.x_axis.xlimit_label_colour
+      label_colour: colorPalette.isHighContrast ? colorPalette.foregroundColour : inputSettings.x_axis.xlimit_label_colour
     };
 
     this.yAxis = {
       lower: yLowerLimit,
       upper: yUpperLimit,
       start_padding: inputSettings.canvas.lower_padding + lowerLabelPadding,
       end_padding: inputSettings.canvas.upper_padding,
-      colour: inputSettings.y_axis.ylimit_colour,
+      colour: colorPalette.isHighContrast ? colorPalette.foregroundColour : inputSettings.y_axis.ylimit_colour,
       ticks: inputSettings.y_axis.ylimit_ticks,
       tick_size: `${yTickSize}px`,
       tick_font: inputSettings.y_axis.ylimit_tick_font,
-      tick_colour: inputSettings.y_axis.ylimit_tick_colour,
+      tick_colour: colorPalette.isHighContrast ? colorPalette.foregroundColour : inputSettings.y_axis.ylimit_tick_colour,
       tick_rotation: inputSettings.y_axis.ylimit_tick_rotation,
       tick_count: inputSettings.y_axis.ylimit_tick_count,
       label: inputSettings.y_axis.ylimit_label,
       label_size: `${inputSettings.y_axis.ylimit_label_size}px`,
       label_font: inputSettings.y_axis.ylimit_label_font,
-      label_colour: inputSettings.y_axis.ylimit_label_colour
+      label_colour: colorPalette.isHighContrast ? colorPalette.foregroundColour : inputSettings.y_axis.ylimit_label_colour
     };
 
     this.initialiseScale();

diff --git a/src/Classes/viewModelClass.ts b/src/Classes/viewModelClass.ts
@@ -60,6 +60,14 @@ export type outliersObject = {
   shift: string[];
 }
 
+export type colourPaletteType = {
+  isHighContrast: boolean,
+  foregroundColour: string,
+  backgroundColour: string,
+  foregroundSelectedColour: string,
+  hyperlinkColour: string
+};
+
 export default class viewModelClass {
   inputData: dataObject;
   inputSettings: settingsClass;
@@ -72,6 +80,7 @@ export default class viewModelClass {
   splitIndexes: number[];
   groupStartEndIndexes: number[][];
   firstRun: boolean;
+  colourPalette: colourPaletteType;
 
   constructor() {
     this.inputData = <dataObject>null;
@@ -82,9 +91,19 @@ export default class viewModelClass {
     this.plotProperties = new plotPropertiesClass();
     this.firstRun = true
     this.splitIndexes = new Array<number>();
+    this.colourPalette = null;
   }
 
   update(options: VisualUpdateOptions, host: IVisualHost) {
+    if (this.colourPalette === null || this.colourPalette === undefined) {
+      this.colourPalette = {
+        isHighContrast: host.colorPalette.isHighContrast,
+        foregroundColour: host.colorPalette.foreground.value,
+        backgroundColour: host.colorPalette.background.value,
+        foregroundSelectedColour: host.colorPalette.foregroundSelected.value,
+        hyperlinkColour: host.colorPalette.hyperlink.value
+      }
+    }
     // Only re-construct data and re-calculate limits if they have changed
     if (options.type === 2 || this.firstRun) {
       const split_indexes: string = <string>(options.dataViews[0]?.metadata?.objects?.split_indexes_storage?.split_indexes) ?? "[]";
@@ -120,7 +139,8 @@ export default class viewModelClass {
       this.controlLimits,
       this.inputData,
       this.inputSettings.settings,
-      this.inputSettings.derivedSettings
+      this.inputSettings.derivedSettings,
+      this.colourPalette
     )
     this.firstRun = false;
   }
@@ -166,7 +186,10 @@ export default class viewModelClass {
 
     for (let i: number = 0; i < this.controlLimits.keys.length; i++) {
       const index: number = this.controlLimits.keys[i].x;
-      const aesthetics: defaultSettingsType["scatter"] = this.inputData.scatter_formatting[i]
+      const aesthetics: defaultSettingsType["scatter"] = this.inputData.scatter_formatting[i];
+      if (this.colourPalette.isHighContrast) {
+        aesthetics.colour = this.colourPalette.foregroundColour;
+      }
       if (this.outliers.shift[i] !== "none") {
         aesthetics.colour = getAesthetic(this.outliers.shift[i], "outliers",
                                   "shift_colour", this.inputSettings.settings) as string;

diff --git a/src/D3 Plotting Functions/drawLines.ts b/src/D3 Plotting Functions/drawLines.ts
@@ -24,7 +24,11 @@ export default function drawLines(selection: svgBaseType, visualObj: Visual) {
                   })(d[1])
       })
       .attr("fill", "none")
-      .attr("stroke", d => getAesthetic(d[0], "lines", "colour", visualObj.viewModel.inputSettings.settings))
+      .attr("stroke", d => {
+        return visualObj.viewModel.colourPalette.isHighContrast
+                ? visualObj.viewModel.colourPalette.foregroundColour
+                : getAesthetic(d[0], "lines", "colour", visualObj.viewModel.inputSettings.settings)
+      })
       .attr("stroke-width", d => getAesthetic(d[0], "lines", "width", visualObj.viewModel.inputSettings.settings))
       .attr("stroke-dasharray", d => getAesthetic(d[0], "lines", "type", visualObj.viewModel.inputSettings.settings));
 }