refactor: refactor data handling, parsing, and comparison methods

- Change the way to handle downloaded data, by adding 'bytea_data' to the attributes fetched and going through byte data instead of regular data - Add a 'parseByteData' method to replace the previous 'parseRawData' method - Ensure data normalization by parsing the downloaded data into integers - The change applies to both online and offline downloading - Minor update in timestamp comparison operation, with data parsed to integer before being compared. Signed-off-by: peterlu14 <peterlu810516@gmail.com>
Merge branch 'dev/trigger' into dev/new_configuration
2024-01-23 15:48:22 +08:00 · 2023-12-15 12:05:19 +08:00 · 2023-12-15 11:59:53 +08:00 · 2023-12-15 11:56:16 +08:00 · 2023-12-08 11:55:05 +08:00 · 2023-12-07 17:36:34 +08:00
31 changed files with 1879 additions and 1073 deletions
@@ -0,0 +1,8 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_806_98" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="28" height="28">
+<rect width="28" height="28" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_806_98)">
+<path d="M12.8334 19.8333H15.1667V15.1666H19.8334V12.8333H15.1667V8.16665H12.8334V12.8333H8.16671V15.1666H12.8334V19.8333ZM14 25.6666C12.3862 25.6666 10.8695 25.3604 9.45004 24.7479C8.0306 24.1354 6.79587 23.3041 5.74587 22.2541C4.69587 21.2041 3.86462 19.9694 3.25212 18.55C2.63962 17.1305 2.33337 15.6139 2.33337 14C2.33337 12.3861 2.63962 10.8694 3.25212 9.44998C3.86462 8.03053 4.69587 6.79581 5.74587 5.74581C6.79587 4.69581 8.0306 3.86456 9.45004 3.25206C10.8695 2.63956 12.3862 2.33331 14 2.33331C15.6139 2.33331 17.1306 2.63956 18.55 3.25206C19.9695 3.86456 21.2042 4.69581 22.2542 5.74581C23.3042 6.79581 24.1355 8.03053 24.748 9.44998C25.3605 10.8694 25.6667 12.3861 25.6667 14C25.6667 15.6139 25.3605 17.1305 24.748 18.55C24.1355 19.9694 23.3042 21.2041 22.2542 22.2541C21.2042 23.3041 19.9695 24.1354 18.55 24.7479C17.1306 25.3604 15.6139 25.6666 14 25.6666ZM14 23.3333C16.6056 23.3333 18.8125 22.4291 20.6209 20.6208C22.4292 18.8125 23.3334 16.6055 23.3334 14C23.3334 11.3944 22.4292 9.18748 20.6209 7.37915C18.8125 5.57081 16.6056 4.66665 14 4.66665C11.3945 4.66665 9.18754 5.57081 7.37921 7.37915C5.57087 9.18748 4.66671 11.3944 4.66671 14C4.66671 16.6055 5.57087 18.8125 7.37921 20.6208C9.18754 22.4291 11.3945 23.3333 14 23.3333Z" fill="#2C4053"/>
+</g>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="28" height="24" viewBox="0 0 28 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 20.0513V4.25641C2 3.65797 2.25286 3.08405 2.70294 2.66089C3.15303 2.23773 3.76348 2 4.4 2H23.6C24.2365 2 24.847 2.23773 25.2971 2.66089C25.7471 3.08405 26 3.65797 26 4.25641V20.0513C26 20.6497 25.7471 21.2236 25.2971 21.6468C24.847 22.07 24.2365 22.3077 23.6 22.3077H4.4C3.76348 22.3077 3.15303 22.07 2.70294 21.6468C2.25286 21.2236 2 20.6497 2 20.0513Z" stroke="#2C4053" stroke-width="2.5"/>
+<path d="M2 6.51279H26M10.4 14.4102H14M14 14.4102H17.6M14 14.4102V11.0256M14 14.4102V17.7948" stroke="#2C4053" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,8 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_806_67" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="26" height="26">
+<rect width="26" height="26" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_806_67)">
+<path d="M20.5833 20.5833H8.66663C8.07079 20.5833 7.56072 20.3712 7.13642 19.9469C6.71211 19.5226 6.49996 19.0125 6.49996 18.4166V3.24998C6.49996 2.65415 6.71211 2.14408 7.13642 1.71977C7.56072 1.29547 8.07079 1.08331 8.66663 1.08331H16.25L22.75 7.58331V18.4166C22.75 19.0125 22.5378 19.5226 22.1135 19.9469C21.6892 20.3712 21.1791 20.5833 20.5833 20.5833ZM15.1666 8.66665V3.24998H8.66663V18.4166H20.5833V8.66665H15.1666ZM4.33329 24.9166C3.73746 24.9166 3.22739 24.7045 2.80308 24.2802C2.37878 23.8559 2.16663 23.3458 2.16663 22.75V7.58331H4.33329V22.75H16.25V24.9166H4.33329Z" fill="#2C4053"/>
+</g>
+</svg>
@@ -0,0 +1,8 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_806_37" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="32" height="32">
+<rect width="32" height="32" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_806_37)">
+<path d="M9.55556 21.3333C10.6 21.3333 11.6167 21.45 12.6056 21.6833C13.5944 21.9166 14.5778 22.2666 15.5556 22.7333V9.59998C14.6444 9.06665 13.6778 8.66665 12.6556 8.39998C11.6333 8.13331 10.6 7.99998 9.55556 7.99998C8.75556 7.99998 7.96112 8.07776 7.17223 8.23331C6.38334 8.38887 5.62223 8.6222 4.8889 8.93331V22.1333C5.66667 21.8666 6.4389 21.6666 7.20556 21.5333C7.97223 21.4 8.75556 21.3333 9.55556 21.3333ZM18.2222 22.7333C19.2 22.2666 20.1833 21.9166 21.1722 21.6833C22.1611 21.45 23.1778 21.3333 24.2222 21.3333C25.0222 21.3333 25.8056 21.4 26.5722 21.5333C27.3389 21.6666 28.1111 21.8666 28.8889 22.1333V8.93331C28.1556 8.6222 27.3944 8.38887 26.6056 8.23331C25.8167 8.07776 25.0222 7.99998 24.2222 7.99998C23.1778 7.99998 22.1444 8.13331 21.1222 8.39998C20.1 8.66665 19.1333 9.06665 18.2222 9.59998V22.7333ZM16.8889 26.6666C15.8222 25.8222 14.6667 25.1666 13.4222 24.7C12.1778 24.2333 10.8889 24 9.55556 24C8.62223 24 7.70556 24.1222 6.80556 24.3666C5.90556 24.6111 5.04445 24.9555 4.22223 25.4C3.75556 25.6444 3.30556 25.6333 2.87223 25.3666C2.4389 25.1 2.22223 24.7111 2.22223 24.2V8.13331C2.22223 7.88887 2.28334 7.65554 2.40556 7.43331C2.52778 7.21109 2.71112 7.04442 2.95556 6.93331C3.97778 6.39998 5.04445 5.99998 6.15556 5.73331C7.26667 5.46665 8.40001 5.33331 9.55556 5.33331C10.8444 5.33331 12.1056 5.49998 13.3389 5.83331C14.5722 6.16665 15.7556 6.66665 16.8889 7.33331C18.0222 6.66665 19.2056 6.16665 20.4389 5.83331C21.6722 5.49998 22.9333 5.33331 24.2222 5.33331C25.3778 5.33331 26.5111 5.46665 27.6222 5.73331C28.7333 5.99998 29.8 6.39998 30.8222 6.93331C31.0667 7.04442 31.25 7.21109 31.3722 7.43331C31.4944 7.65554 31.5556 7.88887 31.5556 8.13331V24.2C31.5556 24.7111 31.3389 25.1 30.9056 25.3666C30.4722 25.6333 30.0222 25.6444 29.5556 25.4C28.7333 24.9555 27.8722 24.6111 26.9722 24.3666C26.0722 24.1222 25.1556 24 24.2222 24C22.8889 24 21.6 24.2333 20.3556 24.7C19.1111 25.1666 17.9556 25.8222 16.8889 26.6666Z" fill="#2C4053"/>
+</g>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.49165 0.360356C6.72538 0.591162 6.85668 0.90416 6.85668 1.23052C6.85668 1.55688 6.72538 1.86988 6.49165 2.10068L4.2562 4.30748H14.0259C15.9986 4.30748 17.927 4.88495 19.5672 5.96687C21.2074 7.04879 22.4858 8.58657 23.2408 10.3857C23.9957 12.1849 24.1932 14.1647 23.8083 16.0746C23.4235 17.9846 22.4735 19.7391 21.0786 21.1161C19.6837 22.4931 17.9065 23.4309 15.9717 23.8108C14.0369 24.1907 12.0315 23.9957 10.2089 23.2505C8.38639 22.5053 6.82864 21.2432 5.73267 19.624C4.6367 18.0048 4.05173 16.1011 4.05173 14.1537C4.05173 13.8273 4.18308 13.5143 4.4169 13.2834C4.65071 13.0526 4.96783 12.923 5.29849 12.923C5.62916 12.923 5.94628 13.0526 6.18009 13.2834C6.4139 13.5143 6.54526 13.8273 6.54526 14.1537C6.54526 15.6143 6.98399 17.042 7.80597 18.2565C8.62795 19.4709 9.79626 20.4174 11.1632 20.9763C12.5301 21.5352 14.0342 21.6815 15.4853 21.3965C16.9363 21.1116 18.2693 20.4083 19.3154 19.3755C20.3616 18.3427 21.0741 17.0269 21.3627 15.5944C21.6514 14.1619 21.5032 12.6771 20.937 11.3277C20.3708 9.97836 19.412 8.82503 18.1819 8.01359C16.9517 7.20215 15.5054 6.76904 14.0259 6.76904H4.2562L6.49165 8.97583C6.71876 9.20796 6.84442 9.51886 6.84158 9.84157C6.83874 10.1643 6.70762 10.473 6.47646 10.7012C6.2453 10.9294 5.9326 11.0588 5.6057 11.0616C5.2788 11.0644 4.96386 10.9404 4.72872 10.7162L0.365036 6.40842C0.131304 6.17762 0 5.86462 0 5.53826C0 5.2119 0.131304 4.8989 0.365036 4.6681L4.72872 0.360356C4.96252 0.12962 5.27959 0 5.61018 0C5.94078 0 6.25784 0.12962 6.49165 0.360356Z" fill="#2C4053"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.61832 0C2.65868 0 1.73835 0.381215 1.05978 1.05978C0.381215 1.73835 0 2.65868 0 3.61832V20.0652C0 21.0249 0.381215 21.9452 1.05978 22.6238C1.73835 23.3023 2.65868 23.6836 3.61832 23.6836H9.20896C9.19911 23.4209 9.22658 23.1582 9.29053 22.9033L9.58921 21.7099H5.92089V14.8022C5.92089 14.5405 6.02486 14.2895 6.20992 14.1044C6.39498 13.9194 6.64598 13.8154 6.9077 13.8154H15.5956L17.4837 11.9273C17.2521 11.8705 17.0144 11.8418 16.7759 11.8418H6.9077C6.12255 11.8418 5.36954 12.1537 4.81435 12.7089C4.25916 13.2641 3.94726 14.0171 3.94726 14.8022V21.7099H3.61832C2.71045 21.7099 1.97363 20.9731 1.97363 20.0652V3.61832C1.97363 2.71045 2.71045 1.97363 3.61832 1.97363H5.26301V5.59195C5.26301 5.98072 5.33959 6.36569 5.48836 6.72486C5.63714 7.08404 5.8552 7.4104 6.13011 7.6853C6.6853 8.24049 7.4383 8.55239 8.22346 8.55239H14.1443C14.5331 8.55239 14.9181 8.47582 15.2773 8.32704C15.6364 8.17827 15.9628 7.9602 16.2377 7.6853C16.5126 7.4104 16.7307 7.08404 16.8794 6.72486C17.0282 6.36569 17.1048 5.98072 17.1048 5.59195V2.00389C17.5758 2.08284 18.0153 2.30652 18.3574 2.64861L21.0349 5.32617C21.4678 5.75774 21.7099 6.34325 21.7099 6.95507V9.21948C21.8032 9.2131 21.8967 9.21003 21.9902 9.21027H21.9928C22.5678 9.21027 23.1441 9.32474 23.6836 9.55368V6.95639C23.6837 6.39462 23.5731 5.83833 23.3582 5.3193C23.1433 4.80028 22.8282 4.32868 22.431 3.93147L19.7534 1.25391C19.3563 0.856429 18.8848 0.541099 18.3657 0.325946C17.8467 0.110792 17.2903 3.34626e-05 16.7285 0H3.61832ZM7.23664 5.59195V1.97363H15.1312V5.59195C15.1312 5.85367 15.0272 6.10467 14.8421 6.28973C14.6571 6.4748 14.4061 6.57877 14.1443 6.57877H8.22346C7.96174 6.57877 7.71074 6.4748 7.52567 6.28973C7.34061 6.10467 7.23664 5.85367 7.23664 5.59195ZM21.9928 10.526H21.9902C21.2205 10.526 20.4508 10.8194 19.8652 11.4076L12.0997 19.1732C11.6466 19.6256 11.325 20.1928 11.1694 20.8139L10.5668 23.223C10.5069 23.4627 10.5101 23.7139 10.5761 23.952C10.6421 24.1901 10.7686 24.407 10.9434 24.5817C11.1182 24.7563 11.3352 24.8827 11.5734 24.9485C11.8115 25.0143 12.0626 25.0173 12.3023 24.9572L14.7101 24.3559C15.3317 24.2005 15.8994 23.879 16.3522 23.4257L24.1178 15.6601C24.5387 15.2398 24.8256 14.704 24.9419 14.1206C25.0583 13.5372 24.999 12.9324 24.7715 12.3828C24.544 11.8331 24.1585 11.3633 23.6639 11.0327C23.1693 10.7022 22.5877 10.5259 21.9928 10.526Z" fill="#2C4053"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 3.66667C0 2.69421 0.386309 1.76158 1.07394 1.07394C1.76158 0.386309 2.69421 1.33214e-07 3.66667 1.33214e-07H16.952C17.5213 -0.000141016 18.085 0.111887 18.611 0.329685C19.1369 0.547482 19.6148 0.86678 20.0173 1.26933L22.7307 3.98267C23.544 4.796 24 5.89867 24 7.048V20.3333C24 21.3058 23.6137 22.2384 22.9261 22.9261C22.2384 23.6137 21.3058 24 20.3333 24H3.66667C2.69421 24 1.76158 23.6137 1.07394 22.9261C0.386309 22.2384 0 21.3058 0 20.3333V3.66667ZM3.66667 2C2.74667 2 2 2.74667 2 3.66667V20.3333C2 21.2533 2.74667 22 3.66667 22H4V15C4 14.2044 4.31607 13.4413 4.87868 12.8787C5.44129 12.3161 6.20435 12 7 12H17C17.7956 12 18.5587 12.3161 19.1213 12.8787C19.6839 13.4413 20 14.2044 20 15V22H20.3333C21.2533 22 22 21.2533 22 20.3333V7.048C22 6.428 21.7547 5.83467 21.316 5.39733L18.6027 2.684C18.2582 2.33896 17.8143 2.11048 17.3333 2.03067V5.66667C17.3333 6.06063 17.2557 6.45074 17.105 6.81472C16.9542 7.17869 16.7332 7.50941 16.4547 7.78799C16.1761 8.06656 15.8454 8.28754 15.4814 8.43831C15.1174 8.58907 14.7273 8.66667 14.3333 8.66667H8.33333C7.53768 8.66667 6.77462 8.3506 6.21201 7.78799C5.6494 7.22538 5.33333 6.46232 5.33333 5.66667V2H3.66667ZM18 22V15C18 14.7348 17.8946 14.4804 17.7071 14.2929C17.5196 14.1054 17.2652 14 17 14H7C6.73478 14 6.48043 14.1054 6.29289 14.2929C6.10536 14.4804 6 14.7348 6 15V22H18ZM7.33333 2V5.66667C7.33333 6.21867 7.78133 6.66667 8.33333 6.66667H14.3333C14.5985 6.66667 14.8529 6.56131 15.0404 6.37377C15.228 6.18624 15.3333 5.93188 15.3333 5.66667V2H7.33333Z" fill="#2C4053"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.2132 12.6274L6.97054 8.38479L2.7279 12.6274L1.31369 11.2132L5.55633 6.97058L1.31369 2.72794L2.7279 1.31373L6.97054 5.55637L11.2132 1.31373L12.6274 2.72794L8.38475 6.97058L12.6274 11.2132L11.2132 12.6274Z" fill="#000000" stroke="#B8C3CC" stroke-linejoin="round"/>
+</svg>
@@ -175,7 +175,7 @@ export default {
                    // const rawID = this.downloadInfo.channelInfo[channel].downloadIDList[_idx][rowIndex]
                    const rawIDList = this.downloadInfo.channelInfo[channel].downloadIDList[_idx].slice(rowIndex, rowIndex + 10)
                    // console.log(channel, rawIDList)
-                    rawIDList.length > 0 && requestArray.push(api.raw.getAttrByIDs(channel, rawIDList, 'id-channel-size-serial_number-start_time-end_time-data'))
+                    rawIDList.length > 0 && requestArray.push(api.raw.getAttrByIDs(channel, rawIDList, 'id-channel-size-serial_number-start_time-end_time-data-bytea_data'))
                    if (rawIDList.length === 0) columnNum -= 1
                  }
                }
@@ -189,17 +189,24 @@ export default {
                    const timeUnitScale = channelParamObj.time.unit[channelParamObj.time.downloadUnit]
                    const channelUnitScale = channelParamObj[data.channel]?.unit[channelParamObj[data.channel]?.downloadUnit]
                    // console.log('data', data)
-                    const dataArray = data.data.split('"***"').slice(0, -1)
-                    // console.log('dataArray', dataArray)
-                    for (const raw of dataArray) {
-                      const rawArray = raw.split(' ')
-                      const newArray = rawArray[0] === '' ? [] : rawArray.map((ele, index) => {
-                        // console.log((parseInt(ele) / timeUnitScale).toFixed(Math.log10(timeUnitScale)))
-                        return (index % 2 === 0) ? String((parseInt(ele) / timeUnitScale).toFixed(Math.log10(timeUnitScale))) : channelUnitScale ? String((parseInt(ele) / channelUnitScale).toFixed(Math.log10(channelUnitScale))) : ele
-                      })
-                      this.downloadInfo.channelInfo[data.channel].downloadDataBuffer[idx].push(...newArray)
-                      // console.log('rawArray', rawArray)
+                    const bytesData = new Int8Array(data.bytea_data.data)
+                    // console.log('bytesData', bytesData)
+                    const integers = []
+                    for (let i = 0; i < bytesData.length; i += 8) {
+                      // Create a DataView for each 8-byte chunk
+                      const view = new DataView(bytesData.buffer, i, 8)
+                      // Read the integer as BigInt (assuming little-endian byte order)
+                      const integer = view.getBigInt64(0)
+                      integers.push(integer)
                    }
+                    const newArray = integers.map((ele, index) => {
+                      return (index % 2 === 0)
+                        ? String((parseInt(ele) / timeUnitScale).toFixed(Math.log10(timeUnitScale)))
+                        : channelUnitScale ? String((parseInt(ele) / channelUnitScale).toFixed(Math.log10(channelUnitScale))) : ele
+                    })
+                    this.downloadInfo.channelInfo[data.channel].downloadDataBuffer[idx].push(...newArray)
+                    //   // console.log('rawArray', rawArray)
+                    // }
                  }
                }
                requestArray.length = 0
