From 1d0d93819392279f4c5f52934e13fdc96285c70c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BE=9D=E7=91=AA=E8=B2=93?= Date: Fri, 6 Mar 2026 09:38:40 +0800 Subject: [PATCH] Replace let with const where variable is never reassigned in Vue files Co-Authored-By: Claude Opus 4.6 --- .../Conformance/ConformanceResults.vue | 30 +++---- .../ConformanceSidebar/ActSeqDrag.vue | 2 +- .../ConformanceSelectResult.vue | 14 ++-- .../Discover/Conformance/MoreModal.vue | 6 +- .../Discover/Map/Filter/Attributes.vue | 42 +++++----- src/components/Discover/Map/Filter/Funnel.vue | 2 +- .../Discover/Map/Filter/Timeframes.vue | 58 ++++++------- src/components/Discover/Map/Filter/Trace.vue | 8 +- src/components/Discover/Map/SidebarFilter.vue | 6 +- src/components/Discover/Map/SidebarTraces.vue | 8 +- src/components/Discover/StatusBar.vue | 6 +- src/components/Navbar.vue | 2 +- src/components/durationjs.vue | 10 +-- src/views/Compare/Dashboard/Compare.vue | 83 +++++++++---------- src/views/Compare/MapCompare.vue | 10 +-- src/views/Discover/Map/Map.vue | 10 +-- src/views/Discover/Performance/FreqChart.vue | 4 +- src/views/Discover/Performance/index.vue | 41 ++++----- src/views/Files/Files.vue | 8 +- src/views/Login/Login.vue | 2 +- src/views/Upload/index.vue | 15 ++-- 21 files changed, 176 insertions(+), 191 deletions(-) diff --git a/src/components/Discover/Conformance/ConformanceResults.vue b/src/components/Discover/Conformance/ConformanceResults.vue index a9294f4..469df1d 100644 --- a/src/components/Discover/Conformance/ConformanceResults.vue +++ b/src/components/Discover/Conformance/ConformanceResults.vue @@ -349,12 +349,12 @@ export default { * @param {object} data new watch's value 監聽到後端傳來的報告 data */ setConformanceTempReportData(data){ - let total = getNumberLabel(Object.values(data.counts).reduce((acc, val) => acc + val, 0)); - let sum = data.counts.conforming + data.counts.not_conforming; - let rate = ((data.counts.conforming / sum) * 100).toFixed(1); - let isNullTime = value => value === null ? null : getNumberLabel((value / 86400).toFixed(1)); - let isNullCase = value => value === null ? null : getNumberLabel(value.toFixed(1)); - let setLoopData = value => value.map(item => { + const total = getNumberLabel(Object.values(data.counts).reduce((acc, val) => acc + val, 0)); + const sum = data.counts.conforming + data.counts.not_conforming; + const rate = ((data.counts.conforming / sum) * 100).toFixed(1); + const isNullTime = value => value === null ? null : getNumberLabel((value / 86400).toFixed(1)); + const isNullCase = value => value === null ? null : getNumberLabel(value.toFixed(1)); + const setLoopData = value => value.map(item => { return { no: item.no, label: item.description, @@ -363,7 +363,7 @@ export default { ratio: this.getPercentLabel(item.count / data.counts.conforming), } }); - let setIssueData = value => value.map(item => { + const setIssueData = value => value.map(item => { return { no: item.no, label: item.description, @@ -372,10 +372,10 @@ export default { ratio: this.getPercentLabel(item.count / data.counts.not_conforming), } }); - let isNullLoops = value => value === null ? null : setLoopData(value); - let isNullIsssue = value => value === null ? null : setIssueData(value); + const isNullLoops = value => value === null ? null : setLoopData(value); + const isNullIsssue = value => value === null ? null : setIssueData(value); - let result = { + const result = { total: `Total ${total}`, counts: { conforming: getNumberLabel(data.counts.conforming), @@ -627,14 +627,14 @@ export default { * @param {number} yMin Time Trend yMin */ setTimeChartData(data, xMax, xMin, yMax, yMin) { - let max = yMax * 1.1; - let xVal = timeRange(xMin, xMax, 100); - let yVal = yTimeRange(data, 100, yMin, yMax); + const max = yMax * 1.1; + const xVal = timeRange(xMin, xMax, 100); + const yVal = yTimeRange(data, 100, yMin, yMax); xVal.map((x, index) => ({ x, y: yVal[index] })); let formattedXVal = xVal.map(value => formatTime(value)); formattedXVal = formatMaxTwo(formattedXVal); - let selectTimeMinIndex = getXIndex(xVal, this.selectDurationTime.min); - let selectTimeMaxIndex = getXIndex(xVal, this.selectDurationTime.max); + const selectTimeMinIndex = getXIndex(xVal, this.selectDurationTime.min); + const selectTimeMaxIndex = getXIndex(xVal, this.selectDurationTime.max); const start = selectTimeMinIndex; const end = selectTimeMaxIndex; const inside = (ctx, value) => ctx.p0DataIndex >= start && ctx.p1DataIndex <= end ? value : undefined; diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue b/src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue index 08dec0c..8596ffb 100644 --- a/src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue +++ b/src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue @@ -121,7 +121,7 @@ export default { }, }, created() { - let newlist = JSON.parse(JSON.stringify(this.listSeq)); + const newlist = JSON.parse(JSON.stringify(this.listSeq)); this.listSequence = this.isSubmit ? newlist : []; this.$emitter.on('reset', (data) => { this.listSequence = []; diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult.vue b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult.vue index 9717d06..adcf55d 100644 --- a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult.vue +++ b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult.vue @@ -82,7 +82,7 @@ export default { }, computed: { selectCfmSeqSE: function() { - let data = []; + const data = []; if(this.selectCfmSeqStart) data.push(this.selectCfmSeqStart); if(this.selectCfmSeqEnd) data.push(this.selectCfmSeqEnd); data.sort((a, b) => { @@ -92,7 +92,7 @@ export default { return data; }, selectCfmPtEteSE: function() { - let data = []; + const data = []; if(this.selectCfmPtEteSEStart) data.push(this.selectCfmPtEteSEStart); if(this.selectCfmPtEteSEEnd) data.push(this.selectCfmPtEteSEEnd); data.sort((a, b) => { @@ -102,7 +102,7 @@ export default { return data; }, selectCfmPtPSE: function() { - let data = []; + const data = []; if(this.selectCfmPtPSEStart) data.push(this.selectCfmPtPSEStart); if(this.selectCfmPtPSEEnd) data.push(this.selectCfmPtPSEEnd); data.sort((a, b) => { @@ -112,7 +112,7 @@ export default { return data; }, selectCfmWtEteSE: function() { - let data = []; + const data = []; if(this.selectCfmWtEteSEStart) data.push(this.selectCfmWtEteSEStart); if(this.selectCfmWtEteSEEnd) data.push(this.selectCfmWtEteSEEnd); data.sort((a, b) => { @@ -122,7 +122,7 @@ export default { return data; }, selectCfmWtPSE: function() { - let data = []; + const data = []; if(this.selectCfmWtPSEStart) data.push(this.selectCfmWtPSEStart); if(this.selectCfmWtPSEEnd) data.push(this.selectCfmWtPSEEnd); data.sort((a, b) => { @@ -132,7 +132,7 @@ export default { return data; }, selectCfmCtEteSE: function() { - let data = []; + const data = []; if(this.selectCfmCtEteSEStart) data.push(this.selectCfmCtEteSEStart); if(this.selectCfmCtEteSEEnd) data.push(this.selectCfmCtEteSEEnd); data.sort((a, b) => { @@ -182,7 +182,7 @@ export default { this.containstTasksData = data; }); this.$emitter.on('actRadioData', (newData) => { - let data = JSON.parse(JSON.stringify(newData)); // 深拷貝原始 cases 的內容 + const data = JSON.parse(JSON.stringify(newData)); // 深拷貝原始 cases 的內容 const categoryMapping = { 'cfmSeqStart': ['Start', 'selectCfmSeqStart', 'selectCfmSeqEnd'], diff --git a/src/components/Discover/Conformance/MoreModal.vue b/src/components/Discover/Conformance/MoreModal.vue index b12204c..5f3959d 100644 --- a/src/components/Discover/Conformance/MoreModal.vue +++ b/src/components/Discover/Conformance/MoreModal.vue @@ -93,7 +93,7 @@ export default { return this.traceList.length; }, traceList: function() { - let sum = this.listTraces.map(trace => trace.count).reduce((acc, cur) => acc + cur, 0); + const sum = this.listTraces.map(trace => trace.count).reduce((acc, cur) => acc + cur, 0); return this.listTraces.map(trace => { return { @@ -148,7 +148,7 @@ export default { this.showTraceId = newValue; }, showTraceId: function(newValue, oldValue) { - let isScrollTop = document.querySelector('.infiniteTable'); + const isScrollTop = document.querySelector('.infiniteTable'); if(isScrollTop && typeof isScrollTop.scrollTop !== 'undefined') if(newValue !== oldValue) isScrollTop.scrollTop = 0; }, firstCases: function(newValue, oldValue){ @@ -240,7 +240,7 @@ export default { */ createCy(){ this.$nextTick(() => { - let graphId = this.$refs.cfmTrace; + const graphId = this.$refs.cfmTrace; this.setNodesData(); this.setEdgesData(); diff --git a/src/components/Discover/Map/Filter/Attributes.vue b/src/components/Discover/Map/Filter/Attributes.vue index df92c4e..ab906fd 100644 --- a/src/components/Discover/Map/Filter/Attributes.vue +++ b/src/components/Discover/Map/Filter/Attributes.vue @@ -195,11 +195,10 @@ export default { attRangeData: function() { let data = []; const type = this.selectedAttName.type; - let sum = this.selectedAttName.options.map(item => item.freq).reduce((acc, cur) => acc + cur, 0); + const sum = this.selectedAttName.options.map(item => item.freq).reduce((acc, cur) => acc + cur, 0); data = this.selectedAttName.options.map((item, index) => { - let result; - let ratio = item.freq / sum; - result = { + const ratio = item.freq / sum; + const result = { id: index + 1, key: this.selectedAttName.key, type: type, @@ -231,8 +230,8 @@ export default { sliderData: function() { let xAxisMin; let xAxisMax; - let min = this.valueData.min; - let max = this.valueData.max; + const min = this.valueData.min; + const max = this.valueData.max; const type = this.valueData.type; switch (type) { case 'dummy': @@ -245,8 +244,8 @@ export default { xAxisMax = max; break; } - let range = xAxisMax - xAxisMin; - let step = range / this.selectRange; + const range = xAxisMax - xAxisMin; + const step = range / this.selectRange; let sliderData = [] for (let i = 0; i <= this.selectRange; i++) { @@ -276,7 +275,6 @@ export default { attValueTypeStartEnd: function() { let start; let end; - let data; const type = this.selectedAttName.type; switch (type) { @@ -290,7 +288,7 @@ export default { end = this.valueEnd; break; } - data = { // 傳給後端的資料 + const data = { // 傳給後端的資料 type: type, data: { key: this.selectedAttName.key, @@ -303,11 +301,11 @@ export default { return [start, end]; }, labelsData: function() { - let min = new Date(this.valueData.min).getTime(); - let max = new Date(this.valueData.max).getTime(); - let numPoints = 11; - let step = (max - min) / (numPoints - 1); - let data = []; + const min = new Date(this.valueData.min).getTime(); + const max = new Date(this.valueData.max).getTime(); + const numPoints = 11; + const step = (max - min) / (numPoints - 1); + const data = []; for(let i = 0; i< numPoints; i++) { const x = min + i * step; data.push(x); @@ -435,8 +433,8 @@ export default { * @param {object} chart 取得 chart.js 資料 */ resizeMask(chart) { - let from = (this.selectArea[0] * 0.01) / (this.selectRange * 0.01); - let to = (this.selectArea[1] * 0.01) / (this.selectRange * 0.01); + const from = (this.selectArea[0] * 0.01) / (this.selectRange * 0.01); + const to = (this.selectArea[1] * 0.01) / (this.selectRange * 0.01); this.resizeLeftMask(chart, from); this.resizeRightMask(chart, to); }, @@ -630,9 +628,9 @@ export default { */ changeSelectArea(e) { // 日曆改變時，滑塊跟著改變 - let sliderData = this.sliderData; - let start = sliderData[e[0].toFixed()]; - let end = sliderData[e[1].toFixed()]; // 取得 index，須為整數。 + const sliderData = this.sliderData; + const start = sliderData[e[0].toFixed()]; + const end = sliderData[e[1].toFixed()]; // 取得 index，須為整數。 switch (this.selectedAttName.type) { case 'dummy': @@ -663,8 +661,8 @@ export default { */ sliderValueRange(e, direction) { // 找到最鄰近的 index，時間格式: 毫秒時間戳 - let sliderData = this.sliderData; - let isDateType = this.selectedAttName.type === 'date'; + const sliderData = this.sliderData; + const isDateType = this.selectedAttName.type === 'date'; let targetTime = []; let inputValue; diff --git a/src/components/Discover/Map/Filter/Funnel.vue b/src/components/Discover/Map/Filter/Funnel.vue index b86ca7f..71ceba8 100644 --- a/src/components/Discover/Map/Filter/Funnel.vue +++ b/src/components/Discover/Map/Filter/Funnel.vue @@ -59,7 +59,7 @@ export default { * @param {numble} index rule's index */ isRule(e, index){ - let rule = this.isRuleData[index]; + const rule = this.isRuleData[index]; // 先取得 rule object // 為了讓 data 順序不亂掉，將值指向 0，submitAll 時再刪掉 if(!e) this.temporaryData[index] = 0; diff --git a/src/components/Discover/Map/Filter/Timeframes.vue b/src/components/Discover/Map/Filter/Timeframes.vue index d06599a..f8448e9 100644 --- a/src/components/Discover/Map/Filter/Timeframes.vue +++ b/src/components/Discover/Map/Filter/Timeframes.vue @@ -67,19 +67,19 @@ export default{ computed: { // user select time start and end timeFrameStartEnd: function() { - let start = getMoment(this.startTime).format('YYYY-MM-DDTHH:mm:00'); - let end = getMoment(this.endTime).format('YYYY-MM-DDTHH:mm:00'); + const start = getMoment(this.startTime).format('YYYY-MM-DDTHH:mm:00'); + const end = getMoment(this.endTime).format('YYYY-MM-DDTHH:mm:00'); this.selectTimeFrame = [start, end]; // 傳給後端的資料 return [start, end]; }, // 找出 slidrData，時間格式:毫秒時間戳 sliderData: function() { - let xAxisMin = new Date(this.filterTimeframe.x_axis.min).getTime(); - let xAxisMax = new Date(this.filterTimeframe.x_axis.max).getTime(); - let range = xAxisMax - xAxisMin; - let step = range / this.selectRange; - let sliderData = [] + const xAxisMin = new Date(this.filterTimeframe.x_axis.min).getTime(); + const xAxisMax = new Date(this.filterTimeframe.x_axis.max).getTime(); + const range = xAxisMax - xAxisMin; + const step = range / this.selectRange; + const sliderData = [] for (let i = 0; i <= this.selectRange; i++) { sliderData.push(xAxisMin + (step * i)); @@ -89,7 +89,7 @@ export default{ }, // 加入最大、最小值 timeFrameData: function(){ - let data = this.filterTimeframe.data.map(i=>({x:i.x,y:i.y})) + const data = this.filterTimeframe.data.map(i=>({x:i.x,y:i.y})) // y 軸斜率計算請參考 ./public/timeFrameSlope 的圖 // x 值為 0 ~ 11, // 將三的座標(ax, ay), (bx, by), (cx, cy)命名為 (a, b), (c, d), (e, f) @@ -97,22 +97,22 @@ export default{ // 最大值: (f - b)(e - c) = (f - d)(e - a)，求 f = (be - bc -de + da) / (a - c) // y 軸最小值 - let a = 0; + const a = 0; let b; - let c = 1; - let d = this.filterTimeframe.data[0].y; - let e = 2; - let f = this.filterTimeframe.data[1].y; + const c = 1; + const d = this.filterTimeframe.data[0].y; + const e = 2; + const f = this.filterTimeframe.data[1].y; b = (e*d - a*d - f*a - f*c) / (e - c - a); if(b < 0) { b = 0; } // y 軸最大值 - let ma = 9; - let mb = this.filterTimeframe.data[8].y; - let mc = 10; - let md = this.filterTimeframe.data[9].y; - let me = 11; + const ma = 9; + const mb = this.filterTimeframe.data[8].y; + const mc = 10; + const md = this.filterTimeframe.data[9].y; + const me = 11; let mf = (mb*me - mb*mc -md*me + md*ma) / (ma - mc); if(mf < 0) { mf = 0; @@ -132,11 +132,11 @@ export default{ return data; }, labelsData: function() { - let min = new Date(this.filterTimeframe.x_axis.min_base).getTime(); - let max = new Date(this.filterTimeframe.x_axis.max_base).getTime(); - let numPoints = 11; - let step = (max - min) / (numPoints - 1); - let data = []; + const min = new Date(this.filterTimeframe.x_axis.min_base).getTime(); + const max = new Date(this.filterTimeframe.x_axis.max_base).getTime(); + const numPoints = 11; + const step = (max - min) / (numPoints - 1); + const data = []; for(let i = 0; i< numPoints; i++) { const x = min + i * step; data.push(x); @@ -160,8 +160,8 @@ export default{ * @param {object} chart 取得 chart.js 資料 */ resizeMask(chart) { - let from = (this.selectArea[0] * 0.01) / (this.selectRange * 0.01); - let to = (this.selectArea[1] * 0.01) / (this.selectRange * 0.01); + const from = (this.selectArea[0] * 0.01) / (this.selectRange * 0.01); + const to = (this.selectArea[1] * 0.01) / (this.selectRange * 0.01); if(this.selectValue[0] === 'Timeframes') { this.resizeLeftMask(chart, from); this.resizeRightMask(chart, to); @@ -295,9 +295,9 @@ export default{ */ changeSelectArea(e) { // 日曆改變時，滑塊跟著改變 - let sliderData = this.sliderData; - let start = sliderData[e[0].toFixed()]; - let end = sliderData[e[1].toFixed()]; // 取得 index，須為整數。 + const sliderData = this.sliderData; + const start = sliderData[e[0].toFixed()]; + const end = sliderData[e[1].toFixed()]; // 取得 index，須為整數。 this.startTime = new Date(start); this.endTime = new Date(end); @@ -316,7 +316,7 @@ export default{ */ sliderTimeRange(e, direction) { // 找到最鄰近的 index，時間格式: 毫秒時間戳 - let sliderData = this.sliderData; + const sliderData = this.sliderData; const targetTime = [new Date(this.timeFrameStartEnd[0]).getTime(), new Date(this.timeFrameStartEnd[1]).getTime()]; const closestIndexes = targetTime.map(target => { let closestIndex = 0; diff --git a/src/components/Discover/Map/Filter/Trace.vue b/src/components/Discover/Map/Filter/Trace.vue index 9d2c97c..fd99b54 100644 --- a/src/components/Discover/Map/Filter/Trace.vue +++ b/src/components/Discover/Map/Filter/Trace.vue @@ -117,7 +117,7 @@ export default { }).slice(this.selectArea[0], this.selectArea[1]); }, caseTotalPercent: function() { - let ratioSum = this.traceList.map(trace => trace.base_count).reduce((acc, cur) => acc + cur, 0) / this.traceCountTotal; + const ratioSum = this.traceList.map(trace => trace.base_count).reduce((acc, cur) => acc + cur, 0) / this.traceCountTotal; return this.getPercentLabel(ratioSum) }, chartData: function() { @@ -170,7 +170,7 @@ export default { }, watch: { selectArea: function(newValue, oldValue) { - let roundValue = Math.round(newValue[1].toFixed()); + const roundValue = Math.round(newValue[1].toFixed()); if(newValue[1] !== roundValue) this.selectArea[1] = roundValue; if(newValue != oldValue) this.$emit('filter-trace-selectArea', newValue); // 判斷 Apply 是否 disable }, @@ -178,7 +178,7 @@ export default { if(newValue === 404) this.infinitMaxItems = true; }, showTraceId: function(newValue, oldValue) { - let isScrollTop = document.querySelector('.infiniteTable'); + const isScrollTop = document.querySelector('.infiniteTable'); if(isScrollTop && typeof isScrollTop.scrollTop !== 'undefined') if(newValue !== oldValue) isScrollTop.scrollTop = 0; }, }, @@ -310,7 +310,7 @@ export default { * create trace cytoscape's map */ createCy(){ - let graphId = this.$refs.cyTrace; + const graphId = this.$refs.cyTrace; this.setNodesData(); this.setEdgesData(); diff --git a/src/components/Discover/Map/SidebarFilter.vue b/src/components/Discover/Map/SidebarFilter.vue index 2eb6e08..8fab9e0 100644 --- a/src/components/Discover/Map/SidebarFilter.vue +++ b/src/components/Discover/Map/SidebarFilter.vue @@ -293,9 +293,9 @@ export default { * @param {array} array filterStartToEnd / filterEndToStart，可傳入以上任一。 */ setActData(array) { - let list = []; + const list = []; array.forEach((task, index) => { - let data = { + const data = { label: task.label, occ_value: Number(task.occurrence_ratio * 100), occurrences: task.occurrences.toLocaleString('en-US'), @@ -389,7 +389,7 @@ export default { setRule(e) { let label, type; const includeStr = e.is_exclude? "exclude" : "include"; - let containmentMap = { + const containmentMap = { 'occurred-in' : 'contained in', 'started-in' : 'started in', 'completed-in' : 'ended in', diff --git a/src/components/Discover/Map/SidebarTraces.vue b/src/components/Discover/Map/SidebarTraces.vue index a29c363..daff2c4 100644 --- a/src/components/Discover/Map/SidebarTraces.vue +++ b/src/components/Discover/Map/SidebarTraces.vue @@ -92,8 +92,8 @@ export default { return this.traces.length; }, traceList: function() { - let sum = this.traces.map(trace => trace.count).reduce((acc, cur) => acc + cur, 0); - let result = this.traces.map(trace => { + const sum = this.traces.map(trace => trace.count).reduce((acc, cur) => acc + cur, 0); + const result = this.traces.map(trace => { return { id: trace.id, value: this.progressWidth(Number(((trace.count / sum) * 100).toFixed(1))), @@ -143,7 +143,7 @@ export default { immediate: true }, showTraceId: function(newValue, oldValue) { - let isScrollTop = document.querySelector('.infiniteTable'); + const isScrollTop = document.querySelector('.infiniteTable'); if(isScrollTop && typeof isScrollTop.scrollTop !== 'undefined') if(newValue !== oldValue) isScrollTop.scrollTop = 0; }, infiniteFirstCases: function(newValue){ @@ -226,7 +226,7 @@ export default { * create trace cytoscape's map */ createCy(){ - let graphId = this.$refs.cyTrace; + const graphId = this.$refs.cyTrace; this.setNodesData(); this.setEdgesData(); diff --git a/src/components/Discover/StatusBar.vue b/src/components/Discover/StatusBar.vue index 8e4b06d..fed94dd 100644 --- a/src/components/Discover/StatusBar.vue +++ b/src/components/Discover/StatusBar.vue @@ -144,9 +144,9 @@ export default { } }, async mounted() { - let params = this.$route.params; - let file = this.$route.meta.file; - let isCheckPage = this.$route.name.includes('Check'); + const params = this.$route.params; + const file = this.$route.meta.file; + const isCheckPage = this.$route.name.includes('Check'); switch (params.type) { case 'log': diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue index 9e4587b..c559a51 100644 --- a/src/components/Navbar.vue +++ b/src/components/Navbar.vue @@ -214,7 +214,7 @@ export default { */ getNavViewName() { - let name = this.$route.name; + const name = this.$route.name; let valueToSet; if(this.$route.name === 'NotFound404') { diff --git a/src/components/durationjs.vue b/src/components/durationjs.vue index 75ace14..daebc54 100644 --- a/src/components/durationjs.vue +++ b/src/components/durationjs.vue @@ -131,7 +131,7 @@ export default { }, inputTimeFields: { get() { - let paddedTimeFields = []; + const paddedTimeFields = []; this.inputTypes.forEach(inputTypeUnit => { // Pad the dd/hh/mm/ss field string to 2 digits and add it to the list paddedTimeFields.push(this.tUnits[inputTypeUnit].val.toString().padStart(2, '0')); @@ -193,7 +193,7 @@ export default { * @param {event} event input 傳入的事件 */ onChange(event) { - let baseInputValue = event.target.value; + const baseInputValue = event.target.value; let decoratedInputValue; // 讓前綴數字自動補 0 if(isNaN(event.target.value)){ @@ -276,7 +276,7 @@ export default { * @returns {number} 新的數值 */ getNewValue(input) { - let newVal = parseInt(input.value, 10); + const newVal = parseInt(input.value, 10); return isNaN(newVal) ? 0 : newVal; }, @@ -398,7 +398,7 @@ export default { * 初始化 */ async createData() { - let size = this.size; + const size = this.size; if (this.maxTotal !== await null && this.minTotal !== await null) { switch (size) { @@ -438,7 +438,7 @@ export default { directives: { 'closable': { mounted(el, {value}) { - let handleOutsideClick = function(e) { + const handleOutsideClick = function(e) { let target = e.target; while (target && target.id !== value.id) { target = target.parentElement; diff --git a/src/views/Compare/Dashboard/Compare.vue b/src/views/Compare/Dashboard/Compare.vue index cd8184e..0e4fddf 100644 --- a/src/views/Compare/Dashboard/Compare.vue +++ b/src/views/Compare/Dashboard/Compare.vue @@ -284,11 +284,11 @@ export default { * @param { object } valueData {min: '2022-02-20T19:54:12', max: '2023-11-27T07:21:53'} */ setXLabelsData(valueData) { - let min = new Date(valueData.min).getTime(); - let max = new Date(valueData.max).getTime(); - let numPoints = 12; - let step = (max - min) / (numPoints - 1); - let data = []; + const min = new Date(valueData.min).getTime(); + const max = new Date(valueData.max).getTime(); + const numPoints = 12; + const step = (max - min) / (numPoints - 1); + const data = []; for(let i = 0; i< numPoints; i++) { const x = min + i * step; data.push(x); @@ -319,11 +319,11 @@ export default { getLineChart(chartData, content, yUnit) { let datasetsPrimary; let datasetsSecondary; - let minX = chartData.x_axis.min; - let maxX = chartData.x_axis.max; + const minX = chartData.x_axis.min; + const maxX = chartData.x_axis.max; let xLabelData; - let labelPrimary = chartData.data[0].label; - let labelSecondary = chartData.data[1].label; + const labelPrimary = chartData.data[0].label; + const labelSecondary = chartData.data[1].label; let primeVueSetData = {}; let primeVueSetOption = {}; const getMoment = (time)=> { @@ -409,7 +409,7 @@ export default { switch (yUnit) { case 'date': primeVueSetOption.plugins.tooltip.callbacks.label = function(context) { - let value = getSimpleTimeLabel(context.parsed.y, 2); + const value = getSimpleTimeLabel(context.parsed.y, 2); switch (context.datasetIndex) { case 0: // Primary @@ -428,7 +428,7 @@ export default { case 'count': primeVueSetOption.scales.y.ticks.precision = 0; // y 軸顯示小數點後 0 位 primeVueSetOption.plugins.tooltip.callbacks.label = function(context) { - let value = context.parsed.y; + const value = context.parsed.y; switch (context.datasetIndex) { case 0: // Primary @@ -450,32 +450,27 @@ export default { */ getBarChart(chartData, content, caller) { const getMoment = (time)=> this.$moment(time).format('YYYY/MM/DD'); - let datasetsPrimary = chartData.data[0].data; - let xDataPrimary; - let yDataPrimary; - let labelPrimary = chartData.data[0].label; - let datasetsSecondary = chartData.data[1].data; - let yDataSecondary; - let labelSecondary = chartData.data[1].label; + const labelPrimary = chartData.data[0].label; + const labelSecondary = chartData.data[1].label; let primeVueSetData = {}; let primeVueSetOption = {}; // 轉為百分比 - datasetsPrimary = datasetsPrimary.map(value => { + const datasetsPrimary = chartData.data[0].data.map(value => { return { x: getMoment(value.x), y: value.y === null ? null : value.y * 100 } }); - xDataPrimary = datasetsPrimary.map(i => i.x); - yDataPrimary = datasetsPrimary.map(i => i.y); - datasetsSecondary = datasetsSecondary.map(value => { + const xDataPrimary = datasetsPrimary.map(i => i.x); + const yDataPrimary = datasetsPrimary.map(i => i.y); + const datasetsSecondary = chartData.data[1].data.map(value => { return { x: getMoment(value.x), y: value.y === null ? null : value.y * 100 } }); - yDataSecondary = datasetsSecondary.map(i => i.y); + const yDataSecondary = datasetsSecondary.map(i => i.y); primeVueSetData = { labels: xDataPrimary, @@ -510,7 +505,7 @@ export default { return `${content.x}: ${context[0].label}`; }, label: function(context) { - let value = `${(context.parsed.y * 10).toFixed(2)}%`; + const value = `${(context.parsed.y * 10).toFixed(2)}%`; switch (context.datasetIndex) { case 0: // Primary return `${labelPrimary}: ${value}`; @@ -575,9 +570,9 @@ export default { datasetsPrimary.sort((a, b) => b.y - a.y); datasetsSecondary.sort((a, b) => { // Find the index of a.x in data1 - let indexA = datasetsPrimary.findIndex(item => item.x === a.x); + const indexA = datasetsPrimary.findIndex(item => item.x === a.x); // Find the index of b.x in data1 - let indexB = datasetsPrimary.findIndex(item => item.x === b.x); + const indexB = datasetsPrimary.findIndex(item => item.x === b.x); // Compare the indexes return indexA - indexB; @@ -631,7 +626,7 @@ export default { switch (xUnit) { case 'date': primeVueSetOption.plugins.tooltip.callbacks.label = function(context) { - let value = context.parsed.x === null ? "n/a" : getSimpleTimeLabel(context.parsed.x, 2); + const value = context.parsed.x === null ? "n/a" : getSimpleTimeLabel(context.parsed.x, 2); switch (context.datasetIndex) { case 0: // Primary return `${labelPrimary}: ${value}`; @@ -647,7 +642,7 @@ export default { default: primeVueSetOption.scales.x.ticks.precision = 0; // x 軸顯示小數點後 0 位 primeVueSetOption.plugins.tooltip.callbacks.label = function(context) { - let value = context.parsed.x === null ? "n/a" : context.parsed.x; + const value = context.parsed.x === null ? "n/a" : context.parsed.x; switch (context.datasetIndex) { case 0: // Primary return `${labelPrimary}: ${value}`; @@ -662,7 +657,7 @@ export default { return `${content.y}: ${context[0].label}`; }; primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) { - let label = xLabelData[index]; + const label = xLabelData[index]; if(label) { return label.length > 21 ? `${label.substring(0, 18)}...` : label }; @@ -673,7 +668,7 @@ export default { return `${content.y}: ${context[0].label.replace(',', ' - ')}` }; primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) { - let label = xLabelData[index]; + const label = xLabelData[index]; let labelStart = label[0]; let labelEnd = label[1]; @@ -767,11 +762,11 @@ export default { getLineChart0(chartData, content, yUnit) { let datasetsPrimary; let datasetsSecondary; - let minX = chartData.x_axis.min; - let maxX = chartData.x_axis.max; + const minX = chartData.x_axis.min; + const maxX = chartData.x_axis.max; let xLabelData; - let labelPrimary = chartData.data[0].label; - let labelSecondary = chartData.data[1].label; + const labelPrimary = chartData.data[0].label; + const labelSecondary = chartData.data[1].label; let primeVueSetData = {}; let primeVueSetOption = {}; const getMoment = (time)=> { @@ -941,9 +936,9 @@ export default { datasetsPrimary.sort((a, b) => b.y - a.y); datasetsSecondary.sort((a, b) => { // Find the index of a.x in data1 - let indexA = datasetsPrimary.findIndex(item => item.x === a.x); + const indexA = datasetsPrimary.findIndex(item => item.x === a.x); // Find the index of b.x in data1 - let indexB = datasetsPrimary.findIndex(item => item.x === b.x); + const indexB = datasetsPrimary.findIndex(item => item.x === b.x); // Compare the indexes return indexA - indexB; @@ -1051,7 +1046,7 @@ export default { default: primeVueSetOption.scales.x.ticks.precision = 0; // x 軸顯示小數點後 0 位 primeVueSetOption.plugins.tooltip.callbacks.label = function(context) { - let value = context.parsed.x === null ? "n/a" : context.parsed.x; + const value = context.parsed.x === null ? "n/a" : context.parsed.x; switch (context.datasetIndex) { case 0: // Primary return `${labelPrimary}: ${value}`; @@ -1066,7 +1061,7 @@ export default { return `${content.y}: ${context[0].label}`; }; primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) { - let label = xLabelData[index]; + const label = xLabelData[index]; if(label) { return label.length > 21 ? `${label.substring(0, 18)}...` : label }; @@ -1077,7 +1072,7 @@ export default { return `${content.y}: ${context[0].label.replace(',', ' - ')}` }; primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) { - let label = xLabelData[index]; + const label = xLabelData[index]; let labelStart = label[0]; let labelEnd = label[1]; @@ -1112,9 +1107,9 @@ export default { datasetsPrimary.sort((a, b) => b.y - a.y); datasetsSecondary.sort((a, b) => { // Find the index of a.x in data1 - let indexA = datasetsPrimary.findIndex(item => item.x === a.x); + const indexA = datasetsPrimary.findIndex(item => item.x === a.x); // Find the index of b.x in data1 - let indexB = datasetsPrimary.findIndex(item => item.x === b.x); + const indexB = datasetsPrimary.findIndex(item => item.x === b.x); // Compare the indexes return indexA - indexB; @@ -1218,7 +1213,7 @@ export default { case 'date': default: primeVueSetOption.plugins.tooltip.callbacks.label = function(context) { - let value = context.parsed.x === null ? "n/a" : getSimpleTimeLabel(context.parsed.x, 2); + const value = context.parsed.x === null ? "n/a" : getSimpleTimeLabel(context.parsed.x, 2); switch (context.datasetIndex) { case 0: // Primary return `${labelPrimary}: ${value}`; @@ -1236,7 +1231,7 @@ export default { return `${content.y}: ${context[0].label}`; }; primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) { - let label = xLabelData[index]; + const label = xLabelData[index]; if(label) { return label.length > 21 ? `${label.substring(0, 18)}...` : label }; @@ -1247,7 +1242,7 @@ export default { return `${content.y}: ${context[0].label.replace(',', ' - ')}` }; primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) { - let label = xLabelData[index]; + const label = xLabelData[index]; let labelStart = label[0]; let labelEnd = label[1]; diff --git a/src/views/Compare/MapCompare.vue b/src/views/Compare/MapCompare.vue index a11c5dd..7dfe803 100644 --- a/src/views/Compare/MapCompare.vue +++ b/src/views/Compare/MapCompare.vue @@ -188,7 +188,7 @@ }, computed:{ sidebarLeftValue: function() { - let result = this.sidebarView === true || this.sidebarTraces === true || this.sidebarFilter === true; + const result = this.sidebarView === true || this.sidebarTraces === true || this.sidebarFilter === true; return result; } }, @@ -275,7 +275,7 @@ * @param {object} type 'processMapData' | 'bpmnData'，可傳入以上任一。 */ setNodesData(mapData) { - let mapType = this.mapType; + const mapType = this.mapType; const logFreq = { "total": "", "rel_freq": "", @@ -371,7 +371,7 @@ * @param {object} type 'processMapData' | 'bpmnData'，可傳入以上任一。 */ setEdgesData(mapData) { - let mapType = this.mapType; + const mapType = this.mapType; //add event duration is empty const logDuration = { "total": "", @@ -402,8 +402,8 @@ * @param {string} type this.mapType 'processMap' | 'bpmn'，可傳入以上任一。 */ async createCy(type) { - let graphId = document.getElementById('cy'); - let mapData = type === 'processMap'? this.processMapData: this.bpmnData; + const graphId = document.getElementById('cy'); + const mapData = type === 'processMap'? this.processMapData: this.bpmnData; if(this[type].vertices.length !== 0){ this.setNodesData(mapData); diff --git a/src/views/Discover/Map/Map.vue b/src/views/Discover/Map/Map.vue index a733540..5286af9 100644 --- a/src/views/Discover/Map/Map.vue +++ b/src/views/Discover/Map/Map.vue @@ -199,7 +199,7 @@ export default { }, computed: { sidebarLeftValue: function () { - let result = this.sidebarView === true || this.sidebarTraces === true || this.sidebarFilter === true; + const result = this.sidebarView === true || this.sidebarTraces === true || this.sidebarFilter === true; return result; } }, @@ -286,7 +286,7 @@ export default { * @param {object} type 'processMapData' | 'bpmnData'，可傳入以上任一。 */ setNodesData(mapData) { - let mapType = this.mapType; + const mapType = this.mapType; const logFreq = { "total": "", "rel_freq": "", @@ -388,7 +388,7 @@ export default { * @param {object} type 'processMapData' | 'bpmnData'，可傳入以上任一。 */ setEdgesData(mapData) { - let mapType = this.mapType; + const mapType = this.mapType; //add event duration is empty const logDuration = { "total": "", @@ -420,8 +420,8 @@ export default { * @param {string} type this.mapType 'processMap' | 'bpmn'，可傳入以上任一。 */ async createCy(type) { - let graphId = document.getElementById('cy'); - let mapData = type === 'processMap' ? this.processMapData : this.bpmnData; + const graphId = document.getElementById('cy'); + const mapData = type === 'processMap' ? this.processMapData : this.bpmnData; if (this[type].vertices.length !== 0) { this.setNodesData(mapData); diff --git a/src/views/Discover/Performance/FreqChart.vue b/src/views/Discover/Performance/FreqChart.vue index f055772..c7d063a 100644 --- a/src/views/Discover/Performance/FreqChart.vue +++ b/src/views/Discover/Performance/FreqChart.vue @@ -169,8 +169,8 @@ export default { let datasets; let datasetsPrimary; // For Compare page case let datasetsSecondary; // For Compare page case - let minX = chartData?.x_axis?.min; - let maxX = chartData?.x_axis?.max; + const minX = chartData?.x_axis?.min; + const maxX = chartData?.x_axis?.max; let xData; let primeVueSetData = {}; let primeVueSetOption = {}; diff --git a/src/views/Discover/Performance/index.vue b/src/views/Discover/Performance/index.vue index 432b00b..f8ef147 100644 --- a/src/views/Discover/Performance/index.vue +++ b/src/views/Discover/Performance/index.vue @@ -255,11 +255,11 @@ export default { * @param { object } valueData {min: '2022-02-20T19:54:12', max: '2023-11-27T07:21:53'} */ setXLabelsData(valueData) { - let min = new Date(valueData.min).getTime(); - let max = new Date(valueData.max).getTime(); - let numPoints = 12; - let step = (max - min) / (numPoints - 1); - let data = []; + const min = new Date(valueData.min).getTime(); + const max = new Date(valueData.max).getTime(); + const numPoints = 12; + const step = (max - min) / (numPoints - 1); + const data = []; for(let i = 0; i< numPoints; i++) { const x = min + i * step; data.push(x); @@ -285,20 +285,17 @@ export default { */ getBarChart(chartData, content) { const getMoment = (time)=> this.$moment(time).format('YYYY/M/D hh:mm:ss'); - let datasets = chartData.data; - let xData; - let yData; let primeVueSetData = {}; let primeVueSetOption = {}; - datasets = datasets.map(value => { + const datasets = chartData.data.map(value => { return { x: getMoment(value.x), y: value.y * 100 } }); // 轉為百分比 - xData = datasets.map(i => i.x); - yData = datasets.map(i => i.y) + const xData = datasets.map(i => i.x); + const yData = datasets.map(i => i.y) primeVueSetData = { labels: xData, @@ -514,7 +511,7 @@ export default { return `${content.y}: ${context[0].label}`; }; primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) { - let label = xData[index]; + const label = xData[index]; return label.length > 21 ? `${label.substring(0, 18)}...` : label }; }else { // 設定「活動」到「活動」的 y label、提示框文字 @@ -522,7 +519,7 @@ export default { return `${content.y}: ${context[0].label.replace(',', ' - ')}` }; primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) { - let label = xData[index]; + const label = xData[index]; let labelStart = label[0]; let labelEnd = label[1]; @@ -612,17 +609,15 @@ export default { * @param { string } yUnit y 軸單位 'date' */ getExplicitDeclaredLineChart(chartData, content, yUnit) { - let datasets; - let minX = chartData.x_axis.min; - let maxX = chartData.x_axis.max; - let xData; + const minX = chartData.x_axis.min; + const maxX = chartData.x_axis.max; let primeVueSetData = {}; let primeVueSetOption = {}; const getSimpleTimeLabel = simpleTimeLabel; - datasets = setLineChartData(chartData.data, chartData.x_axis.max, chartData.x_axis.min, false, chartData.y_axis.max, + const datasets = setLineChartData(chartData.data, chartData.x_axis.max, chartData.x_axis.min, false, chartData.y_axis.max, chartData.y_axis.min); - xData = this.setXLabelsData(chartData.x_axis); + const xData = this.setXLabelsData(chartData.x_axis); // Customize X axis ticks due to different differences between min and max of data group @@ -746,16 +741,14 @@ export default { */ getAvgWaitingTimeLineChart(chartData, content, yUnit) { const getMoment = (time)=> this.$moment(time).format('YYYY/M/D hh:mm:ss'); - let datasets; - let minX = chartData.x_axis.min; - let xData; + const minX = chartData.x_axis.min; let primeVueSetData = {}; let primeVueSetOption = {}; const getSimpleTimeLabel = simpleTimeLabel; - datasets = setLineChartData(chartData.data, chartData.x_axis.max, chartData.x_axis.min, false, chartData.y_axis.max, + const datasets = setLineChartData(chartData.data, chartData.x_axis.max, chartData.x_axis.min, false, chartData.y_axis.max, chartData.y_axis.min); - xData = this.setXLabelsData(chartData.x_axis); + const xData = this.setXLabelsData(chartData.x_axis); // Customize X axis ticks due to different differences between min and max of data group diff --git a/src/views/Files/Files.vue b/src/views/Files/Files.vue index bf98870..549db2f 100644 --- a/src/views/Files/Files.vue +++ b/src/views/Files/Files.vue @@ -311,7 +311,7 @@ */ allFiles: function() { if(this.store.allFiles.length !== 0){ - let sortFiles = Array.from(this.store.allFiles); + const sortFiles = Array.from(this.store.allFiles); sortFiles.sort((x,y) => new Date(y.updated_base) - new Date(x.updated_base)); return sortFiles; } @@ -329,7 +329,7 @@ * Compare Submit button disabled */ isCompareDisabledButton: function() { - let result = this.primaryDragData.length === 0 || this.secondaryDragData.length === 0; + const result = this.primaryDragData.length === 0 || this.secondaryDragData.length === 0; return result; }, /** @@ -498,7 +498,7 @@ default: break; } - let content = `
  • [${i.type}] ${i.name}
    • `; + const content = `
  • [${i.type}] ${i.name}
    • `; srt += content; }); } @@ -521,7 +521,7 @@ break; } - let content = `
  • [${file.type}] ${file.name}
    • `; + const content = `
  • [${file.type}] ${file.name}
    • `; srt += content; }); } diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue index 8b76105..7aafc6c 100644 --- a/src/views/Login/Login.vue +++ b/src/views/Login/Login.vue @@ -100,7 +100,7 @@ export default { * @param {event} event input 傳入的事件 */ changeHandler(event) { - let inputValue = event.target.value; + const inputValue = event.target.value; if(inputValue !== '') { this.isInvalid = false; } diff --git a/src/views/Upload/index.vue b/src/views/Upload/index.vue index 5c9af85..3d50ae7 100644 --- a/src/views/Upload/index.vue +++ b/src/views/Upload/index.vue @@ -126,8 +126,8 @@ export default { isDisabled: function() { // 1. 長度一樣，強制每一個都要選 // 2. 不為 null undefind - let hasValue = !this.selectedColumns.includes(undefined); - let result = !(this.selectedColumns.length === this.uploadDetail?.columns.length + const hasValue = !this.selectedColumns.includes(undefined); + const result = !(this.selectedColumns.length === this.uploadDetail?.columns.length && this.informData.length === 0 && this.repeatedData.length === 0 && hasValue); return result }, @@ -180,13 +180,12 @@ export default { // 替換空格為不斷行的空格 const processedText = text.replace(/ /g, '\u00a0'); const hiddenSpan = document.createElement('span'); - let width; hiddenSpan.innerHTML = processedText; hiddenSpan.style.font = window.getComputedStyle(e).font; hiddenSpan.style.visibility = 'hidden'; document.body.appendChild(hiddenSpan); - width = hiddenSpan.getBoundingClientRect().width; + const width = hiddenSpan.getBoundingClientRect().width; document.body.removeChild(hiddenSpan); return width; @@ -198,7 +197,7 @@ export default { updateValidationData(data) { const nameOccurrences = {}; const noSortedRepeatedData = []; // 未排序的重複選擇的 data - let selectedData = [] // 已經選擇的 data + const selectedData = [] // 已經選擇的 data this.informData = []; // 尚未選擇的 data this.repeatedData = []; // 重複選擇的 data @@ -242,7 +241,7 @@ export default { */ async submit() { // Post API Data - let fetchData = { + const fetchData = { timestamp: '', case_id: '', name: '', @@ -251,7 +250,7 @@ export default { case_attributes: [] }; // 給值 - let haveValueData = this.selectedColumns.map((column, i) => { + const haveValueData = this.selectedColumns.map((column, i) => { if (column && this.uploadDetail.columns[i]) { return { name: column.name, @@ -296,7 +295,7 @@ export default { }, async mounted() { // 只監聽第一次 - let unwatch = this.$watch('fileName', (newValue) => { + const unwatch = this.$watch('fileName', (newValue) => { if (newValue) { const inputElement = document.getElementById('fileNameInput'); const baseWidth = 20;