v2.1.2 - Fix axis ticks by computing the required width (#87)

* Fix axis ticks by computing the required width

* Run GitHub actions on ubuntu-22.04

* Add report tooltip support

* Tailor title text if it's too long

* Ensure to use the correct transform value 'translate' for getGroupTransformValue method

* Refactor 'getGroupTransformValue' method

* Refactor 'getGroupTransformValue' method

Author: adiletelf

.github/workflows/build.yml

@@ -12,7 +12,7 @@ on:
 jobs:
   build:
 
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
 
     strategy:
       matrix:

CHANGELOG.md

@@ -1,3 +1,12 @@
+## 2.1.2
+### Visual changes
+* Tailor title text if it's too long
+
+## 2.1.1
+### Visual changes
+* Fix axis ticks by computing the required width
+* Add report tooltip support
+
 ## 2.1.0
 ### Visual changes
 * Add new font settings
@@ -48,4 +57,4 @@
 * Converted legacy API visual version 1.3.4 to API 1.10.0
 
 ## 1.2.18
-* Fix chart drawing issue when the visual get dataset without sorting by date
+* Fix chart drawing issue when the visual get dataset without sorting by date

capabilities.json

@@ -435,5 +435,14 @@
             }
         }
     },
+    "tooltips": {
+        "supportedTypes": {
+            "default": true,
+            "canvas": true
+        },
+        "roles": [
+            "tooltips"
+        ]
+    },
     "privileges": []
-}
+}

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "dualkpi",
   "displayName": "Dual KPI",