@@ -174,7 +174,7 @@ export default {
                    // const rawID = this.downloadInfo.channelInfo[channel].downloadIDList[_idx][rowIndex]
                    const rawIDList = this.downloadInfo.channelInfo[channel].downloadIDList[_idx].slice(rowIndex, rowIndex + 10)
                    // console.log(channel, rawIDList)
-                    rawIDList.length > 0 && requestArray.push(api.raw.getAttrByIDs(channel, rawIDList, 'id-channel-size-serial_number-start_time-end_time-data'))
+                    rawIDList.length > 0 && requestArray.push(api.raw.getAttrByIDs(channel, rawIDList, 'id-channel-size-serial_number-start_time-end_time-data-bytea_data'))
                    if (rawIDList.length === 0) columnNum -= 1
                  }
                }
@@ -189,16 +189,24 @@ export default {
                    const timeUnitScale = channelParamObj.time.unit[channelParamObj.time.downloadUnit]
                    const channelUnitScale = channelParamObj[data.channel]?.unit[channelParamObj[data.channel]?.downloadUnit]
                    // console.log('data', data)
-                    const dataArray = data.data.split('"***"').slice(0, -1)
-                    // console.log('dataArray', dataArray)
-                    for (const raw of dataArray) {
-                      const rawArray = raw.split(' ')
-                      const newArray = rawArray[0] === '' ? [] : rawArray.map((ele, index) => {
-                        return (index % 2 === 0) ? String((parseInt(ele) / timeUnitScale).toFixed(Math.log10(timeUnitScale))) : channelUnitScale ? String((parseInt(ele) / channelUnitScale).toFixed(Math.log10(channelUnitScale))) : ele
-                      })
-                      this.downloadInfo.channelInfo[data.channel].downloadDataBuffer[idx].push(...newArray)
-                      // console.log('rawArray', rawArray)
+                    const bytesData = new Int8Array(data.bytea_data.data)
+                    // console.log('bytesData', bytesData)
+                    const integers = []
+                    for (let i = 0; i < bytesData.length; i += 8) {
+                      // Create a DataView for each 8-byte chunk
+                      const view = new DataView(bytesData.buffer, i, 8)
+                      // Read the integer as BigInt (assuming little-endian byte order)
+                      const integer = view.getBigInt64(0)
+                      integers.push(integer)
                    }
+                    const newArray = integers.map((ele, index) => {
+                      return (index % 2 === 0)
+                        ? String((parseInt(ele) / timeUnitScale).toFixed(Math.log10(timeUnitScale)))
+                        : channelUnitScale ? String((parseInt(ele) / channelUnitScale).toFixed(Math.log10(channelUnitScale))) : ele
+                    })
+                    this.downloadInfo.channelInfo[data.channel].downloadDataBuffer[idx].push(...newArray)
+                    //   // console.log('rawArray', rawArray)
+                    // }
                  }
                }
                requestArray.length = 0
@@ -62,12 +62,23 @@
                <va-button class="no-dark-style-va-button" color="primary" target="_blank" @click.stop="addChart(false)" small>
                  ADD CHART
                </va-button>
+                <va-button class="no-dark-style-va-button" color="primary" target="_blank" @click.stop="test()" small>
+                  CONFIG
+                </va-button>
              </va-card>
+              <slide-out
+                dock="right"
+                size="50%"
+                :mask-color="'rgba(0, 0, 0, 0)'"
+                :visible.sync="slideShow"
+              >
+                <Configuration :ref="'configuration_ref'"  @add="addChart(false)" @remove="removeChart" @detect="detect" @reset="reset" @copy="copy"></Configuration>
+              </slide-out>
            </div>

            <div :key="taskContentChartPanelKey">
              <div
-                v-for="chart in chartData"
+                v-for="chart in chartArray"
                :key="chart.chartID"
              >
                <canvas-chart
@@ -78,6 +89,7 @@
                  :chartID="chart.chartID"
                  @init="initChart(chart.chartID)"
                  @remove="removeChartCheck(chart.chartID)"
+                  @detect="detect"
                />
              </div>
            </div>
@@ -104,10 +116,11 @@ import CanvasChart from './chart/CanvasChart'
 import TaskDevicesNew from './controller/TaskDevicesNew'
 // import api from '@/data/api'
 import { mapFields } from 'vuex-map-fields'
-import { mapActions } from 'vuex'
+import { mapActions, mapGetters } from 'vuex'
 import taskTypes from '@/store/modules/task/content/types'
 import TaskFormula from './formula/TaskFormula'
 import { v4 as uuid } from 'uuid'
+import Configuration from './configuration/Configuration'

 // TODO change chart data tag format

@@ -118,6 +131,7 @@ export default {
    // TaskDevices,
    TaskDevicesNew,
    TaskFormula,
+    Configuration,
  },
  computed: {
    ...mapFields('taskContent', [
@@ -129,7 +143,22 @@ export default {
    ]),
    ...mapFields('', [
      'developerMode',
+      'controllerID',
    ]),
+    ...mapGetters('taskContent', [
+      taskTypes.device.get,
+    ]),
+    chartArray () {
+      return Object.values(this.chartData).sort((a, b) => {
+        if (a.cardName.replace('Chart', '') > b.cardName.replace('Chart', '')) {
+          return 1
+        }
+        if (a.cardName.replace('Chart', '') < b.cardName.replace('Chart', '')) {
+          return -1
+        }
+        return 0
+      })
+    },
  },
  data () {
    return {
@@ -144,6 +173,8 @@ export default {
      chartAreaClass: ['flex', 'xs12', 'sm12', 'md12', 'xl8', 'pa-0'],
      getParmDone: false,
      batteryInterval: {},
+      temp: null,
+      slideShow: false,
    }
  },
  mqtt: {
@@ -174,7 +205,7 @@ export default {
      if (this.$refs.devices_ref != null) {
        await this.$refs.devices_ref.loadingDone()
      }
-      await this.taskContentChartInitCustomizedFromCache({ controllerID: taskInfo.getTaskInfo().controllerID })
+      // await this.taskContentChartInitCustomizedFromCache({ controllerID: taskInfo.getTaskInfo().controllerID })
      this.getParmDone = true
    },
    async '+/get_device_info/+' (data, topic) {
@@ -215,7 +246,7 @@ export default {
      await taskInfo.deviceInfo(String.fromCharCode.apply(null, data), this.deviceList)
      if (this.$refs.devices_ref != null) {
        await this.$refs.devices_ref.loadingDone()
-        await this.taskContentChartInitCustomizedFromCache({ controllerID: taskInfo.getTaskInfo().controllerID })
+        // await this.taskContentChartInitCustomizedFromCache({ controllerID: taskInfo.getTaskInfo().controllerID })
      }
    },
    // listen datastream [ topic: controllerID/data_server/device_data_stream/deviceID/channel ]
@@ -223,7 +254,9 @@ export default {
      const topicSplit = topic.split('/')
      const deviceID = parseInt(topicSplit[3])
      const channel = parseInt(topicSplit[4])
-      dataStreamBuffer.into(String.fromCharCode.apply(null, data), deviceID, (channel + 1))
+      const device = this.getDevice({ memoryBoard: deviceID })
+
+      dataStreamBuffer.into(String.fromCharCode.apply(null, data), device.mac_address, (channel + 1))
    },
    '+/device_save_path/+' (data, topic) {
      taskInfo.deviceSavePath(String.fromCharCode.apply(null, data))
@@ -284,16 +317,16 @@ export default {
            _type: 'device',
          })

+          device = this.getDevice({ memoryBoard: mes[1] })
+          device.status = 1
+
          // remove mapping ID chart series data
          for (const chart in this.chartData) {
            this.taskContentChartResetSeriesData({
              chartID: chart,
-              mappingID: mes[1],
+              mappingID: device.mac_address,
            })
          }
-
-          device = this.deviceListNew.find((ele) => ele.memory_board === parseInt(mes[1]))
-          device.status = 1
          break
        case 'stop':
          if (mes[1] === 'all') {
@@ -327,6 +360,54 @@ export default {
    },
  },
  methods: {
+    reset: async function () {
+      for (const chart in this.chartData) {
+        await this.removeChart(chart, false)
+      }
+
+      for (let i = 0; i < this.deviceListNew.length; i++) {
+        await this.addMappingChart(this.deviceListNew[i].mac_address)
+        await this.taskContentChartDefaultChartGenerator({
+          _deviceList: this.deviceListNew,
+          _itemID: this.deviceListNew[i].memory_board,
+          _chartID: null,
+          _type: 'device',
+          _reset: false,
+        })
+      }
+
+      this.$nextTick(() => {
+        this.$refs.configuration_ref.buildAccordingBlock()
+      })
+    },
+    copy: async function (selectIndex) {
+      console.log('copy', selectIndex)
+      for (const selectID of selectIndex) {
+        const newChart = JSON.parse(JSON.stringify(this.chartData[selectID]))
+        const newUUID = this.GLOBAL.getUUID()
+        newChart.chartID = newUUID
+        this.chartData[newUUID] = newChart
+
+        // register dataStreamBuffer
+        for (const grid of newChart.grid) {
+          for (const gridSource of newChart.gridSource[grid.index]) {
+            dataStreamBuffer.register(newUUID, gridSource.xSource.mac_address, gridSource.xSource.channel)
+            dataStreamBuffer.register(newUUID, gridSource.ySource.mac_address, gridSource.ySource.channel)
+          }
+        }
+      }
+
+      this.taskContentChartPanelKey++
+      this.chartData = Object.assign({}, this.chartData)
+      this.$refs.configuration_ref.updateChart()
+      this.$nextTick(() => {
+        this.$refs.configuration_ref.buildAccordingBlock()
+      })
+    },
+    test: function () {
+      this.$refs.configuration_ref.updateChart()
+      this.slideShow = true
+    },
    getBattery: function (device) {
      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
        header: 'device_battery/0',
@@ -389,7 +470,7 @@ export default {
    refreshData: function () {
      for (const chart in this.chartData) {
        // find each chart mappingID with device memory_board
-        const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.chartData[chart].mappingID))
+        const device = this.deviceListNew.find(ele => this.chartData[chart].mappingID.includes(ele.mac_address))
        // device not found continue
        if (device === undefined) {
          continue
@@ -437,9 +518,19 @@ export default {
        await this.taskContentChartSaveToCache({ controllerID: taskInfo.getTaskInfo().controllerID })
      }
      // this.pageToast('The chart has been added.')
-
+      this.chartData = Object.assign({}, this.chartData)
+      this.$refs.configuration_ref.updateChart()
+      this.$nextTick(() => {
+        this.$refs.configuration_ref.buildAccordingBlock()
+      })
      return newChart.chartID
    },
+    saveChart: function () {
+      this.temp = JSON.parse(JSON.stringify(this.chartData))
+    },
+    loadChart: function () {
+      this.chartData = JSON.parse(JSON.stringify(this.temp))
+    },
    refreshChartSetting: async function () {
      if (this.$refs.chart_ref != null) {
        this.$refs.chart_ref.forEach(ref => {
@@ -451,7 +542,7 @@ export default {
    initChart: function (chartID) {
      this.taskContentChartReset({
        chartID: chartID,
-        mappingID: null,
+        mappingID: [],
        cardName: null,
      })
      // this.pageToast('The chart has been Initialized.')
@@ -490,6 +581,7 @@ export default {
      if (saveCache === true) {
        await this.taskContentChartSaveToCache({ controllerID: taskInfo.getTaskInfo().controllerID })
      }
+      this.$refs.configuration_ref.updateChart()
      // this.pageToast('The chart has been removed.')
    },
    showDeviceSettingClick: function () {
@@ -502,16 +594,16 @@ export default {
      this.chartAreaClass[3] = 'md12'
      this.chartAreaClass[4] = 'xl12'
    },
-    addMappingChart: async function (deviceID) {
+    addMappingChart: async function (macAddress) {
      // if have chart with device ID
      for (const chart in this.chartData) {
-        if (this.chartData[chart].mappingID === deviceID) {
+        if (this.chartData[chart].mappingID.includes(macAddress)) {
          return false
        }
      }
      const chart = await this.addChart(true)
      await this.$nextTick(async () => {
-        this.chartData[chart].mappingID = deviceID
+        this.chartData[chart].mappingID.push(macAddress)
        if (this.$refs.chart_ref != null) {
          this.$refs.chart_ref.forEach(ref => {
            ref.refreshMappingSelect()
@@ -520,15 +612,16 @@ export default {
      })
      return chart
    },
-    addDevice: async function (deviceID, memoryBoardID) {
+    addDevice: async function (device) {
+      const [macAddress, memoryBoard] = device
      // subscribe datastream when add device
-      this.mqttSub(`${taskInfo.getTaskInfo().controllerID}/data_server/device_data_stream/${deviceID}/+`)
+      this.mqttSub(`${taskInfo.getTaskInfo().controllerID}/data_server/device_data_stream/${memoryBoard}/+`)
      // add mapping chart
-      await this.addMappingChart(deviceID)
+      await this.addMappingChart(macAddress)
      // register default chart
      await this.taskContentChartDefaultChartGenerator({
        _deviceList: this.deviceListNew,
-        _itemID: deviceID,
+        _itemID: memoryBoard,
        _chartID: null,
        _type: 'device',
        _reset: false,
@@ -622,6 +715,20 @@ export default {
        path: '/',
      })
    },
+    detect: function (device) {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'device_instruction/0',
+        device: device,
+        instruction: 'VIS_DEVICE_DETECT',
+      }))
+      setTimeout(() => {
+        this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+          header: 'device_instruction/0',
+          device: device,
+          instruction: 'VIS_DEVICE_DONE',
+        }))
+      }, 5000)
+    },
    switchMode: function () {
      console.log('switch mode', this.developerMode)
      this.developerMode = !this.developerMode
@@ -646,6 +753,7 @@ export default {
    if (devMode === 'dev') {
      this.developerMode = true
    }
+    this.controllerID = taskInfo.getTaskInfo().controllerID

    await taskInfo.updateTaskInfo(this.$route.params.taskID)
    this.GLOBAL.refreshCache()
@@ -1,614 +0,0 @@
-<template>
-  <div class="task-content">
-
-    <va-modal
-      v-model="showShutdownModal"
-      size="small"
-      :title="'SHUTDOWN'"
-      :message="'The controller shutdown.'"
-      :okText=" $t('modal.confirm') "
-      @ok="exit()"
-      @cancel="exit()"
-    />
-
-    <va-modal
-      v-model="showRemoveChartModal"
-      size="small"
-      :title="'REMOVE CHART'"
-      :message="'The chart will be removed.'"
-      :okText=" $t('modal.confirm') "
-      @ok="removeChart(null)"
-    />
-
-    <div class="row row-equal">
-      <div v-if="showDeviceSetting" class="flex md12 xl4 xs12 sm12">
-        <div class="row">
-          <div class="flex sm12 xl12 md12 xs12">
-            <task-devices-g-m :ref="'devices_ref'" @add="addDevice($event)" @remove="removeDevice($event)" @refreshSetting="refreshChartSetting($event)" class="pa-0" />
-          </div>
-          <!-- <div class="flex sm12 xl12 md12 xs12">
-            <task-formula :ref="'formula_ref'" @add="addFormula($event)" @remove="removeFormula($event)" class="pa-0" />
-          </div> -->
-        </div>
-
-      </div>
-
-      <div :class="chartAreaClass">
-        <div class="row" >
-          <div class="flex sm12 xl12 md12 xs12">
-            <div class="flex sm12 xl12 md12 xs12" style="text-align: center;">
-              <va-card
-                stripe="primary"
-              >
-                <va-button class="no-dark-style-va-button" v-if="!showDeviceSetting" color="primary" target="_blank" @click="showDeviceSettingClick()" small>
-                  SHOW DEVICES
-                </va-button>
-                <va-button  class="no-dark-style-va-button" v-if="showDeviceSetting" color="primary" target="_blank" @click="hideDeviceSettingClick()" small>
-                  HIDE DEVICES
-                </va-button>
-                <!-- <va-button class="" color="success" target="_blank" @click="startAllClick()" small>
-                  START ALL
-                </va-button>
-                <va-button class="no-dark-style-va-button" color="danger" target="_blank" @click="stopAllClick()" small>
-                  STOP ALL
-                </va-button> -->
-                <va-button class="no-dark-style-va-button" color="primary" target="_blank" @click.stop="addChart()" small>
-                  ADD CHART
-                </va-button>
-              </va-card>
-            </div>
-
-            <div :key="chartKey">
-              <div
-                v-for="chart in chartData"
-                :key="chart.chartID"
-              >
-                <canvas-chart
-                  :id="'chart' + chart.chartID"
-                  :ref="'chart_ref'"
-                  :cardheight="'400px'"
-                  :cardwidth="'auto'"
-                  :chartID="chart.chartID"
-                  @init="initChart(chart.chartID)"
-                  @remove="removeChartCheck(chart.chartID)"
-                />
-              </div>
-            </div>
-
-            <div style="height: 150px;">
-            </div>
-
-          </div>
-
-        </div>
-
-      </div>
-
-    </div>
-
-    <task-content-modal />
-
-  </div>
-</template>
-
-<script>
-import { dataStreamBuffer } from '../../../data/task/DataStreamBuffer'
-import { taskInfo } from '../../../data/task/TaskInfo'
-import CanvasChart from './chart/CanvasChart'
-import TaskContentModal from './TaskContentModal.vue'
-import { mapFields } from 'vuex-map-fields'
-import TaskDevicesGM from './controller/neulive-gimer/TaskDevicesGM.vue'
-import { mapActions } from 'vuex'
-import taskTypes from '@/store/modules/task/content/types'
-
-// TODO change chart data tag format
-
-export default {
-  name: 'TaskContentGM',
-  components: {
-    CanvasChart,
-    TaskDevicesGM,
-    TaskContentModal,
-  },
-  computed: {
-    ...mapFields('taskContent', [
-      'deviceList',
-      'showTaskModal',
-      'taskModalText',
-      'chartData',
-    ]),
-  },
-  data () {
-    return {
-      // modal
-      showShutdownModal: false,
-      showRemoveChartModal: false,
-      // refresh timer
-      dataRefreshTimer: null,
-      // chart refresh key
-      chartKey: 0,
-      chartNumber: 0,
-      selectChartID: null,
-      showDeviceSetting: true,
-      chartAreaClass: ['flex', 'xs12', 'sm12', 'md12', 'xl8', 'pa-0'],
-      getParmDone: false,
-    }
-  },
-  mqtt: {
-    async '+/get_device_info_all/+' (data, topic) {
-      await taskInfo.deviceInfo(String.fromCharCode.apply(null, data), this.deviceList)
-      this.refreshDevicesWindow()
-    },
-    async '+/get_device_info/+' (data, topic) {
-      await taskInfo.deviceInfo(String.fromCharCode.apply(null, data), this.deviceList)
-      this.refreshDevicesWindow()
-      this.getParmDone = true
-      this.checkStiStatus()
-    },
-    async '+/device_parameter/+' (data, topic) {
-      await taskInfo.deviceParameter(String.fromCharCode.apply(null, data))
-      this.refreshDevicesWindow()
-    },
-    async '+/device_parameter_value/+' (data, topic) {
-      await taskInfo.deviceParameter(String.fromCharCode.apply(null, data))
-      this.refreshDevicesWindow()
-    },
-    async '+/hardware_device/+' (data, topic) {
-      await taskInfo.deviceInfo(String.fromCharCode.apply(null, data), this.deviceList)
-      if (this.$refs.devices_ref != null) {
-        await this.$refs.devices_ref.loadingDone()
-      }
-    },
-    // listen datastream [ topic: controllerID/data_server/device_data_stream/deviceID/channel ]
-    async '+/data_server/device_data_stream/+/+' (data, topic) {
-      const topicSplit = topic.split('/')
-      if (this.getParmDone & !taskInfo.getDeviceInfoByRawID(parseInt(topicSplit[3])).info.isSync) {
-        const result = await this.taskContentChartDefaultChartGenerator({
-          _deviceList: this.deviceList,
-          _itemID: taskInfo.getDeviceIDByRaw(parseInt(topicSplit[3])),
-          _chartID: null,
-          _type: 'device',
-        })
-        if (result) {
-          taskInfo.deviceStart(parseInt(topicSplit[3]), this.deviceList)
-        }
-      }
-      dataStreamBuffer.into(String.fromCharCode.apply(null, data), parseInt(topicSplit[3]), (parseInt(topicSplit[4]) + 1))
-    },
-    '+/device_save_path/+' (data, topic) {
-      taskInfo.deviceSavePath(String.fromCharCode.apply(null, data))
-    //  console.log(taskInfo.getTaskInfo())
-    },
-    '+/device_save_path_set/+' (data, topic) {
-      taskInfo.deviceSavePath(String.fromCharCode.apply(null, data))
-    //  console.log(taskInfo.getTaskInfo())
-    },
-    async '+/broadcast' (data, topic) {
-      const mes = String.fromCharCode.apply(null, data).split(':')
-      // let content
-      switch (mes[0]) {
-        case 'state':
-          switch (mes[1]) {
-            case 'device_available':
-              this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-                header: 'hardware_device/0',
-              }))
-              break
-          }
-          break
-        case 'disconnected':
-          taskInfo.deviceDisconnected(mes[1])
-          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-            header: 'get_device_info/0',
-            device: parseInt(mes[1]),
-          }))
-          break
-        case 'connected':
-          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-            header: 'get_device_info/0',
-            device: parseInt(mes[1]),
-          }))
-          taskInfo.deviceConnected(mes[1])
-          break
-        case 'shutdown':
-          taskInfo.controllerShutdown(this.deviceList)
-          this.showShutdownModal = true
-          break
-        case 'start':
-          if (!taskInfo.getDeviceInfoByRawID(parseInt(mes[1])).info.isSync) {
-            taskInfo.deviceStart(parseInt(mes[1]), this.deviceList)
-            const result = await this.taskContentChartDefaultChartGenerator({
-              _deviceList: this.deviceList,
-              _itemID: taskInfo.getDeviceIDByRaw(parseInt(mes[1])),
-              _chartID: null,
-              _type: 'device',
-            })
-            if (result) {
-              taskInfo.deviceStart(parseInt(mes[1]), this.deviceList)
-            }
-          }
-          break
-        case 'stop':
-          if (mes[1] === 'all') {
-            return false
-          }
-          taskInfo.deviceStop(parseInt(mes[1]), this.deviceList)
-          break
-        case 'device_timeout':
-          this.pageToast('The device [' + taskInfo.getDeviceIDByRaw(parseInt(mes[1])) + '] is timeout, please check its status or parameters.')
-          break
-        case 'device_mission_done':
-          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-            header: 'device_instruction/0',
-            device: parseInt(mes[1]),
-            instruction: 'interrupt',
-          }))
-          this.pageToast('The device [' + taskInfo.getDeviceIDByRaw(parseInt(mes[1])) + '] mission is done.')
-          break
-        default:
-          break
-      }
-    //  console.log(String.fromCharCode.apply(null, data), topic)
-    },
-  },
-  methods: {
-    mqttSub: function (val) {
-      this.$mqtt.subscribe(val)
-    },
-    mqttUnSub: function (val) {
-      this.$mqtt.unsubscribe(val)
-    },
-    mqttPub: function (topic, mes) {
-      this.$mqtt.publish(topic, mes)
-    },
-    pageMqttSub: function (id) {
-      this.mqttSub(id + '/hardware_device/+')
-      this.mqttSub(id + '/broadcast')
-      this.mqttSub(id + '/get_device_info_all/+')
-      this.mqttSub(id + '/get_device_info/+')
-      this.mqttSub(id + '/device_parameter/+')
-      this.mqttSub(id + '/device_parameter_value/+')
-    },
-    pageMqttUnSub: function (id) {
-      for (const device in taskInfo.getTaskInfo().deviceList) {
-        this.mqttUnSub(id + '/data_server/device_data_stream/' + device + '/+')
-      }
-      this.mqttUnSub(id + '/hardware_device/+')
-      this.mqttUnSub(id + '/broadcast')
-      this.mqttUnSub(id + '/get_device_info_all/+')
-      this.mqttUnSub(id + '/get_device_info/+')
-      this.mqttUnSub(id + '/device_parameter/+')
-      this.mqttUnSub(id + '/device_parameter_value/+')
-    },
-    pageInit: async function () {
-      if (await this.$refs.devices_ref != null) {
-        await this.$refs.devices_ref.loadingStart()
-      }
-      // let _parameter, _content
-
-      // this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-      //   header: 'device_parameter/0',
-      //   device: 7,
-      //   parameter: 'RECORDING_CH|AXIS_CH',
-      //   content: '7|1',
-      // }))
-      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-        header: 'hardware_device/0',
-      }))
-
-      this.chartNumber = Object.keys(this.chartData).length
-    },
-    pageToast: function (mes) {
-      this.showToast(
-        mes,
-        {
-          icon: 'fa-bell',
-          position: 'bottom-right',
-          duration: 4000,
-        },
-      )
-    },
-    refreshData: function () {
-      // TODO don't need to refresh chart with stop status
-      for (const chart in this.chartData) {
-        this.taskContentChartRefreshData({
-          chartID: parseInt(chart),
-        })
-      }
-    },
-    refreshDevicesWindow: function () {
-      // console.log(taskInfo.getTaskInfo())
-      if (this.$refs.devices_ref != null) {
-        this.$refs.devices_ref.refresh()
-      }
-    },
-    checkStiStatus: function () {
-      this.$refs.devices_ref.checkStiStatus()
-    },
-    addChart: async function () {
-      const defaultID = {}
-      const update = async () => {
-        for (const chart in this.chartData) {
-          defaultID[chart] = this.chartData[chart].mappingID
-        }
-        this.taskContentChartAdd({
-          chartID: this.chartNumber,
-          maxDots: 4000,
-          gridLength: 1,
-        })
-        this.chartNumber++
-        this.chartKey++
-      }
-      await update()
-
-      for (const chart in this.chartData) {
-        this.chartData[chart].mappingID = defaultID[chart]
-      }
-
-      if (this.$refs.chart_ref != null) {
-        this.$refs.chart_ref.forEach(ref => {
-          ref.refreshMappingSelect()
-        })
-      }
-      // this.pageToast('The chart has been added.')
-
-      return this.chartNumber - 1
-    },
-    refreshChartSetting: async function () {
-      const defaultID = {}
-      const update = async () => {
-        for (const chart in this.chartData) {
-          defaultID[chart] = this.chartData[chart].mappingID
-        }
-        this.chartKey++
-      }
-      await update()
-
-      for (const chart in this.chartData) {
-        this.chartData[chart].mappingID = defaultID[chart]
-      }
-
-      if (this.$refs.chart_ref != null) {
-        this.$refs.chart_ref.forEach(ref => {
-          ref.refreshMappingSelect()
-        })
-      }
-    },
-    initChart: function (chartID) {
-      this.taskContentChartReset({
-        chartID: chartID,
-        mappingID: null,
-        cardName: null,
-      })
-      // this.pageToast('The chart has been Initialized.')
-    },
-    removeChartCheck: function (chartID) {
-      this.selectChartID = chartID
-      this.showRemoveChartModal = true
-    },
-    removeChart: async function (chartID) {
-      if (chartID == null) {
-        chartID = this.selectChartID
-      }
-      dataStreamBuffer.removeByChart(chartID)
-      if (this.chartData[chartID] != null) {
-        const defaultID = {}
-        const update = async () => {
-          for (const chart in this.chartData) {
-            if (chart !== chartID) {
-              defaultID[chart] = this.chartData[chart].mappingID
-            }
-          }
-          delete this.chartData[chartID]
-          this.chartKey++
-        }
-        await update()
-
-        for (const chart in this.chartData) {
-          this.chartData[chart].mappingID = defaultID[chart]
-        }
-
-        if (this.$refs.chart_ref != null) {
-          this.$refs.chart_ref.forEach(ref => {
-            ref.refreshMappingSelect()
-          })
-        }
-      }
-      // this.pageToast('The chart has been removed.')
-    },
-    showDeviceSettingClick: function () {
-      this.showDeviceSetting = true
-      this.chartAreaClass[3] = 'md12'
-      this.chartAreaClass[4] = 'xl8'
-    },
-    hideDeviceSettingClick: function () {
-      this.showDeviceSetting = false
-      this.chartAreaClass[3] = 'md12'
-      this.chartAreaClass[4] = 'xl12'
-    },
-    addMappingChart: async function (deviceID) {
-      // if have chart with device ID
-      for (const chart in this.chartData) {
-        if (this.chartData[chart].mappingID === deviceID) {
-          return false
-        }
-      }
-      const chart = await this.addChart()
-      await this.$nextTick(async () => {
-        this.chartData[chart].mappingID = deviceID
-        if (this.$refs.chart_ref != null) {
-          this.$refs.chart_ref.forEach(ref => {
-            ref.refreshMappingSelect()
-          })
-        }
-      })
-      return chart
-    },
-    addDevice: async function (deviceID) {
-      this.mqttSub(taskInfo.getTaskInfo().controllerID + '/data_server/device_data_stream/' + taskInfo.getRawDeviceID(deviceID) + '/+')
-      this.addMappingChart(deviceID)
-      this.pageToast('The device [' + deviceID + '] has been registered.')
-    },
-    removeDevice: function (deviceID) {
-      this.mqttUnSub(taskInfo.getTaskInfo().controllerID + '/data_server/device_data_stream/' + taskInfo.getRawDeviceID(deviceID) + '/+')
-      for (const chart in this.chartData) {
-        if (this.chartData[chart].mappingID === deviceID) {
-          dataStreamBuffer.removeByChart(chart)
-          this.removeChart(chart)
-        }
-      }
-      this.pageToast('The device [' + deviceID + '] has been removed.')
-    },
-    addFormula: async function (formulaID) {
-      const chart = await this.addChart()
-      await this.$nextTick(async () => {
-        this.chartData[chart].mappingID = formulaID
-        if (this.$refs.chart_ref != null) {
-          this.$refs.chart_ref.forEach(ref => {
-            ref.refreshMappingSelect()
-          })
-        }
-      })
-      this.pageToast('The formula [' + formulaID + '] has been registered.')
-    },
-    removeFormula: function (formulaID) {
-      for (const chart in this.chartData) {
-        if (this.chartData[chart].mappingID === formulaID) {
-          dataStreamBuffer.removeByChart(chart)
-          this.removeChart(chart)
-        }
-      }
-      this.pageToast('The formula [' + formulaID + '] has been removed.')
-    },
-    startAllClick: async function () {
-      for (const device of this.deviceList) {
-        if (this.$refs.devices_ref === undefined) {
-          this.startDevice(device)
-        } else {
-          await this.$refs.devices_ref.$refs.pdlist_ref.start(device)
-        }
-      }
-      this.refreshDevicesWindow()
-      this.pageToast('The all devices have been started')
-    },
-    startDevice: async function (device) {
-      await this.taskContentChartDefaultChartGenerator({
-        _deviceList: this.deviceList,
-        _itemID: device.id,
-        _chartID: null,
-        _type: 'device',
-      })
-      if (!taskInfo.getDeviceInfo(device.id).info.isSync) {
-        if (taskInfo.getDeviceInfo(device.id).info.library_name.startsWith('Neulive')) {
-          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-            header: 'device_instruction/0',
-            device: taskInfo.getRawDeviceID(device.id),
-            instruction: 'record',
-          }))
-        } else if (taskInfo.getDeviceInfo(device.id).info.library_name.startsWith('Elite')) {
-          //  console.log('elite')
-          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-            header: 'device_instruction/0',
-            device: taskInfo.getRawDeviceID(device.id),
-            instruction: 'start',
-          }))
-        }
-        device.stopping = false
-        device.isSync = true
-        // this.$emit('refreshSetting')
-        // ### show device info
-        //  console.log(taskInfo.getDeviceInfo(device.id))
-      }
-    },
-    stopAllClick: function () {
-      for (const device of this.deviceList) {
-        if (this.$refs.devices_ref === undefined) {
-          this.stopDevice(device)
-        } else {
-          this.$refs.devices_ref.stopDevice(device)
-        }
-      }
-      this.pageToast('The all devices have been stopped')
-    },
-    stopDevice: async function (device) {
-      dataStreamBuffer.removeByDevice(taskInfo.getRawDeviceID(device.id))
-      if (taskInfo.getDeviceInfo(device.id).info.isSync) {
-        if (taskInfo.getDeviceInfo(device.id).info.library_name.startsWith('Neulive')) {
-          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-            header: 'device_instruction/0',
-            device: taskInfo.getRawDeviceID(device.id),
-            instruction: 'stop_record',
-          }))
-        } else if (taskInfo.getDeviceInfo(device.id).info.library_name.startsWith('Elite')) {
-          this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
-            header: 'device_instruction/0',
-            device: taskInfo.getRawDeviceID(device.id),
-            instruction: 'interrupt',
-          }))
-        }
-        device.stopping = true
-      }
-    },
-    exit: function () {
-      this.$router.push({
-        path: '/',
-      })
-    },
-
-    ...mapActions('taskContent', [
-      taskTypes.chart.add,
-      taskTypes.chart.refreshData,
-      taskTypes.chart.defaultChartGenerator,
-      taskTypes.chart.reset,
-    ]),
-  },
-  watch: {
-  },
-  async mounted () {
-    await taskInfo.updateTaskInfo(this.$route.params.taskID)
-    //  console.log(taskInfo.getTaskInfo())
-    // this.screenHeight = document.documentElement.clientHeight
-    this.pageMqttSub(taskInfo.getTaskInfo().controllerID)
-    //  console.log(taskInfo.getTaskInfo().controllerID)
-    await this.pageInit()
-    // this.chartNumber = taskInfo.getTaskInfo().chartNumber
-
-    this.dataRefreshTimer = setInterval(this.refreshData, 100)
-
-    // const _this = this
-    // window.onresize = function () { // define the event of window size changing
-    //   // _this.screenWidth = document.documentElement.clientWidth
-    //   _this.screenHeight = document.documentElement.clientHeight
-    // }
-  },
-  destroyed () {
-    taskInfo.destroyed(this.deviceList)
-    for (const chart in this.chartData) {
-      this.removeChart(chart)
-    }
-    clearInterval(this.dataRefreshTimer)
-    this.pageMqttUnSub(taskInfo.getTaskInfo().controllerID)
-  },
-
-}
-</script>
-
-<style lang="scss">
-  // .area-style {
-  //   height: 100%;
-  //   overflow-y: hidden;
-  //   overflow-x: hidden;
-
-  //   @include media-breakpoint-only(xl) {
-  //     height: 94vh;
-  //     overflow-y: scroll;
-  //     overflow-x: hidden;
-  //   }
-  // }
-
-  .no-dark-style-va-button {
-    &:focus {
-      filter: brightness(100%);
-    }
-  }
-</style>
@@ -105,7 +105,7 @@
        </div>
      </div>
      <div v-else-if="tabValue == 1" :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" >
