Makes Dot Plot working in IE11 (#18)

Author: ignatvilesov

CHANGELOG.md

@@ -1,3 +1,6 @@
+## 1.2.1
+* FIX: Fixed an issue that caused Dot Plot to stop working in IE 11
+
 ## 1.2.0
 * UPD: powerbi-visuals-tools has been updated to 1.11.0 to support Bookmarks
 * UPD: API has been updated to 1.11.0 to support Bookmarks

package.json

@@ -1,6 +1,6 @@
 {
   "name": "powerbi-visuals-dotplot",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "A dot plot is used to show a representation of the distribution of frequencies. It is most often used to show counts of an occurrence.",
   "repository": {
     "type": "git",

pbiviz.json

@@ -4,7 +4,7 @@
     "displayName": "Dot Plot",
     "guid": "DotPlot1442374105856",
     "visualClassName": "DotPlot",
-    "version": "1.2.0",
+    "version": "1.2.1",
     "description": "A dot plot is used to show a representation of the distribution of frequencies. It is most often used to show counts of an occurrence.",
     "supportUrl": "http://community.powerbi.com",
     "gitHubUrl": "https://github.com/Microsoft/powerbi-visuals-dotplot"

src/dataInterfaces.ts

@@ -73,6 +73,7 @@ module powerbi.extensibility.visual {
         categoryColumn: DataViewCategoryColumn;
         dotsTotalHeight: number;
         maxLabelWidth: number;
+        maxLabelHeight: number;
         labelFontSize: number;
         maxCategoryWidth: number;
     }

src/settings.ts

@@ -58,6 +58,5 @@ module powerbi.extensibility.visual {
         public categoryAxis: CategoryAxisSettings = new CategoryAxisSettings();
         public dataPoint: DataPointSettings = new DataPointSettings();
         public labels: LabelsSettings = new LabelsSettings();
-        public maxLabelWidth: number = 0;
     }
 }

src/visual.ts

@@ -282,6 +282,7 @@ module powerbi.extensibility.visual {
             const maxLabelLength: number = _.max(formattedValues.map((value: string) => {
                 return value.length;
             })) || DotPlot.MinLabelLength;
+
             const maxLabelWidth: number = Math.max(
                 DotPlot.MaxLabelWidth,
                 maxLabelLength
@@ -291,12 +292,13 @@ module powerbi.extensibility.visual {
                         labelFontSize))
                 * DotPlot.LabelWidthFactor);
 
-            if (settings.labels.orientation === DotPlotLabelsOrientation.Vertical) {
-                settings.maxLabelWidth = maxLabelWidth;
-            }
+            const maxLabelHeight: number = settings.labels.orientation === DotPlotLabelsOrientation.Vertical
+                ? maxLabelWidth
+                : 0;
+
             const diameter: number = DotPlot.RadiusFactor * radius + DotPlot.ExtraDiameter,
                 dotsTotalHeight: number = height - maxXAxisHeight
-                    - radius * DotPlot.RadiusFactor - labelFontSize - layout.margin.top - settings.maxLabelWidth,
+                    - radius * DotPlot.RadiusFactor - labelFontSize - layout.margin.top - maxLabelHeight,
                 maxDots: number = Math.floor(dotsTotalHeight / diameter);
 
             const yScale: LinearScale<number, number> = d3.scale.linear()
@@ -356,6 +358,7 @@ module powerbi.extensibility.visual {
                 labelFontSize,
                 dotsTotalHeight,
                 maxLabelWidth,
+                maxLabelHeight,
                 maxCategoryWidth,
                 dataGroups: dataPointsGroup,
                 categoryAxisName: categoryColumn.source.displayName,
@@ -500,7 +503,7 @@ module powerbi.extensibility.visual {
                                 dx: number = size.width / DotPlot.DataLabelXOffset
                                     + size.height * DotPlot.DataLabelXOffsetIndex,
                                 dy: number = size.height + size.height / DotPlot.DataLabelYOffset;
-                            return translateAndRotate(dx, -dy + this.data.settings.maxLabelWidth - (DotPlot.MaxLabelWidth >= this.data.settings.maxLabelWidth ? 0 : this.data.settings.maxLabelWidth * DotPlot.verticalLabelMarginRatio), px, py, DotPlot.DataLabelAngle);
+                            return translateAndRotate(dx, -dy + this.data.maxLabelHeight - (DotPlot.MaxLabelWidth >= this.data.maxLabelHeight ? 0 : this.data.maxLabelHeight * DotPlot.verticalLabelMarginRatio), px, py, DotPlot.DataLabelAngle);
                         } else {
                             const dx: number = size.width / DotPlot.DataLabelXOffset,
                                 dy: number = size.height / DotPlot.DataLabelYOffset;
@@ -541,7 +544,7 @@ module powerbi.extensibility.visual {
                     "transform": (dataPoint: DotPlotDataGroup) => {
                         return translate(
                             this.getXDotPositionByIndex(dataPoint.index),
-                            this.layout.margin.top + this.data.labelFontSize + this.data.settings.maxLabelWidth );
+                            this.layout.margin.top + this.data.labelFontSize + this.data.maxLabelHeight);
                     },
                     "stroke": DotPlot.DotGroupStrokeColor,
                     "stroke-width": this.strokeWidth

test/visualBuilder.ts

@@ -29,7 +29,7 @@
 module powerbi.extensibility.visual.test {
     // powerbi.extensibility.utils.test
     import VisualBuilderBase = powerbi.extensibility.utils.test.VisualBuilderBase;
-    import VisualSettings = powerbi.extensibility.visual.DotPlot1442374105856.DotPlotSettings;
+
     // DotPlot1442374105856
     import VisualClass = powerbi.extensibility.visual.DotPlot1442374105856.DotPlot;
 
@@ -38,10 +38,6 @@ module powerbi.extensibility.visual.test {
             super(width, height, "DotPlot1442374105856");
         }
 
-        public getSettings(): VisualSettings {
-            return new VisualSettings();
-        }
-
         protected build(options: VisualConstructorOptions) {
             return new VisualClass(options);
         }

test/visualTest.ts

@@ -295,13 +295,6 @@ namespace powerbi.extensibility.visual.test {
                         });
                 });
 
-                it("orientation", () => {
-                    (dataView.metadata.objects as any).labels.orientation = DotPlotLabelsOrientation.Vertical;
-                    visualBuilder.updateFlushAllD3Transitions(dataView);
-                    visualBuilder.update(dataView);
-                    expect(visualBuilder.getSettings().maxLabelWidth).toBe(0);
-                });
-
                 it("font size", () => {
                     const fontSize: number = 23,
                         fontSizeInPt: string = "30.6667px";