[#1269] Chart > Legend 영역 통계 > null 처리

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

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

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

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;