- 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

@@ -32,20 +32,23 @@
         <span class="text-xs font-normal text-[#5D5D5D]">{{ description }}</span>
       </div>
       <!-- Image Result-->
-      <div v-if="targetValue < 0" class="w-[100%] h-[20%] landscape:hidden font-roboto text-center">
+      <div
+        v-if="Number(tumorSize) > 100 && Number(tumorSize) < 300"
+        class="w-[100%] h-[20%] landscape:hidden font-roboto text-center"
+      >
         <img class="w-[100px] h-[100px]" src="@/assets/icon/good.jpg" />
         <div class="mt-2">
           <p>Tumor Regression</p>
         </div>
       </div>
-      <div v-if="targetValue >= 0" class="w-[100%] h-[20%] landscape:hidden font-roboto text-center">
+      <div v-if="Number(tumorSize) >= 300" class="w-[100%] h-[20%] landscape:hidden font-roboto text-center">
         <img class="w-[100px] h-[100px]" src="@/assets/icon/bad.jpg" />
         <div class="mt-2">
           <p>Tumor Growth</p>
         </div>
       </div>
       <!-- Plot-->
-      <div ref="plotlyChart" class="w-[100%] landscape:w-[80%] h-[30%] landscape:h-[85%] mt-3 z-10"></div>
+      <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">
           <option v-for="(x, index) in xData" :key="index">{{ x }}</option>
@@ -55,13 +58,13 @@
       <div class="w-[100%] landscape:w-[30%] h-[30%] landscape:h-[70%] landscape:pl-3 mt-3">
         <!-- Image Result-->
         <div class="w-[100%] h-[60%] hidden mb-3 landscape:flex flex-col text-center align-center justify-center">
-          <div v-if="targetValue < 0">
+          <div v-if="Number(tumorSize) > 100 && Number(tumorSize) < 300">
             <img class="w-[75px] h-[75px]" src="@/assets/icon/good.jpg" />
             <div class="mt-2">
               <p>Tumor Regression</p>
             </div>
           </div>
-          <div v-if="targetValue >= 0">
+          <div v-if="Number(tumorSize) >= 300">
             <img class="w-[75px] h-[75px]" src="@/assets/icon/bad.jpg" />
             <div class="mt-2">
               <p>Tumor Growth</p>
@@ -69,7 +72,7 @@
           </div>
         </div>
         <!-- Data-->
-        <div class="w-[100%] h-[75%] landscape:h-[65%] px-[10%] bg-[#F2F2F2] rounded-2xl flex flex-col items-center">
+        <div class="w-[100%] h-[75%] landscape:h-[55%] px-[10%] bg-[#F2F2F2] rounded-2xl flex flex-col items-center">
           <div class="h-[5%]"></div>
           <div class="h-[10%] mt-3">
             <span v-if="style === 0" class="font-barlow text-sm text-color-brown">Compare to {{ baseLineX }}</span>
@@ -80,7 +83,7 @@
           </div>
           <div v-if="style === 1" class="h-[75%] w-[100%]">
             <div
-              class="h-[100%] w-[100%] mt-3 ml-3 font-barlowb font-semibold lg:text-[4rem] text-[2rem] text-center flex"
+              class="h-[100%] w-[100%] mt-3 ml-3 font-barlowb font-semibold lg:text-[4rem] text-[2rem] text-center items-center flex"
             >
               <span>{{ tumorSize }}<span class="lg:text-[2rem] text-[1rem]"> mm³</span></span>
             </div>
@@ -281,17 +284,24 @@
       t: 25,
     },
     xaxis: {
-      title: 'Day',
+      title: {
+        text: 'Day',
+        font: {
+          color: '#5D5D5D',
+          family: 'barlow-bold',
+        },
+      },
       showgrid: false,
       showline: true,
       tickfont: {
         color: '#5D5D5D',
-        family: 'roboto',
+        family: 'barlow-bold',
         size: 16,
       },
       fixedrange: true,
       zeroline: false,
       dtick: 2,
+      linewidth: 1.2,
     },
     yaxis: {
       showgrid: false,
@@ -299,6 +309,8 @@
       showticklabels: false,
       zeroline: false,
       fixedrange: true,
+      range: [-25, 1500],
+      linewidth: 1.2,
     },
     dragmode: 'pan',
     // shapes: [
