From 6b451d82c3a43ba766f715b846d953221c941973 Mon Sep 17 00:00:00 2001 From: Mun Seong Woo Date: Thu, 27 Oct 2022 12:12:20 +0900 Subject: [PATCH 1/3] =?UTF-8?q?[#1304]=20Chart=20>=20Brush=20=EA=B0=90?= =?UTF-8?q?=EB=8F=84=20=EC=B5=9C=EC=A0=81=ED=99=94=20#####################?= =?UTF-8?q?####################=20=20-=20=EB=B8=8C=EB=9F=AC=EC=8B=9C=20?= =?UTF-8?q?=EA=B0=90=EB=8F=84=20=EC=B5=9C=EC=A0=81=ED=99=94=20=20=20=20-?= =?UTF-8?q?=20=EB=A7=88=EC=9A=B0=EC=8A=A4=20=EC=9D=B4=EB=8F=99=EB=90=98?= =?UTF-8?q?=EB=8A=94=20=EC=86=8D=EB=8F=84(=EA=B0=90=EB=8F=84)=EC=97=90=20?= =?UTF-8?q?=EB=94=B0=EB=9D=BC=20=EB=B8=8C=EB=9F=AC=EC=89=AC=EC=9D=98=20?= =?UTF-8?q?=EC=98=81=EC=97=AD=EB=8F=84=20=EA=B0=99=EC=9D=B4=20=EC=9D=B4?= =?UTF-8?q?=EB=8F=99=EB=90=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/chartBrush/chartBrush.core.js | 435 ++++++++++++++----- 1 file changed, 329 insertions(+), 106 deletions(-) diff --git a/src/components/chartBrush/chartBrush.core.js b/src/components/chartBrush/chartBrush.core.js index 620127784..e5f780829 100644 --- a/src/components/chartBrush/chartBrush.core.js +++ b/src/components/chartBrush/chartBrush.core.js @@ -1,12 +1,33 @@ import { throttle, debounce } from 'lodash-es'; +const BRUSH_UPDATE_MODE = { + WHEEL: { + UP: 'MOVEUP_WHEEL', + DOWN: 'MOVEDOWN_WHEEL', + }, + GRAB: { + UP: 'MOVEUP_GRAB', + DOWN: 'MOVEDOWN_GRAB', + }, + BUTTON: { + INCREASE: 'INCREASE', + DECREASE: 'DECREASE', + }, +}; + +const BUTTON_TYPE = { + LEFT: 'leftX', + RIGHT: 'rightX', +}; + export default class EvChartBrush { constructor(evChart, evChartData, evChartBrushOptions, brushIdx, evChartBrushRef) { this.evChart = evChart; - this.evChartData = evChartData; this.evChartBrushOptions = evChartBrushOptions; this.evChartBrushRef = evChartBrushRef; + this.labelEndIdx = evChartData.value.labels.length - 1; + this.brushIdx = brushIdx; if (evChartBrushOptions.value.useDebounce) { this.debounceBrushIdx = { start: brushIdx.start, end: brushIdx.end }; @@ -15,7 +36,6 @@ export default class EvChartBrush { init(isResize) { if (this.brushIdx.start > this.brushIdx.end) { - this.initEventState(); this.removeBrushCanvas(); return; } @@ -43,7 +63,7 @@ export default class EvChartBrush { } } - drawBrushRect({ brushCanvas, isResize, isDebounce }) { + drawBrushRect({ brushCanvas, isResize, isDebounce, mode, offsetX }) { const { chartRect, labelOffset } = this.evChart; if (!chartRect && !labelOffset) { return; @@ -56,16 +76,48 @@ export default class EvChartBrush { y2: chartRect.y2 - labelOffset.bottom, }; - const pixelRatio = window.devicePixelRatio || 1; + const canvasPosInfo = this.setCanvasWidthHeight(evChartRange, brushCanvas); + + if (isResize && this.isEqualWidth) { + return; + } + + if (this.labelEndIdx >= 0) { + const brushPosInfo = this.setBrushXAndWidth(canvasPosInfo, offsetX, isDebounce, mode); + + if (canvasPosInfo && brushPosInfo) { + this.drawBrush(canvasPosInfo, brushPosInfo, evChartRange, brushCanvas); + } + } + } + + setCanvasWidthHeight(evChartRange, brushCanvas) { const brushButtonWidth = 6; const brushCanvasWidth = evChartRange.x2 - evChartRange.x1 + brushButtonWidth; const brushCanvasHeight = evChartRange.y2 - evChartRange.y1; - const isEqualWidth = brushCanvas.width === Math.floor(brushCanvasWidth * pixelRatio); + const axesXInterval = (evChartRange.x2 - evChartRange.x1) / this.labelEndIdx; - if (isResize && isEqualWidth) { - return; - } + const pixelRatio = window.devicePixelRatio || 1; + + this.isEqualWidth = brushCanvas.width === Math.floor(brushCanvasWidth * pixelRatio); + + return { + brushButtonWidth, + brushCanvasHeight, + brushCanvasWidth, + axesXInterval, + pixelRatio, + }; + } + + setBrushXAndWidth(canvasPosInfo, offsetX = 0, isDebounce, mode) { + const { + brushButtonWidth, + brushCanvasWidth, + axesXInterval, + pixelRatio, + } = canvasPosInfo; if (!isDebounce && this.debounceBrushIdx) { this.debounceBrushIdx.start = this.brushIdx.start; @@ -73,56 +125,134 @@ export default class EvChartBrush { } const brushIdx = this.debounceBrushIdx ?? this.brushIdx; - const labelEndIdx = this.evChartData.value.labels.length - 1; - - if (labelEndIdx >= 0) { - this.labelEndIdx = labelEndIdx; - const axesXInterval = (evChartRange.x2 - evChartRange.x1) / labelEndIdx; - const brushRectX = brushIdx.start * axesXInterval * pixelRatio; - const brushRectWidth = ( - brushCanvasWidth - ( - labelEndIdx - (brushIdx.end - brushIdx.start) - ) * axesXInterval - ) * pixelRatio; - const brushRectHeight = this.evChartBrushOptions.value.height - evChartRange.y1; - const brushButtonLeftXPos = brushRectX; - const brushButtonRightXPos = brushRectX + brushRectWidth; - - if (!brushCanvas.style.position) { - brushCanvas.style.position = 'absolute'; - brushCanvas.style.top = `${evChartRange.y1}px`; - brushCanvas.style.left = `${evChartRange.x1 - (brushButtonWidth / 2)}px`; - } + switch (mode) { + case BRUSH_UPDATE_MODE.BUTTON.INCREASE: + case BRUSH_UPDATE_MODE.BUTTON.DECREASE: + this.brushRectWidth = brushCanvasWidth * pixelRatio; + + if (this.curBrushButtonType === BUTTON_TYPE.LEFT) { + this.brushRectWidth = this.beforeBrushRectWidth + ? this.beforeBrushRectWidth - offsetX : this.brushRectWidth - offsetX; + + if (this.brushRectWidth <= brushButtonWidth) { + this.brushRectWidth = brushButtonWidth; + } else { + this.brushRectX = offsetX * pixelRatio; + this.beforeBrushRectX = this.brushRectX; + } + } else if (this.curBrushButtonType === BUTTON_TYPE.RIGHT) { + this.brushRectWidth = offsetX - this.beforeBrushRectX; + + if (this.brushRectWidth <= brushButtonWidth) { + this.brushRectWidth = brushButtonWidth; + } else { + this.brushRectX = this.beforeBrushRectX; + this.beforeBrushRectWidth = this.brushRectWidth + this.brushRectX; + } + } + break; + case BRUSH_UPDATE_MODE.GRAB.UP: + case BRUSH_UPDATE_MODE.GRAB.DOWN: + if ( + (this.brushRectX <= 0 && mode === BRUSH_UPDATE_MODE.GRAB.DOWN) + || ( + this.brushRectX + this.brushRectWidth >= brushCanvasWidth + && mode === BRUSH_UPDATE_MODE.GRAB.UP + ) + ) { + this.offsetXAndRectXInterval = null; + } else { + if (!this.offsetXAndRectXInterval) { + this.offsetXAndRectXInterval = offsetX - this.brushRectX; + } - if (!isEqualWidth) { - brushCanvas.width = (brushCanvasWidth * pixelRatio); - brushCanvas.style.width = `${brushCanvasWidth}px`; - brushCanvas.height = brushCanvasHeight * pixelRatio; - brushCanvas.style.height = `${brushCanvasHeight}px`; - } + this.brushRectX = offsetX - this.offsetXAndRectXInterval; + } - const ctx = brushCanvas.getContext('2d'); - - ctx.clearRect( - 0, - 0, - brushCanvasWidth * pixelRatio, - brushCanvasHeight * pixelRatio, - ); - - ctx.fillStyle = this.evChartBrushOptions.value.selection.fillColor; - ctx.globalAlpha = this.evChartBrushOptions.value.selection.opacity; - ctx.fillRect(brushRectX, 0, brushRectWidth, brushRectHeight); - ctx.fillRect(brushButtonLeftXPos, 0, brushButtonWidth, brushRectHeight); - ctx.fillRect(brushButtonRightXPos - brushButtonWidth, 0, brushButtonWidth, brushRectHeight); - - this.evChartBrushPos = { - leftX: brushButtonLeftXPos / pixelRatio, - rightX: brushButtonRightXPos / pixelRatio, - buttonWidth: brushButtonWidth, - axesXInterval, - }; + break; + default: + if (!offsetX) { + this.brushRectX = brushIdx.start * axesXInterval * pixelRatio; + this.brushRectWidth = ( + brushCanvasWidth - ( + this.labelEndIdx - (brushIdx.end - brushIdx.start) + ) * axesXInterval + ) * pixelRatio; + + this.beforeBrushRectX = this.brushRectX; + this.beforeBrushRectWidth = this.brushRectWidth + this.brushRectX; + } + break; + } + + return { + brushRectX: this.brushRectX, + brushRectWidth: this.brushRectWidth, + }; + } + + drawBrush(canvasPosInfo, brushPosInfo, evChartRange, brushCanvas) { + const { + brushButtonWidth, + brushCanvasHeight, + brushCanvasWidth, + axesXInterval, + pixelRatio, + } = canvasPosInfo; + + const { + brushRectX, + brushRectWidth, + } = brushPosInfo; + + const { + height, + selection: { + fillColor, + opacity, + }, + } = this.evChartBrushOptions.value; + + const brushRectHeight = height - evChartRange.y1; + const brushButtonLeftXPos = brushRectX; + const brushButtonRightXPos = brushRectX + brushRectWidth; + + if (!brushCanvas.style.position) { + brushCanvas.style.position = 'absolute'; + brushCanvas.style.top = `${evChartRange.y1}px`; + brushCanvas.style.left = `${evChartRange.x1 - (brushButtonWidth / 2)}px`; } + + if (!this.isEqualWidth) { + brushCanvas.width = (brushCanvasWidth * pixelRatio); + brushCanvas.style.width = `${brushCanvasWidth}px`; + brushCanvas.height = brushCanvasHeight * pixelRatio; + brushCanvas.style.height = `${brushCanvasHeight}px`; + } + + const ctx = brushCanvas.getContext('2d'); + + ctx.clearRect( + 0, + 0, + brushCanvasWidth * pixelRatio, + brushCanvasHeight * pixelRatio, + ); + + ctx.fillStyle = fillColor; + ctx.globalAlpha = opacity; + ctx.fillRect(brushRectX, 0, brushRectWidth, brushRectHeight); + ctx.fillRect(brushButtonLeftXPos, 0, brushButtonWidth, brushRectHeight); + ctx.fillRect(brushButtonRightXPos - brushButtonWidth, 0, brushButtonWidth, brushRectHeight); + + this.brushPosInfo = { + leftX: brushButtonLeftXPos / pixelRatio, + rightX: brushButtonRightXPos / pixelRatio, + buttonWidth: brushButtonWidth, + axesXInterval, + ...canvasPosInfo, + ...brushPosInfo, + }; } addEvent() { @@ -154,7 +284,19 @@ export default class EvChartBrush { this.onWheel = (e) => { e.preventDefault(); - this.updateBrushIdx(e.deltaY > 0 ? 'movedown' : 'moveup'); + const mode = e.deltaY > 0 ? BRUSH_UPDATE_MODE.WHEEL.DOWN : BRUSH_UPDATE_MODE.WHEEL.UP; + + this.updateBrushIdx(mode); + + if (this.debounceBrushIdx) { + this.drawBrushRect({ + brushCanvas: this.brushCanvas, + isDebounce: true, + mode, + }); + } + + this.brushIdx.isUseScroll = true; }; this.onMouseUp = () => { @@ -176,21 +318,22 @@ export default class EvChartBrush { } getMousePosition(e) { - const calDisToCurMouseX = xPos => Math.abs(this.evChartBrushPos[xPos] - e.offsetX); - const buttonType = calDisToCurMouseX('rightX') > calDisToCurMouseX('leftX') ? 'leftX' : 'rightX'; + const calDisToCurMouseX = xPos => Math.abs(this.brushPosInfo[xPos] - e.offsetX); + const buttonType = calDisToCurMouseX(BUTTON_TYPE.RIGHT) > calDisToCurMouseX(BUTTON_TYPE.LEFT) + ? BUTTON_TYPE.LEFT : BUTTON_TYPE.RIGHT; - this.curBrushButtonType = buttonType; + const isMoveRight = xPos => e.offsetX > this.brushPosInfo[xPos]; + const isMoveLeft = xPos => e.offsetX < this.brushPosInfo[xPos]; - const isMoveRight = xPos => e.offsetX > this.evChartBrushPos[xPos]; - const isMoveLeft = xPos => e.offsetX < this.evChartBrushPos[xPos]; + const isOutsideBrush = isMoveLeft(BUTTON_TYPE.LEFT) || isMoveRight(BUTTON_TYPE.RIGHT); + const isInsideBrush = isMoveRight(BUTTON_TYPE.LEFT) && isMoveLeft(BUTTON_TYPE.RIGHT); - const isOutsideBrush = isMoveLeft('leftX') || isMoveRight('rightX'); - const isInsideBrush = isMoveRight('leftX') && isMoveLeft('rightX'); + const isInsideButton = e.offsetX + this.brushPosInfo.buttonWidth + >= this.brushPosInfo[buttonType] + && e.offsetX - this.brushPosInfo.buttonWidth + <= this.brushPosInfo[buttonType]; - const isInsideButton = e.offsetX + this.evChartBrushPos.buttonWidth - >= this.evChartBrushPos[buttonType] - && e.offsetX - this.evChartBrushPos.buttonWidth - <= this.evChartBrushPos[buttonType]; + this.curBrushButtonType = isInsideButton && buttonType; return { isInsideButton, @@ -256,22 +399,22 @@ export default class EvChartBrush { if (middle > 0.5) { if ((brushIdx.end - brushIdx.start) % 2 === 0) { - clickIdx = Math.round(e.offsetX / this.evChartBrushPos.axesXInterval); + clickIdx = Math.round(e.offsetX / this.brushPosInfo.axesXInterval); left = Math.ceil(middle); right = Math.floor(middle); } else { - clickIdx = Math.ceil(e.offsetX / this.evChartBrushPos.axesXInterval); + clickIdx = Math.ceil(e.offsetX / this.brushPosInfo.axesXInterval); left = Math.ceil(middle); right = Math.floor(middle); } } else { - clickIdx = Math.floor(e.offsetX / this.evChartBrushPos.axesXInterval); + clickIdx = Math.floor(e.offsetX / this.brushPosInfo.axesXInterval); if ( - e.offsetX - (clickIdx * this.evChartBrushPos.axesXInterval) - > (this.evChartBrushPos.axesXInterval / 2) + e.offsetX - (clickIdx * this.brushPosInfo.axesXInterval) + > (this.brushPosInfo.axesXInterval / 2) ) { left = Math.floor(middle); right = Math.ceil(middle); @@ -312,42 +455,61 @@ export default class EvChartBrush { } mouseDownAndMove(e) { - const moveSensitive = this.evChartBrushPos.axesXInterval / 3; + const moveSensitive = this.debounceBrushIdx ? 0 : (this.brushPosInfo.axesXInterval / 3); let mode; if (e.offsetX > this.beforeMouseXPos) { // 오른쪽 이동 if (this.clickBrushInsideX > 0) { if (this.clickBrushInsideX < e.offsetX - moveSensitive) { - mode = 'moveup'; + mode = BRUSH_UPDATE_MODE.GRAB.UP; + + this.isUseBrushGrab = true; + this.brushIdx.isUseScroll = true; this.clickBrushInsideX = e.offsetX + moveSensitive; } } else { - const isMoveRight = e.offsetX - this.evChartBrushPos[this.curBrushButtonType] + const isMoveRight = e.offsetX - this.brushPosInfo[this.curBrushButtonType] > moveSensitive; if (isMoveRight) { - mode = this.curBrushButtonType === 'leftX' ? 'decrease' : 'increase'; + mode = this.curBrushButtonType === BUTTON_TYPE.LEFT + ? BRUSH_UPDATE_MODE.BUTTON.DECREASE : BRUSH_UPDATE_MODE.BUTTON.INCREASE; + + this.brushIdx.isUseButton = true; } } } else if (e.offsetX < this.beforeMouseXPos) { // 왼쪽 이동 if (this.clickBrushInsideX > 0) { if (this.clickBrushInsideX > e.offsetX + moveSensitive) { - mode = 'movedown'; + mode = BRUSH_UPDATE_MODE.GRAB.DOWN; + + this.isUseBrushGrab = true; + this.brushIdx.isUseScroll = true; this.clickBrushInsideX = e.offsetX - moveSensitive; } } else { - const isMoveLeft = this.evChartBrushPos[this.curBrushButtonType] - e.offsetX + const isMoveLeft = this.brushPosInfo[this.curBrushButtonType] - e.offsetX > moveSensitive; if (isMoveLeft) { - mode = this.curBrushButtonType === 'leftX' ? 'increase' : 'decrease'; + mode = this.curBrushButtonType === BUTTON_TYPE.LEFT + ? BRUSH_UPDATE_MODE.BUTTON.INCREASE : BRUSH_UPDATE_MODE.BUTTON.DECREASE; + + this.brushIdx.isUseButton = true; } } } - if (mode) { + if (this.debounceBrushIdx) { + this.drawBrushRect({ + brushCanvas: this.brushCanvas, + isDebounce: true, + mode, + offsetX: e.offsetX, + }); + } else { this.updateBrushIdx(mode); } @@ -363,28 +525,28 @@ export default class EvChartBrush { const brushIdx = this.debounceBrushIdx ?? this.brushIdx; switch (mode) { - case 'moveup': - if (brushIdx.end === this.labelEndIdx) { + case BRUSH_UPDATE_MODE.WHEEL.UP: + case BRUSH_UPDATE_MODE.GRAB.UP: + if (brushIdx.end >= this.labelEndIdx) { return; } brushIdx.start += 1; brushIdx.end += 1; - this.brushIdx.isUseScroll = true; break; - case 'movedown': - if (!brushIdx.start) { + case BRUSH_UPDATE_MODE.WHEEL.DOWN: + case BRUSH_UPDATE_MODE.GRAB.DOWN: + if (brushIdx.start <= 0) { return; } brushIdx.start -= 1; brushIdx.end -= 1; - this.brushIdx.isUseScroll = true; break; - case 'increase': - if (this.curBrushButtonType === 'leftX') { + case BRUSH_UPDATE_MODE.BUTTON.INCREASE: + if (this.curBrushButtonType === BUTTON_TYPE.LEFT) { if (!brushIdx.start) { return; } @@ -398,48 +560,107 @@ export default class EvChartBrush { brushIdx.end += 1; } - this.brushIdx.isUseButton = true; break; - case 'decrease': + case BRUSH_UPDATE_MODE.BUTTON.DECREASE: if (brushIdx.start === brushIdx.end - 1) { return; } - if (this.curBrushButtonType === 'leftX') { + if (this.curBrushButtonType === BUTTON_TYPE.LEFT) { brushIdx.start += 1; } else { brushIdx.end -= 1; } - this.brushIdx.isUseButton = true; break; default: break; } + } - if (mode && this.debounceBrushIdx) { - this.drawBrushRect({ - brushCanvas: this.brushCanvas, - isResize: false, - isDebounce: true, - }); + updateBrushIdxUseXPos() { + if (!this.debounceBrushIdx) { + return; } + + const calculateBrushIdxByPos = () => { + let brushStartIdx; + let brushEndIdx; + if (this.brushPosInfo) { + const { + brushRectX, + brushRectWidth, + brushCanvasWidth, + axesXInterval, + } = this.brushPosInfo; + + if ((this.brushIdx.isUseButton || this.isUseBrushGrab)) { + brushStartIdx = brushRectX / axesXInterval; + brushEndIdx = this.labelEndIdx - ( + (brushCanvasWidth - (brushRectX + brushRectWidth)) / axesXInterval + ); + + if (this.curBrushButtonType === BUTTON_TYPE.LEFT) { + brushStartIdx = Math.round(brushStartIdx); + brushEndIdx = this.brushIdx.end; + + if (brushStartIdx === brushEndIdx) { + brushStartIdx -= 1; + } + } else if (this.curBrushButtonType === BUTTON_TYPE.RIGHT) { + brushStartIdx = this.brushIdx.start; + brushEndIdx = Math.round(brushEndIdx); + + if (brushStartIdx === brushEndIdx) { + brushEndIdx += 1; + } + } else { + brushStartIdx = Math.round(brushStartIdx); + brushEndIdx = Math.round(brushEndIdx); + } + + if (brushEndIdx > this.labelEndIdx) { + const excessIdx = brushEndIdx - this.labelEndIdx; + + brushStartIdx -= excessIdx; + brushEndIdx -= excessIdx; + } + + if (brushStartIdx < 0) { + const excessIdx = Math.abs(brushStartIdx); + + brushStartIdx = 0; + brushEndIdx += excessIdx; + } + } + } + return { + brushStartIdx, + brushEndIdx, + }; + }; + + const { + brushStartIdx, + brushEndIdx, + } = calculateBrushIdxByPos(); + + if (this.brushIdx.start === brushStartIdx && this.brushIdx.end === brushEndIdx) { + this.drawBrushRect({ brushCanvas: this.brushCanvas }); + } + + this.brushIdx.start = brushStartIdx ?? this.debounceBrushIdx.start; + this.brushIdx.end = brushEndIdx ?? this.debounceBrushIdx.end; } /** - * @param {boolean} isUpdateBrushIdx to initialize state after update brush index value + * @param {boolean} updateBrushIdxUseXPos to initialize state after update brush index value * * @returns {undefined} */ initEventState() { const promise = new Promise((resolve) => { - if ( - this.debounceBrushIdx - && (this.brushIdx.isUseButton || this.brushIdx.isUseScroll) - ) { - this.brushIdx.start = this.debounceBrushIdx.start; - this.brushIdx.end = this.debounceBrushIdx.end; - } + this.updateBrushIdxUseXPos(); resolve(true); }); @@ -450,6 +671,8 @@ export default class EvChartBrush { this.beforeMouseXPos = null; this.curBrushButtonType = null; + this.isUseBrushGrab = false; + this.offsetXAndRectXInterval = null; this.brushIdx.isUseButton = false; this.brushIdx.isUseScroll = false; } From 9cd438a62136dcd3dac4963c06590f5452aff6e1 Mon Sep 17 00:00:00 2001 From: Mun Seong Woo Date: Thu, 27 Oct 2022 12:28:33 +0900 Subject: [PATCH 2/3] =?UTF-8?q?[#1304]=20Chart=20>=20Brush=20=EA=B0=90?= =?UTF-8?q?=EB=8F=84=20=EC=B5=9C=EC=A0=81=ED=99=94=20#####################?= =?UTF-8?q?####################=20=20-=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20?= =?UTF-8?q?=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8=20=EC=8B=9C=20labelEndIdx?= =?UTF-8?q?=EB=8F=84=20=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8=20=EB=90=98?= =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/chartBrush/chartBrush.core.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/chartBrush/chartBrush.core.js b/src/components/chartBrush/chartBrush.core.js index e5f780829..289df9d73 100644 --- a/src/components/chartBrush/chartBrush.core.js +++ b/src/components/chartBrush/chartBrush.core.js @@ -25,8 +25,7 @@ export default class EvChartBrush { this.evChart = evChart; this.evChartBrushOptions = evChartBrushOptions; this.evChartBrushRef = evChartBrushRef; - - this.labelEndIdx = evChartData.value.labels.length - 1; + this.evChartData = evChartData; this.brushIdx = brushIdx; if (evChartBrushOptions.value.useDebounce) { @@ -69,6 +68,9 @@ export default class EvChartBrush { return; } + const labelEndIdx = this.evChartData.value.labels.length - 1; + this.labelEndIdx = labelEndIdx; + const evChartRange = { x1: chartRect.x1 + labelOffset.left, x2: chartRect.x2 - labelOffset.right, @@ -82,7 +84,7 @@ export default class EvChartBrush { return; } - if (this.labelEndIdx >= 0) { + if (labelEndIdx >= 0) { const brushPosInfo = this.setBrushXAndWidth(canvasPosInfo, offsetX, isDebounce, mode); if (canvasPosInfo && brushPosInfo) { From ceca7cda7a344b1f2c89d1c8a1cc6fb8b4558b5f Mon Sep 17 00:00:00 2001 From: Mun Seong Woo Date: Thu, 27 Oct 2022 14:34:20 +0900 Subject: [PATCH 3/3] update version --- package.json | 2 +- src/components/chartBrush/chartBrush.core.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index c879dc097..31a9474af 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "evui", - "version": "3.3.42", + "version": "3.3.43", "description": "A EXEM Library project", "author": "exem ", "license": "MIT", diff --git a/src/components/chartBrush/chartBrush.core.js b/src/components/chartBrush/chartBrush.core.js index 289df9d73..5c7024fa8 100644 --- a/src/components/chartBrush/chartBrush.core.js +++ b/src/components/chartBrush/chartBrush.core.js @@ -596,7 +596,7 @@ export default class EvChartBrush { axesXInterval, } = this.brushPosInfo; - if ((this.brushIdx.isUseButton || this.isUseBrushGrab)) { + if (this.brushIdx.isUseButton || this.isUseBrushGrab) { brushStartIdx = brushRectX / axesXInterval; brushEndIdx = this.labelEndIdx - ( (brushCanvasWidth - (brushRectX + brushRectWidth)) / axesXInterval