Discover: SidebarFilter Trace table done.

src/components/Discover/Filter/Trace.vue

@@ -1,8 +1,7 @@
 <template>
-<div class="flex justify-between items-start bg-neutral-10 border border-neutral-300 rounded-xl px-4 w-full h-full">
+<div class="flex justify-between items-start bg-neutral-10 border border-neutral-300 rounded-xl px-4 w-full h-full space-x-4 overflow-y-auto overflow-x-auto scrollbar">
-
     <!-- Range Selection -->
-    <section class="py-2 space-y-2 text-sm w-1/2 h-full">
+    <section class="py-2 space-y-2 text-sm min-w-[48%] h-full">
       <p class="h2">Range Selection</p>
       <div class="text-primary h2 flex items-center justify-start">
         <span class="material-symbols-outlined mr-2 text-base">info</span>
@@ -10,7 +9,7 @@
       </div>
       <Chart type="bar" :data="chartData" :options="chartOptions" class="h-2/5" />
       <div class="px-2">
-        <p class="py-2">Select percentage of case <span class=" float-right">{{ caseTotalPercent }}%</span></p>
+        <p class="py-4">Select percentage of case <span class=" float-right">{{ caseTotalPercent }}%</span></p>
         <Slider v-model="selectArea" :step="1" :min="1" :max="traceTotal" range class="mx-2" />
       </div>
       <!-- @change="chartData = setChartData(traceList)" -->
@@ -19,13 +18,13 @@
       {{ selectArea }}
     </section>
     <!-- Trace List -->
-    <section class="h-full py-2 space-y-2">
+    <section class="h-full min-w-[48%] py-2 space-y-2">
       <p class="h2">Trace List ({{ traceTotal }})</p>
       <p class="text-primary h2 flex items-center justify-start">
         <span class="material-symbols-outlined mr-2 text-base">info</span>Click trace number to see more.
       </p>
       <div class="overflow-y-scroll overflow-x-hidden scrollbar mx-[-8px] max-h-[calc(100%_-_96px)]" >
-        <table class="border-separate border-spacing-x-2 text-sm">
+        <table class="border-separate border-spacing-x-2 text-sm w-full">
           <thead class="sticky top-0 z-10 bg-neutral-10">
             <tr>
               <th class="h2 px-2 border-b border-neutral-500">Trace</th>
@@ -34,21 +33,21 @@
           </thead>
           <tbody>
             <tr v-for="(trace, key) in traceList" :key="key" class=" cursor-pointer hover:text-primary" @click="switchCaseData(trace.id)">
-              <td class="p-2">#{{ trace.id }}</td>
+              <td class="p-2 text-center">#{{ trace.id }}</td>
-              <td class="p-2 w-24">
+              <td class="p-2 min-w-[96px]">
                 <div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
                   <div class="h-full bg-primary" :style="progressWidth(trace.value)"></div>
                 </div>
               </td>
               <td class="py-2 text-right">{{ trace.count }}</td>
-              <td class="p-2">{{ trace.ratio }}%</td>
+              <td class="p-2 text-right">{{ trace.ratio }}%</td>
             </tr>
           </tbody>
         </table>
       </div>
     </section>
     <!-- Trace item Table -->
-    <section v-show="showTraceId" class="pl-4 h-full w-[calc(100%_-_320px)]">
+    <section v-show="showTraceId" class="pl-4 h-full min-w-full">
       <p class="h2 mb-2">Trace #{{ showTraceId }}</p>
       <div class="h-52 w-full px-2 mb-2 border border-neutral-300 rounded">
         <div class="h-full w-full">
@@ -56,7 +55,7 @@
         </div>
       </div>
       <div class="overflow-y-auto overflow-x-auto scrollbar h-[calc(100%_-_264px)]">
-        <DataTable :value="cases" showGridlines tableClass="text-sm">
+        <DataTable :value="cases" showGridlines tableClass="text-sm" breakpoint="0">
           <Column field="id" header="Case ID" sortable></Column>
           <Column field="started_at" header="Start time" sortable></Column>
           <Column field="completed_at" header="End time" sortable></Column>
@@ -112,7 +111,6 @@ export default {
       let lastDigit = str[str.length - 1]; // 取得小數點後的第一位數字
 
       return lastDigit === '0' ? sum.toFixed(0) : sum.toFixed(1)
-      // return sum.toFixed(1);
     },
     chartData: function() {
       const start = this.selectArea[0]-1;
@@ -335,7 +333,6 @@ export default {
     this.setNodesData();
     this.setEdgesData();
     this.createCy();
-    // this.chartData = this.barData();
     this.chartOptions = this.barOptions();
     // this.chartData = this.setChartData();
     // this.chartOptions = this.setChartOptions();
@@ -345,10 +342,6 @@ export default {
 </script>
 
 <style scoped>
-/* 進度條顏色 */
-:deep(.p-progressbar .p-progressbar-value) {
-  @apply !bg-primary
-}
 /* Table set */
 :deep(.p-datatable-thead th) {
   @apply sticky top-0 left-0 z-10 bg-neutral-10

src/components/Discover/SidebarTraces.vue

@@ -42,7 +42,7 @@
           </div>
         </div>
         <div class="overflow-y-auto overflow-x-auto scrollbar h-[calc(100%_-_264px)]">
-          <DataTable :value="cases" showGridlines tableClass="text-sm">
+          <DataTable :value="cases" showGridlines tableClass="text-sm" breakpoint="0">
             <Column field="id" header="Case ID" sortable></Column>
             <Column field="started_at" header="Start time" sortable></Column>
             <Column field="completed_at" header="End time" sortable></Column>