diff --git a/src/Classes/plotPropertiesClass.ts b/src/Classes/plotPropertiesClass.ts index 7a5d60f..8e28d35 100644 --- 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,17 +121,17 @@ 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 = { @@ -137,17 +139,17 @@ export default class plotPropertiesClass { 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 index 47814de..d2eac1c 100644 --- 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 = null; @@ -82,9 +91,19 @@ export default class viewModelClass { this.plotProperties = new plotPropertiesClass(); this.firstRun = true this.splitIndexes = new Array(); + 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 = (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 index 598dad1..e9157db 100644 --- 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)); }