Skip to content

Commit

Permalink
Standard font settings for "Legend" and "Data labels" (#130)
Browse files Browse the repository at this point in the history 
* added standard font settings for "Legend" and "Data labels"

* updated powerbi-visuals-utils-chartutils library

* set underline color

* changed let to const

* changed default font family value and black color value

* npm audit fix changes

* v3.6.3.0 - Remove interactivity utils

* Remove interactivity utils

* removed unused import

* fixed package-lock.json

Signed-off-by: Svetlana Ryzhkova <[email protected]>

* removed package-lock.json changes

Signed-off-by: Svetlana Ryzhkova <[email protected]>

---------

Signed-off-by: Svetlana Ryzhkova <[email protected]>
Co-authored-by: Iuliia Kulagina <[email protected]>
  • Loading branch information
@vryzhkovas @kullJul
vryzhkovas and kullJul authored Dec 19, 2024
1 parent 355fc8a commit 5df6902
Show file tree
Hide file tree
Showing 7 changed files with 181 additions and 41 deletions.
66 changes: 56 additions & 10 deletions capabilities.json
View file
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

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
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
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
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
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
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

0 comments on commit 5df6902

Please sign in to comment.