Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[#785] [3.0] Horizontal Bar Chart의 Tip 위치 버그 #804

Merged
merged 4 commits into from
Apr 28, 2021
Merged

[#785] [3.0] Horizontal Bar Chart의 Tip 위치 버그 #804

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5745489
[#785][3.0] Horizontal Chart MaxTip 버그 수정
jhee564 Mar 15, 2021
ad72aad
Merge branch '3.0' of https://github.com/ex-em/EVUI into 785_3.0_char…
jhee564 Apr 6, 2021
b44f68f
[#785][3.0] Horizontal Bar Chart의 Tip 위치 버그
jhee564 Apr 27, 2021
7640eb1
Merge branches '3.0' and '785_3.0_chart_horizontal_issue' of https://…
jhee564 Apr 27, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/components/chart/element/element.bar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@ class Bar {
this.size.cPad = cPad;
this.size.bPad = bPad;
this.size.w = w;
this.size.h = h;
this.size.ix = barSeriesX;
this.chartRect = chartRect;
this.labelOffset = labelOffset;
Expand Down Expand Up @@ -358,7 +359,7 @@ class Bar {
const minYPos = y - 10;
const centerX = x + (w / 2) <= minXPos ? minXPos : x + (w / 2);
const centerY = y + (h / 2) >= minYPos ? minYPos : y + (h / 2);
const centerYHorizontal = isHighlight ? centerY : y - (h / 2);
const centerYHorizontal = isHighlight ? y + (h / 2) : y - (h / 2);

switch (showValue.align) {
case 'start':
Expand Down
74 changes: 44 additions & 30 deletions src/components/chart/element/element.tip.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,6 @@ const modules = {

const { type, size } = series;
const { maxDomain, maxDomainIndex } = series.minMax;
const seriesMaxY = series.minMax.maxY;

if (maxDomain === null || maxDomainIndex < 0) {
return false;
Expand All @@ -100,7 +99,7 @@ const modules = {
}
}

let value = seriesMaxY;
let value = isHorizontal ? series.minMax.maxX : series.minMax.maxY;

if (tipType === 'sel') {
if (hitInfo && hitInfo.value !== null) {
Expand All @@ -125,7 +124,7 @@ const modules = {
if (isHorizontal) {
halfBarSize = Math.round(size.h / 2);
cp = ysp - (size.cat * ldata) - size.cPad;
dp = (cp - ((size.bar * size.ix) - (size.h + size.bPad))) + halfBarSize;
dp = (cp - ((size.bar * size.ix) - (size.h + size.bPad))) - halfBarSize;
} else {
halfBarSize = Math.round(size.w / 2);
cp = xsp + (size.cat * ldata) + size.cPad;
Expand Down Expand Up @@ -168,7 +167,7 @@ const modules = {
gp -= offset;
}

if (dp === null || dp < xsp) {
if (dp === null) {
return;
}

Expand Down Expand Up @@ -232,12 +231,14 @@ const modules = {
ctx.font = 'normal normal bold 14px Roboto';
const maxTipWidth = Math.round(Math.max(ctx.measureText(text).width + 12, 40));

if (dp + (maxTipWidth / 2) > xep - 10) {
maxTipType = 'right';
tdp -= (maxTipWidth / 2) - (arrowSize * 2);
} else if (dp - (maxTipWidth / 2) < xsp + 10) {
maxTipType = 'left';
tdp += (maxTipWidth / 2) - (arrowSize * 2);
if (!isHorizontal) {
if (dp + (maxTipWidth / 2) > xep - 10) {
maxTipType = 'right';
tdp -= (maxTipWidth / 2) - (arrowSize * 2);
} else if (dp - (maxTipWidth / 2) < xsp + 10) {
maxTipType = 'left';
tdp += (maxTipWidth / 2) - (arrowSize * 2);
}
}

ctx.restore();
Expand All @@ -248,8 +249,8 @@ const modules = {
type: maxTipType,
width: maxTipWidth,
height: maxTipHeight,
x: tdp,
y: gp,
x: isHorizontal ? gp + (maxTipWidth / 2) : tdp,
y: isHorizontal ? tdp + (maxTipHeight / 2) : gp,
opt,
arrowSize,
borderRadius,
Expand All @@ -260,10 +261,9 @@ const modules = {
if (opt.showTip && tipType === 'sel') {
this.showTip({
context: ctx,
x: dp,
y: gp,
x: isHorizontal ? gp : dp,
y: isHorizontal ? dp : gp,
opt,
arrowSize,
isSamePos,
});
}
Expand All @@ -276,6 +276,7 @@ const modules = {
* @returns {undefined}
*/
showTextTip(param) {
const isHorizontal = !!this.options.horizontal;
const { type, width, height, x, y, arrowSize, borderRadius, text, opt } = param;
const ctx = param.context;

Expand All @@ -293,24 +294,31 @@ const modules = {
ctx.beginPath();
ctx.moveTo(sx + borderRadius, sy);
ctx.quadraticCurveTo(sx, sy, sx, sy + borderRadius);

if (isHorizontal) {
ctx.lineTo(sx, sy + borderRadius + (arrowSize / 2));
ctx.lineTo(sx - arrowSize, ey - (height / 2));
ctx.lineTo(sx, ey - borderRadius - (arrowSize / 2));
}

ctx.lineTo(sx, ey - borderRadius);
ctx.quadraticCurveTo(sx, ey, sx + borderRadius, ey);

if (type === 'left') {
ctx.lineTo(sx + borderRadius + arrowSize, ey + arrowSize);
ctx.lineTo(sx + borderRadius + (arrowSize * 2), ey);
ctx.lineTo(ex - borderRadius, ey);
} else if (type === 'right') {
ctx.lineTo(ex - (arrowSize * 2) - borderRadius, ey);
ctx.lineTo(ex - arrowSize - borderRadius, ey + arrowSize);
ctx.lineTo(ex - borderRadius, ey);
} else {
ctx.lineTo(x - arrowSize, ey);
ctx.lineTo(x, ey + arrowSize);
ctx.lineTo(x + arrowSize, ey);
ctx.lineTo(ex - borderRadius, ey);
if (!isHorizontal) {
if (type === 'left') {
ctx.lineTo(sx + borderRadius + arrowSize, ey + arrowSize);
ctx.lineTo(sx + borderRadius + (arrowSize * 2), ey);
} else if (type === 'right') {
ctx.lineTo(ex - (arrowSize * 2) - borderRadius, ey);
ctx.lineTo(ex - arrowSize - borderRadius, ey + arrowSize);
} else {
ctx.lineTo(x - arrowSize, ey);
ctx.lineTo(x, ey + arrowSize);
ctx.lineTo(x + arrowSize, ey);
}
}

ctx.lineTo(ex - borderRadius, ey);
ctx.quadraticCurveTo(ex, ey, ex, ey - borderRadius);
ctx.lineTo(ex, sy + borderRadius);
ctx.quadraticCurveTo(ex, sy, ex - borderRadius, sy);
Expand All @@ -334,6 +342,7 @@ const modules = {
* @returns {undefined}
*/
showTip(param) {
const isHorizontal = !!this.options.horizontal;
const { x, y, opt, isSamePos } = param;
const ctx = param.context;
const offset = isSamePos ? 24 : 0;
Expand All @@ -343,8 +352,13 @@ const modules = {
ctx.fillStyle = opt.tipBackground;
ctx.beginPath();
ctx.moveTo(x, cy);
ctx.lineTo(x + 6, cy - 6);
ctx.lineTo(x - 6, cy - 6);
if (isHorizontal) {
ctx.lineTo(x + 6, cy - 6);
ctx.lineTo(x + 6, cy + 6);
} else {
ctx.lineTo(x + 6, cy - 6);
ctx.lineTo(x - 6, cy - 6);
}
ctx.lineTo(x, cy);
ctx.closePath();
ctx.fill();
Expand Down
8 changes: 4 additions & 4 deletions src/components/chart/model/model.store.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,7 @@ const modules = {

if (sIdx > 0) {
bdata = isHorizontal ? bdata.x : bdata.y;
gdata = bdata + (odata.value || odata);
gdata = bdata + (odata.value ?? odata);
} else {
bdata = 0;
gdata = odata;
Expand Down Expand Up @@ -248,9 +248,9 @@ const modules = {
*/
addData(gdata, ldata, odata = null, bdata = null) {
let data;
const gdataValue = gdata?.value || gdata;
const odataValue = odata?.value || odata;
const dataColor = gdata?.color || odata?.color;
const gdataValue = gdata?.value ?? gdata;
const odataValue = odata?.value ?? odata;
const dataColor = gdata?.color ?? odata?.color;

if (this.options.horizontal) {
data = { x: gdataValue, y: ldata, o: odataValue, b: bdata };
Expand Down