Bug fixes and new features (#11)

* In formatting panel, new property was added to configure the behavior of nodes near a border of visual. * Hide overlaped labels in visual. * CHANGELOG.md was added
microsoft · May 22, 2017 · 36265fb · 36265fb
1 parent a57a73c
commit 36265fb
Show file tree

Hide file tree

Showing 10 changed files with 134 additions and 7 deletions.
diff --git a/.gitignore b/.gitignore
@@ -6,3 +6,5 @@ typings
 .api
 *.log
 /coverage
+
+.idea/*
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,3 @@
+## 1.3.8
+* New property "Intersection" in "Data labels" option of "Format" panel to hide overlaped labels in visual.
+* New option "Bound by box" in "Format" panel to configure the behavior of nodes near a border of visual.
diff --git a/capabilities.json b/capabilities.json
@@ -125,6 +125,12 @@
                             "fontSize": true
                         }
                     }
+                },
+                "allowIntersection": {
+                    "displayName": "Intersection",
+                    "type": {
+                        "bool": true
+                    }
                 }
             }
         },
@@ -236,6 +242,12 @@
                         "numeric": true
                     },
                     "displayName": "Charge"
+                },
+                "boundedByBox": {
+                    "type": {
+                        "bool": true
+                    },
+                    "displayName": "Bound by box"
                 }
             }
         }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "powerbi-visuals-forcegraph",
-  "version": "1.3.7",
+  "version": "1.3.8",
   "description": "This custom visual implements a D3 force layout diagram with curved path. The thickness of the path also represents the weight of the relationship between the nodes.",
   "repository": {
     "type": "git",
@@ -53,6 +53,8 @@
     "powerbi-visuals-utils-tooltiputils": "^0.3.0",
     "powerbi-visuals-utils-testutils": "^0.2.2",
     "powerbi-visuals-utils-typeutils": "^0.2.1",
+    "powerbi-visuals-utils-chartutils": "0.2.3",
+    "powerbi-visuals-utils-interactivityutils": "0.2.1",
     "tslint": "3.15.1",
     "typings": "1.4.0"
   }

diff --git a/pbiviz.json b/pbiviz.json
@@ -4,7 +4,7 @@
     "displayName": "Force-Directed Graph",
     "guid": "ForceGraph1449359463895",
     "visualClassName": "ForceGraph",
-    "version": "1.3.7",
+    "version": "1.3.8",
     "description": "This custom visual implements a D3 force layout diagram with curved path. The thickness of the path also represents the weight of the relationship between the nodes.",
     "supportUrl": "http://community.powerbi.com",
     "gitHubUrl": "https://github.com/Microsoft/PowerBI-visuals-ForceGraph"
@@ -27,7 +27,9 @@
     "node_modules/powerbi-visuals-utils-typeutils/lib/index.js",
     "node_modules/powerbi-visuals-utils-svgutils/lib/index.js",
     "node_modules/powerbi-visuals-utils-formattingutils/lib/index.js",
-    "node_modules/powerbi-visuals-utils-tooltiputils/lib/index.js"
+    "node_modules/powerbi-visuals-utils-tooltiputils/lib/index.js",
+    "node_modules/powerbi-visuals-utils-interactivityutils/lib/index.js",
+    "node_modules/powerbi-visuals-utils-chartutils/lib/index.js"
   ],
   "style": "style/visual.less",
   "capabilities": "capabilities.json"

diff --git a/src/dataInterfaces.ts b/src/dataInterfaces.ts
@@ -30,15 +30,24 @@ module powerbi.extensibility.visual {
 
     // powerbi.extensibility.utils.tooltip
     import TooltipEnabledDataPoint = powerbi.extensibility.utils.tooltip.TooltipEnabledDataPoint;
+    import IValueFormatter = powerbi.extensibility.utils.formatting.IValueFormatter;
 
     export interface ForceGraphNode extends Node {
         name: string;
         image: string;
-        adj: { [i: string]: number };
+        adj: {[i: string]: number};
         x?: number;
         y?: number;
         isDrag?: boolean;
         isOver?: boolean;
+        hideLabel?: boolean;
+    }
+
+    export interface ITextRect {
+        x1: number;
+        y1: number;
+        x2: number;
+        y2: number;
     }
 
     export interface ForceGraphNodes {
@@ -61,6 +70,7 @@ module powerbi.extensibility.visual {
         linkedByName: LinkedByName;
         linkTypes: {};
         settings: ForceGraphSettings;
+        formatter: IValueFormatter;
     }
 
     export interface LinkedByName {

diff --git a/src/settings.ts b/src/settings.ts
@@ -39,6 +39,7 @@ module powerbi.extensibility.visual {
         public show: boolean = true;
         public color: string = '#777777';
         public fontSize: number = 9;
+        public allowIntersection: boolean = false;
     }
 
     export class LinksSettings {
@@ -67,5 +68,6 @@ module powerbi.extensibility.visual {
 
     export class SizeSettings {
         public charge: number = -15;
+        public boundedByBox: boolean = false;
     }
 }
diff --git a/src/visual.ts b/src/visual.ts
@@ -100,6 +100,11 @@ module powerbi.extensibility.visual {
     import TooltipEventArgs = powerbi.extensibility.utils.tooltip.TooltipEventArgs;
     import ITooltipServiceWrapper = powerbi.extensibility.utils.tooltip.ITooltipServiceWrapper;
     import createTooltipServiceWrapper = powerbi.extensibility.utils.tooltip.createTooltipServiceWrapper;
+    import DataLabelManager = powerbi.extensibility.utils.chart.dataLabel.DataLabelManager;
+    import ILabelLayout = powerbi.extensibility.utils.chart.dataLabel.ILabelLayout;
+    import TextProperties = powerbi.extensibility.utils.formatting.TextProperties;
+    import textMeasurementService = powerbi.extensibility.utils.formatting.textMeasurementService;
+    import IRect = powerbi.extensibility.utils.svg.IRect;
 
     interface ValueLimitation {
         (x: any): number;
@@ -142,6 +147,7 @@ module powerbi.extensibility.visual {
         private static DefaultLinkColor: string = '#bbb';
         private static DefaultLinkHighlightColor: string = '#f00';
         private static DefaultLinkThickness: string = '1.5px';
+        private static LabelsFontFamily: string = 'sans-serif';
 
         private static MinRangeValue: number = 1;
         private static MaxRangeValue: number = 10;
@@ -166,6 +172,7 @@ module powerbi.extensibility.visual {
         private static DefaultLabelText: string = '';
 
         private static ResolutionFactor: number = 20;
+        private static ResolutionFactorBoundByBox: number = 0.9;
 
         private static LinkSelector: ClassAndSelector = createClassAndSelector('link');
         private static LinkLabelHolderSelector: ClassAndSelector = createClassAndSelector('linklabelholder');
@@ -349,6 +356,7 @@ module powerbi.extensibility.visual {
                 if (!nodes[tableRow.Source]) {
                     nodes[tableRow.Source] = {
                         name: sourceFormatter.format(tableRow.Source),
+                        hideLabel: false,
                         image: tableRow.SourceType || ForceGraph.DefaultSourceType,
                         adj: {}
                     };
@@ -357,6 +365,7 @@ module powerbi.extensibility.visual {
                 if (!nodes[tableRow.Target]) {
                     nodes[tableRow.Target] = {
                         name: targetFormatter.format(tableRow.Target),
+                        hideLabel: false,
                         image: tableRow.TargetType || ForceGraph.DefaultTargetType,
                         adj: {}
                     };
@@ -407,10 +416,13 @@ module powerbi.extensibility.visual {
                 maxFiles,
                 linkedByName,
                 settings,
-                linkTypes: linkDataPoints
+                linkTypes: linkDataPoints,
+                formatter: targetFormatter
             };
         }
 
+
+
         private static parseSettings(dataView: DataView): ForceGraphSettings {
             let settings: ForceGraphSettings = ForceGraphSettings.parse<ForceGraphSettings>(dataView);
 
@@ -426,6 +438,39 @@ module powerbi.extensibility.visual {
             return settings;
         }
 
+        private isIntersect(textRect1: ITextRect, textRect2: ITextRect): boolean {
+            let intersectY: boolean = false;
+            let intersectX: boolean = false;
+
+            if (textRect1.y1 <= textRect2.y1 && textRect2.y1 <= textRect1.y2) {
+                intersectY = true;
+            }
+            if (textRect1.y1 <= textRect2.y2 && textRect2.y2 <= textRect1.y2) {
+                intersectY = true;
+            }
+            if (textRect2.y2 <= textRect1.y1 && textRect1.y1 <= textRect2.y1) {
+                intersectY = true;
+            }
+            if (textRect2.y2 <= textRect1.y2 && textRect1.y2 <= textRect2.y1) {
+                intersectY = true;
+            }
+
+            if (textRect1.x1 <= textRect2.x1 && textRect2.x1 <= textRect1.x2) {
+                intersectX = true;
+            }
+            if (textRect1.x1 <= textRect2.x2 && textRect2.x2 <= textRect1.x2) {
+                intersectX = true;
+            }
+            if (textRect2.x2 <= textRect1.x1 && textRect1.x1 <= textRect2.x1) {
+                intersectX = true;
+            }
+            if (textRect2.x2 <= textRect1.x2 && textRect1.x2 <= textRect2.x1) {
+                intersectX = true;
+            }
+
+            return intersectX && intersectY;
+        }
+
         public update(options: VisualUpdateOptions): void {
             if (!options.dataViews || options.dataViews.length < ForceGraph.MinAmountOfDataViews) {
                 return;
@@ -639,11 +684,21 @@ module powerbi.extensibility.visual {
 
         private tick(): () => void {
             const viewport: IViewport = this.viewportIn;
+            let properties: TextProperties = {
+                fontFamily: ForceGraph.LabelsFontFamily,
+                fontSize: PixelConverter.fromPoint(this.settings.labels.fontSize),
+                text: this.data.formatter.format('')
+            };
+
+            let resolutionFactor: number = ForceGraph.ResolutionFactor;
+            if (this.settings.size.boundedByBox) {
+                resolutionFactor = ForceGraph.ResolutionFactorBoundByBox;
+            }
 
             // limitX and limitY is necessary when you minimize the graph and then resize it to normal.
             // 'width/height * 20' seems enough to move nodes freely by force layout.
-            let maxWidth: number = viewport.width * ForceGraph.ResolutionFactor,
-                maxHeight: number = viewport.height * ForceGraph.ResolutionFactor,
+            let maxWidth: number = viewport.width * resolutionFactor,
+                maxHeight: number = viewport.height * resolutionFactor,
                 limitX = x => Math.max((viewport.width - maxWidth) / 2, Math.min((viewport.width + maxWidth) / 2, x)),
                 limitY = y => Math.max((viewport.height - maxHeight) / 2, Math.min((viewport.height + maxHeight) / 2, y));
 
@@ -666,6 +721,39 @@ module powerbi.extensibility.visual {
                 this.nodes.attr('transform', (node: ForceGraphNode) => {
                     return translate(limitX(node.x), limitY(node.y));
                 });
+
+                if (!this.settings.labels.allowIntersection)
+                    this.nodes
+                        .classed('hiddenLabel', (node: ForceGraphNode) => {
+                            properties.text = this.data.formatter.format(node.name);
+                            let curNodeTextRect: ITextRect = this.getTextRect(properties, node.x, node.y);
+
+                            node.hideLabel = false;
+                            this.nodes.each((otherNode: ForceGraphNode) => {
+                                properties.text = this.data.formatter.format(otherNode.name);
+                                let otherNodeTextRect: ITextRect = this.getTextRect(properties, otherNode.x, otherNode.y);
+                                if (!otherNode.hideLabel && node.name !== otherNode.name && this.isIntersect(curNodeTextRect, otherNodeTextRect)) {
+                                    node.hideLabel = true;
+                                    return;
+                                }
+                            });
+
+                            return node.hideLabel;
+                        });
+            };
+        }
+
+        private getTextRect(properties: TextProperties, x: number, y: number): ITextRect {
+            let textHeight: number = textMeasurementService.estimateSvgTextHeight(properties);
+            let textWidth: number = textMeasurementService.measureSvgTextWidth(properties);
+            let curTextUpperPointX: number = x + textWidth;
+            let curTextUpperPointY: number = y - textHeight;
+
+            return <ITextRect>{
+                x1: x,
+                y1: y,
+                x2: curTextUpperPointX,
+                y2: curTextUpperPointY
             };
         }
 

diff --git a/style/visual.less b/style/visual.less
@@ -50,6 +50,10 @@
         z-index: 99;
     }
 
+    .hiddenLabel text{
+        display: none;
+    }
+
     .hidden {
         display: none;
     }

diff --git a/tsconfig.json b/tsconfig.json
@@ -17,6 +17,8 @@
     "node_modules/powerbi-visuals-utils-dataviewutils/lib/index.d.ts",
     "node_modules/powerbi-visuals-utils-formattingutils/lib/index.d.ts",
     "node_modules/powerbi-visuals-utils-tooltiputils/lib/index.d.ts",
+    "node_modules/powerbi-visuals-utils-interactivityutils/lib/index.d.ts",
+    "node_modules/powerbi-visuals-utils-chartutils/lib/index.d.ts",
     "src/columns.ts",
     "src/tooltipsFactory.ts",
     "src/settings.ts",