@elastic/charts - npm Package Compare versions

Comparing version 7.0.2 to 7.1.0

CHANGELOG.md

@@ -0,1 +1,8 @@
+# [7.1.0](https://github.com/elastic/elastic-charts/compare/v7.0.2...v7.1.0) (2019-07-03)
+
+
+### Features
+
+* **axis:** add tickLabelPadding prop ([#217](https://github.com/elastic/elastic-charts/issues/217)) ([4d40936](https://github.com/elastic/elastic-charts/commit/4d40936)), closes [#94](https://github.com/elastic/elastic-charts/issues/94)
+
 ## [7.0.2](https://github.com/elastic/elastic-charts/compare/v7.0.1...v7.0.2) (2019-07-03)
@@ -2,0 +9,0 @@

dist/components/react_canvas/axis.js

@@ -48,4 +48,9 @@ "use strict";
         _this.renderTickLabel = function (tick, i) {
-            var _a = _this.props.chartTheme.axes.tickLabelStyle, padding = _a.padding, labelStyle = __rest(_a, ["padding"]);
-            var _b = _this.props, _c = _b.axisSpec, tickSize = _c.tickSize, tickPadding = _c.tickPadding, position = _c.position, axisTicksDimensions = _b.axisTicksDimensions, debug = _b.debug;
+            /**
+             * padding is already computed through width
+             * and bbox_calculator using tickLabelPadding
+             * set padding to 0 to avoid conflict
+             */
+            var labelStyle = __assign({}, _this.props.chartTheme.axes.tickLabelStyle, { padding: 0 });
+            var _a = _this.props, _b = _a.axisSpec, tickSize = _b.tickSize, tickPadding = _b.tickPadding, position = _b.position, axisTicksDimensions = _a.axisTicksDimensions, debug = _a.debug;
             var tickLabelRotation = _this.props.axisSpec.tickLabelRotation || 0;
@@ -52,0 +57,0 @@ var tickLabelProps = axis_utils_1.getTickLabelProps(tickLabelRotation, tickSize, tickPadding, tick.position, position, axisTicksDimensions);

dist/lib/axes/axis_utils.d.ts

 import { XDomain } from '../series/domains/x_domain';
 import { YDomain } from '../series/domains/y_domain';
-import { AxisSpec, CompleteBoundedDomain, DomainRange, LowerBoundedDomain, Position, Rotation, UpperBoundedDomain } from '../series/specs';
+import { AxisSpec, CompleteBoundedDomain, DomainRange, LowerBoundedDomain, Position, Rotation, UpperBoundedDomain, AxisStyle } from '../series/specs';
 import { AxisConfig, Theme } from '../themes/theme';
@@ -32,3 +32,3 @@ import { Dimensions, Margins } from '../utils/dimensions';
  * so we can compute the max space occupied by the axis component.
- * @param axisSpec tbe spec of the axis
+ * @param axisSpec the spec of the axis
  * @param xDomain the x domain associated
@@ -41,6 +41,7 @@ * @param yDomain the y domain array
 export declare function computeAxisTicksDimensions(axisSpec: AxisSpec, xDomain: XDomain, yDomain: YDomain[], totalBarsInCluster: number, bboxCalculator: BBoxCalculator, chartRotation: Rotation, axisConfig: AxisConfig, barsPadding?: number): AxisTicksDimensions | null;
+export declare function getAxisTickLabelPadding(axisConfigTickLabelPadding: number, axisSpecStyle?: AxisStyle): number;
 export declare function isYDomain(position: Position, chartRotation: Rotation): boolean;
 export declare function getScaleForAxisSpec(axisSpec: AxisSpec, xDomain: XDomain, yDomain: YDomain[], totalBarsInCluster: number, chartRotation: Rotation, minRange: number, maxRange: number, barsPadding?: number): Scale | null;
 export declare function computeRotatedLabelDimensions(unrotatedDims: BBox, degreesRotation: number): BBox;
-export declare const getMaxBboxDimensions: (bboxCalculator: BBoxCalculator, fontSize: number, fontFamily: string, tickLabelRotation: number) => (acc: {
+export declare const getMaxBboxDimensions: (bboxCalculator: BBoxCalculator, fontSize: number, fontFamily: string, tickLabelRotation: number, tickLabelPadding: number) => (acc: {
     [key: string]: number;
@@ -47,0 +48,0 @@ }, tickLabel: string) => {

dist/lib/axes/axis_utils.js

@@ -19,3 +19,3 @@ "use strict";
  * so we can compute the max space occupied by the axis component.
- * @param axisSpec tbe spec of the axis
+ * @param axisSpec the spec of the axis
  * @param xDomain the x domain associated
@@ -35,6 +35,14 @@ * @param yDomain the y domain array
     }
-    var dimensions = computeTickDimensions(scale, axisSpec.tickFormat, bboxCalculator, axisConfig, axisSpec.tickLabelRotation);
+    var tickLabelPadding = getAxisTickLabelPadding(axisConfig.tickLabelStyle.padding, axisSpec.style);
+    var dimensions = computeTickDimensions(scale, axisSpec.tickFormat, bboxCalculator, axisConfig, tickLabelPadding, axisSpec.tickLabelRotation);
     return __assign({}, dimensions);
 }
 exports.computeAxisTicksDimensions = computeAxisTicksDimensions;
+function getAxisTickLabelPadding(axisConfigTickLabelPadding, axisSpecStyle) {
+    if (axisSpecStyle && axisSpecStyle.tickLabelPadding !== undefined) {
+        return axisSpecStyle.tickLabelPadding;
+    }
+    return axisConfigTickLabelPadding;
+}
+exports.getAxisTickLabelPadding = getAxisTickLabelPadding;
 function isYDomain(position, chartRotation) {
@@ -73,4 +81,4 @@ var isStraightRotation = chartRotation === 0 || chartRotation === 180;
 exports.computeRotatedLabelDimensions = computeRotatedLabelDimensions;
-exports.getMaxBboxDimensions = function (bboxCalculator, fontSize, fontFamily, tickLabelRotation) { return function (acc, tickLabel) {
-    var bbox = bboxCalculator.compute(tickLabel, fontSize, fontFamily).getOrElse({
+exports.getMaxBboxDimensions = function (bboxCalculator, fontSize, fontFamily, tickLabelRotation, tickLabelPadding) { return function (acc, tickLabel) {
+    var bbox = bboxCalculator.compute(tickLabel, tickLabelPadding, fontSize, fontFamily).getOrElse({
         width: 0,
@@ -95,3 +103,3 @@ height: 0,
 }; };
-function computeTickDimensions(scale, tickFormat, bboxCalculator, axisConfig, tickLabelRotation) {
+function computeTickDimensions(scale, tickFormat, bboxCalculator, axisConfig, tickLabelPadding, tickLabelRotation) {
     if (tickLabelRotation === void 0) { tickLabelRotation = 0; }
@@ -101,3 +109,3 @@ var tickValues = scale.ticks();
     var _a = axisConfig.tickLabelStyle, fontFamily = _a.fontFamily, fontSize = _a.fontSize;
-    var _b = tickLabels.reduce(exports.getMaxBboxDimensions(bboxCalculator, fontSize, fontFamily, tickLabelRotation), { maxLabelBboxWidth: 0, maxLabelBboxHeight: 0, maxLabelTextWidth: 0, maxLabelTextHeight: 0 }), maxLabelBboxWidth = _b.maxLabelBboxWidth, maxLabelBboxHeight = _b.maxLabelBboxHeight, maxLabelTextWidth = _b.maxLabelTextWidth, maxLabelTextHeight = _b.maxLabelTextHeight;
+    var _b = tickLabels.reduce(exports.getMaxBboxDimensions(bboxCalculator, fontSize, fontFamily, tickLabelRotation, tickLabelPadding), { maxLabelBboxWidth: 0, maxLabelBboxHeight: 0, maxLabelTextWidth: 0, maxLabelTextHeight: 0 }), maxLabelBboxWidth = _b.maxLabelBboxWidth, maxLabelBboxHeight = _b.maxLabelBboxHeight, maxLabelTextWidth = _b.maxLabelTextWidth, maxLabelTextHeight = _b.maxLabelTextHeight;
     return {
@@ -104,0 +112,0 @@ tickValues: tickValues,

dist/lib/axes/bbox_calculator.d.ts

@@ -7,4 +7,4 @@ import { Option } from 'fp-ts/lib/Option';
 export interface BBoxCalculator {
-    compute(text: string, fontSize?: number, fontFamily?: string): Option<BBox>;
+    compute(text: string, padding: number, fontSize?: number, fontFamily?: string): Option<BBox>;
     destroy(): void;
 }

dist/lib/axes/canvas_text_bbox_calculator.d.ts

@@ -9,4 +9,4 @@ import { Option } from 'fp-ts/lib/Option';
     constructor(rootElement?: HTMLElement, scaledFontSize?: number);
-    compute(text: string, fontSize?: number, fontFamily?: string, padding?: number): Option<BBox>;
+    compute(text: string, padding: number, fontSize?: number, fontFamily?: string): Option<BBox>;
     destroy(): void;
 }

dist/lib/axes/canvas_text_bbox_calculator.js

@@ -15,9 +15,12 @@ "use strict";
     }
-    CanvasTextBBoxCalculator.prototype.compute = function (text, fontSize, fontFamily, padding) {
+    CanvasTextBBoxCalculator.prototype.compute = function (text, padding, fontSize, fontFamily) {
         if (fontSize === void 0) { fontSize = 16; }
         if (fontFamily === void 0) { fontFamily = 'Arial'; }
-        if (padding === void 0) { padding = 1; }
         if (!this.context) {
             return Option_1.none;
         }
+        // Padding should be at least one to avoid browser measureText inconsistencies
+        if (padding < 1) {
+            padding = 1;
+        }
         // We scale the text up to get a more accurate computation of the width of the text
@@ -24,0 +27,0 @@ // because `measureText` can vary a lot between browsers.

dist/lib/series/rendering.js

@@ -123,2 +123,4 @@ "use strict";
     var bboxCalculator = new canvas_text_bbox_calculator_1.CanvasTextBBoxCalculator();
+    // default padding to 1 for now
+    var padding = 1;
     var fontSize = seriesStyle && seriesStyle.displayValue ? seriesStyle.displayValue.fontSize : undefined;
@@ -164,3 +166,5 @@ var fontFamily = seriesStyle && seriesStyle.displayValue ? seriesStyle.displayValue.fontFamily : undefined;
             : formattedDisplayValue;
-        var computedDisplayValueWidth = bboxCalculator.compute(displayValueText || '', fontSize, fontFamily).getOrElse({
+        var computedDisplayValueWidth = bboxCalculator
+            .compute(displayValueText || '', padding, fontSize, fontFamily)
+            .getOrElse({
             width: 0,
@@ -167,0 +171,0 @@ height: 0,

dist/lib/series/specs.d.ts

@@ -193,4 +193,10 @@ /// <reference types="react" />
     domain?: DomainRange;
+    /** Object to hold custom styling */
+    style?: AxisStyle;
 }
 export declare type TickFormatter = (value: any) => string;
+export interface AxisStyle {
+    /** Specifies the amount of padding on the tick label bounding box */
+    tickLabelPadding?: number;
+}
 /**
@@ -197,0 +203,0 @@ * The position of the axis relative to the chart.

dist/lib/themes/dark_theme.js

@@ -89,3 +89,3 @@ "use strict";
             fill: 'white',
-            padding: 0,
+            padding: 1,
         },
@@ -92,0 +92,0 @@ tickLineStyle: {

dist/lib/themes/light_theme.js

@@ -89,3 +89,3 @@ "use strict";
             fill: 'gray',
-            padding: 0,
+            padding: 1,
         },
@@ -92,0 +92,0 @@ tickLineStyle: {

package.json

 {
   "name": "@elastic/charts",
   "description": "Elastic-Charts data visualization library",
-  "version": "7.0.2",
+  "version": "7.1.0",
   "author": "Marco Vettorello <[e-mail]>",
@@ -6,0 +6,0 @@ "license": "Apache-2.0",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2072014

increased by0.1%

Lines of code

21455

increased by0.13%

No dependency changes