Brings an ability to change Dots radius (#17)

* Brings ability to change dot radius Dot's radius used to be hardcoded but now this value moved to Format Panel -> Dots Work item #25653 * Covers ability to change radius by Unit Test
microsoft · May 14, 2018 · 9820a80 · 9820a80
1 parent db37b8b
commit 9820a80
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 19 deletions.
diff --git a/capabilities.json b/capabilities.json
@@ -87,8 +87,8 @@
             }
         },
         "dataPoint": {
-            "displayName": "Data colors",
-            "displayNameKey": "Visual_DataColors",
+            "displayName": "Dots",
+            "displayNameKey": "Visual_Dots",
             "properties": {
                 "fill": {
                     "displayName": "Fill",
@@ -100,6 +100,13 @@
                             }
                         }
                     }
+                },
+                "radius": {
+                    "displayName": "Radius",
+                    "displayNameKey": "Visual_Radius",
+                    "type": {
+                        "numeric": true
+                    }
                 }
             }
         },

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "powerbi-visuals-dotplot",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "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",
@@ -47,15 +47,15 @@
     "karma-typescript-preprocessor": "0.3.1",
     "lodash": "4.17.4",
     "powerbi-models": "^1.0.2",
-    "powerbi-visuals-tools": "1.11.0",
-    "powerbi-visuals-utils-typeutils": "^1.1.0",
+    "powerbi-visuals-tools": "^1.11.3",
     "powerbi-visuals-utils-chartutils": "1.2.0",
     "powerbi-visuals-utils-dataviewutils": "1.2.0",
     "powerbi-visuals-utils-formattingutils": "2.1.0",
     "powerbi-visuals-utils-interactivityutils": "3.1.0",
     "powerbi-visuals-utils-svgutils": "^1.1.0",
     "powerbi-visuals-utils-testutils": "1.2.1",
     "powerbi-visuals-utils-tooltiputils": "^1.0.0",
+    "powerbi-visuals-utils-typeutils": "^1.1.0",
     "tslint": "5.4.3",
     "tslint-microsoft-contrib": "^5.0.1"
   }

diff --git a/pbiviz.json b/pbiviz.json
@@ -4,7 +4,7 @@
     "displayName": "Dot Plot",
     "guid": "DotPlot1442374105856",
     "visualClassName": "DotPlot",
-    "version": "1.2.1",
+    "version": "1.3.0",
     "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/settings.ts b/src/settings.ts
