Move 'pointer edge' settings to 'cells' and group cells slices

microsoft · Sep 23, 2024 · 72cfd51 · 72cfd51
1 parent b8b4e04
commit 72cfd51
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 90 deletions.
diff --git a/capabilities.json b/capabilities.json
@@ -45,24 +45,6 @@
                 }
             }
         },
-        "pointerEdge": {
-            "properties": {
-                "show": {
-                    "type": {
-                        "bool": true
-                    }
-                },
-                "color": {
-                    "type": {
-                        "fill": {
-                            "solid": {
-                                "color": true
-                            }
-                        }
-                    }
-                }
-            }
-        },
         "forceSelection": {
             "properties": {
                 "currentPeriod": {
@@ -316,6 +298,20 @@
                     "type": {
                         "numeric": true
                     }
+                },
+                "showEdges": {
+                    "type": {
+                        "bool": true
+                    }
+                },
+                "edgeColor": {
+                    "type": {
+                        "fill": {
+                            "solid": {
+                                "color": true
+                            }
+                        }
+                    }
                 }
             }
         },

diff --git a/src/timeLine.ts b/src/timeLine.ts
@@ -522,7 +522,7 @@ export class Timeline implements powerbiVisualsApi.extensibility.visual.IVisual
 
             this.visualSettings.labels.fontColor.value.value = foreground.value;
 
-            this.visualSettings.cursor.color.value.value = foreground.value;
+            this.visualSettings.cells.edgeColor.value.value = foreground.value;
         }
     }
 
@@ -977,7 +977,7 @@ export class Timeline implements powerbiVisualsApi.extensibility.visual.IVisual
                     return cursorDataPoint.cursorIndex * Math.PI + 2 * Math.PI;
                 }),
             )
