fix(bar): fix bar width rendering for 'total' data key

When given data name key includes 'total', it wrongly refers internal bar width data key where ends not rendering correctly. To avoid, added '_$' as prefix for internal object key names. Fix #1818
naver · Dec 11, 2020 · eacaecb · eacaecb
1 parent 072d543
commit eacaecb
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 7 deletions.
diff --git a/src/ChartInternal/shape/bar.ts b/src/ChartInternal/shape/bar.ts
@@ -101,12 +101,12 @@ export default {
 		let result = getWidth();
 
 		if (!isGrouped && isObjectType(config.bar_width)) {
-			result = {width: result, total: []};
+			result = {_$width: result, _$total: []};
 
 			$$.filterTargetsToShow($$.data.targets).forEach(v => {
 				if (config.bar_width[v.id]) {
 					result[v.id] = getWidth(v.id);
-					result.total.push(result[v.id] || result.width);
+					result._$total.push(result[v.id] || result._$width);
 				}
 			});
 		}
@@ -201,7 +201,7 @@ export default {
 		return (d, i) => {
 			const y0 = yScale.call($$, d.id, isSub)($$.getShapeYMin(d.id));
 			const offset = barOffset(d, i) || y0; // offset is for stacked bar chart
-			const width = isNumber(barW) ? barW : barW[d.id] || barW.width;
+			const width = isNumber(barW) ? barW : barW[d.id] || barW._$width;
 			const posX = barX(d);
 			let posY = barY(d);
 

diff --git a/src/ChartInternal/shape/shape.ts b/src/ChartInternal/shape/shape.ts
@@ -159,7 +159,9 @@ export default {
 		const currScale = isSub ? scale.subX : (scale.zoom || scale.x);
 		const barPadding = config.bar_padding;
 		const sum = (p, c) => p + c;
-		const halfWidth = isObjectType(offset) && offset.total.length ? offset.total.reduce(sum) / 2 : 0;
+		const halfWidth = isObjectType(offset) && (
+			offset._$total.length ? offset._$total.reduce(sum) / 2 : 0
+		);
 
 		return d => {
 			const ind = $$.getIndices(indices, d.id);
@@ -171,11 +173,11 @@ export default {
 				const xPos = currScale(d.x);
 
 				if (halfWidth) {
-					x = xPos - (offset[d.id] || offset.width) +
-						offset.total.slice(0, index + 1).reduce(sum) -
+					x = xPos - (offset[d.id] || offset._$width) +
+						offset._$total.slice(0, index + 1).reduce(sum) -
 						halfWidth;
 				} else {
-					x = xPos - (isNumber(offset) ? offset : offset.width) * (targetsNum / 2 - index);
+					x = xPos - (isNumber(offset) ? offset : offset._$width) * (targetsNum / 2 - index);
 				}
 			}
 

diff --git a/test/shape/bar-spec.ts b/test/shape/bar-spec.ts
@@ -478,6 +478,29 @@ describe("SHAPE BAR", () => {
 				});
 			});
 		});
+
+		it("set options: data names with 'width' and 'total'", () => {
+			args = {
+				data: {
+					type: "bar",
+					columns: [
+					  ["width", 50],
+					  ["total", 100]
+					]
+				  },
+				  bar: {
+					width: {
+						max: 71
+					}
+				}
+			}
+		});
+
+		it("should render correctly for data key names for 'width' and 'total'", () => {
+			chart.$.bar.bars.each(function() {
+				expect(this.getBoundingClientRect().width).to.be.equal(args.bar.width.max);
+			})
+		});
 	});
 
 	describe("bar position", () => {