diff --git a/src/behavior/visualBehavior.ts b/src/behavior/visualBehavior.ts index 5ef6fae..db58e6e 100644 --- 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 = this.options.mainGraphicsContext .selectAll(MekkoChart.SeriesSelector.selectorName); diff --git a/src/columnChart/baseColumnChart.ts b/src/columnChart/baseColumnChart.ts index c835b1a..efbc16d 100644 --- 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 index 4dfa0ae..8336fe7 100644 --- 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 index 20788bb..940b83a 100644 --- 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 index 8475254..0bac5a1 100644 --- 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 (layers[i]).getData().series) { diff --git a/src/visual.ts b/src/visual.ts index b5dccf6..84984b7 100644 --- 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 index ae67643..ecd0a36 100644 --- 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 index 2476c64..20a9458 100644 --- a/style/visual.less +++ b/style/visual.less @@ -44,6 +44,8 @@ } .series .column { + stroke-width: 2px; + &:focus { outline: none; }