- change text style

- change tumor size
- fixed empty data error
- fixed shapes & annotation refresh problem
- fixed only one marker color problem
- change x-axis dtick

src/pages/analysis/Subject.vue

@@ -50,9 +50,9 @@
       <!-- Plot-->
       <div ref="plotlyChart" class="w-[100%] landscape:w-[80%] h-[30%] landscape:h-[85%] mt-2 z-10"></div>
       <div class="text-end place-self-start hidden landscape:flex">
-        <!-- <select v-model="baseLineX">
+        <select v-model="baseLineX">
           <option v-for="(x, index) in xData" :key="index">{{ x }}</option>
-        </select> -->
+        </select>
       </div>
       <!-- Data Result-->
       <div class="w-[100%] landscape:w-[30%] h-[30%] landscape:h-[70%] landscape:pl-3 mt-3">
@@ -265,15 +265,6 @@
   const percentData = reactive([])
   const textData = reactive([])
   let checkTumorSize = reactive([])
-  // console.log('subject', subjectSelected.value)
-  // const growthData = reactive([
-  //   0.67263, 0.67263, 1.53461208, 1.74728938, 2.7302583, 3.36458719, 4.3081338, 4.1906, 5.26868954, 6.2317325, 7.001045,
-  //   8.3432375, 10.5073775, 12.1595225,
-  // ])
-  let regressionData = reactive([
-    0.67263, 0.67263, 1.38714708, 1.58016238, 2.4975913, 3.16469019, 4.0623588, 4.093485, 4.120475, 4.287125, 4.518455,
-    4.7833625, 5.214161, 5.309976418,
-  ])
 
   const baseLineIndex = ref(0)
   const baseLineX = ref(null)
@@ -407,23 +398,15 @@
       xData.push(day + 1)
     }
 
-    const data = regressionData.map((ele) => {
-      if (ele <= 4.1) {
-        return Math.round((10 * (ele - 0.67263)) / 0.03277) / 10
+    const data = yData.map((ele) => {
+      const relativeImpedance = ele / yData[0]
+      if (relativeImpedance >= 0.9611649) {
+        return Math.max(0, Math.round((relativeImpedance - 0.99269) / -0.000315251))
       } else {
-        return Math.round((10 * (ele - 3.12635)) / 0.00825) / 10
+        return Math.round((relativeImpedance - 0.96567) / -0.0000762321)
       }
     })
 
-    // const data = yData.map((ele) => {
-    //   const relativeImpedance = ele / yData[0]
-    //   if (relativeImpedance >= 0.9611649) {
-    //     return Math.max(0, Math.round((relativeImpedance - 0.99269) / -0.000315251))
-    //   } else {
-    //     return Math.round((relativeImpedance - 0.96567) / -0.0000762321)
-    //   }
-    // })
-
     textData.push(...data)
     checkTumorSize = data.map((ele) => {
       if (firstFlag === false) {
@@ -447,7 +430,7 @@
     console.log('baseLineIndex.value', baseLineIndex.value)
     Plotly.restyle(plotlyChart.value, createNewMarker(yData, baseLineIndex.value))
     const update = {
-      'xaxis.range': [0, 15],
+      'xaxis.range': [0, xData.length + 1],
     }
     Plotly.relayout(plotlyChart.value, update)
     const tickPoint = checkTumorSize.findIndex((ele) => ele === true)
@@ -600,18 +583,6 @@
   const selectSubject = async function (idx: number) {
     console.log('selectSubject', idx)
     subjectSelected.value = idx
-    if (idx === 0) {
-      regressionData = [
-        0.67263, 0.67263, 1.38714708, 1.58016238, 2.4975913, 3.16469019, 4.0623588, 4.1090196, 4.120475, 4.287125,
-        4.518455, 4.7833625, 5.214161, 5.309976418,
-      ]
-    }
-    if (idx === 1) {
-      regressionData = [
-        0.67263, 0.67263, 1.53461208, 1.74728938, 2.7302583, 3.36458719, 4.0906, 4.48347, 5.26868954, 6.2317325,
-        7.001045, 8.3432375, 10.5073775, 12.1595225,
-      ]
-    }
     await initData()
   }
 
@@ -637,14 +608,12 @@
     const data = [
       {
         x: xData,
-        y: textData,
-        // y: regressionData,
-        // text: textData,
+        y: percentData,
+        text: textData,
         line: {
           color: 'rgb(241, 164, 161)',
         },
-        hovertemplate: '<extra></extra>(%{x}, %{y})',
-        // hovertemplate: '<extra></extra>(%{x}, %{y}, %{text})',
+        hovertemplate: '<extra></extra>(%{x}, %{y}, %{text})',
       },
     ]