Replace let with const where variable is never reassigned in Vue files

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

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));
+      const total = getNumberLabel(Object.values(data.counts).reduce((acc, val) => acc + val, 0));
-      let sum = data.counts.conforming + data.counts.not_conforming;
+      const sum = data.counts.conforming + data.counts.not_conforming;
-      let rate = ((data.counts.conforming / sum) * 100).toFixed(1);
+      const rate = ((data.counts.conforming / sum) * 100).toFixed(1);
-      let isNullTime = value => value === null ? null : getNumberLabel((value / 86400).toFixed(1));
+      const isNullTime = value => value === null ? null : getNumberLabel((value / 86400).toFixed(1));
-      let isNullCase = value => value === null ? null : getNumberLabel(value.toFixed(1));
+      const isNullCase = value => value === null ? null : getNumberLabel(value.toFixed(1));
-      let setLoopData = value => value.map(item => {
+      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);
+      const isNullLoops = value => value === null ? null : setLoopData(value);
-      let isNullIsssue = value => value === null ? null : setIssueData(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;
+      const max = yMax * 1.1;
-      let xVal = timeRange(xMin, xMax, 100);
+      const xVal = timeRange(xMin, xMax, 100);
-      let yVal = yTimeRange(data, 100, yMin, yMax);
+      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);
+      const selectTimeMinIndex = getXIndex(xVal, this.selectDurationTime.min);
-      let selectTimeMaxIndex = getXIndex(xVal, this.selectDurationTime.max);
+      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;

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 = [];

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'],

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();

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;
+        const ratio = item.freq / sum;
-        let ratio = item.freq / sum;
+        const result = {
-        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;
+      const min = this.valueData.min;
-      let max = this.valueData.max;
+      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;
+      const range = xAxisMax - xAxisMin;
-      let step = range / this.selectRange;
+      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();
+      const min = new Date(this.valueData.min).getTime();
-      let max = new Date(this.valueData.max).getTime();
+      const max = new Date(this.valueData.max).getTime();
-      let numPoints = 11;
+      const numPoints = 11;
-      let step = (max - min) / (numPoints - 1);
+      const step = (max - min) / (numPoints - 1);
-      let data = [];
+      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);
+      const from = (this.selectArea[0] * 0.01) / (this.selectRange * 0.01);
-      let to = (this.selectArea[1] * 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;
+      const sliderData = this.sliderData;
-      let start = sliderData[e[0].toFixed()];
+      const start = sliderData[e[0].toFixed()];
-      let end = sliderData[e[1].toFixed()]; // 取得 index，須為整數。
+      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;
+      const sliderData = this.sliderData;
-      let isDateType = this.selectedAttName.type === 'date';
+      const isDateType = this.selectedAttName.type === 'date';
       let targetTime = [];
       let inputValue;
 

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;

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');
+      const start = getMoment(this.startTime).format('YYYY-MM-DDTHH:mm:00');
-      let end = getMoment(this.endTime).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();
+      const xAxisMin = new Date(this.filterTimeframe.x_axis.min).getTime();
-      let xAxisMax = new Date(this.filterTimeframe.x_axis.max).getTime();
+      const xAxisMax = new Date(this.filterTimeframe.x_axis.max).getTime();
-      let range = xAxisMax - xAxisMin;
+      const range = xAxisMax - xAxisMin;
-      let step = range / this.selectRange;
+      const step = range / this.selectRange;
-      let sliderData = []
+      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;
+      const c = 1;
-      let d = this.filterTimeframe.data[0].y;
+      const d = this.filterTimeframe.data[0].y;
-      let e = 2;
+      const e = 2;
-      let f = this.filterTimeframe.data[1].y;
+      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;
+      const ma = 9;
-      let mb = this.filterTimeframe.data[8].y;
+      const mb = this.filterTimeframe.data[8].y;
-      let mc = 10;
+      const mc = 10;
-      let md = this.filterTimeframe.data[9].y;
+      const md = this.filterTimeframe.data[9].y;
-      let me = 11;
+      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();
+      const min = new Date(this.filterTimeframe.x_axis.min_base).getTime();
-      let max = new Date(this.filterTimeframe.x_axis.max_base).getTime();
+      const max = new Date(this.filterTimeframe.x_axis.max_base).getTime();
-      let numPoints = 11;
+      const numPoints = 11;
-      let step = (max - min) / (numPoints - 1);
+      const step = (max - min) / (numPoints - 1);
-      let data = [];
+      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);
+      const from = (this.selectArea[0] * 0.01) / (this.selectRange * 0.01);
-      let to = (this.selectArea[1] * 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;
+      const sliderData = this.sliderData;
-      let start = sliderData[e[0].toFixed()];
+      const start = sliderData[e[0].toFixed()];
-      let end = sliderData[e[1].toFixed()]; // 取得 index，須為整數。
+      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;

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();

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',

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);
+      const sum = this.traces.map(trace => trace.count).reduce((acc, cur) => acc + cur, 0);
-      let result = this.traces.map(trace => {
+      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();

src/components/Discover/StatusBar.vue

@@ -144,9 +144,9 @@ export default {
     }
   },
   async mounted() {
-    let params = this.$route.params;
+    const params = this.$route.params;
-    let file = this.$route.meta.file;
+    const file = this.$route.meta.file;
-    let isCheckPage = this.$route.name.includes('Check');
+    const isCheckPage = this.$route.name.includes('Check');
 
     switch (params.type) {
       case 'log':

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') {

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;

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();
+      const min = new Date(valueData.min).getTime();
-      let max = new Date(valueData.max).getTime();
+      const max = new Date(valueData.max).getTime();
-      let numPoints = 12;
+      const numPoints = 12;
-      let step = (max - min) / (numPoints - 1);
+      const step = (max - min) / (numPoints - 1);
-      let data = [];
+      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;
+      const minX = chartData.x_axis.min;
-      let maxX = chartData.x_axis.max;
+      const maxX = chartData.x_axis.max;
       let xLabelData;
-      let labelPrimary = chartData.data[0].label;
+      const labelPrimary = chartData.data[0].label;
-      let labelSecondary = chartData.data[1].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;
+      const labelPrimary = chartData.data[0].label;
-      let xDataPrimary;
+      const labelSecondary = chartData.data[1].label;
-      let yDataPrimary;
-      let labelPrimary = chartData.data[0].label;
-      let datasetsSecondary = chartData.data[1].data;
-      let yDataSecondary;
-      let 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);
+      const xDataPrimary = datasetsPrimary.map(i => i.x);
-      yDataPrimary = datasetsPrimary.map(i => i.y);
+      const yDataPrimary = datasetsPrimary.map(i => i.y);
-      datasetsSecondary = datasetsSecondary.map(value => {
+      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;
+      const minX = chartData.x_axis.min;
-      let maxX = chartData.x_axis.max;
+      const maxX = chartData.x_axis.max;
       let xLabelData;
-      let labelPrimary = chartData.data[0].label;
+      const labelPrimary = chartData.data[0].label;
-      let labelSecondary = chartData.data[1].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];
 

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');
+        const graphId = document.getElementById('cy');
-        let mapData = type === 'processMap'? this.processMapData: this.bpmnData;
+        const mapData = type === 'processMap'? this.processMapData: this.bpmnData;
   
         if(this[type].vertices.length !== 0){        
           this.setNodesData(mapData);

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');
+      const graphId = document.getElementById('cy');
-      let mapData = type === 'processMap' ? this.processMapData : this.bpmnData;
+      const mapData = type === 'processMap' ? this.processMapData : this.bpmnData;
 
       if (this[type].vertices.length !== 0) {
         this.setNodesData(mapData);

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;
+      const minX = chartData?.x_axis?.min;
-      let maxX = chartData?.x_axis?.max;
+      const maxX = chartData?.x_axis?.max;
       let xData;
       let primeVueSetData = {};
       let primeVueSetOption = {};

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();
+      const min = new Date(valueData.min).getTime();
-      let max = new Date(valueData.max).getTime();
+      const max = new Date(valueData.max).getTime();
-      let numPoints = 12;
+      const numPoints = 12;
-      let step = (max - min) / (numPoints - 1);
+      const step = (max - min) / (numPoints - 1);
-      let data = [];
+      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);
+      const xData = datasets.map(i => i.x);
-      yData = datasets.map(i => i.y)
+      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;
+      const minX = chartData.x_axis.min;
-      let minX = chartData.x_axis.min;
+      const maxX = chartData.x_axis.max;
-      let maxX = chartData.x_axis.max;
-      let xData;
       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;
+      const minX = chartData.x_axis.min;
-      let minX = chartData.x_axis.min;
-      let xData;
       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

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 = `<li>[${i.type}] ${i.name}</li>`;
+            const content = `<li>[${i.type}] ${i.name}</li>`;
             srt += content;
           });
         }
@@ -521,7 +521,7 @@
                 break;
             }
 
-            let content = `<li>[${file.type}] ${file.name}</li>`;
+            const content = `<li>[${file.type}] ${file.name}</li>`;
             srt += content;
           });
         }

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;
       }

src/views/Upload/index.vue

@@ -126,8 +126,8 @@ export default {
     isDisabled: function() {
       // 1. 長度一樣，強制每一個都要選
       // 2. 不為 null undefind
-      let hasValue = !this.selectedColumns.includes(undefined);
+      const hasValue = !this.selectedColumns.includes(undefined);
-      let result = !(this.selectedColumns.length === this.uploadDetail?.columns.length 
+      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;