New options for scale creation (#21)

* New options for scale creation
microsoft · Oct 11, 2017 · ca6cb3f · ca6cb3f
1 parent ac831eb
commit ca6cb3f
Show file tree

Hide file tree

Showing 9 changed files with 93 additions and 16 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,6 @@
+## 1.5.0
+* Added two new optional parameters for CreateScale function -- innerPadding and useRangePoint. The first lets set inner padding for scale instead of recieve it from constant. The second lets use rangePoint instead of rangeBands function for creation of ordinal scale.
+
 ## 1.4.0
 * Remove width restriction of title in legend
 * Added new option to drawDefaultLabelsForDataPointChart function to control behavior of collided labels

diff --git a/lib/index.d.ts b/lib/index.d.ts
@@ -226,6 +226,10 @@ declare module powerbi.extensibility.utils.chart.axis {
         disableNice?: boolean;
         /** (optional) Disable "niceing" for numeric axis. Disabling nice will be applid only when creating scale obj (bestTickCount will be applied to 'ticks' method) */
         disableNiceOnlyForScale?: boolean;
+        /** (optional) InnerPadding to be applied to the axis.*/
+        innerPadding?: number;
+        /** (optioanl) Apply for using of RangePoints function instead of RangeBands inside CreateOrdinal scale function.*/
+        useRangePoints?: boolean;
     }
     enum AxisOrientation {
         top = 0,
@@ -364,7 +368,7 @@ declare module powerbi.extensibility.utils.chart.axis {
         function wordBreak(text: d3.Selection<any>, axisProperties: IAxisProperties, maxHeight: number): void;
         function clip(text: d3.Selection<any>, availableWidth: number, svgEllipsis: (textElement: SVGTextElement, maxWidth: number) => void): void;
     }
-    function createOrdinalScale(pixelSpan: number, dataDomain: any[], outerPaddingRatio?: number): d3.scale.Ordinal<any, any>;
+    function createOrdinalScale(pixelSpan: number, dataDomain: any[], outerPaddingRatio?: number, innerPaddingRatio?: number, useRangePoints?: boolean): d3.scale.Ordinal<any, any>;
     function isLogScalePossible(domain: any[], axisType?: ValueType): boolean;
     function createNumericalScale(axisScaleType: string, pixelSpan: number, dataDomain: any[], dataType: ValueType, outerPadding?: number, niceCount?: number, shouldClamp?: boolean): d3.scale.Linear<any, any>;
     function createLinearScale(pixelSpan: number, dataDomain: any[], outerPadding?: number, niceCount?: number, shouldClamp?: boolean): d3.scale.Linear<any, any>;

diff --git a/lib/index.js b/lib/index.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "powerbi-visuals-utils-chartutils",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "ChartUtils",
   "main": "lib/index.js",
   "repository": {

diff --git a/src/axis/axis.ts b/src/axis/axis.ts
@@ -54,7 +54,6 @@ module powerbi.extensibility.utils.chart.axis {
 
     const TickLabelPadding: number = 2;
     const MinOrdinalRectThickness: number = 20;
-    const InnerPaddingRatio: number = 0.2;
 
     /**
      * Default ranges are for when we have a field chosen for the axis,
@@ -760,7 +759,9 @@ module powerbi.extensibility.utils.chart.axis {
             shouldClamp = !!options.shouldClamp,
             maxTickCount = options.maxTickCount,
             disableNice = options.disableNice,
-            disableNiceOnlyForScale = options.disableNiceOnlyForScale;
+            disableNiceOnlyForScale = options.disableNiceOnlyForScale,
+            innerPadding = options.innerPadding,
+            useRangePoint = options.useRangePoints;
 
         let dataType: ValueType = getCategoryValueType(metaDataColumn, isScalar);
 
@@ -786,7 +787,7 @@ module powerbi.extensibility.utils.chart.axis {
                 dataDomain = [];
 
             if (isOrdinal(dataType)) {
-                scale = createOrdinalScale(pixelSpan, dataDomain, categoryThickness ? outerPadding / categoryThickness : 0);
+                scale = createOrdinalScale(pixelSpan, dataDomain, categoryThickness ? outerPadding / categoryThickness : 0, innerPadding, useRangePoint);
             }
             else {
                 scale = createNumericalScale(options.scaleType, pixelSpan, dataDomain, dataType, outerPadding, bestTickCount);
@@ -824,7 +825,7 @@ module powerbi.extensibility.utils.chart.axis {
                 scale = createLinearScale(pixelSpan, scalarDomain, outerPadding, null, shouldClamp); // DO NOT PASS TICKCOUNT
             }
             else if (dataType.text || dataType.dateTime || dataType.numeric || dataType.bool) {
-                scale = createOrdinalScale(pixelSpan, scalarDomain, categoryThickness ? outerPadding / categoryThickness : 0);
+                scale = createOrdinalScale(pixelSpan, scalarDomain, categoryThickness ? outerPadding / categoryThickness : 0, innerPadding, useRangePoint);
                 bestTickCount = maxTicks === 0 ? 0
                     : Math.min(
                         scalarDomain.length,
@@ -1338,10 +1339,16 @@ module powerbi.extensibility.utils.chart.axis {
         }
     }
 
-    export function createOrdinalScale(pixelSpan: number, dataDomain: any[], outerPaddingRatio: number = 0): d3.scale.Ordinal<any, any> {
+    export function createOrdinalScale(pixelSpan: number, dataDomain: any[], outerPaddingRatio: number = 0, innerPaddingRatio: number = 0.2, useRangePoints: boolean = false): d3.scale.Ordinal<any, any> {
+        if (useRangePoints === true) {
+            return d3.scale.ordinal()
+            .rangePoints([0, pixelSpan], outerPaddingRatio)
+            .domain(dataDomain);
+        }
+
         return d3.scale.ordinal()
             /* Avoid using rangeRoundBands here as it is adding some extra padding to the axis*/
-            .rangeBands([0, pixelSpan], InnerPaddingRatio, outerPaddingRatio)
+            .rangeBands([0, pixelSpan], innerPaddingRatio, outerPaddingRatio)
             .domain(dataDomain);
     }
 

diff --git a/src/axis/axisInterfaces.ts b/src/axis/axisInterfaces.ts
@@ -252,6 +252,10 @@ module powerbi.extensibility.utils.chart.axis {
         disableNice?: boolean;
         /** (optional) Disable "niceing" for numeric axis. Disabling nice will be applid only when creating scale obj (bestTickCount will be applied to 'ticks' method) */
         disableNiceOnlyForScale?: boolean;
+        /** (optional) InnerPadding to be applied to the axis.*/
+        innerPadding?: number;
+        /** (optioanl) Apply for using of RangePoints function instead of RangeBands inside CreateOrdinal scale function.*/
+        useRangePoints?: boolean;
     }
 
     export enum AxisOrientation {

diff --git a/test/axis/axisTest.ts b/test/axis/axisTest.ts
@@ -242,7 +242,6 @@ module powerbi.extensibility.utils.chart.axis.test {
             };
 
             // TODO: add a getValueFn mock to provide to createAxis so we can test tickValue generation
-
             it("create ordinal scale - without categoryThickness", () => {
                 let axisProperties = axisPropertiesBuilder.buildAxisPropertiesString();
 
@@ -267,6 +266,46 @@ module powerbi.extensibility.utils.chart.axis.test {
                 expect(xLabelMaxWidth).toBeCloseTo(29.7, 1);
             });
 
+            it("create ordinal scale with defined inner padding", () => {
+                let axisProperties = axisPropertiesBuilder.buildAxisPropertiesWithDefinedInnerPadding();
+
+                let scale = <any>axisProperties.scale;
+                expect(scale).toBeDefined();
+
+                let values = <any>axisProperties.values;
+                expect(values).toBeDefined();
+                expect(values.length).toEqual(3);
+                expect(values[0]).toBe("Sun");
+
+                // Proves scale is ordinal
+                expect(scale.invert).toBeUndefined();
+
+                // x label max width is derived from the scale interval
+                let xLabelMaxWidth = <any>axisProperties.xLabelMaxWidth;
+                expect(xLabelMaxWidth).toBeDefined();
+                expect(xLabelMaxWidth).toBeCloseTo(34, 1);
+            });
+
+            it("create ordinal scale with defined inner padding and using of RangePoints", () => {
+                let axisProperties = axisPropertiesBuilder.buildAxisPropertiesWithRangePointsUsing();
+
+                let scale = <any>axisProperties.scale;
+                expect(scale).toBeDefined();
+
+                let values = <any>axisProperties.values;
+                expect(values).toBeDefined();
+                expect(values.length).toEqual(3);
+                expect(values[0]).toBe("Sun");
+
+                // Proves scale is ordinal
+                expect(scale.invert).toBeUndefined();
+
+                // x label max width is derived from the scale interval
+                let xLabelMaxWidth = <any>axisProperties.xLabelMaxWidth;
+                expect(xLabelMaxWidth).toBeDefined();
+                expect(xLabelMaxWidth).toBeCloseTo(44, 1);
+            });
+
             it("create ordinal scale with linear values", () => {
                 let axisProperties = axisPropertiesBuilder.buildAxisPropertiesNumber();
 

diff --git a/test/axis/helpers/axisPropertiesBuilder.ts b/test/axis/helpers/axisPropertiesBuilder.ts
@@ -218,6 +218,19 @@ module powerbi.extensibility.utils.chart.axis.test.helper {
             return axis.createAxis(axisOptions);
         }
 
+        export function buildAxisPropertiesWithDefinedInnerPadding(): IAxisProperties {
+            let axisOptions = getAxisOptions(metaDataColumnText);
+            axisOptions.innerPadding = 0.5;
+            return axis.createAxis(axisOptions);
+        }
+
+        export function buildAxisPropertiesWithRangePointsUsing(): IAxisProperties {
+            let axisOptions = getAxisOptions(metaDataColumnText);
+            axisOptions.innerPadding = 0.5;
+            axisOptions.useRangePoints = true;
+            return axis.createAxis(axisOptions);
+        }
+
         export function buildAxisPropertiesNumeric(
             dataDomain: any[],
             categoryThickness?: number,