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.

Sign up for GitHub

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

Standard font settings for "Legend" and "Data labels" #130

Merged
merged 11 commits into from
Dec 19, 2024
Merged

Standard font settings for "Legend" and "Data labels" #130

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
82a2081
added standard font settings for "Legend" and "Data labels"
vryzhkovas Nov 25, 2024
751283c
updated powerbi-visuals-utils-chartutils library
vryzhkovas Nov 25, 2024
a0bd15b
set underline color
vryzhkovas Nov 25, 2024
b125e29
changed let to const
vryzhkovas Nov 25, 2024
2580e71
changed default font family value and black color value
vryzhkovas Nov 27, 2024
b3f2ed4
npm audit fix changes
vryzhkovas Nov 28, 2024
007e7f4
v3.6.3.0 - Remove interactivity utils
kullJul Dec 12, 2024
d598a9f
removed unused import
vryzhkovas Dec 13, 2024
ed15280
Merge remote-tracking branch 'upstream/dev' into dev
vryzhkovas Dec 17, 2024
b805c05
fixed package-lock.json
vryzhkovas Dec 17, 2024
53f9568
removed package-lock.json changes
vryzhkovas Dec 17, 2024
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
66 changes: 56 additions & 10 deletions capabilities.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,35 @@
}
}
},
"fontFamily": {
"type": {
"formatting": {
"fontFamily": true
}
}
},
"fontSize": {
"type": {
"formatting": {
"fontSize": true
}
}
},
"fontBold": {
"type": {
"bool": true
}
},
"fontItalic": {
"type": {
"bool": true
}
},
"fontUnderline": {
"type": {
"bool": true
}
},
"labelDisplayUnits": {
"type": {
"formatting": {
Expand All @@ -90,13 +119,6 @@
"numeric": true
},
"suppressFormatPainterCopy": true
},
"fontSize": {
"type": {
"formatting": {
"fontSize": true
}
}
}
}
},
Expand All @@ -117,10 +139,12 @@
"text": true
}
},
"fontSize": {
"color": {
"type": {
"formatting": {
"fontSize": true
"fill": {
"solid": {
"color": true
}
}
}
},
Expand All @@ -130,6 +154,28 @@
"fontFamily": true
}
}
},
"fontSize": {
"type": {
"formatting": {
"fontSize": true
}
}
},
"fontBold": {
"type": {
"bool": true
}
},
"fontItalic": {
"type": {
"bool": true
}
},
"fontUnderline": {
"type": {
"bool": true
}
}
}
},
Expand Down
2 changes: 1 addition & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion src/converterStrategy/baseConverterStrategy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,7 @@ export class BaseConverterStrategy implements ConverterStrategy {
: "";
}

const labelColor: string = colorPalette.isHighContrast ? colorPalette.foreground.value : BaseConverterStrategy.DefaultLegendLabelColor;
const labelColor: string = colorPalette.isHighContrast ? colorPalette.foreground.value : settingsModel.legend.color.value.value;