@@ -38,7 +38,18 @@ module powerbi.extensibility.visual {
     }
 
     export class DataPointSettings {
+        private minRadius: number = 1;
+        private maxRadius: number = 15;
+
         public fill: string = "#00B8AA";
+        public radius: number = 5;
+
+        public parse(): void {
+            this.radius = Math.min(
+                this.maxRadius,
+                Math.max(this.minRadius, this.radius)
+            );
+        }
     }
 
     export class LabelsSettings {
@@ -50,7 +61,7 @@ module powerbi.extensibility.visual {
         public labelDisplayUnits: number = 0;
         public labelPrecision: number = 2;
         public fontSize: number = dataLabelUtils.DefaultFontSizeInPt;
-        public orientation: DotPlotLabelsOrientation =  DotPlotLabelsOrientation.Horizontal;
+        public orientation: DotPlotLabelsOrientation = DotPlotLabelsOrientation.Horizontal;
 
     }
 

diff --git a/src/visual.ts b/src/visual.ts
@@ -95,7 +95,6 @@ module powerbi.extensibility.visual {
         private static DataLabelAngle: number = -90;
         private static DataLabelXOffsetIndex: number = 0.3;
 
-        private static DefaultRadius: number = 5;
         private static DefaultStrokeWidth: number = 1;
 
         private static DefaultFontSize: number = 11;
@@ -187,7 +186,6 @@ module powerbi.extensibility.visual {
         private interactivityService: IInteractivityService;
         private scaleType: string = AxisScale.linear;
 
-        private radius: number = 5;
         private strokeWidth: number = 1;
         private static verticalLabelMarginRatio: number = 0.2;
 
@@ -210,7 +208,6 @@ module powerbi.extensibility.visual {
             dataView: DataView,
             height: number,
             colors: IColorPalette,
-            radius: number,
             visualHost: IVisualHost,
             layout: VisualLayout
         ): DotPlotData {
@@ -296,6 +293,8 @@ module powerbi.extensibility.visual {
                 ? maxLabelWidth
                 : 0;
 
+            const radius: number = settings.dataPoint.radius;
+
             const diameter: number = DotPlot.RadiusFactor * radius + DotPlot.ExtraDiameter,
                 dotsTotalHeight: number = height - maxXAxisHeight
                     - radius * DotPlot.RadiusFactor - labelFontSize - layout.margin.top - maxLabelHeight,
@@ -383,6 +382,8 @@ module powerbi.extensibility.visual {
                     settings.labels.labelPrecision),
                 LabelsSettings.MaxLabelPrecision);
 
+            settings.dataPoint.parse();
+
             return settings;
         }
 
@@ -438,11 +439,11 @@ module powerbi.extensibility.visual {
                 ? options.dataViews[0]
                 : null;
             this.layout.viewportIn.height = this.layout.viewportIn.height;
+
             const data: DotPlotData = DotPlot.converter(
                 dataView,
                 this.layout.viewportIn.height,
                 this.colorPalette,
-                this.radius,
                 this.visualHost,
                 this.layout
             );
@@ -459,7 +460,7 @@ module powerbi.extensibility.visual {
                 width: Math.max(
                     this.layout.viewportIn.width,
                     this.data.dataGroups.length
-                    * (this.radius * DotPlot.RadiusFactor + DotPlot.ExtraDiameterOfDataGroups)
+                    * (this.data.settings.dataPoint.radius * DotPlot.RadiusFactor + DotPlot.ExtraDiameterOfDataGroups)
                     + this.data.maxLabelWidth)
             };
 
@@ -570,7 +571,7 @@ module powerbi.extensibility.visual {
 
             circleSelection.attr({
                 cy: (dataPoint: DotPlotDataPoint) => dataPoint.y,
-                r: this.radius,
+                r: this.data.settings.dataPoint.radius,
                 fill: this.settings.dataPoint.fill
             });
 
@@ -624,7 +625,7 @@ module powerbi.extensibility.visual {
                     },
                     y: (dataGroup: DotPlotDataGroup) => {
                         const y: number = (_.isEmpty(dataGroup.dataPoints)
-                            ? this.data.dotsTotalHeight + this.radius * DotPlot.RadiusFactor
+                            ? this.data.dotsTotalHeight + this.data.settings.dataPoint.radius * DotPlot.RadiusFactor
                             : _.last(dataGroup.dataPoints).y) + this.data.labelFontSize;
 
                         return y - dataGroup.size.height;
@@ -635,7 +636,7 @@ module powerbi.extensibility.visual {
                         && dataGroup.dataPoints
                         && this.layout.viewportIn.height
                         - this.data.maxXAxisHeight
-                        + this.radius * DotPlot.RadiusFactor > this.data.labelFontSize);
+                        + this.data.settings.dataPoint.radius * DotPlot.RadiusFactor > this.data.labelFontSize);
                 },
                 style: {
                     "fill": this.settings.labels.color,

diff --git a/stringResources/en-US/resources.resjson b/stringResources/en-US/resources.resjson
@@ -5,7 +5,7 @@
 	"Visual_Show": "Show",
 	"Visual_Title": "Title",
 	"Visual_LabelColor": "Label color",
-	"Visual_DataColors": "Data colors",
+	"Visual_Dots": "Dots",
 	"Visual_Fill": "Fill",
 	"Visual_DataLabels": "Data labels",
 	"Visual_Color": "Color",
@@ -20,5 +20,6 @@
 	"Visual_Description_Color": "Select color for data labels",
 	"Visual_Description_DisplayUnits": "Select the units (millions, billions, etc.)",
 	"Visual_Description_DecimalPlaces": "Select the number of decimal places to display",
-	"Visual_Value": "Value"
+	"Visual_Value": "Value",
+	"Visual_Radius": "Radius"
 }
diff --git a/test/visualTest.ts b/test/visualTest.ts
@@ -209,8 +209,8 @@ namespace powerbi.extensibility.visual.test {
                 });
             });
 
-            describe("Data colors", () => {
-                it("default color", () => {
+            describe("Dots", () => {
+                it("specified color should be applied to all of dots", () => {
                     const color: string = "#112233";
 
                     dataView.metadata.objects = {
@@ -228,6 +228,27 @@ namespace powerbi.extensibility.visual.test {
                             assertColorsMatch(element.css("fill"), color);
                         });
                 });
+
+                it("specified radius should be applied to all of dots", () => {
+                    const radius: number = 5;
+
+                    dataView.metadata.objects = {
+                        dataPoint: {
+                            radius,
+                        }
+                    };
+
+                    visualBuilder.updateFlushAllD3Transitions(dataView);
+
+                    visualBuilder.dots
+                        .toArray()
+                        .map($)
+                        .forEach((element: JQuery) => {
+                            const parsedRadius: number = Number.parseInt(element.attr("r"));
+
+                            expect(parsedRadius).toBe(radius);
+                        });
+                });
             });
 
             describe("Data labels", () => {