-  "version": "2.1.0.0",
+  "version": "2.1.2.0",
   "description": "Dual KPI efficiently visualizes two measures over time. It shows their trend based on a joint timeline, while absolute values may use different scales, for example Profit and Market share or Sales and Profit. Each KPI can be visualized as line chart or area chart. The visual has dynamic behavior and can show historical value and the change from the latest value when you hover over it. It also has small icons and labels to convey KPI definitions and alerts about data freshness. Customize colors, titles, axis properties, tooltips, and more, to create visually appealing and functional executive dashboards.",
   "author": {
     "name": "Microsoft",

package.json

@@ -1,10 +1,10 @@
 {
   "visual": {
     "name": "dualKpi",
-    "displayName": "Dual KPI 2.1.0.0",
+    "displayName": "Dual KPI 2.1.2.0",
     "guid": "PBI_CV_3C80B1F2_09AF_4123_8E99_C3CBC46B23E0",
     "visualClassName": "DualKpi",
-    "version": "2.1.0.0",
+    "version": "2.1.2.0",
     "description": "Dual KPI efficiently visualizes two measures over time. It shows their trend based on a joint timeline, while absolute values may use different scales, for example Profit and Market share or Sales and Profit. Each KPI can be visualized as line chart or area chart. The visual has dynamic behavior and can show historical value and the change from the latest value when you hover over it. It also has small icons and labels to convey KPI definitions and alerts about data freshness. Customize colors, titles, axis properties, tooltips, and more, to create visually appealing and functional executive dashboards.",
     "supportUrl": "http://community.powerbi.com",
     "gitHubUrl": "https://github.com/Microsoft/powerbi-visuals-dualkpi"

pbiviz.json

@@ -48,6 +48,7 @@ import { ColorHelper } from "powerbi-visuals-utils-colorutils";
 import {
     valueFormatter as ValueFormatter,
     displayUnitSystemType,
+    textMeasurementService,
 } from "powerbi-visuals-utils-formattingutils";
 import DisplayUnitSystemType = displayUnitSystemType.DisplayUnitSystemType;
 
@@ -213,7 +214,7 @@ export class DualKpi implements IVisual {
     private timeFormatter: (date: Date) => string;
     private dataBisector: (array: ArrayLike<IDualKpiDataPoint>, x: Date, lo?: number, hi?: number) => number;
 
-    private chartLeftMargin = 45;
+    private chartLeftMargin = 35;
     private viewport: IViewport;
 
     private axisNumberFormatter: (d: NumberValue) => string;
@@ -517,6 +518,7 @@ export class DualKpi implements IVisual {
             this.displayRootElement(wasDataSetRendered);
             this.drawTopChart({data, chartHeight, chartWidth, chartSpaceBetween});
             this.drawBottomChart({data, chartHeight, chartWidth, chartSpaceBetween});
+            this.adjustAxisGroupPosition();
 
             if (wasDataSetRendered) {
                 this.drawBottomContainer(chartWidth, chartHeight, chartTitleSpace, chartSpaceBetween, iconOffset);
@@ -526,6 +528,44 @@ export class DualKpi implements IVisual {
         }
     }
 
+    private adjustAxisGroupPosition() {
+        const axisTicks = this.svgRoot.selectAll("g.tick");
+        const axisMaxWidth = Math.ceil(Math.max(...axisTicks.nodes().map((x: SVGGElement) => x.getBBox().width))) || 0;
+
+        const topGroupTransform = this.getGroupTransformValue(this.chartGroupTop.group.node());
+        const bottomGroupTransform = this.getGroupTransformValue(this.chartGroupBottom.group.node());
+        let transformX: number = axisMaxWidth;
+
+        if (this.formattingSettings.properties.topChartShow.value) {
+            transformX = Math.max(transformX, topGroupTransform.x);
+        }
+        if (this.formattingSettings.properties.bottomChartShow.value) {
+            transformX = Math.max(transformX, bottomGroupTransform.x);
+        }
+
+        if (this.formattingSettings.properties.topChartShow.value) {
+            this.chartGroupTop.group.attr("transform", `translate(${Math.max(transformX)}, ${topGroupTransform.y})`);
+        }
+
+        if (this.formattingSettings.properties.bottomChartShow.value) {
+            this.chartGroupBottom.group.attr("transform", `translate(${Math.max(transformX)}, ${bottomGroupTransform.y})`);
+        }
+    }
+
+    private getGroupTransformValue(group: SVGGElement): { x: number; y: number; } {
+        const transformList = group?.transform?.baseVal;
+        if (!transformList || transformList.length === 0) {
+            return { x: 0, y: 0 };
+        }
+
+
+        const svgTransformTranslate = Array.from(transformList).find((x) => x.type === SVGTransform.SVG_TRANSFORM_TRANSLATE);
+
+        return svgTransformTranslate
+            ? { x: svgTransformTranslate.matrix.e, y: svgTransformTranslate.matrix.f }
+            : { x: 0, y: 0 };
+    }
+
     private setChartLayout(availableHeight: number, availableWidth: number) {
         let chartSpaceBetween: number, chartTitleSpace: number, iconOffset: number;
         const size: DualKpiSize = DualKpi.getChartSize({ height: availableHeight, width: availableWidth });
@@ -1162,12 +1202,25 @@ export class DualKpi implements IVisual {
                 dayRangeLeft -= (iconWidth); // width of icon + 8px padding
             }
             dayRangeElement.attr("transform", "translate(" + (dayRangeLeft) + ",0)");
+
+            const titleMaxWidth = dayRangeLeft - dayRangeElement.node().getBBox().width;
+            this.tailorTextByMaxWidth(chartTitleElement, titleMaxWidth);
         }
 
         this.bottomContainer.bottomContainer.attr("transform", "translate(5," + (this.viewport.height - 5) + ")");
         this.bottomContainer.bottomContainer.classed(DualKpi.INVISIBLE, false);
     }
 
+    private tailorTextByMaxWidth(text: d3Selection<SVGTextElement, unknown, null, undefined>, maxWidth: number) {
+        const tailoredText = textMeasurementService.getTailoredTextOrDefault({
+            text: text.text(),
+            fontSize: text.style("font-size"),
+            fontFamily: text.style("font-family"),
+        }, maxWidth);
+
+        text.text(tailoredText);
+    }
+
     private createWarningMessage(chartTitleElement, iconY: number, iconScaleTransform: string, iconWidth: number) {
         const warning = this.bottomContainer.warning;
         warning.group
@@ -1252,7 +1305,7 @@ export class DualKpi implements IVisual {
         };
 
         if (this.size === DualKpiSize.medium || this.size === DualKpiSize.large) {
-            margin.left = 45;
+            margin.left = 40;
         }
 
         const calcWidth = options.width - margin.right - margin.left,
@@ -1335,7 +1388,6 @@ export class DualKpi implements IVisual {
                 }
                 return axisTickLabel;
             })
-            .tickPadding(0)
 
         const axis = chartGroup.yAxis;
         axis