const legendData: ILegendData = {
title: legendTitle,
Expand Down
5 changes: 5 additions & 0 deletions src/dataInterfaces.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -251,6 +251,11 @@ export interface LabelDataPoint {
size?: ISize;
text: string;
fillColor: string;
fontFamily: string;
fontSize: number;
bold: boolean;
italic: boolean;
underline: boolean;
}

export interface MekkoChartVisualInitOptions extends VisualConstructorOptions {
Expand Down
103 changes: 84 additions & 19 deletions src/settings.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,31 +102,56 @@ export class LegendSettings extends FormattingSettingsCompositeCard {
placeholder: "Title Text"
});

public fontFamily = new formattingSettings.FontPicker({
name: "fontFamily",
displayNameKey: "Visual_Font",
value: "Arial"
public color = new formattingSettings.ColorPicker({
name: "color",
displayNameKey: "Visual_Color",
descriptionKey: "Visual_Description_Color",
value: {value: "#252423"},
});

public fontSize = new formattingSettings.NumUpDown({
name: "fontSize",
displayNameKey: "Visual_Font_Size",
value: FontSizeDefaultOptions.FontSize,
options: {
minValue: {
type: powerbi.visuals.ValidatorType.Min,
value: FontSizeDefaultOptions.MinFontSize,
},
maxValue: {
type: powerbi.visuals.ValidatorType.Max,
value: FontSizeDefaultOptions.MaxFontSize,
public fontControl: formattingSettings.FontControl = new formattingSettings.FontControl({
name: "fontControl",
displayNameKey: "Visual_Font_Control",
fontFamily: new formattingSettings.FontPicker({
name: "fontFamily",
displayNameKey: "Visual_Font",
value: "Segoe UI, wf_segoe-ui_normal, helvetica, arial, sans-serif"
}),
fontSize: new formattingSettings.NumUpDown({
name: "fontSize",
displayNameKey: "Visual_Font_Size",
value: FontSizeDefaultOptions.FontSize,
options: {
minValue: {
type: powerbi.visuals.ValidatorType.Min,
value: FontSizeDefaultOptions.MinFontSize,
},
maxValue: {
type: powerbi.visuals.ValidatorType.Max,
value: FontSizeDefaultOptions.MaxFontSize,
}
}
}
}),
bold: new formattingSettings.ToggleSwitch({
name: "fontBold",
displayNameKey: "Visual_Font_Bold",
value: false
}),
italic: new formattingSettings.ToggleSwitch({
name: "fontItalic",
displayNameKey: "Visual_Font_Italic",
value: false
}),
underline: new formattingSettings.ToggleSwitch({
name: "fontUnderline",
displayNameKey: "Visual_Font_Underline",
value: false
})
});

public legendTitleGroup = new formattingSettings.Group({
name: "titleGroup",
slices: [this.showTitle, this.titleText, this.fontFamily, this.fontSize]
slices: [this.showTitle, this.titleText, this.color, this.fontControl]
});

public groups: FormattingSettingsGroup[] = [this.legendTitleGroup]
Expand Down Expand Up @@ -192,6 +217,46 @@ export class LabelsSettings extends FormattingSettingsSimpleCard {
value: {value: "white"},
});

public fontControl: formattingSettings.FontControl = new formattingSettings.FontControl({
name: "fontControl",
displayNameKey: "Visual_Font_Control",
fontFamily: new formattingSettings.FontPicker({
name: "fontFamily",
displayNameKey: "Visual_Font",
value: "Segoe UI, wf_segoe-ui_normal, helvetica, arial, sans-serif"
}),
fontSize: new formattingSettings.NumUpDown({
name: "fontSize",
displayNameKey: "Visual_Font_Size",
value: FontSizeDefaultOptions.FontSize,
options: {
minValue: {
type: powerbi.visuals.ValidatorType.Min,
value: FontSizeDefaultOptions.MinFontSize,
},
maxValue: {
type: powerbi.visuals.ValidatorType.Max,
value: FontSizeDefaultOptions.MaxFontSize,
}
}
}),
bold: new formattingSettings.ToggleSwitch({
name: "fontBold",
displayNameKey: "Visual_Font_Bold",
value: false
}),
italic: new formattingSettings.ToggleSwitch({
name: "fontItalic",
displayNameKey: "Visual_Font_Italic",
value: false
}),
underline: new formattingSettings.ToggleSwitch({
name: "fontUnderline",
displayNameKey: "Visual_Font_Underline",
value: false
})
});

public displayUnits = new formattingSettings.AutoDropdown({
name: "labelDisplayUnits",
displayName: "Display units",
Expand All @@ -216,7 +281,7 @@ export class LabelsSettings extends FormattingSettingsSimpleCard {
}
});

public slices: FormattingSettingsSlice[] = [this.color, this.displayUnits, this.labelPrecision, this.forceDisplay];
public slices: FormattingSettingsSlice[] = [this.color, this.fontControl, this.displayUnits, this.labelPrecision, this.forceDisplay];
}

export class SeriesSortSettings extends FormattingSettingsSimpleCard {
Expand Down
37 changes: 28 additions & 9 deletions src/visual.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -912,8 +912,8 @@ export class MekkoChart implements IVisual {
const layers: IColumnChart[] = this.layers,
legendData: ILegendData = {
title: "",
fontSize: this.settingsModel.legend.fontSize.value,
fontFamily: this.settingsModel.legend.fontFamily.value,
fontSize: this.settingsModel.legend.fontControl.fontSize.value,
fontFamily: this.settingsModel.legend.fontControl.fontFamily.value,
dataPoints: []
};

Expand Down Expand Up @@ -949,12 +949,11 @@ export class MekkoChart implements IVisual {
}

const legendProperties: powerbi.DataViewObject = {
fontSize: this.settingsModel.legend.fontSize.value,
fontFamily: this.settingsModel.legend.fontFamily.value,
fontSize: this.settingsModel.legend.fontControl.fontSize.value,
fontFamily: this.settingsModel.legend.fontControl.fontFamily.value,
showTitle: this.settingsModel.legend.showTitle.value,
show: this.settingsModel.legend.show.value
}

LegendData.update(legendData, legendProperties);
this.legend.changeOrientation(LegendPosition.Top);

Expand Down Expand Up @@ -1025,8 +1024,8 @@ export class MekkoChart implements IVisual {

const svgHeight: number = textMeasurementService.estimateSvgTextHeight({
// fontFamily: MekkoChart.LegendBarTextFont,
fontFamily: this.settingsModel.legend.fontFamily.value,
fontSize: PixelConverter.fromPoint(this.settingsModel.legend.fontSize.value),
fontFamily: this.settingsModel.legend.fontControl.fontFamily.value,
fontSize: PixelConverter.fromPoint(this.settingsModel.legend.fontControl.fontSize.value),
text: "AZ"
});

Expand All @@ -1047,7 +1046,7 @@ export class MekkoChart implements IVisual {
this.categoryLegends = this.categoryLegends || [];
legendParentsWithChildsAttr.each(function (data, index) {
const legendSvg = select(this);
legendSvg.style("font-family", mekko.settingsModel.legend.fontFamily.value);
legendSvg.style("font-family", mekko.settingsModel.legend.fontControl.fontFamily.value);
if (legendSvg.select("svg").node() === null) {
const legend: ILegend = createLegend(
<any>this,
Expand Down Expand Up @@ -1112,6 +1111,11 @@ export class MekkoChart implements IVisual {

this.legendSelection = this.rootElement
.selectAll(MekkoChart.LegendSelector.selectorName);

this.legendSelection.style("font-weight", mekko.settingsModel.legend.fontControl.bold.value? "bold" : "normal");
this.legendSelection.style("font-style", mekko.settingsModel.legend.fontControl.italic.value ? "italic" : "normal");
this.legendSelection.style("text-decoration", mekko.settingsModel.legend.fontControl.underline.value ? "underline" : "none");
this.legendSelection.style("fill", this.colorPalette.isHighContrast ? this.colorPalette.foreground.value : mekko.settingsModel.legend.color.value.value);
}

private hideLegends(): boolean {
Expand Down Expand Up @@ -1728,7 +1732,22 @@ export class MekkoChart implements IVisual {
style: {
"fill": (dataPoint: LabelDataPoint) => {
return dataPoint.fillColor;
}
},
"font-family": (dataPoint: LabelDataPoint) => {
return dataPoint.fontFamily;
},
"font-size": (dataPoint: LabelDataPoint) => {
return dataPoint.fontSize;
},
"font-weight": (dataPoint: LabelDataPoint) => {
return dataPoint.bold ? "bold" : "normal";
},
"font-style": (dataPoint: LabelDataPoint) => {
return dataPoint.italic ? "italic" : "normal";
},
"text-decoration": (dataPoint: LabelDataPoint) => {
return dataPoint.underline ? "underline" : "none";
},
}
};
}
Expand Down
7 changes: 6 additions & 1 deletion src/visualStrategy/baseVisualStrategy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -820,7 +820,12 @@ export class BaseVisualStrategy implements IVisualStrategy {
labelDataPoints.push({
parentRect,
text: formatter.format(value),
fillColor: settingModel.labels.color.value.value
fillColor: settingModel.labels.color.value.value,
fontFamily: settingModel.labels.fontControl.fontFamily.value,
fontSize: settingModel.labels.fontControl.fontSize.value,
bold: settingModel.labels.fontControl.bold.value,
italic: settingModel.labels.fontControl.italic.value,
underline: settingModel.labels.fontControl.underline.value,
});
}
}
Expand Down
Loading