feat: Compare sidebar layout done.

src/views/Compare/Dashboard/index.vue

@@ -23,11 +23,9 @@
         <article class="w-full h-full overflow-x-hidden overflow-y-auto scrollbar scroll-smooth">
           <section>
             <p class="h2 px-4 border-b border-neutral-900"><span class="material-symbols-outlined mr-2 align-middle">schedule</span>Time Usage</p>
-          </section>
-          <section>
             <ul class="list-disc list-inside px-4 pl-7">
               <li id="cycleTime" class="scroll-smooth">
-                <span class="inline-block py-4">Cycle Efficiency</span>
+                <span class="inline-block py-4 text-sm">Cycle Efficiency</span>
                 <ul>
                   <li class="bg-neutral-10 p-1 border border-neutral-300 rounded">
                     <span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.avgCycleEfficiency.title }}</span>
@@ -36,7 +34,7 @@
                 </ul>
               </li>
               <li id="processingTime">
-                <span class="inline-block py-4">Processing Time</span>
+                <span class="inline-block py-4 text-sm">Processing Time</span>
                 <ul>
                   <li class="bg-neutral-10 mb-4 p-1 border border-neutral-300 rounded">
                     <span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.avgProcessTime.title }}</span>
@@ -49,7 +47,7 @@
                 </ul>
               </li>
               <li id="waitingTime">
-                <span class="inline-block py-4">Waiting Time</span>
+                <span class="inline-block py-4 text-sm">Waiting Time</span>
                 <ul>
                   <li class="bg-neutral-10 mb-4 p-1 border border-neutral-300 rounded">
                     <span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.avgWaitingTime.title }}</span>
@@ -64,10 +62,10 @@
             </ul>
           </section>
           <section>
-            <p class="h2 px-4 border-b border-neutral-900"><span class="material-symbols-outlined mr-2 align-middle">moving</span>Frequency</p>
+            <p class="h2 px-4 border-b border-neutral-900 mt-2"><span class="material-symbols-outlined mr-2 align-middle">moving</span>Frequency</p>
             <ul class="list-disc list-inside px-4 pl-7">
               <li id="cases">
-                <span class="inline-block py-4">Number of Cases</span>
+                <span class="inline-block py-4 text-sm">Number of Cases</span>
                 <ul>
                   <li class="bg-neutral-10 mb-4 p-1 border border-neutral-300 rounded">
                     <span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.freq.title }}</span>
@@ -84,14 +82,26 @@
         </article>
       </div>
     </div>
-    <!-- <StatusBar></StatusBar> -->
+
+    <!-- Sidebar: State -->
+    <div class="bg-transparent py-4 w-14 h-screen-main z-10 bottom-0 right-0 absolute">
+      <ul class="flex flex-col justify-center items-center">
+        <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow hover:border-primary" @click="sidebarState = !sidebarState" :class="{'border-primary': sidebarState}" id="iconState">
+          <span class="material-symbols-outlined text-2xl text-neutral-500 hover:text-primary p-1.5" :class="[sidebarState ? 'text-primary' : 'text-neutral-500']">
+            info
+          </span>
+        </li>
+      </ul>
+    </div>
+    <SidebarStates v-model:visible="sidebarState"></SidebarStates>
+
   </main>
 </template>
 <script>
 import { storeToRefs } from 'pinia';
 import LoadingStore from '@/stores/loading.js';
 import PerformanceStore from '@/stores/performance.js';
-// import StatusBar from '@/components/Discover/StatusBar.vue';
+import SidebarStates from '@/components/Compare/SidebarStates.vue';
 import { setLineChartData } from '@/module/setChartData.js';
 import { simpleTimeLabel, followTimeLabel, dateLabel } from '@/module/timeLabel.js';
 import { compareDashboardData } from '@/views/Compare/Dashboard/data.js';
@@ -105,9 +115,9 @@ export default {
 
     return { isLoading, performanceStore, performanceData }
   },
-  // components: {
-  //   StatusBar,
-  // },
+  components: {
+    SidebarStates,
+  },
   data() {
     return {
       timeUsageData: [
@@ -152,6 +162,7 @@ export default {
       casesByTaskHeight: 500,
       colorPrimary: '#0099FF',
       colorSecondary: '#FFAA44',
+      sidebarState: false, // SideBar: Summary
     }
   },
   methods: {
@@ -277,6 +288,9 @@ export default {
             border: {
               color: '#64748b',
             },
+            grid: {
+              tickLength: 0, // 網格是否超過邊線
+            }
           },
           y: {
             beginAtZero: true, // scale 包含 0
@@ -421,7 +435,9 @@ export default {
             border: {
               color: '#64748b',
             },
-
+            grid: {
+              tickLength: 0, // 網格是否超過邊線
+            }
           },
           y: {
             beginAtZero: true, // scale 包含 0
@@ -549,6 +565,7 @@ export default {
             },
             grid: {
               color: '#64748b',
+              tickLength: 0, // 網格是否超過邊線
             },
             border: {
               display:false,
@@ -612,6 +629,7 @@ export default {
     // [{"log_id":695977238},{"filter_id":746150051}]
     // 要判斷資料有無 null,問貓貓是哪個階層 null?
     //  Activity 會有 0, null 的組合嗎?
+    //  Activity 有 j, 無 j ?
 
     // const routeParams = this.$route.params;
     // console.log(routeParams);