Merge pull request #104 from microsoft/dev/sdabbah/Modify-UseFormatti…

…ngSettingsService

Modify formatting settings to use formatting model utils service & Add strings localization

src/barChart.ts

@@ -32,6 +32,7 @@ import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructor
 import { textMeasurementService } from "powerbi-visuals-utils-formattingutils";
 import { createTooltipServiceWrapper, ITooltipServiceWrapper } from "powerbi-visuals-utils-tooltiputils";
 
+import { FormattingSettingsService } from "powerbi-visuals-utils-formattingmodel";
 import { BarChartSettingsModel } from "./barChartSettingsModel";
 import { getLocalizedString } from "./localization/localizationHelper";
 import { getCategoricalObjectValue, getValue } from "./objectEnumerationUtility";
@@ -165,11 +166,8 @@ export class BarChart implements IVisual {
     private tooltipServiceWrapper: ITooltipServiceWrapper;
     private locale: string;
     private helpLinkElement: Selection<any>;
-    private element: HTMLElement;
-    private isLandingPageOn: boolean;
-    private LandingPageRemoved: boolean;
-    private LandingPage: Selection<any>;
     private averageLine: Selection<SVGElement>;
+    private formattingSettingsService: FormattingSettingsService;
 
     private barSelection: d3.Selection<d3.BaseType, any, d3.BaseType, any>;
 
@@ -196,7 +194,6 @@ export class BarChart implements IVisual {
      */
     constructor(options: VisualConstructorOptions) {
         this.host = options.host;
-        this.element = options.element;
         this.selectionManager = options.host.createSelectionManager();
         this.locale = options.host.locale;
 
@@ -206,6 +203,9 @@ export class BarChart implements IVisual {
 
         this.tooltipServiceWrapper = createTooltipServiceWrapper(this.host.tooltipService, options.element);
 
+        const localizationManager = this.host.createLocalizationManager();
+        this.formattingSettingsService = new FormattingSettingsService(localizationManager);
+
         this.svg = d3Select(options.element)
             .append('svg')
             .classed('barChart', true);
@@ -237,7 +237,9 @@ export class BarChart implements IVisual {
      *                                        the visual had queried.
      */
     public update(options: VisualUpdateOptions) {
-        this.formattingSettings = BarChartSettingsModel.populateFrom(options.dataViews);
+        this.formattingSettings = this.formattingSettingsService.populateFormattingSettingsModel(BarChartSettingsModel, options.dataViews);
+
+
         this.barDataPoints = createSelectorDataPoints(options, this.host);
         this.formattingSettings.populateColorSelector(this.barDataPoints);
 
@@ -512,6 +514,6 @@ export class BarChart implements IVisual {
     }
 
     public getFormattingModel(): powerbi.visuals.FormattingModel {
-        return this.formattingSettings.buildFormattingModel();
+        return this.formattingSettingsService.buildFormattingModel(this.formattingSettings);
     }
 }

src/barChartSettingsModel.ts

@@ -1,12 +1,13 @@
 import powerbi from "powerbi-visuals-api";
 import { dataViewWildcard } from "powerbi-visuals-utils-dataviewutils";
-import { formattingSettings, formattingSettingsModel } from "powerbi-visuals-utils-formattingmodel";
+import { formattingSettings } from "powerbi-visuals-utils-formattingmodel";
 import { BarChartDataPoint } from "./barChart";
 
 import FormattingSettingsCard = formattingSettings.Card;
 import FormattingSettingsSlice = formattingSettings.Slice;
+import FormattingSettingsModel = formattingSettings.Model;
 
-class EnableAxisCardSettings implements FormattingSettingsCard {
+class EnableAxisCardSettings extends FormattingSettingsCard {
     show = new formattingSettings.ToggleSwitch({
         name: "show",
         displayName: undefined,
@@ -16,52 +17,26 @@ class EnableAxisCardSettings implements FormattingSettingsCard {
 
     fill = new formattingSettings.ColorPicker({
         name: "fill",
-        displayName: "Color",
+        displayNameKey: "Visual_Color",
         value: { value: "#000000" }
     });
 
-    font = new formattingSettings.FontControl({
-        displayName: "font",
-        name: "font",
-        fontFamily: {
-            name: "fontFamily",
-            value: "Segoe UI, wf_segoe-ui_normal, helvetica, arial, sans-serif",
-            type: powerbi.visuals.FormattingComponent.FontPicker
-        },
-        fontSize: {
-            name: "fontSize",
-            value: 5
-        },
-        bold: {
-            name: "fontBold",
-            value: false
-        },
-        underline: {
-            name: "fontUnderline",
-            value: false
-        },
-        italic: {
-            name: "fontItalic",
-            value: false
-        }
-    });
-
     name: string = "enableAxis";
-    displayName: string = "Enable Axis";
+    displayNameKey: string = "Visual_EnableAxis";
     slices: Array<FormattingSettingsSlice> = [this.show, this.fill];
 }
 
 
-class ColorSelectorCardSettings implements FormattingSettingsCard {
+class ColorSelectorCardSettings extends FormattingSettingsCard {
     name: string = "colorSelector";
-    displayName: string = "Data Colors";
+    displayNameKey: string = "Visual_DataColors";
     slices: Array<FormattingSettingsSlice> = [];
 }
 
-class GeneralViewCardSettings implements FormattingSettingsCard {
+class GeneralViewCardSettings extends FormattingSettingsCard {
     opacity = new formattingSettings.NumUpDown({
         name: "opacity",
-        displayName: "Bars Opacity",
+        displayNameKey: "Visual_BarsOpacity",
         value: 100,
         options: {
             minValue: {
@@ -77,17 +52,17 @@ class GeneralViewCardSettings implements FormattingSettingsCard {
 
     showHelpLink = new formattingSettings.ToggleSwitch({
         name: "showHelpLink",
-        displayName: "Show Help Button",
+        displayNameKey: "Visual_Show_HelpButton",
         value: false
     });
 
     name: string = "generalView";
-    displayName: string = "General View";
+    displayNameKey: string = "Visual_GeneralView";
     helpLinkColor: string = "#80B0E0"
     slices: Array<FormattingSettingsSlice> = [this.opacity, this.showHelpLink];
 }
 
-class AverageLineCardSettings implements FormattingSettingsCard {
+class AverageLineCardSettings extends FormattingSettingsCard {
     show = new formattingSettings.ToggleSwitch({
         name: "show",
         displayName: undefined,
@@ -97,18 +72,18 @@ class AverageLineCardSettings implements FormattingSettingsCard {
 
     fill = new formattingSettings.ColorPicker({
         name: "fill",
-        displayName: "Color",
+        displayNameKey: "Visual_Color",
         value: { value: "#888888" },
     });
 
     showDataLabel = new formattingSettings.ToggleSwitch({
         name: "showDataLabel",
-        displayName: "Data Label",
+        displayNameKey: "Visual_DataLabel",
         value: false
     });
 
     name: string = "averageLine";
-    displayName: string = "Average Line";
+    displayNameKey: string = "Visual_AverageLine";
     analyticsPane: boolean = true;
     slices = [this.show, this.fill, this.showDataLabel];
 }
@@ -121,14 +96,13 @@ class AverageLineCardSettings implements FormattingSettingsCard {
 * @property {{generalView.opacity:number}} Bars Opacity - Controls opacity of plotted bars, values range between 10 (almost transparent) to 100 (fully opaque, default)
 * @property {{generalView.showHelpLink:boolean}} Show Help Button - When TRUE, the plot displays a button which launch a link to documentation.
 */
-export class BarChartSettingsModel extends formattingSettingsModel.FormattingSettingsModel {
+export class BarChartSettingsModel extends FormattingSettingsModel {
     enableAxis = new EnableAxisCardSettings();
     colorSelector = new ColorSelectorCardSettings();
     generalView = new GeneralViewCardSettings();
     averageLine = new AverageLineCardSettings();
     cards = [this.enableAxis, this.colorSelector, this.generalView, this.averageLine];
 
-
     /**
      * populate colorSelector object categories formatting properties
      * @param dataPoints 

stringResources/en-US/resources.resjson

@@ -0,0 +1,10 @@
+{
+	"Visual_EnableAxis" : "Enable Axis",
+	"Visual_Color": "Color",
+	"Visual_DataColors": "Data Colors",
+	"Visual_BarsOpacity": "Bars Opacity",
+	"Visual_Show_HelpButton": "Show Help Button",
+	"Visual_GeneralView": "General View",
+	"Visual_DataLabel": "Data Label",
+	"Visual_AverageLine": "Average Line"
+}

stringResources/he-IL/resources.resjson

@@ -0,0 +1,11 @@
+{
+	"Visual_EnableAxis" : "הצג ציר",
+	"Visual_Color": "צבע",
+	"Visual_DataColors": "צבעי נתונים",
+	"Visual_BarsOpacity": "כֵּהוּת סורגים",
+	"Visual_Show_HelpButton": "הצג כפתור עזרה",
+	"Visual_GeneralView": "תצוגה כללית",
+	"Visual_DataLabel": "תווית נתונים",
+	"Visual_AverageLine": "קו ממוצע"
+
+}