Fix data labels bugs (#93)

* Fix the data labels that didn't fit in the group on the right, fix vertical position of data labels * Increment visual version --------- Co-authored-by: Iuliia Kulagina <[email protected]>
microsoft · Feb 21, 2024 · 0c97521 · 0c97521
1 parent 236d863
commit 0c97521
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 29 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 3.0.2.0
+* Fix the data labels that didn't fit in the group on the right
+* Fix vertical position of the data labels
+
 ## 3.0.1.0
 * Fix x-axis settings
 * Fix colors in high contrast mode

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "powerbi-visuals-tornadochart",
-  "version": "3.0.1.0",
+  "version": "3.0.2.0",
   "author": {
     "name": "Microsoft",
     "email": "[email protected]"

diff --git a/pbiviz.json b/pbiviz.json
@@ -1,10 +1,10 @@
 {
   "visual": {
     "name": "TornadoChart",
-    "displayName": "Tornado 3.0.1.0",
+    "displayName": "Tornado 3.0.2.0",
     "guid": "TornadoChart1452517688218",
     "visualClassName": "TornadoChart",
-    "version": "3.0.1.0",
+    "version": "3.0.2.0",
     "description": "A bar chart with category values listed vertically. Use for comparing the relative importance of a variable between two distinct groups.",
     "supportUrl": "https://community.powerbi.com",
     "gitHubUrl": "https://github.com/Microsoft/PowerBI-visuals-Tornado"

diff --git a/src/TornadoChart.ts b/src/TornadoChart.ts
@@ -108,7 +108,6 @@ import {
     TornadoBehaviorOptions,
     TornadoChartDataView,
     TornadoChartPoint,
-    TornadoChartTextOptions,
     LineData,
     LabelData,
     TextData,
@@ -117,7 +116,7 @@ import {
 import { TornadoWebBehavior } from "./TornadoWebBehavior";
 import * as tooltipBuilder from "./tooltipBuilder";
 import { TornadoChartUtils } from "./tornadoChartUtils";
-import { TornadoChartSettingsModel, DataLabelSettings, LegendCardSettings} from "./TornadoChartSettingsModel";
+import { TornadoChartSettingsModel, DataLabelSettings, LegendCardSettings, BaseFontControlSettings, FontDefaultOptions} from "./TornadoChartSettingsModel";
 import IVisualEventService = powerbi.extensibility.IVisualEventService;
 
 export class TornadoChart implements IVisual {
@@ -182,7 +181,6 @@ export class TornadoChart implements IVisual {
     public static converter( 
         dataView: DataView,
         hostService: IVisualHost,
-        textOptions: TornadoChartTextOptions,
         colors: IColorPalette,
         localizationManager: ILocalizationManager,
         formattingSettings?: TornadoChartSettingsModel
@@ -209,7 +207,7 @@ export class TornadoChart implements IVisual {
         const categorySourceFormatter: IValueFormatter = valueFormatter.create({
             format: valueFormatter.getFormatStringByColumn(category.source)
         });
-        const categoriesLabels: TextData[] = category.values.map(value => TornadoChart.getTextData(categorySourceFormatter.format(value), textOptions, true, false, formattingSettings.categoryCardSettings.font.fontSize.value));
+        const categoriesLabels: TextData[] = category.values.map(value => TornadoChart.getTextData(categorySourceFormatter.format(value), formattingSettings.categoryCardSettings.font, true, false));
         const groupedValues: DataViewValueColumnGroup[] = values.grouped ? values.grouped() : null;
         let uniqId = 0;
 
@@ -357,23 +355,27 @@ export class TornadoChart implements IVisual {
 
     private static getTextData(
         text: string,
-        textOptions: TornadoChartTextOptions,
+        formattingOptions: BaseFontControlSettings,
         measureWidth: boolean = false,
         measureHeight: boolean = false,
-        overrideFontSize?: number): TextData {
+        useDefaultTextProperties: boolean = false): TextData {
 
         let width: number = 0,
             height: number = 0;
 
         text = text || "";
 
-        const fontSize = overrideFontSize
-            ? PixelConverter.fromPoint(overrideFontSize)
-            : PixelConverter.fromPoint(textOptions.fontSize);
+        const fontSize: string = useDefaultTextProperties 
+            ? PixelConverter.fromPoint(FontDefaultOptions.DefaultFontSizePt)
+            : PixelConverter.fromPoint(formattingOptions.fontSize.value);
+
+        const fontFamily: string = useDefaultTextProperties 
+            ? FontDefaultOptions.DefaultFontFamily
+            : formattingOptions.fontFamily.value;
 
         const textProperties = {
             text: text,
-            fontFamily: textOptions.fontFamily,
+            fontFamily: fontFamily,
             fontSize: fontSize
         };
 
@@ -395,7 +397,6 @@ export class TornadoChart implements IVisual {
 
     public colors: IColorPalette;
     public colorHelper: ColorHelper;
-    public textOptions: TornadoChartTextOptions = {};
 
     private columnPadding: number = 5;
     private leftLabelMargin: number = 4;
@@ -436,7 +437,7 @@ export class TornadoChart implements IVisual {
 
     private get allLabelsWidth(): number {
         const labelsWidth: number = this.formattingSettings.categoryCardSettings.show.value
-            ? Math.min(this.dataView.maxLabelsWidth, this.viewportWidth / 2)
+            ? Math.min(this.dataView.maxLabelsWidth, this.viewportWidth / 3)
             : TornadoChart.DefaultLabelsWidth;
         return labelsWidth + TornadoChart.CategoryLabelMargin;
     }
@@ -478,11 +479,6 @@ export class TornadoChart implements IVisual {
             .append("svg")
             .classed(TornadoChart.ClassName, true);
 
-        const fontSize: string = root.style("font-size");
-
-        this.textOptions.fontSize = Number(fontSize.slice(0, fontSize.length - 2));
-        this.textOptions.fontFamily = root.style("font-family");
-
         const main: Selection<any> = this.main = root.append("g");
         this.clearCatcher = appendClearCatcher(main);
         this.columns = main
@@ -534,7 +530,7 @@ export class TornadoChart implements IVisual {
             this.formattingSettings.setLocalizedOptions(this.localizationManager);
         }
 
-        this.dataView = TornadoChart.converter(dataView, this.hostService, this.textOptions, this.colors, this.localizationManager, this.formattingSettings);
+        this.dataView = TornadoChart.converter(dataView, this.hostService, this.colors, this.localizationManager, this.formattingSettings);
         if (!this.dataView || this.viewport.height < TornadoChart.CategoryMinHeight) {
             this.clearData();
             this.events.renderingFinished(options);
@@ -875,12 +871,12 @@ export class TornadoChart implements IVisual {
         const maxLabelWidth: number = Math.max(maxOutsideLabelWidth, columnWidth - this.leftLabelMargin);
 
         const textProperties: TextProperties = {
-            fontFamily: dataLabelUtils.StandardFontFamily,
+            fontFamily: this.formattingSettings.dataLabelsSettings.font.fontFamily.value,
             fontSize: PixelConverter.fromPoint(fontSize),
             text: labelFormatter.getLabelValueFormatter(formatStringProp).format(value)
         };
         const valueAfterValueFormatter: string = textMeasurementService.getTailoredTextOrDefault(textProperties, maxLabelWidth);
-        const textDataAfterValueFormatter: TextData = TornadoChart.getTextData(valueAfterValueFormatter, this.textOptions, true, false, fontSize);
+        const textDataAfterValueFormatter: TextData = TornadoChart.getTextData(valueAfterValueFormatter, this.formattingSettings.dataLabelsSettings.font, true, false);
 
         if (columnWidth > textDataAfterValueFormatter.width + TornadoChart.LabelPadding) {
             dx = dxColumn + columnWidth / 2 - textDataAfterValueFormatter.width / 2;
@@ -1057,7 +1053,7 @@ export class TornadoChart implements IVisual {
         categoriesSelectionMerged
             .attr("transform", (text: string, index: number) => {
                 let shift: number = (this.heightColumn + this.columnPadding) * index + this.heightColumn / 2;
-                const textData: TextData = TornadoChart.getTextData(text, this.textOptions, false, true);
+                const textData: TextData = TornadoChart.getTextData(text, this.formattingSettings.categoryCardSettings.font, false, true, true);
 
                 shift = shift + textData.height / 2 - this.InnerTextHeightDelta;
 
@@ -1077,9 +1073,10 @@ export class TornadoChart implements IVisual {
             .attr("font-weight", categoryFontIsBold ? "bold" : "normal")
             .attr("font-style", categoryFontIsItalic ? "italic" : "normal")
             .attr("text-decoration", categoryFontIsUnderlined? "underline" : "normal")
+            .attr("dy", "0.25em")
             .text((data: TextData) => formattingSettings.categoryCardSettings.show.value
                 ? textMeasurementService.getTailoredTextOrDefault(
-                    TornadoChart.getTextData(data.text, this.textOptions, false, true, formattingSettings.categoryCardSettings.font.fontSize.value).textProperties, this.allLabelsWidth)
+                    TornadoChart.getTextData(data.text, this.formattingSettings.categoryCardSettings.font, false, true).textProperties, this.allLabelsWidth)
                 : "");
 
         categoriesSelection

diff --git a/src/TornadoChartSettingsModel.ts b/src/TornadoChartSettingsModel.ts
@@ -169,14 +169,19 @@ const categoryPositionOptions : IEnumMemberWithDisplayNameKey[] = [
 
 ];
 
+export class FontDefaultOptions {
+    public static DefaultFontSizePt: number = 8;
+    public static DefaultFontFamily: string = "Segoe UI, wf_segoe-ui_normal, helvetica, arial, sans-serif";
+}
+
 export class BaseFontControlSettings extends formattingSettings.FontControl {
     constructor(defaultFontSize: number){
         super(
             new formattingSettings.FontControl({
                 name: "font",
                 fontFamily: new formattingSettings.FontPicker({
                     name: "fontFamily",
-                    value: "Segoe UI, wf_segoe-ui_normal, helvetica, arial, sans-serif"
+                    value: FontDefaultOptions.DefaultFontFamily
                 }),
                 fontSize: new formattingSettings.NumUpDown({
                     name: "fontSize",

diff --git a/test/TornadoChartBuilder.ts b/test/TornadoChartBuilder.ts
@@ -113,7 +113,6 @@ export class TornadoChartBuilder extends VisualBuilderBase<VisualClass> {
         return VisualClass.converter(
             dataView,
             this.visualHost,
-            this.visual.textOptions,
             this.visual.colors,
             this.visualHost.createLocalizationManager(),
             formattingSettings