From db37b8b78879dbd997d5d3d507ed6ec6eacc3873 Mon Sep 17 00:00:00 2001 From: Ignat Vilesov Date: Tue, 24 Apr 2018 20:06:12 +0300 Subject: [PATCH] Makes Dot Plot working in IE11 (#18) --- CHANGELOG.md | 3 +++ package.json | 2 +- pbiviz.json | 2 +- src/dataInterfaces.ts | 1 + src/settings.ts | 1 - src/visual.ts | 15 +++++++++------ test/visualBuilder.ts | 6 +----- test/visualTest.ts | 7 ------- 8 files changed, 16 insertions(+), 21 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 45e4e42..d22de5d 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/package.json b/package.json index 8c65234..a4e82eb 100644 --- a/package.json +++ b/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", diff --git a/pbiviz.json b/pbiviz.json index ba4e9cb..f066d29 100644 --- a/pbiviz.json +++ b/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" diff --git a/src/dataInterfaces.ts b/src/dataInterfaces.ts index bfc85c7..533a92d 100644 --- a/src/dataInterfaces.ts +++ b/src/dataInterfaces.ts @@ -73,6 +73,7 @@ module powerbi.extensibility.visual { categoryColumn: DataViewCategoryColumn; dotsTotalHeight: number; maxLabelWidth: number; + maxLabelHeight: number; labelFontSize: number; maxCategoryWidth: number; } diff --git a/src/settings.ts b/src/settings.ts index 77af60a..8fb20c9 100644 --- a/src/settings.ts +++ b/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; } } diff --git a/src/visual.ts b/src/visual.ts index e0948cc..76d6429 100644 --- a/src/visual.ts +++ b/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 = 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 diff --git a/test/visualBuilder.ts b/test/visualBuilder.ts index d8b67ce..6c66784 100644 --- a/test/visualBuilder.ts +++ b/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); } diff --git a/test/visualTest.ts b/test/visualTest.ts index 7ff4fdb..8f98815 100644 --- a/test/visualTest.ts +++ b/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";