[#1567] Chart > Scatter Chart > Real Time Scatter > 내부 데이터를 초기화하는 메소드 필요, range를 변경할 수 있게 수정 필요

docs/views/scatterChart/api/scatterChart.md

@@ -291,3 +291,7 @@ const chartOptions = {
 
  * drag-select는  `dragSelection` 옵션의 `use`값이 `true` 일 때 이벤트를 발생 시킬 수 있다. 
  그리고 선택영역은 그래프에 표시된 데이터의 중앙이 포함 되어야 선택영역 내 데이터로 인식 한다.
+
+### 6. v-model:realTimeScatterReset
+- realTimeScatter 옵션을 사용할 때, 내부 데이터를 모두 초기화하고 싶을 때 사용.
+- realTimeScatterReset이 true가 되면 데이터를 모두 초기화하고 자동으로 false로 바뀜. 초기화하고 싶을 때마다 true로 바꿔주면 됩니다.

docs/views/scatterChart/example/RealTimeScatter.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="case">
     <ev-chart
+      v-model:realTimeScatterReset="resetFlag"
       :data="chartData"
       :options="chartOptions"
     />
@@ -10,13 +11,35 @@
           <label>데이터 자동 업데이트</label>
           <ev-toggle v-model="isRealTime" />
         </div>
+        <div class="row-item">
+          <span class="item-title">
+            데이터 초기화
+          </span>
+          <ev-button
+            class="component"
+            @click="dataReset"
+          >
+            reset
+          </ev-button>
+        </div>
+        <div class="row-item">
+          <span class="item-title">
+            change range (s)
+          </span>
+          <ev-input-number
+            v-model="realTimeScatterRange"
+            class="component"
+            :min="50"
+            :step="50"
+          />
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import { ref, shallowRef, watch, onUnmounted } from 'vue';
+import { ref, shallowRef, watch, onUnmounted, reactive } from 'vue';
 
 export default {
   setup() {
@@ -50,15 +73,16 @@ export default {
       },
     });
 
-    const chartOptions = {
+    const realTimeScatterRange = ref(300);
+    const chartOptions = reactive({
       type: 'scatter',
       width: '100%',
       height: '100%',
       padding: { top: 20, right: 2, bottom: 4, left: 2 },
       axesX: [{
         type: 'time',
-        timeFormat: 'HH:mm',
-        interval: 'minute',
+        timeFormat: 'HH:mm:ss',
+        interval: 'second',
         showAxis: true,
         showGrid: false,
         axisLineColor: '#C9CFDC',
@@ -93,9 +117,9 @@ export default {
       displayOverflow: true,
       realTimeScatter: {
         use: true,
-        range: 300, // 총 5분, 초 단위
+        range: realTimeScatterRange.value, // 총 5분, 초 단위
       },
-    };
+    });
 
     let timeoutId;
 
@@ -182,6 +206,22 @@ export default {
       }
     }, { immediate: true });
 
+    watch(() => realTimeScatterRange.value, () => {
+      chartOptions.realTimeScatter.range = realTimeScatterRange.value;
+    });
+
+    const resetFlag = ref(false);
+    const dataReset = () => {
+      resetFlag.value = true;
+      chartData.value = {
+        series,
+        data: {
+          series1: [],
+          series2: [],
+        },
+      };
+    };
+
     onUnmounted(() => {
       clearTimeout(timeoutId);
     });
@@ -190,6 +230,9 @@ export default {
       isRealTime,
       chartData,
       chartOptions,
+      realTimeScatterRange,
+      resetFlag,
+      dataReset,
     };
   },
 };

src/components/chart/Chart.vue

@@ -72,6 +72,10 @@
         type: Number,
         default: 0,
       },
+      realTimeScatterReset: {
+        type: Boolean,
+        default: false,
+      },
     },
     emits: [
       'click',
@@ -83,8 +87,9 @@
       'update:selectedSeries',
       'update:zoomStartIdx',
       'update:zoomEndIdx',
+      'update:realTimeScatterReset',
     ],
