From 6937e3db0502a05088da37bae18d840883c74feb Mon Sep 17 00:00:00 2001 From: Sherein Dabbah Date: Mon, 15 Aug 2022 09:08:37 +0300 Subject: [PATCH] Modify formatting settings to use formatting model utils service & Add strings localization --- src/barChart.ts | 16 ++++--- src/barChartSettingsModel.ts | 58 +++++++------------------ stringResources/en-US/resources.resjson | 10 +++++ stringResources/he-IL/resources.resjson | 11 +++++ 4 files changed, 46 insertions(+), 49 deletions(-) create mode 100644 stringResources/en-US/resources.resjson create mode 100644 stringResources/he-IL/resources.resjson diff --git a/src/barChart.ts b/src/barChart.ts index 309fdcd..e96490a 100644 --- a/src/barChart.ts +++ b/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; - private element: HTMLElement; - private isLandingPageOn: boolean; - private LandingPageRemoved: boolean; - private LandingPage: Selection; private averageLine: Selection; + private formattingSettingsService: FormattingSettingsService; private barSelection: d3.Selection; @@ -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); } } diff --git a/src/barChartSettingsModel.ts b/src/barChartSettingsModel.ts index 2795aed..87718af 100644 --- a/src/barChartSettingsModel.ts +++ b/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 = [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 = []; } -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 = [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 diff --git a/stringResources/en-US/resources.resjson b/stringResources/en-US/resources.resjson new file mode 100644 index 0000000..07540f5 --- /dev/null +++ b/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" +} diff --git a/stringResources/he-IL/resources.resjson b/stringResources/he-IL/resources.resjson new file mode 100644 index 0000000..4405e43 --- /dev/null +++ b/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": "קו ממוצע" + +} \ No newline at end of file