From 694aa34f61475e8f77f07610f90063aeefc7e527 Mon Sep 17 00:00:00 2001 From: Jae Sung Park Date: Fri, 22 Sep 2023 17:40:20 +0900 Subject: [PATCH] fix(option): Fix inconsistency of padding - Refactor getting padding values by direction - Fix padding.bottom to follow from as other directions Fix #3426 --- src/ChartInternal/Axis/Axis.ts | 4 +- src/ChartInternal/internals/clip.ts | 6 +- src/ChartInternal/internals/legend.ts | 8 +- src/ChartInternal/internals/size.axis.ts | 2 +- src/ChartInternal/internals/size.ts | 212 ++++++++++------------- src/ChartInternal/internals/tooltip.ts | 4 +- src/ChartInternal/internals/transform.ts | 2 +- src/Plugin/stanford/index.ts | 16 +- src/config/Options/common/main.ts | 1 + test/internals/axis-spec.ts | 10 +- test/internals/padding-spec.ts | 32 +++- test/internals/text-spec.ts | 19 +- test/internals/title-spec.ts | 2 +- test/internals/tooltip-spec.ts | 2 +- test/shape/arc-needle-spec.ts | 9 +- 15 files changed, 162 insertions(+), 167 deletions(-) diff --git a/src/ChartInternal/Axis/Axis.ts b/src/ChartInternal/Axis/Axis.ts index db1d1128f..6f9f6508e 100644 --- a/src/ChartInternal/Axis/Axis.ts +++ b/src/ChartInternal/Axis/Axis.ts @@ -109,7 +109,7 @@ class Axis { if (v === "x") { res = clip.pathXAxis; - } else if (v === "y") { // && config.axis_y_inner) { + } else if (v === "y") { // || v === "y2") { res = clip.pathYAxis; } @@ -670,7 +670,7 @@ class Axis { !config.axis_x_tick_multiline && positiveRotation ) { - const widthWithoutCurrentPaddingLeft = state.current.width - $$.getCurrentPaddingLeft(); + const widthWithoutCurrentPaddingLeft = state.current.width - $$.getCurrentPaddingByDirection("left"); const maxOverflow = this.getXAxisTickMaxOverflow( xAxisTickRotate, widthWithoutCurrentPaddingLeft - defaultPadding ); diff --git a/src/ChartInternal/internals/clip.ts b/src/ChartInternal/internals/clip.ts index 12b2ebb06..3453b3852 100644 --- a/src/ChartInternal/internals/clip.ts +++ b/src/ChartInternal/internals/clip.ts @@ -61,24 +61,26 @@ export default { const h = (isRotated ? (margin.top + height) + 10 : margin.bottom) + 20; const x = isRotated ? -(1 + left) : -(left - 1); + const y = -15; // -Math.max(15, margin.top); const w = isRotated ? margin.left + 20 : width + 10 + left; node .attr("x", x) - .attr("y", -2) + .attr("y", y) .attr("width", w) .attr("height", h); }, /** * Set y Axis clipPath dimension - * @param {d3Selecton} node clipPath selection + * @param {d3Selection} node clipPath selection * @private */ setYAxisClipPath(node): void { const $$ = this; const {config, state: {margin, width, height}} = $$; const isRotated = config.axis_rotated; + const left = Math.max(30, margin.left) - (isRotated ? 20 : 0); const isInner = config.axis_y_inner; diff --git a/src/ChartInternal/internals/legend.ts b/src/ChartInternal/internals/legend.ts index c5fada148..508b9c3cf 100644 --- a/src/ChartInternal/internals/legend.ts +++ b/src/ChartInternal/internals/legend.ts @@ -159,11 +159,11 @@ export default { const insetLegendPosition = { top: isLegendTop ? - $$.getCurrentPaddingTop() + config.legend_inset_y + 5.5 : - current.height - height - $$.getCurrentPaddingBottom() - config.legend_inset_y, + $$.getCurrentPaddingByDirection("top") + config.legend_inset_y + 5.5 : + current.height - height - $$.getCurrentPaddingByDirection("bottom") - config.legend_inset_y, left: isLegendLeft ? - $$.getCurrentPaddingLeft() + config.legend_inset_x + 0.5 : - current.width - width - $$.getCurrentPaddingRight() - config.legend_inset_x + 0.5 + $$.getCurrentPaddingByDirection("left") + config.legend_inset_x + 0.5 : + current.width - width - $$.getCurrentPaddingByDirection("right") - config.legend_inset_x + 0.5 }; $$.state.margin3 = { diff --git a/src/ChartInternal/internals/size.axis.ts b/src/ChartInternal/internals/size.axis.ts index 28a39fb4f..a5a33b845 100644 --- a/src/ChartInternal/internals/size.axis.ts +++ b/src/ChartInternal/internals/size.axis.ts @@ -159,7 +159,7 @@ export default { const $$ = this; const {state: {axis, current}} = $$; const xAxisLength = current.width - - $$.getCurrentPaddingLeft(false) - $$.getCurrentPaddingRight(); + $$.getCurrentPaddingByDirection("left") - $$.getCurrentPaddingByDirection("right"); const tickCountWithPadding = axis.x.tickCount + axis.x.padding.left + axis.x.padding.right; diff --git a/src/ChartInternal/internals/size.ts b/src/ChartInternal/internals/size.ts index 55434e870..7c8c6c155 100644 --- a/src/ChartInternal/internals/size.ts +++ b/src/ChartInternal/internals/size.ts @@ -4,7 +4,7 @@ */ import {document} from "../../module/browser"; import {$AXIS, $SUBCHART} from "../../config/classes"; -import {isValue, ceil10, capitalize, isNumber, isEmpty} from "../../module/util"; +import {ceil10, capitalize, isNumber, isEmpty, isUndefined} from "../../module/util"; export default { /** @@ -33,110 +33,6 @@ export default { return h > 0 ? h : 320 / ($$.hasType("gauge") && !config.gauge_fullCircle ? 2 : 1); }, - getCurrentPaddingTop(): number { - const $$ = this; - const {config, state: {hasAxis}, $el} = $$; - const axesLen = hasAxis ? config.axis_y2_axes.length : 0; - - let padding = isValue(config.padding_top) ? - config.padding_top : 0; - - if ($el.title && $el.title.node()) { - padding += $$.getTitlePadding(); - } - - if (axesLen && config.axis_rotated) { - padding += $$.getHorizontalAxisHeight("y2") * axesLen; - } - - return padding; - }, - - getCurrentPaddingBottom(): number { - const $$ = this; - const {config, state: {hasAxis}} = $$; - const axisId = config.axis_rotated ? "y" : "x"; - const axesLen = hasAxis ? config[`axis_${axisId}_axes`].length : 0; - const padding = isValue(config.padding_bottom) ? - config.padding_bottom : 0; - - return padding + ( - axesLen ? $$.getHorizontalAxisHeight(axisId) * axesLen : 0 - ); - }, - - getCurrentPaddingLeft(withoutRecompute?: boolean): number { - const $$ = this; - const {config, state: {hasAxis}} = $$; - const isRotated = config.axis_rotated; - const isFitPadding = config.padding?.mode === "fit"; - const axisId = isRotated ? "x" : "y"; - const axesLen = hasAxis ? config[`axis_${axisId}_axes`].length : 0; - let axisWidth = hasAxis ? $$.getAxisWidthByAxisId(axisId, withoutRecompute) : 0; - - if (!isFitPadding) { - axisWidth = ceil10(axisWidth); - } - - let padding = config[`axis_${axisId}_inner`] || !config[`axis_${axisId}_show`] ? 0 : axisWidth; - - if (isValue(config.padding_left)) { - padding = config.padding_left + (isFitPadding && isRotated ? axisWidth : 0); - } else if (hasAxis && isRotated) { - padding = !config.axis_x_show ? - 1 : (isFitPadding ? axisWidth : Math.max(axisWidth, 40)); - } - - if (hasAxis && (isFitPadding || config[`axis_${axisId}_inner`]) && config[`axis_${axisId}_label`].text) { - padding += $$.axis.getAxisLabelPosition("y").isOuter ? 20 : 0; - } - - return padding + (axisWidth * axesLen); - }, - - getCurrentPaddingRight(withXAxisTickTextOverflow = false): number { - const $$ = this; - const {config, state: {hasAxis}} = $$; - const isRotated = config.axis_rotated; - const isFitPadding = config.padding?.mode === "fit"; - const defaultPadding = isFitPadding ? 2 : 10; - const legendWidthOnRight = $$.state.isLegendRight ? $$.getLegendWidth() + 20 : 0; - const axesLen = hasAxis ? config.axis_y2_axes.length : 0; - const axisLabelWidth = $$.axis?.getAxisLabelPosition("y2").isOuter ? 20 : 0; - const xAxisTickTextOverflow = withXAxisTickTextOverflow ? - $$.axis.getXAxisTickTextY2Overflow(defaultPadding) : 0; - let axisWidth = hasAxis && !config.axis_y2_inner ? $$.getAxisWidthByAxisId("y2") : 1; - - if (!isFitPadding) { - axisWidth = ceil10(axisWidth); - } - - let padding = isRotated ? 0 : Math.max(axisWidth + legendWidthOnRight, xAxisTickTextOverflow); - - if (isValue(config.padding_right)) { - // padding = config.padding_right + (hasAxis ? 1 : 0); // 1 is needed not to hide tick line - - padding = config.padding_right + - (isFitPadding && (isRotated || !config.axis_y2_show ? defaultPadding : padding)) + - (hasAxis && !isFitPadding ? 1 : 0); // 1 is needed not to hide tick line - } else if ($$.axis && isRotated) { - padding = defaultPadding + legendWidthOnRight; - } else if ($$.axis && (!config.axis_y2_show || config.axis_y2_inner)) { - padding = Math.max( - (isFitPadding && !config.axis_y2_show ? 2 : 1) + legendWidthOnRight + axisLabelWidth, - xAxisTickTextOverflow - ); - } - - if (hasAxis && !isRotated && isFitPadding && - config.axis_y2_show && !config.axis_y2_inner && config.axis_y2_label.text - ) { - padding += axisLabelWidth; - } - - return padding + (axisWidth * axesLen); - }, - /** * Get the parent rect element's size * @param {string} key property/attribute name @@ -198,7 +94,7 @@ export default { const chartRect = $el.chart.node().getBoundingClientRect(); const hasArc = $$.hasArcType(); const svgLeft = svgRect.right - chartRect.left - - (hasArc ? 0 : $$.getCurrentPaddingLeft(withoutRecompute)); + (hasArc ? 0 : $$.getCurrentPaddingByDirection("left", withoutRecompute)); return svgLeft > 0 ? svgLeft : 0; }, @@ -254,15 +150,85 @@ export default { } }, + /** + * Get padding by the direction. + * @param {string} type "top" | "bottom" | "left" | "right" + * @param {boolean} [withoutRecompute=false] If set true, do not recompute the padding value. + * @returns {number} padding value + * @private + */ + getCurrentPaddingByDirection(type: "top" | "bottom" | "left" | "right", withoutRecompute = false): number { + const $$ = this; + const {config, $el, state: {hasAxis}} = $$; + const isRotated = config.axis_rotated; + const isFitPadding = config.padding?.mode === "fit"; + const paddingOption = isNumber(config[`padding_${type}`]) ? config[`padding_${type}`] : undefined; + const axisId = hasAxis ? { + top: isRotated ? "y2" : null, + bottom: isRotated ? "y" : "x", + left: isRotated ? "x" : "y", + right: isRotated ? null : "y2" + }[type] : null; + + const isLeftRight = /^(left|right)$/.test(type); + const isAxisInner = axisId && config[`axis_${axisId}_inner`]; + const isAxisShow = axisId && config[`axis_${axisId}_show`]; + const axesLen = axisId ? config[`axis_${axisId}_axes`].length : 0; + + let axisSize = axisId ? ( + isLeftRight ? + $$.getAxisWidthByAxisId(axisId, withoutRecompute) : + $$.getHorizontalAxisHeight(axisId) + ) : 0; + const defaultPadding = 20; + let gap = 0; + + if (!isFitPadding && isLeftRight) { + axisSize = ceil10(axisSize); + } + + let padding = hasAxis && isLeftRight && ( + isAxisInner || (isUndefined(paddingOption) && !isAxisShow) + ) ? 0 : ( + isFitPadding ? (isAxisShow ? axisSize : 0) + (paddingOption ?? 0) : ( + isUndefined(paddingOption) ? axisSize : paddingOption + ) + ); + + if (isLeftRight && hasAxis) { + if (axisId && (isFitPadding || isAxisInner) && config[`axis_${axisId}_label`].text) { + padding += $$.axis.getAxisLabelPosition(axisId).isOuter ? defaultPadding : 0; + } + + if (type === "right") { + padding += isRotated ? ( + !isFitPadding && isUndefined(paddingOption) ? 10 : 2 + ) : !isAxisShow || isAxisInner ? (isFitPadding ? 2 : 1) : 0; + } else if (type === "left" && isRotated) { + padding = !config.axis_x_show ? + 1 : (isFitPadding ? axisSize : Math.max(axisSize, 40)); + } + } else { + if (type === "top") { + if ($el.title && $el.title.node()) { + padding += $$.getTitlePadding(); + } + + gap = isRotated && !isAxisInner ? axesLen : 0; + } else if (type === "bottom" && hasAxis && isRotated && !isAxisShow) { + padding += 1; + } + } + + return padding + (axisSize * axesLen) - gap; + }, + getCurrentPadding(): {top: number, bottom: number, left: number, right: number} { const $$ = this; + const [top, bottom, left, right] = ["top", "bottom", "left", "right"] + .map(v => $$.getCurrentPaddingByDirection(v)); - return { - top: $$.getCurrentPaddingTop(), - bottom: $$.getCurrentPaddingBottom(), - left: $$.getCurrentPaddingLeft(), - right: $$.getCurrentPaddingRight() - }; + return {top, bottom, left, right}; }, /** @@ -317,7 +283,11 @@ export default { $$.updateXAxisTickClip(); } - const legendHeightForBottom = state.isLegendRight || state.isLegendInset ? 0 : currLegend.height; + const legendSize = { + right: config.legend_show && state.isLegendRight ? $$.getLegendWidth() + 20 : 0, + bottom: !config.legend_show || state.isLegendRight || state.isLegendInset ? 0 : currLegend.height + }; + const xAxisHeight = isRotated || isNonAxis ? 0 : $$.getHorizontalAxisHeight("x"); const subchartXAxisHeight = config.subchart_axis_x_show && config.subchart_axis_x_tick_text_show ? @@ -333,14 +303,14 @@ export default { // for main state.margin = !isNonAxis && isRotated ? { - top: $$.getHorizontalAxisHeight("y2") + padding.top, - right: isNonAxis ? 0 : $$.getCurrentPaddingRight(true), - bottom: $$.getHorizontalAxisHeight("y") + legendHeightForBottom + padding.bottom, + top: padding.top, + right: isNonAxis ? 0 : padding.right + legendSize.right, + bottom: legendSize.bottom + padding.bottom, left: subchartHeight + (isNonAxis ? 0 : padding.left) } : { top: (isFitPadding ? 0 : 4) + padding.top, // for top tick text - right: isNonAxis ? 0 : $$.getCurrentPaddingRight(true), - bottom: gaugeHeight + xAxisHeight + subchartHeight + legendHeightForBottom + padding.bottom, + right: isNonAxis ? 0 : padding.right + legendSize.right, + bottom: gaugeHeight + subchartHeight + legendSize.bottom + padding.bottom, left: isNonAxis ? 0 : padding.left }; @@ -350,12 +320,12 @@ export default { state.margin2 = isRotated ? { top: state.margin.top, right: NaN, - bottom: 20 + legendHeightForBottom, + bottom: 20 + legendSize.bottom, left: $$.state.rotatedPadding.left } : { - top: state.current.height - subchartHeight - legendHeightForBottom, + top: state.current.height - subchartHeight - legendSize.bottom, right: NaN, - bottom: subchartXAxisHeight + legendHeightForBottom, + bottom: subchartXAxisHeight + legendSize.bottom, left: state.margin.left }; diff --git a/src/ChartInternal/internals/tooltip.ts b/src/ChartInternal/internals/tooltip.ts index 4d7c8dc16..95298c343 100644 --- a/src/ChartInternal/internals/tooltip.ts +++ b/src/ChartInternal/internals/tooltip.ts @@ -311,8 +311,8 @@ export default { const hasTreemap = state.hasTreemap; const isRotated = config.axis_rotated; const svgLeft = $$.getSvgLeft(true); - let chartRight = svgLeft + current.width - $$.getCurrentPaddingRight(); - const chartLeft = $$.getCurrentPaddingLeft(true); + let chartRight = svgLeft + current.width - $$.getCurrentPaddingByDirection("right"); + const chartLeft = $$.getCurrentPaddingByDirection("left", true); const size = 20; let {x, y} = currPos; diff --git a/src/ChartInternal/internals/transform.ts b/src/ChartInternal/internals/transform.ts index 12c188828..f1a39c1bb 100644 --- a/src/ChartInternal/internals/transform.ts +++ b/src/ChartInternal/internals/transform.ts @@ -37,7 +37,7 @@ export default { y = isRotated ? state.height + padding : 0; } else if (target === "y2") { x = isRotated ? 0 : state.width + padding; - y = isRotated && padding ? 1 - padding : 0; + y = isRotated ? 1 - padding : 0; } else if (target === "subX") { x = 0; y = isRotated ? 0 : state.height2; diff --git a/src/Plugin/stanford/index.ts b/src/Plugin/stanford/index.ts index f74222340..df78c95c0 100644 --- a/src/Plugin/stanford/index.ts +++ b/src/Plugin/stanford/index.ts @@ -121,13 +121,15 @@ export default class Stanford extends Plugin { $$.labelishData = d => d.values; $$.opacityForCircle = () => 1; - const getCurrentPaddingRight = $$.getCurrentPaddingRight.bind($$); + const getCurrentPadding = $$.getCurrentPadding.bind($$); - $$.getCurrentPaddingRight = () => ( - getCurrentPaddingRight() + ( - this.colorScale ? this.colorScale.getColorScalePadding() : 0 - ) - ); + $$.getCurrentPadding = () => { + const padding = getCurrentPadding(); + + padding.right += this.colorScale ? this.colorScale.getColorScalePadding() : 0; + + return padding; + }; } $init(): void { @@ -144,6 +146,8 @@ export default class Stanford extends Plugin { this.setStanfordTooltip(); this.colorScale.drawColorScale(); + $$.right += this.colorScale ? this.colorScale.getColorScalePadding() : 0; + this.$redraw(); } diff --git a/src/config/Options/common/main.ts b/src/config/Options/common/main.ts index 76be572ac..35fda721d 100644 --- a/src/config/Options/common/main.ts +++ b/src/config/Options/common/main.ts @@ -108,6 +108,7 @@ export default { /** * The padding of the chart element. + * - **NOTE:** for more information, see the "[`Understanding padding`](https://github.com/naver/billboard.js/wiki/Understanding-padding)"" wiki documentaion. * @name padding * @memberof Options * @type {object} diff --git a/test/internals/axis-spec.ts b/test/internals/axis-spec.ts index e7fb49fa8..37960f587 100644 --- a/test/internals/axis-spec.ts +++ b/test/internals/axis-spec.ts @@ -1829,7 +1829,7 @@ describe("AXIS", function() { }); it("should not have inner y axis", () => { - const paddingLeft = chart.internal.getCurrentPaddingLeft(); + const paddingLeft = chart.internal.getCurrentPaddingByDirection("left") const tickTexts = chart.$.main.selectAll(`.${$AXIS.axisY} g.tick text`); expect(paddingLeft).to.be.above(19); @@ -1844,7 +1844,7 @@ describe("AXIS", function() { }); it("should have inner y axis", () => { - const paddingLeft = chart.internal.getCurrentPaddingLeft(); + const paddingLeft = chart.internal.getCurrentPaddingByDirection("left"); const tickTexts = chart.$.main.selectAll(`.${$AXIS.axisY} g.tick text`); expect(paddingLeft).to.be.equal(0); @@ -1875,7 +1875,7 @@ describe("AXIS", function() { }); it("should not have inner y axis", () => { - const paddingRight = chart.internal.getCurrentPaddingRight(); + const paddingRight = chart.internal.getCurrentPaddingByDirection("right"); const tickTexts = chart.$.main.selectAll(`.${$AXIS.axisY2} g.tick text`); expect(paddingRight).to.be.above(19); @@ -1889,8 +1889,8 @@ describe("AXIS", function() { args.axis.y2.inner = true; }); - it("should have inner y axis", () => { - const paddingRight = chart.internal.getCurrentPaddingRight(); + it("should have inner y2 axis", () => { + const paddingRight = chart.internal.getCurrentPaddingByDirection("right"); const tickTexts = chart.$.main.selectAll(`.${$AXIS.axisY2} g.tick text`); expect(paddingRight).to.be.equal(1); diff --git a/test/internals/padding-spec.ts b/test/internals/padding-spec.ts index 4dbbe810f..c9bffec93 100644 --- a/test/internals/padding-spec.ts +++ b/test/internals/padding-spec.ts @@ -8,7 +8,7 @@ import sinon from "sinon"; import util from "../assets/util"; import {$AXIS} from "../../src/config/classes"; -describe("PADDING", function() { +describe("PADDING", () => { let chart; let args: any = { svg: { @@ -26,7 +26,7 @@ describe("PADDING", function() { const deepEqual = (val, print=false) => { const {margin} = chart.internal.state; - print && console.log(margin); + print && console.log(`val: ${JSON.stringify(val)}`, `margin: ${JSON.stringify(margin)}`); expect(margin).to.deep.equal(val); }; @@ -320,6 +320,18 @@ describe("PADDING", function() { it("when legend is hidden", () => { deepEqual({top: 4, right: 21, bottom: 30, left: 20}); }); + + it("set options: padding.bottom=0", () => { + args.padding = { + bottom: 0 + }; + }); + + it("bottom x axis won't be shown", () => { + deepEqual({top: 4, right: 21, bottom: 0, left: 20}); + + args.padding = {}; + }); }); //----- rotated axis @@ -440,7 +452,7 @@ describe("PADDING", function() { }); it("inner y2 axis with outer label text", () => { - deepEqual({top: 0, right: 21, bottom: 30, left: 20}); + deepEqual({top: 0, right: 22, bottom: 30, left: 20}); }); it("set options: axis.y.label = {}", () => { @@ -448,7 +460,7 @@ describe("PADDING", function() { }); it("inner y axis without outer label text", () => { - deepEqual({top: 0, right: 21, bottom: 30, left: 0}); + deepEqual({top: 0, right: 22, bottom: 30, left: 0}); }); it("set options: axis.y2.label = {}", () => { @@ -456,7 +468,7 @@ describe("PADDING", function() { }); it("inner y/y2 axes without outer label text", () => { - deepEqual({top: 0, right: 1, bottom: 30, left: 0}); + deepEqual({top: 0, right: 2, bottom: 30, left: 0}); }); it("set options: legend.show=false", () => { @@ -464,12 +476,12 @@ describe("PADDING", function() { }); it("inner y/y2 axes without outer label text and without legend", () => { - deepEqual({top: 0, right: 1, bottom: 20, left: 0}); + deepEqual({top: 0, right: 2, bottom: 20, left: 0}); }); it("set options: padding", () => { temp = chart.internal.state.margin; - + args.padding = { mode: "fit", top: 0, @@ -478,9 +490,11 @@ describe("PADDING", function() { right: 0 }; }); - + it("specifying padding should be relative.", () => { - expect(chart.internal.state.margin).to.deep.equal(temp); + const {state: {margin}} = chart.internal; + + expect(margin).to.deep.equal(temp); }); it("set options", () => { diff --git a/test/internals/text-spec.ts b/test/internals/text-spec.ts index 0ab515a7c..161ef2151 100644 --- a/test/internals/text-spec.ts +++ b/test/internals/text-spec.ts @@ -678,18 +678,19 @@ describe("TEXT", () => { args.axis = { rotated: true }; + args.data.labels = true; }); it("should have y domain with proper padding #1", () => { const domain = chart.internal.scale.y.domain(); expect(domain[0]).to.be.closeTo(0, 1); - expect(domain[1]).to.be.closeTo(231.5, 1); + expect(domain[1]).to.be.closeTo(228, 1); }); it("should locate labels above each data point", () => { - const expectedYs = [51, 145, 235, 327]; - const expectedXs = [488.5, 514, 488.5, 4]; + const expectedXs = [495.5, 520, 495, 4]; + const expectedYs = [55, 155, 256, 327]; chart.$.main.selectAll(`.${$TEXT.texts}-data1 text`) .each(checkXY(expectedXs, expectedYs, "", 4)); @@ -707,8 +708,8 @@ describe("TEXT", () => { }); it("should locate labels above each data point", () => { - const expectedYs = [9, 130, 249, 370]; - const expectedXs = [76, 526, 76, 4]; + const expectedXs = [72, 530, 72, 4]; + const expectedYs = [9, 140, 272, 370]; chart.$.main.selectAll(`.${$TEXT.texts}-data1 text`) .each(checkXY(expectedXs, expectedYs, "", 4)); @@ -791,8 +792,8 @@ describe("TEXT", () => { }); it("should locate labels above each data point", () => { - const expectedYs = [57, 162, 269, 375]; - const expectedXs = [80, 584, 80, 514]; + const expectedXs = [80, 584, 83, 514]; + const expectedYs = [57, 174, 287, 375]; chart.$.main.selectAll(`.${$TEXT.texts}-data1 text`) .each(checkXY(expectedXs, expectedYs, "", {x: 10, y: 5})); @@ -812,8 +813,8 @@ describe("TEXT", () => { }); it("should locate labels above each data point", () => { - const expectedYs = [9, 147, 286, 424]; - const expectedXs = [69, 527, 69, 527]; // 72.50132230092231 + const expectedXs = [72, 537, 72, 527]; // 72.50132230092231 + const expectedYs = [9, 157, 305, 434]; chart.$.main.selectAll(`.${$TEXT.texts}-data1 text`) .each(checkXY(expectedXs, expectedYs, "", {x: 4, y: 2})); diff --git a/test/internals/title-spec.ts b/test/internals/title-spec.ts index fcdd6e75a..90a9d00f0 100644 --- a/test/internals/title-spec.ts +++ b/test/internals/title-spec.ts @@ -92,7 +92,7 @@ describe("TITLE", () => { it("adds the correct amount of padding to fit the title", () => { const height = chart.$.svg.select(".bb-title").node().getBBox().height; - expect(chart.internal.getCurrentPaddingTop()).to.equal( + expect(chart.internal.getCurrentPaddingByDirection("top")).to.equal( args.title.padding.top + height + args.title.padding.bottom ); }); diff --git a/test/internals/tooltip-spec.ts b/test/internals/tooltip-spec.ts index 3adcd17fa..b22e8770c 100644 --- a/test/internals/tooltip-spec.ts +++ b/test/internals/tooltip-spec.ts @@ -727,7 +727,7 @@ describe("TOOLTIP", function() { before(() => { args = { "transition":{ - "duration":0 + "duration": 0 }, "axis":{ "x":{ diff --git a/test/shape/arc-needle-spec.ts b/test/shape/arc-needle-spec.ts index 2f928adaf..8a7e76ff6 100644 --- a/test/shape/arc-needle-spec.ts +++ b/test/shape/arc-needle-spec.ts @@ -43,8 +43,9 @@ describe("SHAPE ARC: NEEDLE option", () => { describe("donut", () => { it("basic", () => { const {$el: {arcs, needle}} = chart.internal; + const rx = /M-7\.5 0 A1 1 0 0 0 7\.5 0 L0 -210.\d+ A0 0 0 0 0 -0 -210\.\d+ L-7\.5 0 Z/; - expect(needle.attr("d")).to.be.equal("M-7.5 0 A1 1 0 0 0 7.5 0 L0 -210.85 A0 0 0 0 0 -0 -210.85 L-7.5 0 Z"); + expect(rx.test(needle.attr("d"))).to.be.true; expect(+arcs.select(`.${$ARC.chartArcsTitle}`).text()).to.be.equal(0); }); @@ -70,8 +71,9 @@ describe("SHAPE ARC: NEEDLE option", () => { it("check needle options", () => { const {$el: {arcs, needle}} = chart.internal; + const rx = /M-5 20 A0 0 0 0 0 5 20 L2\.5 -168\.\d+ A1 1 0 0 0 -2\.5 -168\.\d+ L-5 20 Z/; - expect(needle.attr("d")).to.be.equal("M-5 20 A0 0 0 0 0 5 20 L2.5 -168.67999999999998 A1 1 0 0 0 -2.5 -168.67999999999998 L-5 20 Z"); + expect(rx.test(needle.attr("d"))).to.be.true; expect(getDegree(needle.style("transform"))).to.equal(118.8); expect(needle.style("fill")).to.equal("red"); @@ -154,8 +156,9 @@ describe("SHAPE ARC: NEEDLE option", () => { it("check custom path", () => { const {$el: {needle}} = chart.internal; const path = needle.attr("d").replace(/[\n]/g, "").replace(/\s{2,}/g, " "); + const rx = /M 0 -168\.\d+ L -12 -148\.\d+ L -5 -148\.\d+ L -5 0 A 1 1 0 0 0 5 0 L 5 -148\.\d+ L 12 -148\.\d+ Z/; - expect(path).to.be.equal("M 0 -168.67999999999998 L -12 -148.67999999999998 L -5 -148.67999999999998 L -5 0 A 1 1 0 0 0 5 0 L 5 -148.67999999999998 L 12 -148.67999999999998 Z"); + expect(rx.test(path)).to.be.true; }); it("set options", () => {