From f17a2d393551306cd2c6ffbf90aa33098a31e6d1 Mon Sep 17 00:00:00 2001 From: Jin-Hee Park <53548023+jhee564@users.noreply.github.com> Date: Tue, 23 Aug 2022 14:25:45 +0900 Subject: [PATCH] =?UTF-8?q?[#1269]=20Chart=20>=20Legend=20=EC=98=81?= =?UTF-8?q?=EC=97=AD=20=ED=86=B5=EA=B3=84=20>=20null=20=EC=B2=98=EB=A6=AC?= =?UTF-8?q?=20(#1270)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ##################################### - 합계, 최솟값, 최댓값, 평균 계산시 null과 undefined는 제외하도록 함 - 마지막값 계산 시 null과 undefined는 'Null'로 표시되도록함 - 계산된 값이 javascript기준 MAX_SAFE_INTEGER을 초과했거나 MIN_SAFE_INTEGER 미만일 경우 console warning이 출력되도록 함 Co-authored-by: jinhee park --- .../comboChart/example/TableTypeLegend.vue | 9 ++++---- src/components/chart/helpers/helpers.util.js | 8 +++++++ src/components/chart/model/model.store.js | 22 ++++++++++++++----- .../chart/plugins/plugins.legend.js | 12 ++++++---- 4 files changed, 37 insertions(+), 14 deletions(-) diff --git a/docs/views/comboChart/example/TableTypeLegend.vue b/docs/views/comboChart/example/TableTypeLegend.vue index 6296e5957..090b47113 100644 --- a/docs/views/comboChart/example/TableTypeLegend.vue +++ b/docs/views/comboChart/example/TableTypeLegend.vue @@ -201,15 +201,16 @@ import { onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'; avg: { use: useAvg, decimalPoint: 4, + formatter: value => `${value.toFixed(0)}`, }, total: { use: useTotal, decimalPoint: 4, + formatter: value => `${value.toFixed(0)}`, }, last: { use: useLast, title: 'CURRENT', - formatter: value => `${value.toFixed(0)}`, style: { color: '#219EBC', }, @@ -223,7 +224,7 @@ import { onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'; const liveInterval = ref(); let timeValue = dayjs().format('YYYY-MM-DD HH:mm:ss'); - const addRandomChartData = () => { + const addRandomChartData = (ix) => { if (isLive.value) { chartData.labels.shift(); } @@ -236,13 +237,13 @@ import { onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'; seriesData.shift(); } - seriesData.push(Math.random() * (100 - 1) + 1); + seriesData.push(ix > 6 ? null : Math.random() * (100 - 1) + 1); }); }; onMounted(() => { for (let ix = 0; ix < 10; ix++) { - addRandomChartData(); + addRandomChartData(ix); } }); diff --git a/src/components/chart/helpers/helpers.util.js b/src/components/chart/helpers/helpers.util.js index 71946ae17..9acccc7fd 100644 --- a/src/components/chart/helpers/helpers.util.js +++ b/src/components/chart/helpers/helpers.util.js @@ -335,4 +335,12 @@ export default { targetDOM.style[key] = styleObject[key]; }); }, + + checkSafeInteger(value) { + if (value === null || value === undefined) { + return false; + } + + return value <= Number.MAX_SAFE_INTEGER && value >= Number.MIN_SAFE_INTEGER; + }, }; diff --git a/src/components/chart/model/model.store.js b/src/components/chart/model/model.store.js index 8d6a22825..89ff3f72c 100644 --- a/src/components/chart/model/model.store.js +++ b/src/components/chart/model/model.store.js @@ -949,14 +949,24 @@ const modules = { const seriesIds = Object.keys(series); seriesIds?.forEach((sId) => { - const dataList = allData[sId].map(data => (data.value ? data.value : data)); - - const min = (Math.min(...dataList)); - const max = (Math.max(...dataList)); - const total = (dataList.reduce((a, b) => a + b, 0)); - const avg = (total / dataList.length || 0); + const dataList = allData[sId].map(data => (data?.value ? data.value : data)); const last = (dataList[dataList.length - 1]); + const dataListExcludedNull = dataList.filter(value => value !== undefined && value !== null); + const min = (Math.min(...dataListExcludedNull)); + const max = (Math.max(...dataListExcludedNull)); + const total = (dataListExcludedNull.reduce((a, b) => a + b, 0)); + const avg = (total / dataListExcludedNull.length || 0); + + if (!Util.checkSafeInteger(min) + || !Util.checkSafeInteger(max) + || !Util.checkSafeInteger(avg) + || !Util.checkSafeInteger(total) + || !Util.checkSafeInteger(last) + ) { + console.warn('[EVUI][Chart] The aggregated value exceeds 9007199254740991 or less then -9007199254740991.'); + } + aggregationDataSet[sId] = { min, max, avg, total, last }; }); diff --git a/src/components/chart/plugins/plugins.legend.js b/src/components/chart/plugins/plugins.legend.js index d2c4f92d6..7bf8fe14b 100644 --- a/src/components/chart/plugins/plugins.legend.js +++ b/src/components/chart/plugins/plugins.legend.js @@ -533,7 +533,7 @@ const modules = { } const seriesId = row.series.sId; - const value = +aggregations?.[seriesId]?.[key]; + const value = aggregations?.[seriesId]?.[key]; dom.textContent = this.getFormattedValue(columns[key], value); }); }); @@ -756,7 +756,7 @@ const modules = { } if (columns[key].use) { - const formattedTxt = this.getFormattedValue(columns[key], +aggregations[key]); + const formattedTxt = this.getFormattedValue(columns[key], aggregations[key]); const valueDOM = document.createElement('td'); valueDOM.className = 'ev-chart-legend--table__value'; valueDOM.style.color = series.show ? opt.color : opt.inactive; @@ -1134,13 +1134,17 @@ const modules = { * @returns {string} */ getFormattedValue({ formatter, decimalPoint }, value) { + if (value === undefined || value === null) { + return 'Null'; + } + let formattedTxt; if (formatter) { - formattedTxt = formatter(value); + formattedTxt = formatter(+value); } if (!formatter || typeof formattedTxt !== 'string') { - formattedTxt = Util.labelSignFormat(value, decimalPoint); + formattedTxt = Util.labelSignFormat(+value, decimalPoint); } return formattedTxt;