-        <canvas-chart-source :chartID="chartID" />
+        <canvas-chart-source :chartID="chartID" @detect="detect"/>
      </div>
      <div v-else :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" >
      </div>
@@ -173,8 +173,9 @@ export default {
  computed: {
    chartInfo () {
      if (this.data === undefined || this.data === null) return ''
-      if (this.data.mappingID === undefined || this.data.mappingID === '-1') return ''
-      const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.data.mappingID))
+      if (this.data.mappingID.length === 0) return ''
+      const device = this.deviceListNew.find(ele => this.data.mappingID.includes(ele.mac_address))
+      if (device === undefined) return ''
      const deviceMode = configTable.getModeConfig(device.library_name, device.configuration.MODE).name
      return `${device.name}_[${device.memory_board}] | MAC_${device.mac_address.toUpperCase()} | ${this.data.createdBy} chart: ${deviceMode}`
    },
@@ -210,6 +211,9 @@ export default {
    }
  },
  methods: {
+    detect: function (device) {
+      this.$emit('detect', device)
+    },
    getClicked: function (clicked) {
      this.calClicked = clicked
    },
@@ -343,15 +347,15 @@ export default {
      })
    },
    refreshMappingSelect: async function () {
-      this.setMappingSelect(this.chartData[this.chartID].mappingID)
-      if (this.chartData[this.chartID].mappingID !== '-1' && this.chartData[this.chartID].mappingID != null) {
-        taskInfo.getMappingList().forEach(item => {
-          if (item.id === this.chartData[this.chartID].mappingID) {
-            // console.log('item.name: ', item.name)
-            this.setChartName(item.name)
-          }
-        })
-      }
+      // this.setMappingSelect(this.chartData[this.chartID].mappingID)
+      // if (this.chartData[this.chartID].mappingID.length === 0 && this.chartData[this.chartID].mappingIDl) {
+      //   taskInfo.getMappingList().forEach(item => {
+      //     if (item.id === this.chartData[this.chartID].mappingID) {
+      //       // console.log('item.name: ', item.name)
+      //       this.setChartName(item.name)
+      //     }
+      //   })
+      // }
    },
    setChartName: function (name) {
      this.chartData[this.chartID].cardName = name
@@ -290,7 +290,7 @@ export default {
        this.getClicked(false)
      }
      this.data.xAxis[0].type = 'value'
-      if (this.xName !== 'TIME') {
+      if (this.xName !== 'Time') {
        // console.log('not time')
        this.data.xAxis[0].max = (value) => {
          if (value.max < 0) {
@@ -314,7 +314,7 @@ export default {
        this.$emit('switchModeButton', 'default', 0, 0)
      }
      // TODO: modify the redundant code
-      if (this.xName === 'TIME') {
+      if (this.xName === 'Time') {
        this.data.xAxis[0].axisLabel.formatter = function (val) {
          return getTimeFormatter(val)
        }
@@ -327,7 +327,7 @@ export default {
      this.integralClicked = !(this.integralClicked)
      this.disableDiff = !(this.disableDiff)
      this.disableLog = !(this.disableLog)
-      const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.data.mappingID))
+      const device = this.deviceListNew.find(ele => this.data.mappingID.includes(ele.mac_address))
      if (device !== undefined) {
        if (device.status === 0 || device.status === 1) {
          this.watchHandler()
@@ -349,7 +349,7 @@ export default {
        this.disableDiff = true
        this.disableInt = true
      }
-      const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.data.mappingID))
+      const device = this.deviceListNew.find(ele => this.data.mappingID.includes(ele.mac_address))
      if (device !== undefined) {
        if (device.status === 0 || device.status === 1) {
          this.watchHandler()
@@ -371,7 +371,7 @@ export default {
        this.disableDiff = true
        this.disableInt = true
      }
-      const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.data.mappingID))
+      const device = this.deviceListNew.find(ele => this.data.mappingID.includes(ele.mac_address))
      if (device !== undefined) {
        if (device.status === 0 || device.status === 1) {
          this.watchHandler()
@@ -382,7 +382,7 @@ export default {
      this.diffClicked = !(this.diffClicked)
      this.disableLog = !(this.disableLog)
      this.disableInt = !(this.disableInt)
-      const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.data.mappingID))
+      const device = this.deviceListNew.find(ele => this.data.mappingID.includes(ele.mac_address))
      if (device !== undefined) {
        if (device.status === 0 || device.status === 1) {
          this.watchHandler()
@@ -391,22 +391,22 @@ export default {
    },
    addSource () {
      if (this.data.gridSource.length > 0) {
-        const xAxisName = this.data.gridSource[0][0].xAxis
-        const yAxisName = this.data.gridSource[0][0].yAxis
-        this.xName = (xAxisName.split(' ')).pop()
-        this.yName = (yAxisName.split(' ')).pop()
-        if ((this.xName === 'VOLTAGE' && this.yName === 'CURRENT') || (this.xName === 'CURRENT' && this.yName === 'VOLTAGE')) {
-          this.mode_name = 'I-V Curve' // integration
-        } else if (this.xName === 'TIME' && this.yName === 'CURRENT') {
-          this.mode_name = 'I-T Graph' // differential and log
+        const xChannel = this.data.gridSource[0][0].xSource.channel
+        const yChannel = this.data.gridSource[0][0].ySource.channel
+        this.xName = xChannel
+        this.yName = yChannel
+        if ((xChannel === 1 && yChannel === 2) || (xChannel === 2 && yChannel === 1)) {
+          this.mode_name = 'I-V Curve'
+        }
+        if ((xChannel === 'Time' && yChannel === 1) || (xChannel === 1 && yChannel === 'Time')) {
+          this.mode_name = 'I-T Graph'
        }
      }
    },
    // index 0 is for the mode which x-axis is represent time, 2 is for the other mode(s)
    getTimeIndex: function () {
-      let xAxisName = this.rawData.gridSource[0][0].xAxis
-      xAxisName = (xAxisName.split(' ')).pop()
-      return (xAxisName === 'TIME') ? 0 : 2
+      const xChannel = this.data.gridSource[0][0].xSource.channel
+      return (xChannel === 'Time') ? 0 : 2
    },
    // these function below are using for print out the data (debug)
    getAlldata: function () {
@@ -423,7 +423,7 @@ export default {
    getSampleRate: function () {
      try {
        const deviceMappingID = this.chartData[this.chartID].mappingID
-        const device = this.deviceListNew.find(ele => ele.memory_board === deviceMappingID)
+        const device = this.deviceListNew.find(ele => deviceMappingID.includes(ele.mac_address))
        const deviceConfig = configTable.getConfig(deviceMappingID)
        const voltStep = deviceConfig.VOLT_STEP.outputReadabilityData(device.configuration.VOLT_STEP)
        const sampleRate = deviceConfig.SAMPLE_RATE.outputReadabilityData(device.configuration.SAMPLE_RATE)
@@ -126,12 +126,12 @@ export default {
      taskTypes.chart.saveToCache,
    ]),
    getDeviceMode: function () {
-      const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.chartData[this.chartID].mappingID))
+      const device = this.deviceListNew.find(ele => this.data.mappingID.includes(ele.mac_address))
      if (device === undefined) return
      return device.configuration.MODE
    },
    getChannelConfiguration: function () {
-      const device = this.deviceListNew.find(ele => String(ele.memory_board) === String(this.chartData[this.chartID].mappingID))
+      const device = this.deviceListNew.find(ele => this.data.mappingID.includes(ele.mac_address))
      if (device === undefined) return
      return configTable.getChannelConfig(device.configuration._LIBRARY_, device.configuration.MODE)
    },
@@ -1,5 +1,33 @@
 <template>
-  <div style="height: 350px; overflow-y: scroll; overflow-x: hidden;">
+  <div style="">
+    <div class="mb-3" v-if="chart">
+      <div class="row">
+        <div v-for="id in chart.mappingID" :key="id">
+          <va-button @click="test(id)">{{id}}</va-button>
+        </div>
+      </div>
+      <va-tree-root>
+        <va-tree-category
+          style="font-size: 20px;"
+          v-for="(grid,index) in chart.grid"
+          :key="grid.index"
+          :label="'Subplot ' + index"
+          isOpen
+        >
+          <va-tree-node
+            v-for="(series, index) in chart.gridSource[grid.index]"
+            :key="series.name"
+          >
+            <div class="row align--center ml-3">
+              <va-badge class="mb-0" style="font-size: 14px;" color="primary">{{series.name}}</va-badge>
+              <va-badge class="mb-0" style="font-size: 14px;" color="primary" outline>{{getSourceInfo(series.xSource)}}</va-badge>
+              <va-badge class="mb-0" style="font-size: 14px;" color="primary" outline>{{getSourceInfo(series.ySource)}}</va-badge>
+              <va-button @click="removeGridSource(chartID, grid.index, index)" size="small" flat>X</va-button>
+            </div>
+          </va-tree-node>
+        </va-tree-category>
+      </va-tree-root>
+    </div>
    <div>
      <div class="flex row align--center">
        <div class="flex md3 xl3 xs3 sm3">
@@ -49,39 +77,17 @@
        </div>
        <va-button :disabled="sourceAddStatus" class="flex md3 xl3 xs3 sm3 pa-1" @click="addRegisterDeviceChannel(gridSelection.id)" >
          Add
-        </va-button><span class="ml-2" style="color: red;">{{error}}</span>
+        </va-button>
+        <!-- <span class="ml-2" style="color: red;">{{error}}</span> -->
+        <va-button @click="addGrid()">
+          Add Subplot
+        </va-button>
+        <va-button @click="removeGrid(chartID)">
+          Remove Subplot
+        </va-button>
      </div>
    </div>
-    <va-tree-root>
-      <va-tree-category
-        style="font-size: 20px;"
-        v-for="grid in chartData[chartID].grid"
-        :key="grid.index"
-        :label="'Subplot ' + grid.index"
-      >
-        <va-tree-node
-          v-for="series in chartData[chartID].gridSource[grid.index]"
-          :key="series.name"
-        >
-          <div class="flex row align--center">
-            <va-badge class="mb-0" style="font-size: 14px;" color="primary">{{series.name}}</va-badge>
-            <va-badge class="mb-0" style="font-size: 14px;" color="primary" outline>{{series.xAxis}}</va-badge>
-            <va-badge class="mb-0" style="font-size: 14px;" color="primary" outline>{{series.yAxis}}</va-badge>
-            <!-- <va-icon
-              name="ion ion-md-close"
-              color="info"
-              class="ml-2 pa-1 shrink"
-              style="cursor: pointer;"
-              @click.native="removeProduct(product)"
-            /> -->
-          </div>
-        </va-tree-node>
-      </va-tree-category>
-
-    </va-tree-root>
-    <va-button @click="addGrid()">
-      Add Subplot
-    </va-button>
+    <DeviceModal ref="device_modal_ref" @changeDevice="changeDevice" @detect="detect"></DeviceModal>
  </div>
 </template>

@@ -91,9 +97,14 @@ import { mapFields } from 'vuex-map-fields'
 import { mapActions } from 'vuex'
 import taskTypes from '@/store/modules/task/content/types'
 import configTable from '../../../../data/config-table'
+import { dataStreamBuffer } from '@/data/task/DataStreamBuffer'
+import DeviceModal from './DeviceModal.vue'

 export default {
  name: 'canvas-chart-source',
+  components: {
+    DeviceModal,
+  },
  props: {
    chartID: {
      type: [Number, String],
@@ -119,8 +130,11 @@ export default {
    }
  },
  computed: {
+    chart () {
+      return this.chartData[this.chartID]
+    },
    deviceOptions () {
-      const defaultArray = [{ id: -1, name: 'Time' }]
+      const defaultArray = [{ id: 'Time', name: 'Time', channel: 'Time' }]
      defaultArray.push(...this.deviceListNew.map(ele => {
        return {
          name: `[${ele.memory_board}] ${ele.name}`,
@@ -292,6 +306,56 @@ export default {
    },
  },
  methods: {
+    detect (device) {
+      this.$emit('detect', device)
+    },
+    changeDevice (deviceList) {
+      const [oldDevice, newDevice] = deviceList
+      const oldMac = oldDevice
+      const newMac = newDevice
+
+      this.chart.mappingID.length = 0
+      this.chart.mappingID.push(newMac)
+
+      for (const grid of this.chart.grid) {
+        for (const gridSource of this.chart.gridSource[grid.index]) {
+          if (gridSource.xSource.mac_address === oldMac) {
+            gridSource.xSource.mac_address = newMac
+            dataStreamBuffer.register(this.chartID, newMac, gridSource.xSource.channel)
+            dataStreamBuffer.remove(this.chartID, oldMac)
+          }
+          if (gridSource.ySource.mac_address === oldMac) {
+            gridSource.ySource.mac_address = newMac
+            dataStreamBuffer.register(this.chartID, newMac, gridSource.ySource.channel)
+            dataStreamBuffer.remove(this.chartID, oldMac)
+          }
+        }
+      }
+
+      for (const series of this.chart.series) {
+        if (series.xAxisSource[0] === oldMac) {
+          series.xAxisSource[0] = newMac
+          series.data.length = 0
+        }
+        if (series.yAxisSource[0] === oldMac) {
+          series.yAxisSource[0] = newMac
+          series.data.length = 0
+        }
+      }
+    },
+    test (deviceID) {
+      this.$refs.device_modal_ref.initSetting(deviceID)
+      this.$refs.device_modal_ref.show()
+    },
+    getSourceInfo (source) {
+      if (source.name === 'Time') {
+        return 'Time'
+      }
+      if (source.mac_address) {
+        return `${source.mac_address.slice(12, 18)} Channel ${source.channel}`
+      }
+      return ''
+    },
    updateGridOptions () {
      this.gridOptions = []
      for (let i = 0; i < this.chartData[this.chartID].grid.length; i++) {
@@ -352,9 +416,11 @@ export default {
        gridIndex: gridIndex,
        deviceNameX: deviceNameX,
        deviceIDX: deviceIDX,
+        deviceX: deviceXInfo,
        channelX: channelX,
        deviceNameY: deviceNameY,
        deviceIDY: deviceIDY,
+        deviceY: deviceYInfo,
        channelY: channelY,
        formula: null,
      })
@@ -396,9 +462,9 @@ export default {
      }
      if (this.channelSelectX.id != null && this.channelSelectY.id != null) {
        this.sourceAddStatus = false
-      } else if (this.channelSelectX.id != null && this.deviceSelectY.id < 0) {
+      } else if (this.channelSelectX.id != null && this.deviceSelectY.id === 'Time') {
        this.sourceAddStatus = false
-      } else if (this.channelSelectY.id != null && this.deviceSelectX.id < 0) {
+      } else if (this.channelSelectY.id != null && this.deviceSelectX.id === 'Time') {
        this.sourceAddStatus = false
      } else {
        this.sourceAddStatus = true
@@ -407,11 +473,35 @@ export default {
    removeProduct (product) {
      this.products = this.products.filter(productToFilter => productToFilter !== product)
    },
+    async removeGridSource (chartID, gridIndex, gridSourceIndex) {
+      await this.taskRemoveGridSource({
+        chartID: chartID,
+        gridIndex: gridIndex,
+        gridSourceIndex: gridSourceIndex,
+      })
+      await this.taskContentChartSaveToCache({ controllerID: taskInfo.getTaskInfo().controllerID })
+    },
+    async removeGrid (chartID) {
+      if (this.chartData[chartID].grid.length > 1) {
+        await this.taskRemoveGrid({
+          chartID: chartID,
+          gridIndex: this.chartData[chartID].grid.length - 1,
+        })
+      }
+      this.taskContentChartUpdateGridList({
+        chartID: this.chartID,
+        length: this.chartData[this.chartID].grid.length,
+      })
+      this.updateGridOptions()
+      await this.taskContentChartSaveToCache({ controllerID: taskInfo.getTaskInfo().controllerID })
+    },

    ...mapActions('taskContent', [
      taskTypes.chart.register,
      taskTypes.chart.updateGridList,
      taskTypes.chart.saveToCache,
+      taskTypes.chart.removeGridSource,
+      taskTypes.chart.removeGrid,
    ]),
  },
  mounted () {
@@ -0,0 +1,647 @@
+<template>
+  <div style="">
+    <div class="mb-3" v-if="chart">
+      <div class="row">
+        <div v-for="id in chart.mappingID" :key="id">
+          <va-button @click="test(id)" small>{{id}}</va-button>
+        </div>
+      </div>
+      <va-tree-root>
+        <va-tree-category
+          style="font-size: 20px;"
+          v-for="(grid,index) in chart.grid"
+          :key="grid.index"
+          :label="'Subplot ' + index"
+          isOpen
+        >
+          <va-tree-node
+            v-for="(series, index) in chart.gridSource[grid.index]"
+            :key="series.name"
+          >
+            <div class="row flex d-flex align--center ml-3">
+              <!-- <va-badge class="mb-0" style="font-size: 14px;" color="primary">{{series.name}}</va-badge> -->
+              <va-badge class="mb-0" style="font-size: 14px;" color="primary" outline>{{getSourceInfo(series.xSource)}}</va-badge>
+              <va-badge class="mb-0" style="font-size: 14px;" color="primary" outline>{{getSourceInfo(series.ySource)}}</va-badge>
+              <div>
+                <va-button flat small color="gray" icon="fa fa-pencil" @click.stop="changeGridSource(chartID, grid.index, index)"/>
+                <va-button flat small color="gray" icon="fa fa-trash" @click.stop="removeGridSource(chartID, grid.index, index)"/>
+              </div>
+            </div>
+          </va-tree-node>
+          <div v-if="grid.index">
+            <va-icon name="fa fa-plus"  color="gray" style="cursor: pointer;" @click.native="createNewGridSource(chartID, grid.index, chartData[chartID].gridSource[grid.index].length)"></va-icon>
+          </div>
+          <div v-else>
+            <va-icon name="fa fa-plus"  color="gray" style="cursor: pointer;" @click.native="createNewGridSource(chartID, 0,0)"></va-icon>
+          </div>
+        </va-tree-category>
+      </va-tree-root>
+    </div>
+    <div v-if="showChangeInput">
+      <div class="flex row align--center">
+        <div class="flex md3 xl3 xs4 sm6">
+          <va-select
+            small
+            :label="'X SOURCE'"
+            v-model="deviceSelectX"
+            textBy="name"
+            :noClear='true'
+            :options="deviceOptions"
+          />
+        </div>
+        <div class="flex md3 xl2 xs4 sm6">
+          <va-select
+            :on-change="channelSelectXChange()"
+            :label="'X CHANNEL'"
+            v-model="channelSelectX"
+            textBy="channel"
+            :options="channelOptionsX"
+            :noClear='true'
+            :disabled="channelSelectDisableX"
+          />
+        </div>
+        <div class="flex md3 xl3 xs4 sm6">
+          <va-select
+            :label="'Y SOURCE'"
+            v-model="deviceSelectY"
+            textBy="name"
+            :noClear='true'
+            :options="deviceOptions"
+          />
+        </div>
+        <div  class="flex md2 xl2 xs4 sm6">
+          <va-select
+            :on-change="channelSelectYChange()"
+            :label="'Y CHANNEL'"
+            v-model="channelSelectY"
+            textBy="channel"
+            :noClear='true'
+            :options="channelOptionsY"
+            :disabled="channelSelectDisableY"
+          />
+        </div>
+        <!-- <div  class="flex px-0 md3 xl1 xs4 sm6">
+          <va-select
+            :label="'SubPlot'"
+            v-model="gridSelection"
+            textBy="value"
+            :noClear='true'
+            :options="gridOptions"
+          />
+        </div> -->
+        <div>
+          <va-icon name="fa fa-times"  color="gray" style="cursor: pointer;" @click.native="cancel"></va-icon>
+          <va-icon class="mx-3" name="fa fa-check"  color="gray" style="cursor: pointer;" @click.native="saveGrid" ></va-icon>
+        </div>
+        <!-- <span class="ml-2" style="color: red;">{{error}}</span> -->
+      </div>
+      <div>
+        <va-button @click="addGrid()">
+          Add Subplot
+        </va-button>
+        <va-button @click="removeGrid(chartID)">
+          Remove Subplot
+        </va-button>
+      </div>
+    </div>
+    <DeviceModal ref="device_modal_ref" @changeDevice="changeDevice" @detect="detect"></DeviceModal>
+  </div>
+</template>
+
+<script>
+import { taskInfo } from '../../../../data/task/TaskInfo'
+import { mapFields } from 'vuex-map-fields'
+import { mapActions } from 'vuex'
+import taskTypes from '@/store/modules/task/content/types'
+import configTable from '../../../../data/config-table'
+import { dataStreamBuffer } from '@/data/task/DataStreamBuffer'
+import DeviceModal from './DeviceModal.vue'
+
+export default {
+  name: 'canvas-chart-source',
+  components: {
+    DeviceModal,
+  },
+  props: {
+    chartID: {
+      type: [Number, String],
+      required: true,
+    },
+  },
+  data () {
+    return {
+      showChangeInput: false,
+      gridIndexSave: -1,
+      sourceIndexSave: -1,
+      error: '',
+      gridSelection: '0',
+      gridOptions: [],
+      channelSelectX: '',
+      channelOptionsX: [],
+      channelSelectY: '',
+      channelOptionsY: [],
+      channelSelectDisableX: false,
+      channelSelectDisableY: false,
+      deviceSelectX: '',
+      deviceSelectY: '',
+      // deviceOptions:,
+      sourceAddStatus: true,
+      sourceList: [],
+    }
+  },
+  computed: {
+    chart () {
+      return this.chartData[this.chartID]
+    },
+    deviceOptions () {
+      const defaultArray = [{ id: 'Time', name: 'Time', channel: 'Time' }]
+      defaultArray.push(...this.deviceListNew.map(ele => {
+        return {
+          name: `[${ele.memory_board}] ${ele.name}`,
+          id: ele.memory_board,
+        }
+      }))
+      return defaultArray
+    },
+    ...mapFields('taskContent', [
+      'chartData',
+      'deviceListNew',
+    ]),
+  },
+  watch: {
+    deviceOptions: function (val) {
+      this.clearSelectOptions()
+    },
+    deviceSelectX: function () {
+      const channelOptions = []
+      const deviceInfo = this.deviceListNew.find(ele => ele.id === this.deviceSelectX.id)
+      // console.log('deviceInfo', deviceInfo.library_name, deviceInfo.configuration.MODE)
+      // console.log('sourceObj', Object.keys(sourceObj))
+      if (deviceInfo == null) {
+        this.channelSelectDisableX = true
+      } else if (deviceInfo.library_name.includes('Neulive')) {
+        const channelSet = taskInfo.getDeviceInfo(this.deviceSelectX.id).parameterSet.RECORDING_CH.toString(2).split('').reverse()
+        channelSet.forEach((element, index) => {
+          if (parseInt(element) > 0) {
+            channelOptions.push({
+              id: index + 1,
+              channel: 'Channel ' + (index + 1),
+            })
+            // console.log(index, element)
+          }
+        })
+        const axisChannelSet = taskInfo.getDeviceInfo(this.deviceSelectX.id).parameterSet.AXIS_CH.toString(2).split('').reverse()
+        axisChannelSet.forEach((element, index) => {
+          if (parseInt(element) === 1) {
+            if (index === 0) {
+              channelOptions.push({
+                id: 257,
+                channel: 'X-AXIS',
+              })
+            } else if (index === 1) {
+              channelOptions.push({
+                id: 258,
+                channel: 'Y-AXIS',
+              })
+            } else if (index === 2) {
+              channelOptions.push({
+                id: 259,
+                channel: 'Z-AXIS',
+              })
+            } else if (index === 3) {
+              channelOptions.push({
+                id: 260,
+                channel: 'M-AXIS',
+              })
+            }
+          }
+        })
+        this.channelSelectDisableX = false
+      } else if (deviceInfo.library_name.includes('Elite')) {
+        const sourceObj = configTable.getChannelConfig(String(deviceInfo.library_name), deviceInfo.configuration.MODE) // [{id:0 channel:'Current'}, {id:1, channel:'Voltage'}, ]
+        let channelSet
+        if (deviceInfo.library_name.includes('EIS') && (deviceInfo.configuration.MODE === 0 || deviceInfo.configuration.MODE === 5)) {
+          channelSet = ['Zimag_Raw', 'Zreal_Raw', 'Frequency', 'Cycle', 'Zimag', 'Zreal', 'Impedance', 'Phase', 'Current', 'Level gain']
+        } else {
+          channelSet = []
+          const keys = Object.keys(sourceObj)
+          for (let i = 0; i < keys.length; i++) {
+            const item = keys[i]
+            if (sourceObj[item].name !== 'Time' && sourceObj[item].name !== 'Cycle number') {
+              channelSet.push(String(sourceObj[item].name))
+            }
+          }
+        }
+        // console.log(channelSet)
+        channelSet.forEach((element, index) => {
+          channelOptions.push({
+            id: index + 1,
+            channel: element,
+          })
+        })
+        this.channelSelectDisableX = false
+      } else {
+        this.channelSelectDisableX = true
+      }
+      this.channelSelectX = ''
+      this.channelOptionsX.length = 0
+      this.channelOptionsX = channelOptions
+      this.checkSourceAddStatus()
+    },
+    deviceSelectY: function () {
+      const channelOptions = []
+      const deviceInfo = this.deviceListNew.find(ele => ele.id === this.deviceSelectY.id)
+      // console.log(val)
+      if (deviceInfo == null) {
+        this.channelSelectDisableY = true
+      } else if (deviceInfo.library_name.indexOf('Neulive') >= 0) {
+        const channelSet = taskInfo.getDeviceInfo(this.deviceSelectY.id).parameterSet.RECORDING_CH.toString(2).split('').reverse()
+        //  console.log(channelSet)
+        channelSet.forEach((element, index) => {
+          if (parseInt(element) > 0) {
+            channelOptions.push({
+              id: index + 1,
+              channel: 'Channel ' + (index + 1),
+            })
+            // console.log(index, element)
+          }
+        })
+        const axisChannelSet = taskInfo.getDeviceInfo(this.deviceSelectY.id).parameterSet.AXIS_CH.toString(2).split('').reverse()
+        axisChannelSet.forEach((element, index) => {
+          if (parseInt(element) === 1) {
+            if (index === 0) {
+              channelOptions.push({
+                id: 257,
+                channel: 'X-AXIS',
+              })
+            } else if (index === 1) {
+              channelOptions.push({
+                id: 258,
+                channel: 'Y-AXIS',
+              })
+            } else if (index === 2) {
+              channelOptions.push({
+                id: 259,
+                channel: 'Z-AXIS',
+              })
+            } else if (index === 3) {
+              channelOptions.push({
+                id: 260,
+                channel: 'M-AXIS',
+              })
+            }
+          }
+        })
+        this.channelSelectDisableY = false
+      } else if (deviceInfo.library_name.indexOf('Elite') >= 0) {
+        const sourceObj = configTable.getChannelConfig(String(deviceInfo.library_name), deviceInfo.configuration.MODE) // [{id:0 channel:'Current'}, {id:1, channel:'Voltage'}, ]
+        let channelSet
+        if (deviceInfo.library_name.includes('EIS') && (deviceInfo.configuration.MODE === 0 || deviceInfo.configuration.MODE === 5)) {
+          channelSet = ['Zimag_Raw', 'Zreal_Raw', 'Frequency', 'Cycle', 'Zimag', 'Zreal', 'Impedance', 'Phase', 'Current', 'Level gain']
+        } else {
+          channelSet = []
+          const keys = Object.keys(sourceObj)
+          for (let i = 0; i < keys.length; i++) {
+            const item = keys[i]
+            if (sourceObj[item].name !== 'Time' && sourceObj[item].name !== 'Cycle number') {
+              channelSet.push(String(sourceObj[item].name))
+            }
+          }
+        }
+        //  console.log(channelSet)
+        channelSet.forEach((element, index) => {
+          channelOptions.push({
+            id: index + 1,
+            channel: element,
+          })
+        })
+        this.channelSelectDisableY = false
+      } else {
+        this.channelSelectDisableY = true
+      }
+      this.channelSelectY = ''
+      this.channelOptionsY.length = 0
+      this.channelOptionsY = channelOptions
+      this.checkSourceAddStatus()
+    },
+  },
+  methods: {
+    detect (device) {
+      this.$emit('detect', device)
+    },
+    changeDevice (deviceList) {
+      const [oldDevice, newDevice] = deviceList
+      const oldMac = oldDevice
+      const newMac = newDevice
+
+      this.chart.mappingID.length = 0
+      this.chart.mappingID.push(newMac)
+
+      for (const grid of this.chart.grid) {
+        for (const gridSource of this.chart.gridSource[grid.index]) {
+          if (gridSource.xSource.mac_address === oldMac) {
+            gridSource.xSource.mac_address = newMac
+            dataStreamBuffer.register(this.chartID, newMac, gridSource.xSource.channel)
+            dataStreamBuffer.remove(this.chartID, oldMac)
+          }
+          if (gridSource.ySource.mac_address === oldMac) {
+            gridSource.ySource.mac_address = newMac
+            dataStreamBuffer.register(this.chartID, newMac, gridSource.ySource.channel)
+            dataStreamBuffer.remove(this.chartID, oldMac)
+          }
+        }
+      }
+
+      for (const series of this.chart.series) {
+        if (series.xAxisSource[0] === oldMac) {
+          series.xAxisSource[0] = newMac
+          series.data.length = 0
+        }
+        if (series.yAxisSource[0] === oldMac) {
+          series.yAxisSource[0] = newMac
+          series.data.length = 0
+        }
+      }
+    },
+    cancel () {
+      this.showChangeInput = false
+      this.clearSelectOptions()
+    },
+    test (deviceID) {
+      this.$refs.device_modal_ref.initSetting(deviceID)
+      this.$refs.device_modal_ref.show()
+    },
+    getSourceInfo (source) {
+      if (source.name === 'Time') {
+        return 'Time'
+      }
+      if (source.mac_address) {
+        return `${source.mac_address.slice(12, 18)} Channel ${source.channel}`
+      }
+      return ''
+    },
+    updateGridOptions () {
+      this.gridOptions = []
+      for (let i = 0; i < this.chartData[this.chartID].grid.length; i++) {
+        this.gridOptions.push({
+          id: i,
+          value: String(i),
+        })
+      }
+    },
+    channelSelectYChange: function () {
+      this.checkSourceAddStatus()
+    },
+    channelSelectXChange: function () {
+      this.checkSourceAddStatus()
+    },
+    clearSelectOptions: function () {
+      this.channelSelectX = ''
+      this.channelOptionsX = []
+      this.channelSelectY = ''
+      this.channelOptionsY = []
+      this.deviceSelectX = ''
+      this.deviceSelectY = ''
+      this.gridSelection = ''
+    },
+    async addRegisterDeviceChannel (gridIndex) {
+      const deviceXInfo = this.deviceListNew.find(ele => ele.id === this.deviceSelectX.id)
+      const deviceYInfo = this.deviceListNew.find(ele => ele.id === this.deviceSelectY.id)
+      let deviceNameX
+      let deviceNameY
+      const deviceIDX = this.deviceSelectX.id
+      const deviceIDY = this.deviceSelectY.id
+      const channelX = this.channelSelectX.id
+      const channelY = this.channelSelectY.id
+      if (this.deviceSelectX.name.indexOf('Neulive') >= 0) {
+        deviceNameX = 'Neulive'
+      } else if (this.deviceSelectX.name.indexOf('Elite') >= 0) {
+        if (deviceXInfo.library_name.includes('EIS')) {
+          deviceNameX = 'EliteEIS'
+        } else {
+          deviceNameX = 'Elite'
+        }
+      } else if (this.deviceSelectX.name.indexOf('Time') >= 0) {
+        deviceNameX = 'Time'
+      }
+      if (this.deviceSelectY.name.indexOf('Neulive') >= 0) {
+        deviceNameY = 'Neulive'
+      } else if (this.deviceSelectY.name.indexOf('Elite') >= 0) {
+        if (deviceYInfo.library_name.includes('EIS')) {
+          deviceNameY = 'EliteEIS'
+        } else {
+          deviceNameY = 'Elite'
+        }
+      } else if (this.deviceSelectY.name.indexOf('Time') >= 0) {
+        deviceNameY = 'Time'
+      }
+      this.taskContentChartRegister({
+        chartID: this.chartID,
+        gridIndex: gridIndex,
+        deviceNameX: deviceNameX,
+        deviceIDX: deviceIDX,
+        deviceX: deviceXInfo,
+        channelX: channelX,
+        deviceNameY: deviceNameY,
+        deviceIDY: deviceIDY,
+        deviceY: deviceYInfo,
+        channelY: channelY,
+        formula: null,
+      })
+      console.log('deviceSelectX', this.deviceSelectX)
+      if (deviceNameX !== 'Time') {
+        this.sourceList.push([this.deviceSelectX.name, deviceIDX, channelX].toString())
+      }
+      if (deviceNameY !== 'Time') {
+        this.sourceList.push([this.deviceSelectY.name, deviceIDY, channelY].toString())
+      }
+      this.sourceAddStatus = true
+      this.clearSelectOptions()
+      await this.taskContentChartSaveToCache({ controllerID: taskInfo.getTaskInfo().controllerID })
+      this.$emit('addSource')
+    },
+    async addGrid () {
+      this.taskContentChartUpdateGridList({
+        chartID: this.chartID,
+        length: this.chartData[this.chartID].grid.length + 1,
+      })
+      this.updateGridOptions()
+      await this.taskContentChartSaveToCache({ controllerID: taskInfo.getTaskInfo().controllerID })
+    },
+    checkSourceAddStatus () {
+      // if (this.sourceList.indexOf([this.deviceSelectX.name, this.deviceSelectX.id, this.channelSelectX.id].toString()) >= 0) {
+      //   this.error = 'The same source has been selected in a subplot.'
+      //   this.sourceAddStatus = true
+      //   return
+      // }
+      // if (this.sourceList.indexOf([this.deviceSelectY.name, this.deviceSelectY.id, this.channelSelectY.id].toString()) >= 0) {
+      //   this.sourceAddStatus = true
+      //   this.error = 'The same source has been selected in a subplot.'
+      //   return
+      // }
+      // this.error = ''
+      // if (this.gridSelection.id == null) {
+      //   this.sourceAddStatus = true
+      //   return
+      // }
+      // if (this.channelSelectX.id != null && this.channelSelectY.id != null) {
+      //   this.sourceAddStatus = false
+      // } else if (this.channelSelectX.id != null && this.deviceSelectY.id === 'Time') {
+      //   this.sourceAddStatus = false
+      // } else if (this.channelSelectY.id != null && this.deviceSelectX.id === 'Time') {
+      //   this.sourceAddStatus = false
+      // } else {
+      //   this.sourceAddStatus = true
+      // }
+    },
+    removeProduct (product) {
+      this.products = this.products.filter(productToFilter => productToFilter !== product)
+    },
+    async saveGrid () {
+      if (this.gridIndexSave !== 0) {
+        await this.removeGridSource(this.chartID, this.gridIndexSave, this.sourceIndexSave)
+      }
+      console.log('saveGrid', this.gridIndexSave)
+      console.log(this.deviceSelectX, this.deviceSelectY, this.channelSelectX, this.channelSelectY)
+      const deviceXInfo = this.deviceListNew.find(ele => ele.id === this.deviceSelectX.id)
+      const deviceYInfo = this.deviceListNew.find(ele => ele.id === this.deviceSelectY.id)
+      let deviceNameX
+      let deviceNameY
+      const deviceIDX = this.deviceSelectX.id
+      const deviceIDY = this.deviceSelectY.id
+      const channelX = this.channelSelectX.id
+      const channelY = this.channelSelectY.id
+      if (this.deviceSelectX.name.indexOf('Neulive') >= 0) {
+        deviceNameX = 'Neulive'
+      } else if (this.deviceSelectX.name.indexOf('Elite') >= 0) {
+        if (deviceXInfo.library_name.includes('EIS')) {
+          deviceNameX = 'EliteEIS'
+        } else {
+          deviceNameX = 'Elite'
+        }
+      } else if (this.deviceSelectX.name.indexOf('Time') >= 0) {
+        deviceNameX = 'Time'
+      }
+      if (this.deviceSelectY.name.indexOf('Neulive') >= 0) {
+        deviceNameY = 'Neulive'
+      } else if (this.deviceSelectY.name.indexOf('Elite') >= 0) {
+        if (deviceYInfo.library_name.includes('EIS')) {
+          deviceNameY = 'EliteEIS'
+        } else {
+          deviceNameY = 'Elite'
+        }
+      } else if (this.deviceSelectY.name.indexOf('Time') >= 0) {
+        deviceNameY = 'Time'
+      }
+      this.taskContentChartRegister({
+        chartID: this.chartID,
+        gridIndex: this.gridIndexSave,
+        deviceNameX: deviceNameX,
+        deviceIDX: deviceIDX,
+        deviceX: deviceXInfo,
+        channelX: channelX,
+        deviceNameY: deviceNameY,
+        deviceIDY: deviceIDY,
+        deviceY: deviceYInfo,
+        channelY: channelY,
+        formula: null,
+      })
+      console.log('saveGrid', this.chartData)
+      this.sourceAddStatus = true
+      this.clearSelectOptions()
+      await this.taskContentChartSaveToCache({ controllerID: taskInfo.getTaskInfo().controllerID })
+      this.$emit('addSource')
+      this.showChangeInput = false
+    },
+    async removeGridSource (chartID, gridIndex, gridSourceIndex) {
+      await this.taskRemoveGridSource({
+        chartID: chartID,
+        gridIndex: gridIndex,
+        gridSourceIndex: gridSourceIndex,
+      })
+      await this.taskContentChartSaveToCache({ controllerID: taskInfo.getTaskInfo().controllerID })
+    },
+    async changeGridSource (chartID, gridIndex, gridSourceIndex) {
+      this.showChangeInput = true
+      this.gridIndexSave = gridIndex
+      this.sourceIndexSave = gridSourceIndex
+      const gridSource = this.chartData[chartID].gridSource[gridIndex][gridSourceIndex]
+      console.log(gridSource, chartID, gridIndex, gridSourceIndex)
+      if (gridSource.xSource.name === 'Time') {
+        this.deviceSelectX = this.deviceOptions[0]
+      }
+      if (gridSource.ySource.name === 'Time') {
+        this.deviceSelectY = this.deviceOptions[0]
+      }
+      if (gridSource.xSource.name !== 'Time') {
+        const deviceInfoX = this.deviceListNew.find(ele => ele.mac_address === gridSource.xSource.mac_address)
+        this.deviceSelectX = this.deviceOptions.find(ele => ele.id === deviceInfoX.id)
+        const xChannelList = configTable.getChannelConfig(String(deviceInfoX.library_name), deviceInfoX.configuration.MODE) // [{id:0 channel:'Current'}, {id:1, channel:'Voltage'}, ]
+        const xKeys = Object.keys(xChannelList)
+        this.channelOptionsX.length = 0
+        for (let i = 0; i < xKeys.length; i++) {
+          const item = xKeys[i]
+          if (xChannelList[item].name !== 'Time' && xChannelList[item].name !== 'Cycle number') {
+            this.channelOptionsX.push({ id: i + 1, channel: String(xChannelList[item].name) })
+          }
+        }
+        setTimeout(() => {
+          this.channelSelectX = this.channelOptionsX[gridSource.xSource.channel - 1]
+        }, 0)
+      }
+
+      if (gridSource.ySource.name !== 'Time') {
+        const deviceInfoY = this.deviceListNew.find(ele => ele.mac_address === gridSource.ySource.mac_address)
+        this.deviceSelectY = this.deviceOptions.find(ele => ele.id === deviceInfoY.id)
+        const yChannelList = configTable.getChannelConfig(String(deviceInfoY.library_name), deviceInfoY.configuration.MODE) // [{id:0 channel:'Current'}, {id:1, channel:'Voltage'}, ]
+        const yKeys = Object.keys(yChannelList)
+        console.log('ykeys', yKeys)
+        this.channelOptionsY.length = 0
+        for (let i = 0; i < yKeys.length; i++) {
+          const item = yKeys[i]
+          if (yChannelList[item].name !== 'Time' && yChannelList[item].name !== 'Cycle number') {
+            this.channelOptionsY.push({ id: i + 1, channel: String(yChannelList[item].name) })
+          }
+        }
+        console.log(this.channelOptionsY, gridSource.ySource.channel)
+        setTimeout(() => {
+          this.channelSelectY = this.channelOptionsY[gridSource.ySource.channel - 1]
+        }, 0)
+      }
+      console.log(this.channelSelectX, this.channelSelectY)
+      // await this.taskContentChartSaveToCache({ controllerID: taskInfo.getTaskInfo().controllerID })
+    },
+    createNewGridSource (chartID, gridIndex, gridSourceIndex) {
+      console.log('createNewGridSource', gridIndex, gridSourceIndex)
+      this.showChangeInput = true
+      this.gridIndexSave = gridIndex
+      this.sourceIndexSave = gridSourceIndex
+    },
+    async removeGrid (chartID) {
+      if (this.chartData[chartID].grid.length > 1) {
+        await this.taskRemoveGrid({
+          chartID: chartID,
+          gridIndex: this.chartData[chartID].grid.length - 1,
+        })
+      }
+      this.taskContentChartUpdateGridList({
+        chartID: this.chartID,
+        length: this.chartData[this.chartID].grid.length,
+      })
+      this.updateGridOptions()
+      await this.taskContentChartSaveToCache({ controllerID: taskInfo.getTaskInfo().controllerID })
+    },
+
+    ...mapActions('taskContent', [
+      taskTypes.chart.register,
+      taskTypes.chart.updateGridList,
+      taskTypes.chart.saveToCache,
+      taskTypes.chart.removeGridSource,
+      taskTypes.chart.removeGrid,
+    ]),
+  },
+  mounted () {
+    this.updateGridOptions()
+  },
+}
+</script>
@@ -0,0 +1,131 @@
+<template>
+  <div>
+    <va-modal
+      class="flex sm12 xl12 md12 xs12"
+      v-model="showModal"
+      size="small"
+      :noOutsideDismiss="true"
+      hide-default-actions
+    >
+      <template slot="header">
+        <div class="d-flex mb-3">
+          <va-icon name="fa fa-bluetooth-b mr-3" color="primary"/>
+          <h5 class="mt-0 mb-0">Choose Device</h5>
+        </div>
+      </template>
+      <va-list fit class="mb-2 pb-0">
+        <va-list-label>
+          Connect
+        </va-list-label>
+        <va-item v-if="deviceList.length === 0">
+          <va-item-section>
+            There is no connected device.
+          </va-item-section>
+        </va-item>
+        <div v-else v-for="(device, index) in deviceList" :key="'connect-' + index">
+          <va-item   :class="deviceSelect === index ? 'device-list-focus': ''" @click="selectDevice(device, index)" clickable>
+            <va-item-section avatar>
+              <va-avatar style="border-radius: 0;">
+                <img src='@/assets/img/elite_img.png' :alt="device.mac_address">
+              </va-avatar>
+            </va-item-section>
+
+            <va-item-section>
+              {{ device.mac_address }}
+            </va-item-section>
+
+            <va-item-section side>
+              <va-icon name="fa fa-map-marker" color="gray" @click.native="detect(device.mac_address)"/>
+            </va-item-section>
+          </va-item>
+          <!-- <va-list-separator v-if="index < deviceList.length - 1" :key="'separator-' + index" /> -->
+        </div>
+      </va-list>
+      <div class="flex-center sm12 xl12 md12 xs12">
+        <va-button @click="hide">Cancel</va-button>
+        <va-button @click="changeDevice">OK</va-button>
+      </div>
+    </va-modal>
+  </div>
+</template>
+<script>
+import { mapFields } from 'vuex-map-fields'
+
+export default {
+  name: 'device-modal',
+  components: {
+  },
+  computed: {
+    optionDeviceVersion () {
+      return (this.optionDeviceVersionObj[this.device.product.value] !== undefined)
+        ? this.optionDeviceVersionObj[this.device.product.value]
+        : undefined
+    },
+
+    // ...mapGetters('project', [
+    //   types.project.getSelect,
+    //   types.project.getDeviceShowName,
+    // ]),
+
+    ...mapFields('taskContent', [
+      'deviceListNew',
+    ]),
+  },
+  data () {
+    return {
+      showModal: false,
+      showDisplayDevice: false,
+      key: '',
+      device: {},
+      deviceList: [],
+      deviceSelect: -1,
+      oldMac: null,
+    }
+  },
+  methods: {
+    show: function () {
+      this.showModal = true
+    },
+    hide: function () {
+      this.showModal = false
+    },
+    detect: function (device) {
+      if (device) this.$emit('detect', device)
+    },
+    selectDevice: function (device, index) {
+      this.deviceSelect = index
+    },
+    changeDevice: function () {
+      this.$emit('changeDevice', [this.oldMac, this.deviceList[this.deviceSelect].mac_address])
+      this.hide()
+    },
+    removeDevice: function () {
+      this.deleteDeviceProject({ deviceKey: this.key })
+      this.$emit('save')
+      this.hide()
+    },
+    getDeviceList: async function (device) {
+      const deviceList = this.deviceListNew
+      this.deviceList = [...deviceList]
+    },
+    initSetting: function (deviceID) {
+      this.oldMac = deviceID
+      this.deviceList = []
+      this.getDeviceList(deviceID)
+      this.deviceSelect = this.deviceList.findIndex(ele => ele.mac_address === deviceID)
+      this.device = this.deviceList[this.deviceSelect]
+    },
+  },
+  mounted () {
+  },
+}
+</script>
+<style lang="scss">
+  .device-list-focus {
+    background: #ebedff;
+    border: 1px solid #dbdcf0;
+    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
+    border-radius: 5px;
+  }
+
+</style>
@@ -0,0 +1,300 @@
+<template>
+  <div class="px-3 mt-3">
+    <div class="d-flex" style="width: 100%; justify-content: flex-end;">
+      <div style="margin-right: auto; align-self: center;">{{  configName }}</div>
+      <div class="flex d-flex px-0" style="width: 50%; background-color: #efefef; border-radius: 12px;">
+        <div class="d-flex" style="justify-content: space-evenly; border-right: 2.5px white solid;">
+          <div style="height: 32px; display: flex; align-items: center;" @click="showLibrary">
+            <img src="@/assets/icons/library.svg"/>
+          </div>
+          <div style="height: 32px; display: flex; align-items: center;" @click="showModal">
+            <img src="@/assets/icons/add-config.svg"/>
+          </div>
+          <div style="height: 32px; display: flex; align-items: center;" @click="saveConfig">
+            <img src="@/assets/icons/save.svg"/>
+            <div></div>
+          </div>
+          <div style="height: 32px; display: flex; align-items: center;"  @click="showModal">
+            <img src="@/assets/icons/save-as.svg"/>
+          </div>
+        </div>
+        <div class="d-flex" style="justify-content: space-evenly;">
+          <div style="height: 32px; display: flex; align-items: center;" @click="addChart">
+            <img src="@/assets/icons/add-chart.svg"/>
+          </div>
+          <div style="height: 32px; display: flex; align-items: center;" @click="copyChart">
+            <img src="@/assets/icons/copy.svg"/>
+          </div>
+          <div style="height: 32px; display: flex; align-items: center;" @click="reset" >
+            <img src="@/assets/icons/reset.svg"/>
+          </div>
+        </div>
+        <!-- <div class="flex mt-2 ml-2">
+          <va-select
+            width="200px"
+            v-model="chartSelected"
+            textBy="name"
+            :options="chartOptions"
+          ></va-select>
+        </div>
+        <div class="flex mt-1 ml-2">
+          <va-button @click="showModal">NEW</va-button>
+          <va-button @click="saveConfig" v-if="chartSelected && chartSelected.locked === false">SAVE</va-button>
+          <va-button @click="loadConfig">LOAD</va-button>
+          <va-button @click="deleteConfig">DELETE</va-button>
+          <va-button @click="addChart">ADD CHART</va-button>
+        </div> -->
+      </div>
+    </div>
+    <!-- <div>
+      <va-card class="mt-3" style="height: 33vh; background-color: #d9d9d9;">
+        setInterval
+      </va-card>
+    </div> -->
+    <div v-for="(chart) in chartArray" :key="chart.chartID" class="flex lg12 xl12 sm12 xs12 mt-3" style="background-color: #d9d9d9;">
+      <button class="accordion">
+        <div style="display: flex; justify-content: space-between; align-items: center; font-size: 18px;">
+          <div style="display: flex; margin-right: auto;">
+            <input type="checkbox" class="mr-3" @click.stop="handleCheckboxClick(chart.chartID)">
+            <span>{{ chart.cardName }}</span>
+          </div>
+          <div style="display: flex; justify-content: flex-end;"><img class="mr-2" src="@/assets/img/project/whitecross.svg" @click.stop="removeChart(chart.chartID)"/></div>
+          <div>
+          </div>
+        </div>
+      </button>
+      <div class="panel" style="height: 100%;">
+        <CanvasChartSource :chartID="chart.chartID" @detect="detect"></CanvasChartSource>
+        <div class="time"></div>
+      </div>
+    </div>
+    <!-- <div v-for="chart in chartArray" :key="chart.chartID">
+      <div class="row">
+        <div class="flex ml-2">
+          <span style="font-size: 28px; font-weight: 700;">{{chart.cardName}}</span>
+        </div>
+        <div class="flex" style="align-self: center;">
+          <va-button class="pa-0 ma-0 circle-button" small color="dark" @click="removeChart(chart.chartID)">
+            <va-icon
+              name="fa fa-times"
+              color="white"
+            />
+          </va-button>
+        </div>
+      </div>
+      <va-list-separator class="mb-2"/>
+      <div class="pa-2">
+        <CanvasChartSource :chartID="chart.chartID" @detect="detect"></CanvasChartSource>
+      </div>
+    </div> -->
+    <Library :ref="'library_modal_ref'" @loadConfig="loadConfig" @deleteConfig="deleteConfig"></Library>
+    <SaveConfigModal :ref="'save_config_modal_ref'" @confirm="saveChart"></SaveConfigModal>
+  </div>
+</template>
+<script>
+import { mapFields } from 'vuex-map-fields'
+import CanvasChartSource from '../chart/CanvasChartSource1'
+import api from '@/data/api/index'
+import { mapActions } from 'vuex'
+import taskTypes from '@/store/modules/task/content/types'
+import SaveConfigModal from './SaveConfigModal.vue'
+import localforage from 'localforage'
+import Library from './Library.vue'
+
+export default {
+  name: 'configuration',
+  components: {
+    CanvasChartSource,
+    SaveConfigModal,
+    Library,
+  },
+  computed: {
+    chartArray () {
+      if (this.chartInfo === null) return
+      return Object.values(this.chartInfo).sort((a, b) => {
+        if (a.cardName.replace('Chart', '') > b.cardName.replace('Chart', '')) {
+          return 1
+        }
+        if (a.cardName.replace('Chart', '') < b.cardName.replace('Chart', '')) {
+          return -1
+        }
+        return 0
+      })
+    },
+    ...mapFields('taskContent', [
+      'chartData',
+      'deviceListNew',
+      'taskContentChartPanelKey',
+      'taskContentChartNumber',
+    ]),
+    ...mapFields('', [
+      'controllerID',
+    ]),
+  },
+  data () {
+    return {
+      chartInfo: null,
+      saveName: '',
+      chartOptions: [],
+      chartSelected: {},
+      configName: '',
+      selectedConfigID: -1,
+      checkboxSelect: [],
+    }
+  },
+  methods: {
+    handleCheckboxClick: function (index) {
+      const selectIndex = this.checkboxSelect.indexOf(index)
+      if (selectIndex === -1) {
+        this.checkboxSelect.push(index)
+      } else {
+        this.checkboxSelect.splice(selectIndex, 1)
+      }
+    },
+    reset: async function () {
+      this.$emit('reset')
+      this.selectedConfigID = -1
+      this.configName = ''
+      await localforage.setItem('chartConfig_' + this.controllerID, null)
+    },
+    showLibrary: function () {
+      this.$refs.library_modal_ref.showModal = true
+      this.$refs.library_modal_ref.configArray = this.chartOptions
+      this.$refs.library_modal_ref.chartSelectedID = this.chartOptions.findIndex(ele => ele.id === this.selectedConfigID)
+    },
+    detect: function (device) {
+      this.$emit('detect', device)
+    },
+    addChart: function () {
+      this.$emit('add')
+    },
+    copyChart: function () {
+      this.$emit('copy', this.checkboxSelect)
+    },
+    removeChart: function (chartID) {
+      this.$emit('remove', chartID)
+    },
+    showModal: function () {
+      this.$refs.save_config_modal_ref.show()
+    },
+    saveChart: async function (info) {
+      const [name, locked] = info
+      const newConfig = await api.configuration.create({ name: name, locked: locked, data: this.removeSeriesDataFromChart() })
+      if (newConfig.status === 200) {
+        this.chartOptions.push(newConfig.data)
+        this.selectedConfigID = newConfig.data.id
+        this.configName = newConfig.data.name
+        await localforage.setItem('chartConfig_' + this.controllerID, this.selectedConfigID)
+      }
+    },
+    removeSeriesDataFromChart: function () {
+      const newChartData = JSON.parse(JSON.stringify(this.chartData))
+      for (const data in newChartData) {
+        newChartData[data].series = []
+      }
+      return newChartData
+    },
+    saveConfig: async function () {
+      await api.configuration.update(this.selectedConfigID, { data: this.chartData })
+    },
+    loadConfig: async function (index) {
+      this.chartSelected = this.chartOptions[index].data
+      this.configName = this.chartOptions[index].name
+      this.selectedConfigID = this.chartOptions[index].id
+      // if (this.chartSelected.id) {
+      this.chartData = JSON.parse(JSON.stringify(this.chartOptions[index].data))
+
+      if (Object.keys(this.chartData).length > 0) {
+        for (const _chart of Object.values(this.chartData)) {
+          _chart.legend.data.length = 0
+          for (let gridIndex = 0; gridIndex < _chart.grid.length; gridIndex++) {
+            if (gridIndex in _chart.gridSource) {
+              this.taskContentChartRegisterFromCache({
+                chartID: _chart.chartID,
+                gridIndex: gridIndex,
+                gridSource: _chart.gridSource[gridIndex],
+              })
+            }
+          }
+        }
+      }
+      await localforage.setItem('chartConfig_' + this.controllerID, this.selectedConfigID)
+      this.updateChart()
+      this.$nextTick(() => {
+        this.buildAccordingBlock()
+      })
+      // }
+    },
+    deleteConfig: async function (id) {
+      await api.configuration.update(id, { deleted: true })
+      await api.configuration.clearDel()
+      this.chartOptions = this.chartOptions.filter(ele => ele.id !== id)
+      this.chartSelected = {}
+    },
+    updateChart: function () {
+      this.chartInfo = Object.assign({}, this.chartData)
+      this.taskContentChartPanelKey++
+    },
+    buildAccordingBlock: function () {
+      const acc = document.getElementsByClassName('accordion')
+      for (let i = 0; i < acc.length; i++) {
+        const accrodingHandler = function () {
+          this.classList.toggle('active')
+          var panel = this.nextElementSibling
+          if (panel.style.display === 'block') {
+            panel.style.display = 'none'
+          } else {
+            panel.style.display = 'block'
+          }
+        }
+        if (!acc[i].classList.contains('set-event')) {
+          acc[i].addEventListener('click', accrodingHandler)
+        }
+        acc[i].classList.add('set-event')
+      }
+    },
+    ...mapActions('taskContent', [
+      taskTypes.chart.registerFromCache,
+    ]),
+  },
+  async mounted () {
+    setTimeout(() => {
+      this.buildAccordingBlock()
+    }, 1000)
+
+    const chartList = await api.configuration.get({})
+    this.chartOptions.push(...chartList.data)
+
+    const configID = await localforage.getItem('chartConfig_' + this.controllerID)
+    window.setTimeout(() => {
+      if (configID !== null) {
+        const configIndex = this.chartOptions.findIndex(ele => ele.id === configID)
+        if (configIndex >= 0) {
+          this.loadConfig(configIndex)
+        }
+      }
+    }, 500)
+  },
+  watch: {
+  },
+}
+</script>
+<style>
+.accordion {
+  background-color: #d9d9d9;
+  cursor: pointer;
+  width: 100%;
+  border: none;
+  text-align: left;
+  outline: none;
+  font-size: 15px;
+  transition: 0.4s;
+}
+
+.panel {
+  padding: 18px 18px;
+  display: none;
+  background-color: #d9d9d9;
+  overflow: hidden;
+}
+</style>
@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <va-modal
+      class="flex sm12 xl12 md12 xs12"
+      v-model="showModal"
+      size="small"
+      :title="'Save Config'"
+      :okText=" $t('modal.confirm') "
+      @ok="loadConfig"
+      @cancel="undo"
+    >
+      <va-list>
+        <va-item v-for="(config, i) in configArray" :class="(chartSelectedID === i) ? 'config-focus': ''" :key="i">
+          <va-item-section @click.native="selectConfig(config,i)">
+            {{ config.name }}
+          </va-item-section>
+          <va-item-section style="cursor: pointer;" @click.native.stop="deleteConfig(config, i)" side><img class="mr-2" src="@/assets/img/project/delete14_14.svg"/></va-item-section>
+        </va-item>
+      </va-list>
+    </va-modal>
+  </div>
+</template>
+<script>
+export default {
+  name: 'library-modal',
+  components: {
+  },
+  props: {
+    // configArray: {
+    //   type: [Array],
+    //   default: () => {
+    //     return []
+    //   },
+    // },
+  },
+  data () {
+    return {
+      showModal: false,
+      inputValue: '',
+      lock: false,
+      chartSelectedID: -1,
+      configArray: [],
+    }
+  },
+  methods: {
+    confirm: function () {
+      this.$emit('confirm', [this.inputValue, this.lock])
+    },
+    undo: function () {
+      this.inputValue = ''
+    },
+    show: function () {
+      this.showModal = true
+    },
+    hide: function () {
+      this.showModal = false
+    },
+    deleteConfig: function (config, i) {
+      this.$emit('deleteConfig', config.id)
+      this.configArray.splice(i, 1)
+    },
+    loadConfig: function () {
+      this.$emit('loadConfig', this.chartSelectedID)
+    },
+    selectConfig: function (config, index) {
+      this.chartSelectedID = index
+    },
+  },
+}
+</script>
+<style>
+  .config-focus {
+    background: #ebedff;
+    border: 1px solid #dbdcf0;
+    -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
+    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
+    border-radius: 5px;
+  }
+</style>
@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <va-modal
+      class="flex sm12 xl12 md12 xs12"
+      v-model="showModal"
+      size="small"
+      :title="'Save Config'"
+      :okText=" $t('modal.confirm') "
+      @ok="confirm"
+      @cancel="undo"
+    >
+      <va-input
+        v-model="inputValue"
+        removable
+      />
+      <va-checkbox v-model="lock">
+        <template slot="label">
+          Lock
+        </template>
+      </va-checkbox>
+    </va-modal>
+  </div>
+</template>
+<script>
+export default {
+  name: 'save-config-modal',
+  components: {
+  },
+  data () {
+    return {
+      showModal: false,
+      inputValue: '',
+      lock: false,
+    }
+  },
+  methods: {
+    confirm: function () {
+      this.$emit('confirm', [this.inputValue, this.lock])
+      this.inputValue = ''
+    },
+    undo: function () {
+      this.inputValue = ''
+    },
+    show: function () {
+      this.showModal = true
+    },
+    hide: function () {
+      this.showModal = false
+    },
+  },
+}
+</script>
@@ -94,7 +94,7 @@ export default {
      })

      for (const device of this.deviceListNew) {
-        this.$emit('add', device.memory_board)
+        this.$emit('add', [device.mac_address, device.memory_board])
      }
    },
    startDevice: async function (device) {
@@ -0,0 +1,52 @@
+import api from './index'
+import auth from './auth'
+
+async function create (attrs) {
+  const _header = auth.getHeader()
+
+  try {
+    return await api.axios.post('/api/configuration/create', attrs, { headers: _header })
+  } catch (e) {
+    console.error(e)
+    return false
+  }
+}
+
+async function update (id, attrs) {
+  const _header = auth.getHeader()
+  try {
+    return await api.axios.post(`/api/configuration/update/${id}`, attrs, { headers: _header })
+  } catch (e) {
+    console.error(e)
+    return false
+  }
+}
+
+async function clearDel () {
+  const _header = auth.getHeader()
+  try {
+    return await api.axios.get('/api/configuration/clear_deleted', { headers: _header })
+  } catch (e) {
+    console.error(e)
+    return false
+  }
+}
+
+async function get (id) {
+  const _header = auth.getHeader()
+  try {
+    return await api.axios.get('/api/configuration/get', { headers: _header })
+  } catch (e) {
+    console.error(e)
+    return false
+  }
+}
+
+const collection = {
+  create,
+  update,
+  clearDel,
+  get,
+}
+
+export default collection
@@ -11,6 +11,7 @@ import analysis from './analysis'
 import sdcard from './sdcard'
 import connection from './connection'
 import project from './project'
+import configuration from './configuration'

 // axios.defaults.baseURL = 'http://192.168.3.211:3000'
 axios.defaults.baseURL = 'http://' + location.href.split('/')[2].split(':')[0] + ':3000'
@@ -29,6 +30,7 @@ const api = {
  sdcard,
  connection,
  project,
+  configuration,
 }

 export default api
@@ -48,11 +48,11 @@ export const download = {

      while (rawDataIDList.length >= 1000) {
        const _rawDataIDList = rawDataIDList.splice(0, 1000)
-        const _data = await api.raw.getAttrByIDs(channelID, _rawDataIDList, 'id-channel-size-serial_number-start_time-end_time-data')
-        prevLastTime = await this.parseRawData(_data.data, prevLastTime, meta, result[channelID])
+        const _data = await api.raw.getAttrByIDs(channelID, _rawDataIDList, 'id-channel-size-serial_number-start_time-end_time-data-bytea_data')
+        prevLastTime = await this.parseByteData(_data.data, prevLastTime, meta, result[channelID])
      }
-      const _data = await api.raw.getAttrByIDs(channelID, rawDataIDList, 'id-channel-size-serial_number-start_time-end_time-data')
-      prevLastTime = await this.parseRawData(_data.data, prevLastTime, meta, result[channelID])
+      const _data = await api.raw.getAttrByIDs(channelID, rawDataIDList, 'id-channel-size-serial_number-start_time-end_time-data-bytea_data')
+      prevLastTime = await this.parseByteData(_data.data, prevLastTime, meta, result[channelID])
    }
    return result
  },
@@ -62,8 +62,8 @@ export const download = {
    result[channelID] = []

    const prevLastTime = 0
-    const _data = await api.raw.getAttrByIDs(channelID, list, 'id-channel-size-serial_number-start_time-end_time-data')
-    await this.parseRawData(_data.data, prevLastTime, meta, result[channelID])
+    const _data = await api.raw.getAttrByIDs(channelID, list, 'id-channel-size-serial_number-start_time-end_time-data-bytea_data')
+    await this.parseByteData(_data.data, prevLastTime, meta, result[channelID])
    return result
  },
  getMiniExistOrNotByID: async function (id, channel) {
@@ -73,7 +73,7 @@ export const download = {
  rawByIDChannels: async function (id, channel, meta) {
    const data = []
    const rawData = await api.raw.getByID(channel, id)
-    await this.parseRawData(rawData.data, null, meta, data)
+    await this.parseByteData(rawData.data, null, meta, data)
    return data
  },
  rawSdDataByIDChannels: async function (id, channel, meta) {
@@ -90,6 +90,20 @@ export const download = {
    const rawData = await api.mini.getByID(channel, id)
    return await this.parseMiniData(rawData, 'data_random', meta)
  },
+  parseByteData: async function (rawData, prevLastTime, meta, dataArray) {
+    for (const raw of rawData) {
+      const bytesData = new Int8Array(raw.bytea_data.data)
+      const integers = []
+      for (let i = 0; i < bytesData.length; i += 8) {
+        // Create a DataView for each 8-byte chunk
+        const view = new DataView(bytesData.buffer, i, 8)
+        // Read the integer as BigInt (assuming little-endian byte order)
+        const integer = view.getBigInt64(0)
+        integers.push(integer)
+      }
+      prevLastTime = this.parseDataWithTimeStamp(integers, prevLastTime, meta, dataArray)
+    }
+  },
  parseRawData: async function (rawData, prevLastTime, meta, dataArray) {
    for (const raw of rawData) {
      if (raw.data !== null && raw.data.length > 0) {
@@ -188,7 +202,7 @@ export const download = {

        if (meta !== undefined) {
          if (time <= parseInt(meta.time_duration)) {
-            const data = currentData[i + 1]
+            const data = parseInt(currentData[i + 1])
            const tmpData = [time, data]
            dataArray.push(tmpData)
          }
@@ -4,6 +4,7 @@ function newChart (chartID, numOfCharts) {
    chartType: 'detail',
    chartDevice: 'elite', // elite or neulive
    chartMode: 0,
+    order: -1,
    chartXUnit: '',
    chartYUnit: '',
    chartXMode: 'value', // value or time
@@ -11,7 +12,7 @@ function newChart (chartID, numOfCharts) {
    cardName: 'Chart' + String(numOfCharts),
    cardHeight: '500px',
    cardWidth: 'auto',
-    mappingID: '-1',
+    mappingID: [],
    createdBy: '', // manual ror default
    run: false,
    timer: 0,
@@ -22,6 +22,7 @@ function newState () {
    licenseCheck: true,
    developerMode: false,
    controller: null,
+    controllerID: null,
  }
 }

@@ -6,7 +6,6 @@ import newSeries from '@/factories/chart/seriesFactory'
 import { dataStreamBuffer } from '@/data/task/DataStreamBuffer'
 import { taskInfo } from '@/data/task/TaskInfo'
 import global_ from '@/data/global/global'
-import localforage from 'localforage'

 import { IIRFilter } from '@/data/task/filter/IIRFilter.js'

@@ -20,45 +19,46 @@ const chartActs = {
   *
  **/
  [typePath.initCustomizedFromCache]: async ({ state, getters, commit, dispatch }, payload) => {
-    const { controllerID } = payload
-    const cacheData = await localforage.getItem('chart_data_' + controllerID)
-    if (cacheData !== null) {
-      // use ID to create new chart by cache
-      for (const _chart of Object.values(cacheData)) {
-        dispatch(typePath.add, {
-          chartID: _chart.chartID,
-          maxDots: _chart.maxDots,
-          gridLength: _chart.grid.length,
-        })
-        for (let gridIndex = 0; gridIndex < _chart.grid.length; gridIndex++) {
-          if (gridIndex in _chart.gridSource) {
-            dispatch(typePath.registerFromCache, {
-              chartID: _chart.chartID,
-              gridIndex: gridIndex,
-              gridSource: _chart.gridSource[gridIndex],
-            })
-          }
-        }
-        state.chartData[_chart.chartID].createdBy = 'manual'
-      }
-      dispatch(typePath.refreshPanel)
-    }
+    // const { controllerID } = payload
+    // const cacheData = await localforage.getItem('chart_data_' + controllerID)
+    // if (cacheData !== null) {
+    //   // use ID to create new chart by cache
+    //   for (const _chart of Object.values(cacheData)) {
+    //     dispatch(typePath.add, {
+    //       chartID: _chart.chartID,
+    //       maxDots: _chart.maxDots,
+    //       gridLength: _chart.grid.length,
+    //     })
+    //     for (let gridIndex = 0; gridIndex < _chart.grid.length; gridIndex++) {
+    //       if (gridIndex in _chart.gridSource) {
+    //         dispatch(typePath.registerFromCache, {
+    //           chartID: _chart.chartID,
+    //           gridIndex: gridIndex,
+    //           gridSource: _chart.gridSource[gridIndex],
+    //         })
+    //       }
+    //     }
+    //     state.chartData[_chart.chartID].mappingID = _chart.mappingID
+    //     state.chartData[_chart.chartID].createdBy = 'manual'
+    //   }
+    //   dispatch(typePath.refreshPanel)
+    // }
  },
  /**
   * set chartData to cache (cache will only record non-default chart)
   *
   */
  [typePath.saveToCache]: async ({ state, getters, commit, dispatch }, payload) => {
-    const { controllerID } = payload
-    const _chartData = {}
-    for (const [_id, _chart] of Object.entries(state.chartData)) {
-      // manual chart clear series data
-      if (_chart.createdBy === 'manual') {
-        _chartData[_id] = JSON.parse(JSON.stringify(_chart))
-        _chartData[_id].series.map((ele) => { ele.data.length = 0 })
-      }
-    }
-    await localforage.setItem('chart_data_' + controllerID, _chartData)
+    // const { controllerID } = payload
+    // const _chartData = {}
+    // for (const [_id, _chart] of Object.entries(state.chartData)) {
+    //   // manual chart clear series data
+    //   if (_chart.createdBy === 'manual') {
+    //     _chartData[_id] = JSON.parse(JSON.stringify(_chart))
+    //     _chartData[_id].series.map((ele) => { ele.data.length = 0 })
+    //   }
+    // }
+    // await localforage.setItem('chart_data_' + controllerID, _chartData)
  },
  /*
   * add chartID to chartData
@@ -91,16 +91,18 @@ const chartActs = {
    const { chartID, gridIndex, gridSource } = payload
    // one gridSource may have multiple axis (i.e. 疊圖)
    gridSource.forEach(grid => {
-      const xAxisInfo = parseGridSourceAxis(grid.xAxis)
-      const yAxisInfo = parseGridSourceAxis(grid.yAxis)
+      const xAxisInfo = parseGridSourceAxis(grid.xSource)
+      const yAxisInfo = parseGridSourceAxis(grid.ySource)
      dispatch(typePath.register, {
        chartID: chartID,
        gridIndex: gridIndex,
        deviceNameX: xAxisInfo.deviceName,
        deviceIDX: xAxisInfo.deviceID,
+        deviceX: xAxisInfo,
        channelX: xAxisInfo.channel,
        deviceNameY: yAxisInfo.deviceName,
        deviceIDY: yAxisInfo.deviceID,
+        deviceY: yAxisInfo,
        channelY: yAxisInfo.channel,
        formula: null,
      })
@@ -121,16 +123,17 @@ const chartActs = {
   * @return {object} : new registered chart
   */
  [typePath.register]: ({ state, getters, commit, dispatch }, payload) => {
-    const { chartID, gridIndex, deviceNameX, deviceIDX, channelX, deviceNameY, deviceIDY, channelY, formula } = payload
+    const { chartID, gridIndex, deviceNameX, deviceIDX, deviceX, channelX, deviceNameY, deviceIDY, deviceY, channelY, formula } = payload
+    console.log('register', chartID, gridIndex, deviceNameX, deviceIDX, deviceX, channelX, deviceNameY, deviceIDY, deviceY, channelY, formula)
    const sourceList = [
      {
        name: deviceNameX,
-        id: deviceIDX,
+        mac_address: (deviceX) ? deviceX.mac_address : deviceX,
        channel: channelX,
      },
      {
        name: deviceNameY,
-        id: deviceIDY,
+        mac_address: (deviceY) ? deviceY.mac_address : deviceY,
        channel: channelY,
      },
    ]
@@ -156,11 +159,11 @@ const chartActs = {
      switch (sourceList[0].name) {
        case 'Time':
          xAxisType = 'time'
-          xAxisSource = [-1, -1]
+          xAxisSource = ['Time', 'Time']
          break
        default:
          xAxisType = 'value'
-          xAxisSource = [sourceList[0].id, sourceList[0].channel]
+          xAxisSource = [sourceList[0].mac_address, sourceList[0].channel]
          break
      }
      switch (sourceList[1].name) {
@@ -170,7 +173,7 @@ const chartActs = {
          break
        default:
          yAxisType = 'value'
-          yAxisSource = [sourceList[1].id, sourceList[1].channel]
+          yAxisSource = [sourceList[1].mac_address, sourceList[1].channel]
          break
      }
    } else {
@@ -227,11 +230,11 @@ const chartActs = {

    // register series
    const _series = newSeries('line', legendName, _xAxisIndex, _yAxisIndex, xAxisSource, yAxisSource, formula, formulaSource)
-    const _seriesIndex = state.chartData[chartID].series.length
+    // const _seriesIndex = state.chartData[chartID].series.length
    state.chartData[chartID].series.push(_series)

-    state.chartData[chartID].xAxis[_xAxisIndex].seriesIndex.push(_seriesIndex)
-    state.chartData[chartID].yAxis[_yAxisIndex].seriesIndex.push(_seriesIndex)
+    // state.chartData[chartID].xAxis[_xAxisIndex].seriesIndex.push(_seriesIndex)
+    // state.chartData[chartID].yAxis[_yAxisIndex].seriesIndex.push(_seriesIndex)

    // state.chartData[chartID].xAxis[_xAxisIndex].boundaryGap = [0, '5%']
    // state.chartData[chartID].yAxis[_yAxisIndex].boundaryGap = [0, '10%']
@@ -239,165 +242,6 @@ const chartActs = {
    // console.log(state.chartData[chartID])
    // set xAxis format
    // TODO: need to get the time unit for the CanvasChart
-    if (sourceList[0].name === 'Time') {
-      state.chartData[chartID].xAxis[_xAxisIndex].axisLabel.formatter = function (val) {
-        return getTimeFormatter(val)
-      }
-      // state.chartData[chartID].xAxis[_xAxisIndex].interval = 500 * 1000
-    } else if (sourceList[0].name === 'Elite') {
-      // state.chartData[chartID].series[state.chartData[chartID].series.length - 1].sampling = false
-      switch (sourceList[0].channel) {
-        case 1:
-          state.chartData[chartID].xAxis[_xAxisIndex].axisLabel.formatter = function (val) {
-            return parseFloat(val / 1000).toFixed(2) + 'uA'
-          }
-          state.chartData[chartID].chartXUnit = 'uA' // nA * 1000
-          break
-        case 2:
-          state.chartData[chartID].xAxis[_xAxisIndex].axisLabel.formatter = function (val) {
-            return parseFloat(val / 1000).toFixed(2) + 'mV'
-          }
-          state.chartData[chartID].chartXUnit = 'mV' // uV * 1000
-          break
-        case 3:
-          state.chartData[chartID].xAxis[_xAxisIndex].axisLabel.formatter = function (val) {
-            return parseFloat(val / 1000).toFixed(2) + 'Ω'
-          }
-          state.chartData[chartID].chartXUnit = 'Ω' // mOhm * 1000
-          break
-        default:
-          break
-      }
-    } else if (sourceList[0].name.includes('EIS')) {
-      switch (sourceList[0].channel) {
-        case 3:
-          state.chartData[chartID].xAxis[_xAxisIndex].axisLabel.formatter = function (val) {
-            return val + 'mHz'
-          }
-          state.chartData[chartID].chartXUnit = 'mHz' // nA * 1000
-          break
-        case 4:
-          state.chartData[chartID].xAxis[_xAxisIndex].axisLabel.formatter = function (val) {
-            return val + 'cycle'
-          }
-          state.chartData[chartID].chartXUnit = 'cycle' // nA * 1000
-          break
-        case 8:
-          state.chartData[chartID].xAxis[_xAxisIndex].axisLabel.formatter = function (val) {
-            return val + '˚'
-          }
-          state.chartData[chartID].chartXUnit = '˚' // nA * 1000
-          break
-        case 9:
-          state.chartData[chartID].xAxis[_xAxisIndex].axisLabel.formatter = function (val) {
-            return val + 'nA'
-          }
-          state.chartData[chartID].chartXUnit = 'nA'
-          break
-        default:
-          state.chartData[chartID].xAxis[_xAxisIndex].axisLabel.formatter = function (val) {
-            return val + 'ohm'
-          }
-          state.chartData[chartID].chartXUnit = 'ohm'
-          break
-      }
-    }
-
-    // set yAxis format
-    if (sourceList[1].name === 'Neulive') {
-      const AcceleratorS = taskInfo.getDeviceInfo(sourceList[1].id).parameterSet.ACCELERATOR_S
-      let scaleRange
-      switch (AcceleratorS) {
-        case 0:
-          scaleRange = 200
-          break
-        case 1:
-          scaleRange = 400
-          break
-        case 2:
-          scaleRange = 800
-          break
-        case 3:
-          scaleRange = 1600
-          break
-        default:
-          break
-      }
-
-      if (parseInt(sourceList[1].channel) >= 257 && parseInt(sourceList[1].channel) <= 260) {
-        if (parseInt(sourceList[1].channel) === 260) {
-          state.chartData[chartID].yAxis[_yAxisIndex].min = 0
-          state.chartData[chartID].yAxis[_yAxisIndex].max = Math.ceil(Math.sqrt(Math.pow(scaleRange, 2) * 3))
-        } else {
-          state.chartData[chartID].yAxis[_yAxisIndex].min = -scaleRange
-          state.chartData[chartID].yAxis[_yAxisIndex].max = scaleRange
-        }
-        state.chartData[chartID].yAxis[_yAxisIndex].axisLabel.formatter = function (val) {
-          return parseFloat(val / 100) + 'g'
-        }
-      } else {
-        state.chartData[chartID].yAxis[_yAxisIndex].axisLabel.formatter = function (val) {
-          return parseFloat(val).toFixed(2) + 'uV'
-        }
-      }
-      state.chartData[chartID].chartYUnit = 'uV'
-    } else if (sourceList[1].name === 'Elite') {
-      switch (sourceList[1].channel) {
-        case 1:
-          state.chartData[chartID].yAxis[_yAxisIndex].axisLabel.formatter = function (val) {
-            return parseFloat(val / 1000).toFixed(2) + 'uA'
-          }
-          state.chartData[chartID].chartYUnit = 'uA' // nA * 1000
-          break
-        case 2:
-          state.chartData[chartID].yAxis[_yAxisIndex].axisLabel.formatter = function (val) {
-            return parseFloat(val / 1000).toFixed(2) + 'mV'
-          }
-          state.chartData[chartID].chartYUnit = 'mV' // uV * 1000
-          break
-        case 3:
-          state.chartData[chartID].yAxis[_yAxisIndex].axisLabel.formatter = function (val) {
-            return parseFloat(val / 1000).toFixed(2) + 'Ω'
-          }
-          state.chartData[chartID].chartYUnit = 'Ω' // mOhm * 1000
-          break
-        default:
-          break
-      }
-    } else if (sourceList[1].name.includes('EIS')) {
-      switch (sourceList[1].channel) {
-        case 3:
-          state.chartData[chartID].yAxis[_yAxisIndex].axisLabel.formatter = function (val) {
-            return val + 'mHz'
-          }
-          state.chartData[chartID].chartYUnit = 'mHz' // nA * 1000
-          break
-        case 4:
-          state.chartData[chartID].yAxis[_yAxisIndex].axisLabel.formatter = function (val) {
-            return val + 'cycle'
-          }
-          state.chartData[chartID].chartYUnit = 'cycle' // nA * 1000
-          break
-        case 8:
-          state.chartData[chartID].yAxis[_yAxisIndex].axisLabel.formatter = function (val) {
-            return val + '˚'
-          }
-          state.chartData[chartID].chartYUnit = '˚' // nA * 1000
-          break
-        case 9:
-          state.chartData[chartID].yAxis[_yAxisIndex].axisLabel.formatter = function (val) {
-            return val + 'nA'
-          }
-          state.chartData[chartID].chartYUnit = 'nA'
-          break
-        default:
-          state.chartData[chartID].yAxis[_yAxisIndex].axisLabel.formatter = function (val) {
-            return val + 'ohm'
-          }
-          state.chartData[chartID].chartYUnit = 'ohm'
-          break
-      }
-    }

    // register series into grid
    const _axisList = []
@@ -419,31 +263,18 @@ const chartActs = {
            _axisList.push(_axis + ' AXIS = NEULIVE ' + source.id + ' CHANNEL ' + source.channel)
            break
          case 'Elite':
-            dataStreamBuffer.register(chartID, source.id, source.channel)
-            switch (source.channel) {
-              case 1:
-                _axisList.push(_axis + ' AXIS = ELITE ' + source.id + ' CURRENT')
-                break
-              case 2:
-                _axisList.push(_axis + ' AXIS = ELITE ' + source.id + ' VOLTAGE')
-                break
-              case 3:
-                _axisList.push(_axis + ' AXIS = ELITE ' + source.id + ' RESISTANCE')
-                break
-              default:
-                _axisList.push(_axis + ' AXIS = ELITE ' + source.id + ' CHANNEL ' + source.channel)
-                break
-            }
+            dataStreamBuffer.register(chartID, source.mac_address, source.channel)
+            _axisList.push(_axis + ' AXIS = ELITE ' + source.id + ' CHANNEL ' + source.channel)
            break
          case 'EliteEIS':
            // eslint-disable-next-line no-case-declarations
-            const device = state.deviceListNew.find((ele) => String(ele.memory_board) === String(source.id))
-            if (device === undefined) break
-            if (Number(device.configuration.MODE) === 0 || Number(device.configuration.MODE) === 5) {
-              state.chartData[chartID].series[state.chartData[chartID].series.length - 1].showSymbol = true
-              state.chartData[chartID].series[state.chartData[chartID].series.length - 1].showAllSymbol = true
-            }
-            dataStreamBuffer.register(chartID, source.id, source.channel)
+            // const device = state.deviceListNew.find((ele) => String(ele.memory_board) === String(source.id))
+            // if (device === undefined) break
+            // if (Number(device.configuration.MODE) === 0 || Number(device.configuration.MODE) === 5) {
+            //   state.chartData[chartID].series[state.chartData[chartID].series.length - 1].showSymbol = true
+            //   state.chartData[chartID].series[state.chartData[chartID].series.length - 1].showAllSymbol = true
+            // }
+            dataStreamBuffer.register(chartID, source.mac_address, source.channel)
            switch (source.channel) {
              case 1:
                _axisList.push(_axis + ' AXIS = ELITEEIS ' + source.id + ' CHANNEL ' + source.channel)
@@ -454,7 +285,7 @@ const chartActs = {
            }
            break
          default:
-            dataStreamBuffer.register(chartID, source.id, source.channel)
+            dataStreamBuffer.register(chartID, source.mac_address, source.channel)
            _axisList.push(_axis + ' AXIS = DEVICE ' + source.id + ' CHANNEL ' + source.channel)
            break
        }
@@ -469,8 +300,8 @@ const chartActs = {

    const _gridSeries = {
      name: legendName,
-      xAxis: _axisList[0],
-      yAxis: _axisList[1],
+      // xAxis: _axisList[0],
+      // yAxis: _axisList[1],
      xSource: sourceArray[0],
      ySource: sourceArray[1],
    }
@@ -482,11 +313,15 @@ const chartActs = {
    }

    // assign mappingID with device ID
-    if (deviceIDX >= 0) {
-      state.chartData[chartID].mappingID = deviceIDX
+    if (deviceX) {
+      if (state.chartData[chartID].mappingID.indexOf(deviceX.mac_address) === -1 && deviceX.mac_address) {
+        state.chartData[chartID].mappingID.push(deviceX.mac_address)
+      }
    }
-    if (deviceIDY >= 0) {
-      state.chartData[chartID].mappingID = deviceIDY
+    if (deviceY) {
+      if (state.chartData[chartID].mappingID.indexOf(deviceY.mac_address) === -1 && deviceY.mac_address) {
+        state.chartData[chartID].mappingID.push(deviceY.mac_address)
+      }
    }
    return state.chartData[chartID]
  },
@@ -498,7 +333,7 @@ const chartActs = {
   */
  [typePath.updateGridList]: ({ state, getters, commit, dispatch }, payload) => {
    const { chartID, length } = payload
-    state.chartData[chartID].grid = []
+    state.chartData[chartID].grid.length = 0
    for (let i = 0; i < length; i++) {
      state.chartData[chartID].grid.push(makeGrid(i, length))
    }
@@ -622,10 +457,10 @@ const chartActs = {
          }
        }
      } else {
-        if (series.xAxisSource[0] === -1 && series.yAxisSource[0] === -1) {
+        if (series.xAxisSource[0] === 'Time' && series.yAxisSource[0] === 'Time') {
          return false
        }
-        if (series.xAxisSource[0] === -1 || series.yAxisSource[0] === -1) {
+        if (series.xAxisSource[0] === 'Time' || series.yAxisSource[0] === 'Time') {
          // x axis is time, y axis is value, so only need a device-channel data stream
          let popData = []

@@ -634,7 +469,7 @@ const chartActs = {
          const rawDeviceIDY = series.yAxisSource[0]

          // pop data
-          if (series.xAxisSource[0] === -1) {
+          if (series.xAxisSource[0] === 'Time') {
            popData = dataStreamBuffer.pop(chartID, rawDeviceIDY, series.yAxisSource[1])
          } else {
            popData = dataStreamBuffer.pop(chartID, rawDeviceIDX, series.xAxisSource[1])
@@ -650,7 +485,7 @@ const chartActs = {
            })
            const _popTime = data.time
            // series data is empty or popdata time > last series data time
-            if (series.xAxisSource[0] === -1) {
+            if (series.xAxisSource[0] === 'Time') {
              if (_popTime < 0) {
                series.data.push([])
              } else {
@@ -681,11 +516,11 @@ const chartActs = {

          // series data list shift by time
          if (series.data.length > 0) {
-            if (series.xAxisSource[0] === -1) {
+            if (series.xAxisSource[0] === 'Time') {
              if (series.data.length > state.chartData[chartID].maxDots) {
                series.data.splice(0, series.data.length - state.chartData[chartID].maxDots)
              }
-            } else if (series.yAxisSource[0] === -1) {
+            } else if (series.yAxisSource[0] === 'Time') {
              if (series.data.length > state.chartData[chartID].maxDots) {
                series.data.splice(0, series.data.length - state.chartData[chartID].maxDots)
              }
@@ -694,7 +529,7 @@ const chartActs = {

          // axis shift
          if (series.data.length > 0) {
-            if (series.xAxisSource[0] === -1) {
+            if (series.xAxisSource[0] === 'Time') {
              state.chartData[chartID].xAxis[series.xAxisIndex].max = series.data[series.data.length - 1][0]
              state.chartData[chartID].xAxis[series.xAxisIndex].min = series.data[0][0]
            } else {
@@ -712,7 +547,6 @@ const chartActs = {
          if (rawDeviceIDX == null || rawDeviceIDY == null) {
            return false
          }
-
          if (dataStreamBuffer.getByChartID(chartID)[rawDeviceIDX][series.xAxisSource[1]].length === 0 &&
              dataStreamBuffer.getByChartID(chartID)[rawDeviceIDY][series.yAxisSource[1]].length === 0) {
            // all of buffer is empty
@@ -857,85 +691,28 @@ const chartActs = {
      if (device.library_name.includes('Elite')) {
        const setting = global_.getDefaultChartTypeByMode(device.configuration.MODE, device.library_name)
        const xType = setting[0]
-        const xValue = setting[1]
+        let xValue = setting[1]
        const yType = setting[2]
-        const yValue = setting[3]
+        let yValue = setting[3]
+        const xDevice = xType === 'Time' ? undefined : device
+        const yDevice = yType === 'Time' ? undefined : device
+        if (xType === 'Time') xValue = 'Time'
+        if (yType === 'Time') yValue = 'Time'
        dispatch(typePath.register, {
          chartID: chartID,
          gridIndex: 0,
          deviceNameX: xType,
          deviceIDX: device.id,
+          deviceX: xDevice,
          channelX: xValue,
          deviceNameY: yType,
          deviceIDY: device.id,
+          deviceY: yDevice,
          channelY: yValue,
          formula: null,
        })
        state.chartData[chartID].chartDevice = 'elite'
        state.chartData[chartID].chartMode = device.configuration.MODE
-        if (device.library_name.includes('EIS')) {
-          switch (xValue) {
-            case 3:
-              state.chartData[chartID].chartXUnit = 'mHz'
-              break
-            case 4:
-              state.chartData[chartID].chartXUnit = 'cycle'
-              break
-            case 8:
-              state.chartData[chartID].chartXUnit = '˚'
-              break
-            case 9:
-              state.chartData[chartID].chartXUnit = 'nA'
-              break
-            default:
-              state.chartData[chartID].chartXUnit = 'ohm'
-              break
-          }
-          switch (yValue) {
-            case 3:
-              state.chartData[chartID].chartYUnit = 'mHz'
-              break
-            case 4:
-              state.chartData[chartID].chartYUnit = 'cycle'
-              break
-            case 8:
-              state.chartData[chartID].chartYUnit = '˚'
-              break
-            case 9:
-              state.chartData[chartID].chartYUnit = 'nA'
-              break
-            default:
-              state.chartData[chartID].chartYUnit = 'ohm'
-              break
-          }
-        } else {
-          switch (xValue) {
-            case 1:
-              state.chartData[chartID].chartXUnit = 'uA' // nA * 1000
-              break
-            case 2:
-              state.chartData[chartID].chartXUnit = 'mV' // uV * 1000
-              break
-            case 3:
-              state.chartData[chartID].chartXUnit = 'Ω' // mOhm * 1000
-              break
-            default:
-              break
-          }
-          switch (yValue) {
-            case 1:
-              state.chartData[chartID].chartYUnit = 'uA'
-              break
-            case 2:
-              state.chartData[chartID].chartYUnit = 'mV'
-              break
-            case 3:
-              state.chartData[chartID].chartYUnit = 'Ω'
-              break
-            default:
-              break
-          }
-        }
      }
    }

@@ -980,7 +757,7 @@ const chartActs = {
      let isSetting = false

      for (const chartID in state.chartData) {
-        if (state.chartData[chartID].mappingID === item.id) {
+        if (state.chartData[chartID].mappingID.includes(item.mac_address)) {
          if (state.chartData[chartID].createdBy === 'default') {
            isSetting = true
            dispatch(typePath.reset, {
@@ -989,7 +766,6 @@ const chartActs = {
              cardName: state.chartData[chartID].cardName,
              reset: _reset,
            })
-            state.chartData[chartID].mappingID = item.id
            switch (_type) {
              case 'device':
                _chartRegisterDevice(chartID, item)
@@ -1028,7 +804,7 @@ const chartActs = {
      state.chartData[chartID].series.length = 0
    }
    if (mappingID == null) {
-      state.chartData[chartID].mappingID = '-1'
+      state.chartData[chartID].mappingID = []
    }
    if (cardName == null) {
      state.chartData[chartID].cardName = 'Chart' + String(chartID)
@@ -1082,10 +858,83 @@ const chartActs = {
    // to avoid overflow
    state.taskContentChartPanelKey < 1000 ? state.taskContentChartPanelKey++ : state.taskContentChartPanelKey = 0
  },
+  [typePath.removeGridSource]: async ({ state, getters, commit, dispatch }, payload) => {
+    const { chartID, gridIndex, gridSourceIndex } = payload
+
+    const gridSource = state.chartData[chartID].gridSource[gridIndex][gridSourceIndex]
+    if (gridSource === undefined) return
+    // remove series
+    const seriesIndex = state.chartData[chartID].series.findIndex((val) => {
+      return val.name === gridSource.name
+    })
+    state.chartData[chartID].series.splice(seriesIndex, 1)
+    // remove legend
+    state.chartData[chartID].legend.data = state.chartData[chartID].legend.data.filter((val) => {
+      return val !== gridSource.name
+    })
+    // remove xAxis, yAxis seriesIndex
+    // state.chartData[chartID].xAxis[gridIndex].seriesIndex = state.chartData[chartID].xAxis[gridIndex].seriesIndex.filter((val) => {
+    //   console.log(val, seriesIndex, val !== seriesIndex)
+    //   return val !== seriesIndex
+    // })
+    // state.chartData[chartID].yAxis[gridIndex].seriesIndex = state.chartData[chartID].yAxis[gridIndex].seriesIndex.filter(ele => ele !== seriesIndex)
+    // remove gridsource
+    state.chartData[chartID].gridSource[gridIndex].splice(gridSourceIndex, 1)
+    state.chartData[chartID].gridSource = JSON.parse(JSON.stringify(state.chartData[chartID].gridSource))
+    checkMappingID(state.chartData[chartID])
+  },
+  [typePath.removeGrid]: async ({ state, getters, commit, dispatch }, payload) => {
+    const { chartID, gridIndex } = payload
+    // remove all grid source & series
+    if (state.chartData[chartID].gridSource[gridIndex]) {
+      for (const gridSource in state.chartData[chartID].gridSource[gridIndex]) {
+        await dispatch(typePath.removeGridSource, {
+          chartID: chartID,
+          gridIndex: gridIndex,
+          gridSourceIndex: gridSource,
+        })
+      }
+    }
+
+    state.chartData[chartID].xAxis.splice(gridIndex, 1)
+    state.chartData[chartID].yAxis.splice(gridIndex, 1)
+    state.chartData[chartID].grid.splice(gridIndex, 1)
+    console.log('removeGrid!!!!', state.chartData[chartID])
+  },
+  [typePath.reLegendName]: async ({ state, getters, commit, dispatch }, payload) => {
+    const { chartID } = payload
+    // remove all grid source & series
+    getLegendName(state.chartData[chartID].sourceList, null, state.deviceListNew)
+  },
 }

 export default chartActs

+function checkMappingID (chart) {
+  // check id is need to remove or not
+  const idList = [...chart.mappingID]
+  for (const id of idList) {
+    const result = checkGridSource(chart, id)
+    if (result === false) {
+      chart.mappingID = chart.mappingID.filter(ele => ele !== id)
+    }
+  }
+}
+
+function checkGridSource (chart, deviceID) {
+  for (const grid of chart.grid) {
+    for (const gridSource of chart.gridSource[grid.index]) {
+      if (gridSource.xSource.mac_address === deviceID) {
+        return true
+      }
+      if (gridSource.ySource.mac_address === deviceID) {
+        return true
+      }
+    }
+  }
+  return false
+}
+
 function parseGridSourceAxis (gridSourceAxis) {
  // gridsource axis example:
  //    'X AXIS = TIME'
@@ -1095,36 +944,46 @@ function parseGridSourceAxis (gridSourceAxis) {
    deviceID: '',
    channel: '',
  }
-
-  const eliteChannel = ['CURRENT', 'VOLTAGE', 'RESISTANCE']
-
-  const parseResult = gridSourceAxis.split(' = ')[1].split(' ')
-  const _deviceName = parseResult[0]
-  if (_deviceName === 'TIME') {
+  if (gridSourceAxis.name === 'Time') {
    deviceInfo.deviceName = 'Time'
-    deviceInfo.deviceID = -1
-    deviceInfo.channel = undefined
+    deviceInfo.deviceID = 'Time'
+    deviceInfo.channel = 'Time'
  } else {
-    switch (_deviceName) {
-      case 'NEULIVE':
-        deviceInfo.deviceName = 'Neulive'
-        deviceInfo.deviceID = parseResult[1]
-        deviceInfo.channel = parseInt(parseResult[3])
-        break
-      case 'ELITE':
-        deviceInfo.deviceName = 'Elite'
-        deviceInfo.deviceID = parseResult[1]
-        deviceInfo.channel = eliteChannel.indexOf(parseResult[2]) + 1
-        break
-      case 'ELITEEIS':
-        deviceInfo.deviceName = 'EliteEIS'
-        deviceInfo.deviceID = parseResult[1]
-        deviceInfo.channel = Number(parseResult[3])
-        break
-      default:
-        break
-    }
+    deviceInfo.deviceName = gridSourceAxis.name
+    deviceInfo.deviceID = gridSourceAxis.id
+    deviceInfo.channel = Number(gridSourceAxis.channel)
+    deviceInfo.mac_address = gridSourceAxis.mac_address
  }
+
+  // const eliteChannel = ['CURRENT', 'VOLTAGE', 'RESISTANCE']
+
+  // const parseResult = gridSourceAxis.split(' = ')[1].split(' ')
+  // const _deviceName = parseResult[0]
+  // if (_deviceName === 'TIME') {
+  //   deviceInfo.deviceName = 'Time'
+  //   deviceInfo.deviceID = 'Time'
+  //   deviceInfo.channel = 'Time'
+  // } else {
+  //   switch (_deviceName) {
+  //     case 'NEULIVE':
+  //       deviceInfo.deviceName = 'Neulive'
+  //       deviceInfo.deviceID = parseResult[1]
+  //       deviceInfo.channel = parseInt(parseResult[3])
+  //       break
+  //     case 'ELITE':
+  //       deviceInfo.deviceName = 'Elite'
+  //       deviceInfo.deviceID = parseResult[1]
+  //       deviceInfo.channel = eliteChannel.indexOf(parseResult[2]) + 1
+  //       break
+  //     case 'ELITEEIS':
+  //       deviceInfo.deviceName = 'EliteEIS'
+  //       deviceInfo.deviceID = parseResult[1]
+  //       deviceInfo.channel = Number(parseResult[3])
+  //       break
+  //     default:
+  //       break
+  //   }
+  // }
  return deviceInfo
 }

@@ -1239,25 +1098,25 @@ function getLegendName (sourceList, formulaID, deviceList) {
          break
        case 'Elite':
          // eslint-disable-next-line no-case-declarations
-          device = deviceList.find((ele) => String(ele.memory_board) === String(source.id))
+          device = deviceList.find((ele) => String(ele.mac_address) === String(source.mac_address))
          if (device === undefined) break
          // eslint-disable-next-line no-case-declarations
          channelName = getConfigChannel(device.library_name, device.configuration.MODE, source.channel - 1)
          if (!channelName) break
-          legendName += 'E' + source.id + '-' + channelName.name.replace('_', '')
+          legendName += source.mac_address.slice(12, 18) + '-' + channelName.name.replace('_', '')
          break
        case 'EliteEIS':
          // eslint-disable-next-line no-case-declarations
-          device = deviceList.find((ele) => String(ele.memory_board) === String(source.id))
+          device = deviceList.find((ele) => String(ele.mac_address) === String(source.mac_address))
          if (device === undefined) break
          // eslint-disable-next-line no-case-declarations
          channelName = getConfigChannel(device.library_name, device.configuration.MODE, source.channel - 1)
          if (!channelName) break
          if ([0, 5].indexOf(Number(device.configuration.MODE)) !== -1) {
-            legendName += 'E' + source.id + '-' + channelName.name.split('_').join('')
+            legendName += source.mac_address.slice(12, 18) + '-' + channelName.name.replace('_', '')
            break
          }
-          legendName += 'E' + source.id + '-' + channelName.name.replace('_', '')
+          legendName += source.mac_address.slice(12, 18) + '-' + channelName.name.replace('_', '')
          break
        default:
          legendName += 'D' + source.id + 'CH' + source.channel
@@ -0,0 +1,18 @@
+import types from '@/store/modules/task/content/types'
+
+const typePath = types.device
+
+const deviceGet = {
+  [typePath.get]: (state) => (deviceOption) => {
+    const { macAddress, memoryBoard } = deviceOption
+    if (macAddress) {
+      return state.deviceListNew.find(device => device.mac_address === macAddress)
+    }
+    if (memoryBoard) {
+      return state.deviceListNew.find(device => Number(device.memory_board) === Number(memoryBoard))
+    }
+    return null
+  },
+}
+
+export default deviceGet
@@ -1,5 +1,7 @@
 import { getField } from 'vuex-map-fields'
+import deviceGet from './deviceGet'

 export default {
+  ...deviceGet,
  getField,
 }
@@ -13,6 +13,11 @@ const types = {
    refreshData: 'taskContentChartRefreshData',
    refreshChart: 'taskContentChartRefreshChart',
    refreshPanel: 'taskContentChartRefreshPanel',
+    removeGridSource: 'taskRemoveGridSource',
+    removeGrid: 'taskRemoveGrid',
+  },
+  device: {
+    get: 'getDevice',
  },
  param: {
    checkIfRecordingSetDone: 'checkIfRecordingSetDoneParam',
Author	SHA1	Message	Date
peterlu14	1d6d8aef19	refactor: refactor data handling, parsing, and comparison methods - Change the way to handle downloaded data, by adding 'bytea_data' to the attributes fetched and going through byte data instead of regular data - Add a 'parseByteData' method to replace the previous 'parseRawData' method - Ensure data normalization by parsing the downloaded data into integers - The change applies to both online and offline downloading - Minor update in timestamp comparison operation, with data parsed to integer before being compared. Signed-off-by: peterlu14 <peterlu810516@gmail.com>	2024-01-23 15:48:22 +08:00
peterlu14	4f13ea68e7	Merge branch 'dev/trigger' into dev/new_configuration	2023-12-15 12:05:19 +08:00
peterlu14	5e761d68b4	feat: refine UI behavior and enhance test compatibility - Clear input value after confirming in the SaveConfigModal component - Add a check for undefined grid source before removing series in chart actions Signed-off-by: peterlu14 <peterlu810516@gmail.com>	2023-12-15 11:59:53 +08:00
peterlu14	bcbe2b94b5	feat: improve configuration management and chart data handling - Add `save.svg` and `whitecross.svg` icons to the project assets - Implement a `copy` function in `TaskContent.vue` to copy selected charts and their data streams - Update conditions for creating and removing grid sources in `CanvasChartSource1.vue` - Add the config name display and individual config deletion functionality in the configuration module - Include a new function in `Configuration.vue` to remove stored chart data - Change the save icon reference in the configuration module, and handle deletion of a selected config - Modification in `Configuration.vue` and `Library.vue` to load a selected configuration from the config array, and highlight the selected one in the libraries - Improve user experience by providing visual cues for action by changing the background color for selected config. Overall, these changes mostly involve updates to handling configuration and chart data within the project, as well as some user interface improvements for better user experience.	2023-12-15 11:56:16 +08:00
peterlu14	0fab677729	- replace chart source with a new style and function	2023-12-08 11:55:05 +08:00
peterlu14	2ae9c4716a	feat: "Enhance task content and configuration components functionality" - Added the `reset` function to the task content component to remove all existing charts and generate default charts - Added the `copy` function to the task content component for copying configuration - Updated UI layout of the configuration component to be more responsive and interactive - Implemented checkbox functionality to the configuration component - Included the `buildAccordingBlock` method to handle accordion interaction in the configuration component - Moved `loadConfig` method handling to the `Library` component - Added a new `Library` component to load saved configurations - Added new styles to the `Configuration` component to improve the user interface - Replaced the `CanvasChartSource` import in `Configuration` component. Signed-off-by: peterlu14 <peterlu810516@gmail.com>	2023-12-07 17:36:34 +08:00
peterlu14	cc96798671	chore: "Add new SVG icons to assets" - Added 'add-chart' SVG icon to the assets - Added 'add-config' SVG icon to the assets - Added 'copy' SVG icon to the assets - Added 'library' SVG icon to the assets - Added 'reset' SVG icon to the assets - Added 'save-as' SVG icon to the assets	2023-12-07 17:32:01 +08:00
peterlu14	1e602052ab	- create configuration - subplot more flexable - reorder chart - TODO rename legend	2023-05-11 15:10:06 +08:00
peterlu14	dc3635190a	- change chart reference by mem to mac_address - remove gridSource - remove grid - remove useless code	2023-04-26 17:48:15 +08:00