Change the default color for "unselected cells" to transparent

microsoft · Oct 1, 2024 · 287442f · 287442f
1 parent e968398
commit 287442f
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 19 deletions.
diff --git a/.gitignore b/.gitignore
@@ -12,3 +12,6 @@ webpack.statistics.prod.html
 
 ## JetBrains
 .idea/
+
+## VSCode
+.vscode/
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,6 @@
+## 2.5.11
+* Change the default color for "unselected cells" to transparent
+
 ## 2.5.10
 * Fix the bug with scroll area being too big
 * Update packages

diff --git a/src/timeLine.ts b/src/timeLine.ts
@@ -532,7 +532,7 @@ export class Timeline implements powerbiVisualsApi.extensibility.visual.IVisual
     public timelineData: ITimelineData;
     public calendar: Calendar;
 
-    private visualSettings: TimeLineSettingsModel;
+    public visualSettings: TimeLineSettingsModel;
     private formattingSettingsService: FormattingSettingsService;
 
     private timelineProperties: ITimelineProperties;
@@ -886,7 +886,7 @@ export class Timeline implements powerbiVisualsApi.extensibility.visual.IVisual
 
                 return isSelected
                     ? cellsSettings.fillSelected.value.value
-                    : (cellsSettings.fillUnselected.value.value || Utils.DefaultCellColor);
+                    : (cellsSettings.fillUnselected?.value?.value || Utils.DefaultCellColor);
             })
             .style("stroke", (dataPoint: ITimelineDataPoint) => {
                 const isSelected: boolean = Utils.IS_GRANULE_SELECTED(dataPoint, this.timelineData);

diff --git a/src/timeLineSettingsModel.ts b/src/timeLineSettingsModel.ts
@@ -184,8 +184,8 @@ export class RangeHeaderSettingsCard extends Card {
 }
 
 export class CellsSettingsCard extends CompositeCard {
-    public static readonly FillSelectedDefaultColor: string = "#ADD8E6";
-    public static readonly FillUnselectedDefaultColor: string = "#FFFFFF";
+    public static readonly SelectedDefaultFillColor: string = "#ADD8E6";
+    public static readonly UnselectedDefaultFillColor: string = "";
 
     strokeWidth = new formattingSettings.NumUpDown({
         name: "strokeWidth",
@@ -247,7 +247,7 @@ export class CellsSettingsCard extends CompositeCard {
         name: "fillSelected",
         displayName: "Color",
         displayNameKey: "Visual_Color",
-        value: { value: CellsSettingsCard.FillSelectedDefaultColor },
+        value: { value: CellsSettingsCard.SelectedDefaultFillColor },
     });
 
     strokeSelected = new formattingSettings.ColorPicker({
@@ -282,7 +282,7 @@ export class CellsSettingsCard extends CompositeCard {
         name: "fillUnselected",
         displayName: "Color",
         displayNameKey: "Visual_Color",
-        value: { value: CellsSettingsCard.FillUnselectedDefaultColor },
+        value: { value: CellsSettingsCard.UnselectedDefaultFillColor },
     });
 
     strokeUnselected = new formattingSettings.ColorPicker({

diff --git a/test/visual.test.ts b/test/visual.test.ts
@@ -45,7 +45,7 @@ import {YearGranularity} from "../src/granularity/yearGranularity";
 import {Utils} from "../src/utils";
 import {areColorsEqual, getSolidColorStructuralObject} from "./helpers";
 import {Timeline} from "../src/timeLine";
-import {CellsSettingsCard} from "../src/timeLineSettingsModel";
+import { CellsSettingsCard } from '../src/timeLineSettingsModel';
 import {GranularityMock} from "./granularityMock";
 import {VisualBuilder} from "./visualBuilder";
 import {VisualData} from "./visualData";
@@ -336,7 +336,7 @@ describe("Timeline", () => {
             for (let i: number = 0; i < cellRects.length; i++) {
                 const fillColor: string = d3Select(cellRects[i]).attr("fill");
 
-                assertColorsMatch(fillColor, CellsSettingsCard.FillUnselectedDefaultColor, i === 0);
+                assertColorsMatch(fillColor, CellsSettingsCard.UnselectedDefaultFillColor, i === 0);
             }
         });
     });
@@ -443,14 +443,14 @@ describe("Timeline", () => {
                     const fill: string = getComputedStyle(element).fill;
 
                     const fillColorParsed = parseColorString(fill);
-                    const unselectedFillColor = parseColorString(CellsSettingsCard.FillUnselectedDefaultColor);
+                    const selectedFillColor = parseColorString(visualBuilder.visualPublic.visualSettings.cells.fillSelected.value.value);
 
                     if (fill !== "rgba(0, 0, 0, 0)" &&
                         fill !== Utils.DefaultCellColor &&
-                        (fillColorParsed.R !== unselectedFillColor.R ||
-                        fillColorParsed.G !== unselectedFillColor.G ||
-                        fillColorParsed.B !== unselectedFillColor.B )
-                    ) {
+                        (selectedFillColor.R === fillColorParsed.R &&
+                         selectedFillColor.G === fillColorParsed.G &&
+                         selectedFillColor.B === fillColorParsed.B))
+                    {
                         selectedElements.push(element);
                     }
                 });
@@ -473,13 +473,13 @@ describe("Timeline", () => {
                     const fill: string = getComputedStyle(element).fill;
 
                     const fillColorParsed = parseColorString(fill);
-                    const unselectedFillColor = parseColorString(CellsSettingsCard.FillUnselectedDefaultColor);
+                    const selectedFillColor = parseColorString(visualBuilder.visualPublic.visualSettings.cells.fillSelected.value.value);
 
                     if (fill !== "rgba(0, 0, 0, 0)" &&
                         fill !== Utils.DefaultCellColor &&
-                        fillColorParsed.R !== unselectedFillColor.R &&
-                        fillColorParsed.G !== unselectedFillColor.G &&
-                        fillColorParsed.B !== unselectedFillColor.B) {
+                        fillColorParsed.R === selectedFillColor.R &&
+                        fillColorParsed.G === selectedFillColor.G &&
+                        fillColorParsed.B === selectedFillColor.B) {
                         selectedElements.push(element);
                     }
                 });

diff --git a/test/visualBuilder.ts b/test/visualBuilder.ts
@@ -48,6 +48,10 @@ export class VisualBuilder extends VisualBuilderBase<Timeline> {
         };
     }
 
+    public get visualPublic() {
+        return this.visual;
+    }
+
     private jsonFilters: powerbiVisualsApi.IFilter[] = [];
 
     constructor(width: number, height: number) {
@@ -63,11 +67,11 @@ export class VisualBuilder extends VisualBuilderBase<Timeline> {
     }
 
     public get rootElement(): HTMLElement {
-        return this.element.querySelector<HTMLElement>(".timeline-component");
+        return this.element.querySelector<HTMLElement>(".timeline-component")!;
     }
 
     public get mainElement(): SVGElement {
-        return this.element.querySelector<SVGElement>("svg.timeline");
+        return this.element.querySelector<SVGElement>("svg.timeline")!;
     }
 
     public get headerElement(): SVGElement {