@@ -381,9 +393,10 @@
         value = subjectData.data
       }
     }
-
-    yData.push(value)
-    xData.push(day + 1)
+    if (value !== null) {
+      yData.push(value)
+      xData.push(day + 1)
+    }
 
     const data = yData.map((ele) => {
       const relativeImpedance = ele / yData[0]
@@ -408,6 +421,10 @@
   }
 
   const reDrawLine = function () {
+    Plotly.relayout(plotlyChart.value, {
+      annotations: [],
+      shapes: [],
+    })
     console.log('baseLineX.value', baseLineX.value)
     baseLineIndex.value = xData.findIndex((ele) => Number(ele) === Number(baseLineX.value))
     console.log('baseLineIndex.value', baseLineIndex.value)
@@ -417,35 +434,38 @@
     }
     Plotly.relayout(plotlyChart.value, update)
     const tickPoint = checkTumorSize.findIndex((ele) => ele === true)
-    Plotly.relayout(plotlyChart.value, {
-      shapes: [
-        {
-          line: {
-            color: '#BEBEBE',
-            dash: 'dash',
+    if (xData.length - 1 >= tickPoint) {
+      Plotly.relayout(plotlyChart.value, {
+        shapes: [
+          {
+            line: {
+              color: '#BEBEBE',
+              dash: 'dash',
+            },
+            type: 'line',
+            yref: 'paper',
+            x0: xData[tickPoint],
+            x1: xData[tickPoint],
+            y0: 0,
+            y1: 0.95,
           },
-          type: 'line',
-          yref: 'paper',
-          x0: xData[tickPoint],
-          x1: xData[tickPoint],
-          y0: 0,
-          y1: 0.95,
-        },
-      ],
-      annotations: [
-        {
-          x: xData[tickPoint],
-          y: 1.1, // Adjust this value to control the distance of the text above the line
-          yref: 'paper',
-          text: 'Treatment Initiation',
-          showarrow: false,
-          font: {
-            size: 14,
-            color: '5D5D5D',
+        ],
+        annotations: [
+          {
+            x: xData[tickPoint],
+            y: 1.1, // Adjust this value to control the distance of the text above the line
+            yref: 'paper',
+            text: 'Treatment Initiation',
+            showarrow: false,
+            font: {
+              size: 14,
+              color: '5D5D5D',
+              family: 'barlow-bold',
+            },
           },
-        },
-      ],
-    })
+        ],
+      })
+    }
     console.log('y', yData[baseLineIndex.value])
   }
   console.log('colorList', colorList)
@@ -462,14 +482,20 @@
     let base = 1 - (value - min) / (max - min)
     console.log('base', base)
     if (base === 1) base = 0.99
+    let diff = (textData[textData.length - 1] - Math.min(textData[0])) / 5
+    if (diff > 100) {
+      diff = Math.round(diff / 100) * 100
+    } else {
+      diff = Math.round(diff / 10) * 10
+    }
+    let color
+    if (xData.length === 1) color = [colorList[2], '0', '1500']
+    else color = [...textData, '1500']
+
     const marker = {
       marker: {
         size: 9,
-        line: {
-          autocolorscale: true,
-          color: newData,
-        },
-        color: newData,
+        color: color,
         colorscale: [
           ['0.0', colorList[0]],
           [base, colorList[1]],
@@ -481,13 +507,14 @@
           //   side: 'left',
           //   text: '(%)',
           // },
+          dtick: 250,
           tickformat: '(',
           outlinewidth: 0,
           thickness: 10,
           ticklabelposition: 'outside',
           tickfont: {
-            color: '#000000',
-            family: 'barlow',
+            color: '#5D5D5D',
+            family: 'barlow-bold',
             size: 12,
           },
           x: -0.15,
@@ -596,7 +623,7 @@
     baseLineIndex.value = 0
     baseLineX.value = xData[baseLineIndex.value]
 
-    layout.xaxis.range = [-0.3, 4]
+    // layout.xaxis.range = [-0.3, 4]
 
     Plotly.newPlot(plotlyChart.value, data, layout, config)
     plotlyChart.value.on('plotly_click', function (data: { points: string | any[] }) {