From 5df69021a4cb7e5964c1e3f1f6959c65dc29cf0c Mon Sep 17 00:00:00 2001 From: Svetlana Ryzhkova Date: Thu, 19 Dec 2024 15:38:33 +0400 Subject: [PATCH] Standard font settings for "Legend" and "Data labels" (#130) * 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 * removed package-lock.json changes Signed-off-by: Svetlana Ryzhkova --------- Signed-off-by: Svetlana Ryzhkova Co-authored-by: Iuliia Kulagina <86924383+kullJul@users.noreply.github.com> --- capabilities.json | 66 +++++++++-- package-lock.json | 2 +- .../baseConverterStrategy.ts | 2 +- src/dataInterfaces.ts | 5 + src/settings.ts | 103 ++++++++++++++---- src/visual.ts | 37 +++++-- src/visualStrategy/baseVisualStrategy.ts | 7 +- 7 files changed, 181 insertions(+), 41 deletions(-) diff --git a/capabilities.json b/capabilities.json index 566a338..71f5299 100644 --- a/capabilities.json +++ b/capabilities.json @@ -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": { @@ -90,13 +119,6 @@ "numeric": true }, "suppressFormatPainterCopy": true - }, - "fontSize": { - "type": { - "formatting": { - "fontSize": true - } - } } } }, @@ -117,10 +139,12 @@ "text": true } }, - "fontSize": { + "color": { "type": { - "formatting": { - "fontSize": true + "fill": { + "solid": { + "color": true + } } } }, @@ -130,6 +154,28 @@ "fontFamily": true } } + }, + "fontSize": { + "type": { + "formatting": { + "fontSize": true + } + } + }, + "fontBold": { + "type": { + "bool": true + } + }, + "fontItalic": { + "type": { + "bool": true + } + }, + "fontUnderline": { + "type": { + "bool": true + } } } }, diff --git a/package-lock.json b/package-lock.json index f2353f6..53517c4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10584,4 +10584,4 @@ } } } -} +} \ No newline at end of file diff --git a/src/converterStrategy/baseConverterStrategy.ts b/src/converterStrategy/baseConverterStrategy.ts index c861fcc..a0d1434 100644 --- a/src/converterStrategy/baseConverterStrategy.ts +++ b/src/converterStrategy/baseConverterStrategy.ts @@ -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, diff --git a/src/dataInterfaces.ts b/src/dataInterfaces.ts index 834c716..d92cb45 100644 --- a/src/dataInterfaces.ts +++ b/src/dataInterfaces.ts @@ -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 { diff --git a/src/settings.ts b/src/settings.ts index 0bac5a1..845a3c8 100644 --- a/src/settings.ts +++ b/src/settings.ts @@ -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] @@ -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", @@ -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 { diff --git a/src/visual.ts b/src/visual.ts index 4284e13..ec4a13a 100644 --- a/src/visual.ts +++ b/src/visual.ts @@ -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: [] }; @@ -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); @@ -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" }); @@ -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( this, @@ -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 { @@ -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"; + }, } }; } diff --git a/src/visualStrategy/baseVisualStrategy.ts b/src/visualStrategy/baseVisualStrategy.ts index b28845f..87b94d2 100644 --- a/src/visualStrategy/baseVisualStrategy.ts +++ b/src/visualStrategy/baseVisualStrategy.ts @@ -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, }); } }