Added x axis labels rotation (#245)

* Added x axis labels rotation

* PR changes

* Fixed bugs related to axis title and label rotation

Author: v-aidaba

capabilities.json

@@ -180,6 +180,12 @@
                     "type": {
                         "bool": true
                     }
+                },
+                "labelOrientationMode": {
+                    "type": {
+                        "text": true
+                    },
+                    "suppressFormatPainterCopy": true
                 }
             }
         },

src/streamGraphSettingsModel.ts

@@ -3,7 +3,7 @@ import ILocalizationManager = powerbi.extensibility.ILocalizationManager;
 
 import { formattingSettings } from "powerbi-visuals-utils-formattingmodel";
 import { legendInterfaces } from "powerbi-visuals-utils-chartutils";
-import { DataOrder, DataOffset } from "./utils";
+import { DataOrder, DataOffset,LabelOrientationMode } from "./utils";
 import { StreamGraphSeries } from "./dataInterfaces";
 import LegendPosition = legendInterfaces.LegendPosition;
 
@@ -31,6 +31,11 @@ const dataOffsetOptions : IEnumMemberWithDisplayNameKey[] = [
     {value : DataOffset[DataOffset.Expand], displayName : "Expand", key: "Visual_DataOffset_Expand"}
 ];
 
+const labelOrientationModeOptions : IEnumMemberWithDisplayNameKey[] = [
+    {value : LabelOrientationMode[LabelOrientationMode.Default], displayName : "Default (Auto)", key: "Visual_LabelOrientation_Default"},
+    {value : LabelOrientationMode[LabelOrientationMode.ForceRotate], displayName : "Force Rotate", key: "Visual_LabelOrientation_ForceRotate"}
+];
+
 export class BaseFontCardSettings extends Card {
     public fontFamily: formattingSettings.FontPicker;
     public fontSize: formattingSettings.NumUpDown;
@@ -59,7 +64,7 @@ export class BaseFontCardSettings extends Card {
                 },
                 maxValue: {
                     type: powerbi.visuals.ValidatorType.Max,
-                    value: 60,
+                    value: 30,
                 }
             }
         });
@@ -114,14 +119,19 @@ class AxisTitleGroup extends BaseFontCardSettings {
 }
 
 class AxisOptionsGroup extends BaseFontCardSettings {
-    constructor(settingName: string, useHighPrecision: boolean = false){
+    constructor(settingName: string, useHighPrecision: boolean = false, showLabelOrientation: boolean = false){
         super();
 
         this.name = `optionsGroup${settingName}`;
         this.displayNameKey = `Visual_Values`;
         this.topLevelSlice = this.show;
 
-        this.slices = [...(useHighPrecision ? [this.highPrecision] : []), this.font, this.labelColor];
+        this.slices = [
+            ...(useHighPrecision ? [this.highPrecision] : []), 
+            this.font, 
+            this.labelColor,
+            ...(showLabelOrientation ? [this.labelOrientationMode] : [])
+        ];
     }
 
     public show = new formattingSettings.ToggleSwitch({
@@ -144,6 +154,14 @@ class AxisOptionsGroup extends BaseFontCardSettings {
         displayNameKey: "Visual_HighPrecision",
         value: false,
     });
+
+    public labelOrientationMode = new formattingSettings.ItemDropdown({
+        items: labelOrientationModeOptions,
+        value: labelOrientationModeOptions[0],
+        displayName: "Label Orientation",
+        displayNameKey: "Visual_LabelOrientation",
+        name: "labelOrientationMode"
+    });
 }
 
 export class GeneralCardSettings extends Card {
@@ -184,13 +202,13 @@ export class BaseAxisCardSettings extends CompositeCard {
     public options: AxisOptionsGroup;
     public groups: Group[];
 
-    constructor(name: string, displayNameKey: string, useHighPrecision: boolean = false){
+    constructor(name: string, displayNameKey: string, useHighPrecision: boolean = false, showLabelOrientation: boolean = false){
         super();
 
         this.name = name;
         this.displayNameKey = displayNameKey;
         this.title = new AxisTitleGroup(name);
-        this.options = new AxisOptionsGroup(name, useHighPrecision);
+        this.options = new AxisOptionsGroup(name, useHighPrecision, showLabelOrientation);
         this.groups = [this.options, this.title];
     }
 }
@@ -360,7 +378,7 @@ export class StreamCardSettings extends CompositeCard {
 
 export class StreamGraphSettingsModel extends Model {
     general = new GeneralCardSettings();
-    categoryAxis = new BaseAxisCardSettings("categoryAxis", "Visual_XAxis");
+    categoryAxis = new BaseAxisCardSettings("categoryAxis", "Visual_XAxis", false, true);
     valueAxis = new BaseAxisCardSettings("valueAxis", "Visual_YAxis", true);
     legend = new LegendCardSettings();
     dataLabels = new DataLabelsCardSettings();
@@ -379,6 +397,7 @@ export class StreamGraphSettingsModel extends Model {
     public setLocalizedOptions(localizationManager: ILocalizationManager) {
         this.setLocalizedDisplayName(dataOrderOptions, localizationManager);
         this.setLocalizedDisplayName(dataOffsetOptions, localizationManager);
+        this.setLocalizedDisplayName(labelOrientationModeOptions, localizationManager);
     }   
 
     private setLocalizedDisplayName(options: IEnumMemberWithDisplayNameKey[], localizationManager: ILocalizationManager) {

src/utils.ts

@@ -53,3 +53,8 @@ export enum DataOffset {
     Silhouette = 1,
     Expand = 2
 }
+
+export enum LabelOrientationMode {
+    Default = 0,
+    ForceRotate = 1
+}