-    setup(props) {
+    setup(props, { emit }) {
       let evChart = null;
       const isMounted = ref(false);
       const injectIsChartGroup = inject('isChartGroup', false);
@@ -246,6 +251,18 @@
         });
       }
 
+      watch(() => props.realTimeScatterReset, (flag) => {
+        if (flag) {
+          Object.keys(evChart.dataSet).forEach((series) => {
+            if (evChart.dataSet[series]) {
+              evChart.dataSet[series].dataGroup = [];
+            }
+          });
+
+          emit('update:realTimeScatterReset', false);
+        }
+      });
+
       onMounted(async () => {
         if (injectEvChartPropsInGroup?.value) {
           injectEvChartPropsInGroup.value.push(props);

src/components/chart/element/element.scatter.js

@@ -144,9 +144,9 @@ class Scatter {
     const pointStyle = typeof this.pointStyle === 'string' ? this.pointStyle : this.pointStyle.value;
     const pointSize = typeof this.pointSize === 'number' ? this.pointSize : this.pointSize.value;
 
-    for (let i = 0; i < this.data[this.sId].dataGroup.length; i++) {
-      for (let j = 0; j < this.data[this.sId].dataGroup[i].data.length; j++) {
-        const item = this.data[this.sId].dataGroup[i].data[j];
+    for (let i = 0; i < this.data[this.sId]?.dataGroup?.length; i++) {
+      for (let j = 0; j < this.data[this.sId]?.dataGroup[i]?.data.length; j++) {
+        const item = this.data[this.sId]?.dataGroup[i]?.data[j];
 
         if (!duple.has(`${item.x}${item.y}`)) {
           duple.add(`${item.x}${item.y}`);

src/components/chart/model/model.store.js

@@ -81,7 +81,7 @@ const modules = {
     for (let x = 0; x < keys.length; x++) {
       const key = keys[x];
       const data = datas[key];
-      const storeLength = data.length;
+      const storeLength = data?.length;
       let lastTime = 0;
 
       if (!this.isInit || this.updateSeries) {
@@ -98,13 +98,13 @@ const modules = {
           ...defaultValues,
           ...this.dataSet[key],
         };
-        this.dataSet[key].length = this.options.realTimeScatter.range || 300;
-        this.dataSet[key].toTime = Math.floor(Date.now() / 1000) * 1000;
-        this.dataSet[key].fromTime = this.dataSet[key].toTime
-          - this.dataSet[key].length * 1000;
-        this.dataSet[key].endIndex = this.dataSet[key].length - 1;
       }
 
+      this.dataSet[key].length = this.options.realTimeScatter.range || 300;
+      this.dataSet[key].toTime = Math.floor(Date.now() / 1000) * 1000;
+      this.dataSet[key].fromTime = this.dataSet[key].toTime - this.dataSet[key].length * 1000;
+      this.dataSet[key].endIndex = this.dataSet[key].length - 1;
+
       for (let i = 0; i < storeLength; i++) {
         const item = data[i];
 
@@ -128,20 +128,19 @@ const modules = {
           - this.dataSet[key].length * 1000;
       }
 
-      if (!this.isInit || this.updateSeries) {
-        for (let i = 0; i < this.dataSet[key].length; i++) {
-          const defaultValues = {
-            data: [],
-            max: 0,
-            min: Infinity,
-          };
+      for (let i = 0; i < this.dataSet[key].length; i++) {
+        const defaultValues = {
+          data: [],
+          max: 0,
+          min: Infinity,
+        };
 
-          this.dataSet[key].dataGroup[i] = {
-            ...defaultValues,
-            ...this.dataSet[key].dataGroup[i],
-          };
-        }
-      } else if (gapCount > 0) {
+        this.dataSet[key].dataGroup[i] = {
+          ...defaultValues,
+          ...this.dataSet[key].dataGroup[i],
+        };
+      }
+      if (gapCount > 0) {
         if (gapCount >= this.dataSet[key].length) {
           for (let i = 0; i < this.dataSet[key].length; i++) {
             this.dataSet[key].dataGroup[i].data.length = 0;