-            .style("fill", this.visualSettings.cursor.show.value ? this.visualSettings.cursor.color.value.value : "transparent")
+            .style("fill", this.visualSettings.cells.showEdges.value ? this.visualSettings.cells.edgeColor.value.value : "transparent")
     }
 
     public renderTimeRangeText(timelineData: ITimelineData, rangeHeaderSettings: RangeHeaderSettingsCard): void {
@@ -1098,14 +1098,18 @@ export class Timeline implements powerbiVisualsApi.extensibility.visual.IVisual
     }
 
     public getFormattingModel(): powerbi.visuals.FormattingModel {
+        this.updateFormattingSettingsModel();
+        return this.formattingSettingsService.buildFormattingModel(this.visualSettings);
+    }
+
+    private updateFormattingSettingsModel(): void {
         // These options have no sense if ISO standard was picked
         if (<WeekStandard>this.visualSettings.weeksDeterminationStandards.weekStandard.value.value === WeekStandard.ISO8061) {
             this.visualSettings.weekDay.disabled = true;
             this.visualSettings.calendar.disabled = true;
         }
 
         const granularity = this.getGranularityType();
-
         switch (granularity) {
             case GranularityType.year:
                 this.visualSettings.labels.displayQuarters.visible = false;
@@ -1134,7 +1138,14 @@ export class Timeline implements powerbiVisualsApi.extensibility.visual.IVisual
                 break;
         }
 
-        return this.formattingSettingsService.buildFormattingModel(this.visualSettings);
+        if (!this.visualSettings.cells.enableManualSizing.value) {
+            this.visualSettings.cells.height.visible = false;
+            this.visualSettings.cells.width.visible = false;
+        }
+
+        if (!this.visualSettings.cells.showEdges.value) {
+            this.visualSettings.cells.edgeColor.visible = false;
+        }
     }
 
     public selectPeriod(granularityType: GranularityType): void {

diff --git a/src/timeLineSettingsModel.ts b/src/timeLineSettingsModel.ts
@@ -6,6 +6,7 @@ import {Month} from "./calendars/month";
 import Card = formattingSettings.SimpleCard;
 import CompositeCard = formattingSettings.CompositeCard;
 import Model = formattingSettings.Model;
+import Group = formattingSettings.Group;
 import IEnumMember = powerbi.IEnumMember;
 import ValidatorType = powerbi.visuals.ValidatorType;
 import {Weekday} from "./calendars/weekday";
@@ -56,28 +57,6 @@ class TextSizeDefaults {
     public static readonly Max: number = 40;
 }
 
-class PointerEdgeSettingsCard extends Card {
-    show = new formattingSettings.ToggleSwitch({
-        name: "show",
-        displayName: "Show",
-        displayNameKey: "Visual_Show",
-        value: true,
-    });
-
-    color = new formattingSettings.ColorPicker({
-        name: "color",
-        displayName: "Color",
-        displayNameKey: "Visual_Color",
-        value: { value: "#808080" },
-    });
-
-    topLevelSlice = this.show;
-    name: string = "pointerEdge";
-    displayName: string = "PointerEdge";
-    displayNameKey: string = "Visual_PointerEdge";
-    slices = [this.color];
-}
-
 class ForceSelectionSettingsCard extends Card {
     currentPeriod = new formattingSettings.ToggleSwitch({
         name: "currentPeriod",
@@ -204,38 +183,10 @@ export class RangeHeaderSettingsCard extends Card {
     slices = [this.fontColor, this.textSize];
 }
 
-export class CellsSettingsCard extends Card {
+export class CellsSettingsCard extends CompositeCard {
     public static readonly FillSelectedDefaultColor: string = "#ADD8E6";
     public static readonly FillUnselectedDefaultColor: string = "#FFFFFF";
 
-    fillSelected = new formattingSettings.ColorPicker({
-        name: "fillSelected",
-        displayName: "Selected cell color",
-        displayNameKey: "Visual_Cell_SelectedColor",
-        value: { value: CellsSettingsCard.FillSelectedDefaultColor },
-    });
-
-    strokeSelected = new formattingSettings.ColorPicker({
-        name: "strokeSelected",
-        displayName: "Selected cell stroke color",
-        displayNameKey: "Visual_Cell_SelectedStrokeColor",
-        value: { value: "#333444" },
-    })
-
-    fillUnselected = new formattingSettings.ColorPicker({
-        name: "fillUnselected",
-        displayName: "Unselected cell color",
-        displayNameKey: "Visual_Cell_UnselectedColor",
-        value: { value: CellsSettingsCard.FillUnselectedDefaultColor },
-    });
-
-    strokeUnselected = new formattingSettings.ColorPicker({
-        name: "strokeUnselected",
-        displayName: "Unselected cell stroke color",
-        displayNameKey: "Visual_Cell_UnselectedStrokeColor",
-        value: { value: "#333444" },
-    });
-
     strokeWidth = new formattingSettings.NumUpDown({
         name: "strokeWidth",
         displayName: "Stroke width",
@@ -258,6 +209,20 @@ export class CellsSettingsCard extends Card {
         }
     });
 
+    showEdges = new formattingSettings.ToggleSwitch({
+        name: "showEdges",
+        displayName: "Show edges",
+        displayNameKey: "Visual_ShowEdges",
+        value: true,
+    });
+
+    edgeColor = new formattingSettings.ColorPicker({
+        name: "edgeColor",
+        displayName: "Edge color",
+        displayNameKey: "Visual_EdgeColor",
+        value: { value: "#808080" },
+    });
+
     enableManualSizing = new formattingSettings.ToggleSwitch({
         name: "enableManualSizing",
         displayName: "Enable manual sizing",
@@ -285,20 +250,59 @@ export class CellsSettingsCard extends Card {
         },
     });
 
+    cellsGeneralGroup = new Group({
+        name: "cellsGeneralGroup",
+        displayName: "General",
+        displayNameKey: "Visual_General",
+        slices: [this.strokeWidth, this.gapWidth, this.showEdges, this.edgeColor, this.enableManualSizing, this.width, this.height],
+    })
+
+    fillSelected = new formattingSettings.ColorPicker({
+        name: "fillSelected",
+        displayName: "Color",
+        displayNameKey: "Visual_Color",
+        value: { value: CellsSettingsCard.FillSelectedDefaultColor },
+    });
+
+    strokeSelected = new formattingSettings.ColorPicker({
+        name: "strokeSelected",
+        displayName: "Stroke color",
+        displayNameKey: "Visual_StrokeColor",
+        value: { value: "#333444" },
+    })
+
+    selectedCellsGroup = new Group({
+        name: "selectedCellsGroup",
+        displayName: "Selected cells",
+        displayNameKey: "Visual_SelectedCells",
+        slices: [this.fillSelected, this.strokeSelected],
+    });
+
+    fillUnselected = new formattingSettings.ColorPicker({
+        name: "fillUnselected",
+        displayName: "Color",
+        displayNameKey: "Visual_Color",
+        value: { value: CellsSettingsCard.FillUnselectedDefaultColor },
+    });
+
+    strokeUnselected = new formattingSettings.ColorPicker({
+        name: "strokeUnselected",
+        displayName: "Stroke color",
+        displayNameKey: "Visual_StrokeColor",
+        value: { value: "#333444" },
+    });
+
+    unselectedCellsGroup = new Group({
+        name: "unselectedCellsGroup",
+        displayName: "Unselected cells",
+        displayNameKey: "Visual_UnselectedCells",
+        slices: [this.fillUnselected, this.strokeUnselected],
+    });
+
     name: string = "cells";
     displayName: string = "Cells";
     displayNameKey: string = "Visual_Cells";
-    slices = [
-        this.fillSelected,
-        this.strokeSelected,
-        this.fillUnselected,
-        this.strokeUnselected,
-        this.strokeWidth,
-        this.gapWidth,
-        this.enableManualSizing,
-        this.width,
-        this.height,
-    ];
+    groups = [this.cellsGeneralGroup, this.selectedCellsGroup, this.unselectedCellsGroup];
 }
 
 export class GranularitySettingsCard extends Card {
@@ -474,7 +478,6 @@ class ScrollAutoAdjustmentSettingsCard extends Card {
 
 
 export class TimeLineSettingsModel extends Model {
-    cursor = new PointerEdgeSettingsCard();
     forceSelection = new ForceSelectionSettingsCard();
     weekDay = new WeekDaySettingsCard();
     weeksDeterminationStandards = new WeeksDeterminationStandardsSettingsCard();
@@ -486,7 +489,6 @@ export class TimeLineSettingsModel extends Model {
     scrollAutoAdjustment = new ScrollAutoAdjustmentSettingsCard();
 
     cards: Array<Card | CompositeCard> = [
-        this.cursor,
         this.forceSelection,
         this.weeksDeterminationStandards,
         this.calendar,

diff --git a/stringResources/en-US/resources.resjson b/stringResources/en-US/resources.resjson
@@ -32,20 +32,21 @@
 	"Visual_Day_Saturday": "Saturday",
 	"Visual_RangeHeader": "Range Header",
 	"Visual_Show": "Show",
+	"Visual_ShowEdges": "Show edges",
 	"Visual_FontColor": "Font color",
 	"Visual_TextSize": "Text Size",
 	"Visual_Cells": "Cells",
-	"Visual_Cell_SelectedColor": "Selected cell color",
-	"Visual_Cell_UnselectedColor": "Unselected cell color",
-	"Visual_Cell_SelectedStrokeColor": "Selected cell stroke color",
-	"Visual_Cell_UnselectedStrokeColor": "Unselected cell stroke color",
+	"Visual_SelectedCells": "Selected cells",
+	"Visual_UnselectedCells": "Unselected cells",
 	"Visual_Cell_EnableManualSizing": "Enable manual sizing",
 	"Visual_Cell_Width": "Cell width",
 	"Visual_Cell_Height": "Cell height",
 	"Visual_Cell_StrokeWidth": "Stroke width",
 	"Visual_Cell_GapWidth": "Gap width",
 	"Visual_Granularity": "Granularity",
 	"Visual_Color": "Color",
+	"Visual_StrokeColor": "Stroke color",
+	"Visual_EdgeColor": "Edge color",
 	"Visual_ScaleColor": "Scale color",
 	"Visual_SliderColor": "Slider color",
 	"Visual_Granularity_Year": "Year",