Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate SampleBarChart to new Formatting Model Pane #102

Open
wants to merge 39 commits into
base: main
Choose a base branch
from
Open
Changes from 2 commits
Commits
Show all changes
39 commits
Select commit Hold shift + click to select a range
45f286c
Migrate SampleBarChart to new Formatting Model Pane
Jul 5, 2022
87a6623
Add topLevelToggle boolean
Jul 5, 2022
fa20f56
Update barChart formatting settings model
Aug 2, 2022
6937e3d
Modify formatting settings to use formatting model utils service & Ad…
Aug 15, 2022
3c7df9c
Merge pull request #104 from microsoft/dev/sdabbah/Modify-UseFormatti…
ShereinDabbah Sep 4, 2022
d275cb2
Delete Localization strings - it didnt exist before
Sep 25, 2022
dc1c493
Update visuals-api version to 5.1.0
Oct 19, 2022
54b69e1
Update visuals-api version to 5.1.0
Oct 19, 2022
b3e1617
Fix npm run lint errors
Oct 19, 2022
e68e994
Additional version change and Add changelog
Oct 20, 2022
60f12d8
Description and comments modifications
Oct 23, 2022
d8c4359
Update package-lock
Oct 23, 2022
8887dc7
Change version to 5.0.0
Oct 23, 2022
769f106
Update sample bar chart docs
Oct 23, 2022
05ac876
add d3-selection v1 dependency
Oct 25, 2022
41a6f86
Merge branch 'main' into dev/sdabbah/formattingmodel-interfaces
ShereinDabbah Dec 27, 2022
890a500
Adding typescript dependency
Dec 27, 2022
919bffb
Add topLevelToggle boolean
Jul 5, 2022
cee76c3
Update barChart formatting settings model
Aug 2, 2022
d746aba
Modify formatting settings to use formatting model utils service & Ad…
Aug 15, 2022
82dacfa
Delete Localization strings - it didnt exist before
Sep 25, 2022
b579279
Update visuals-api version to 5.1.0
Oct 19, 2022
972f43e
Update visuals-api version to 5.1.0
Oct 19, 2022
2a13c9f
Fix npm run lint errors
Oct 19, 2022
9d7b86e
Additional version change and Add changelog
Oct 20, 2022
f08668f
Description and comments modifications
Oct 23, 2022
f65a625
Update package-lock
Oct 23, 2022
ee57175
Change version to 5.0.0
Oct 23, 2022
4bb51f0
Update sample bar chart docs
Oct 23, 2022
58d2199
add d3-selection v1 dependency
Oct 25, 2022
ed40f1d
Microsoft mandatory file
microsoft-github-policy-service[bot] Sep 22, 2022
77ce691
Adding typescript dependency
Dec 27, 2022
03de612
Merge branch 'dev/sdabbah/formattingmodel-interfaces' of https://gith…
Feb 20, 2023
685eb12
Merge branch 'dev/sdabbah/formattingmodel-interfaces' of https://gith…
Feb 20, 2023
1dd833d
Merge branch 'dev/sdabbah/formattingmodel-interfaces' of https://gith…
Feb 20, 2023
2dd5342
Revert "Adding typescript dependency"
Feb 22, 2023
407d681
Add topLevelToggle boolean
Jul 5, 2022
93f23dd
Update barChart formatting settings model
Aug 2, 2022
7fd3c5b
Revert "Update barChart formatting settings model"
Mar 30, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 9 additions & 7 deletions src/barChart.ts
Original file line number Diff line number Diff line change
@@ -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);
}
}
58 changes: 16 additions & 42 deletions src/barChartSettingsModel.ts
Original file line number Diff line number Diff line change
@@ -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,
ShereinDabbah marked this conversation as resolved.
Show resolved Hide resolved
@@ -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
10 changes: 10 additions & 0 deletions stringResources/en-US/resources.resjson
Original file line number Diff line number Diff line change
@@ -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"
}
11 changes: 11 additions & 0 deletions stringResources/he-IL/resources.resjson
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"Visual_EnableAxis" : "הצג ציר",
"Visual_Color": "צבע",
"Visual_DataColors": "צבעי נתונים",
"Visual_BarsOpacity": "כֵּהוּת סורגים",
"Visual_Show_HelpButton": "הצג כפתור עזרה",
"Visual_GeneralView": "תצוגה כללית",
"Visual_DataLabel": "תווית נתונים",
"Visual_AverageLine": "קו ממוצע"

}