lucia-frontend/src/components/Discover/Map/SidebarState.vue

<template>
  <Sidebar :visible="sidebarState" :closeIcon="'pi pi-angle-right'" :modal="false" position="right" :dismissable="false" class="!w-[360px]" @hide="hide" @show="show">
    <template #header>
      <ul class="flex space-x-4 pl-4">
        <li class="h1 border-r-2 border-neutral-300 pr-4 cursor-pointer hover:text-neutral-900 hover:duration-700" @click="switchTab('summary')" :class="tab === 'summary'? 'text-neutral-900': ''">Summary</li>
        <li class="h1 border-r-2 border-neutral-300 pr-4 cursor-pointer hover:text-neutral-900 hover:duration-700" @click="switchTab('insight')" :class="tab === 'insight'? 'text-neutral-900': ''">Insight</li>
      </ul>
    </template>
    <!-- header: summary -->
    <div v-if="tab === 'summary'">
      <!-- Stats -->
      <ul class="pb-4 border-b border-neutral-300">
        <li>
          <p class="h2">Cases</p>
          <div class="flex justify-between items-center">
            <div class="w-full mr-8">
              <span class="block text-sm">{{ stats.cases.count.toLocaleString() }} / {{ stats.cases.total.toLocaleString() }}</span>
              <ProgressBar :value="valueCases" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
            </div>
            <span class="block text-primary text-2xl text-right font-medium basis-28">{{ getPercentLabel(stats.cases.ratio) }}</span>
          </div>
        </li>
        <li>
          <p class="h2">Traces</p>
          <div class="flex justify-between items-center">
            <div class="w-full mr-8">
              <span class="block text-sm">{{ stats.traces.count.toLocaleString() }} / {{ stats.traces.total.toLocaleString() }}</span>
              <ProgressBar :value="valueTraces" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
            </div>
            <span class="block text-primary text-2xl text-right font-medium basis-28">{{ getPercentLabel(stats.traces.ratio) }}</span>
          </div>
        </li>
        <li>
          <p class="h2">Activity Instances</p>
          <div class="flex justify-between items-center">
            <div class="w-full mr-8">
              <span class="block text-sm">{{ stats.task_instances.count.toLocaleString() }} / {{ stats.task_instances.total.toLocaleString() }}</span>
              <ProgressBar :value="valueTaskInstances" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
            </div>
            <span class="block text-primary text-2xl text-right font-medium basis-28">{{ getPercentLabel(stats.task_instances.ratio) }}</span>
          </div>
        </li>
        <li>
          <p class="h2">Activities</p>
          <div class="flex justify-between items-center">
            <div class="w-full mr-8">
              <span class="block text-sm">{{ stats.tasks.count.toLocaleString() }} / {{ stats.tasks.total.toLocaleString() }}</span>
              <ProgressBar :value="valueTasks" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300"></ProgressBar>
            </div>
            <span class="block text-primary text-2xl text-right font-medium basis-28">{{ getPercentLabel(stats.tasks.ratio) }}</span>
          </div>
        </li>
      </ul>
      <!-- Log Timeframe -->
      <div class="pt-1 pb-4 border-b border-neutral-300">
        <p class="h2">Log Timeframe</p>
        <p class="text-sm"><span class="px-4">{{ moment(stats.started_at
  ) }}</span>~<span class="px-4">{{ moment(stats.completed_at
  ) }}</span></p>
      </div>
      <!-- Case Duration -->
      <div class="pt-1 pb-4">
        <p class="h2">Case Duration</p>
        <table class="text-sm caseDurationTable">
          <caption class="hidden">Case Duration</caption>
          <th class="hidden"></th>
          <tbody>
            <tr>
              <td>
                <Tag value="MIN" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>
              </td>
              <td>
                {{ timeLabel(stats.case_duration.min)[1] }}
              </td>
              <td>
                {{ timeLabel(stats.case_duration.min)[2] }}
              </td>
            </tr>
            <tr>
              <td>
                <Tag value="AVG" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>
              </td>
              <td>
                {{ timeLabel(stats.case_duration.average)[1] }}
              </td>
              <td>
                {{ timeLabel(stats.case_duration.average)[2] }}
              </td>
            </tr>
            <tr>
              <td>
                <Tag value="MED" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>
              </td>
              <td>
                {{ timeLabel(stats.case_duration.median)[1] }}
              </td>
              <td>
                {{ timeLabel(stats.case_duration.median)[2] }}
              </td>
            </tr>
            <tr>
              <td>
                <Tag value="MAX" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>
              </td>
              <td>
                {{ timeLabel(stats.case_duration.max)[1] }}
              </td>
              <td>
                {{ timeLabel(stats.case_duration.max)[2] }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <!-- header: insight -->
    <div v-if="tab === 'insight'">
      <div class="border-b-2 border-neutral-300 mb-4">
        <p class="h2">Most Frequent</p>
        <ul class="list-disc ml-6 mb-2 text-sm space-y-1">
          <li>Activity:&nbsp;
            <span class="text-primary break-words" v-for="(value, key) in insights.most_freq_tasks" :key="key">{{ value }}<span v-if="key !== insights.most_freq_tasks.length - 1" class="text-neutral-900">,&nbsp;</span>
            </span>
          </li>
          <li>Inbound connections:&nbsp;
            <span class="text-primary break-words" v-for="(value, key) in insights.most_freq_in" :key="key">{{ value }}<span v-if="key !== insights.most_freq_in.length - 1" class="text-neutral-900">,&nbsp;</span>
            </span>
          </li>
          <li>Outbound connections:&nbsp;
            <span class="text-primary break-words" v-for="(value, key) in insights.most_freq_out" :key="key">{{ value }}<span v-if="key !== insights.most_freq_out.length - 1" class="text-neutral-900">,&nbsp;</span>
            </span>
          </li>
        </ul>
        <p class="h2">Most Time-Consuming</p>
        <ul class="list-disc ml-6 mb-4 text-sm space-y-1">
          <li class="w-full">Activity:&nbsp;
            <span class="text-primary break-words" v-for="(value, key) in insights.most_time_tasks" :key="key">{{ value }}<span v-if="key !== insights.most_time_tasks.length - 1" class="text-neutral-900">,&nbsp;</span>
            </span>
          </li>
          <li>Connection:&nbsp;
            <span class="text-primary break-words" v-for="(item, key) in insights.most_time_edges" :key="key">
              <span v-for="(value, index) in item" :key="index">{{ value }}<span v-if="index !== item.length - 1">&nbsp;<span class="material-symbols-outlined !text-lg align-sub ">arrow_forward</span>&nbsp;</span>
              </span><span v-if="key !== insights.most_time_edges.length - 1" class="text-neutral-900">,&nbsp;</span>
            </span>
          </li>
        </ul>
      </div>
      <div>
        <ul class="text-neutral-500 grid grid-cols-2 gap-2 text-center text-sm font-medium mb-2">
          <li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="active1 = 0" :class="active1 === 0? 'text-primary border-primary':''">Self-Loop</li>
          <li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="active1 = 1" :class="active1 === 1? 'text-primary border-primary':''">Short-Loop</li>
          <li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="active1 = 2" :class="active1 === 2? 'text-primary border-primary':''">Shortest Trace</li>
          <li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="active1 = 3" :class="active1 === 3? 'text-primary border-primary':''">Longest Trace</li>
          <li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="active1 = 4" :class="active1 === 4? 'text-primary border-primary':''">Most Frequent Trace</li>
        </ul>
        <div>
          <TabView ref="tabview2" v-model:activeIndex="active1">
              <TabPanel header="Self-loop" contentClass="text-sm">
                <p v-if="insights.self_loops.length === 0">No data</p>
                <ul v-else class="list-disc ml-6 space-y-1">
                  <li v-for="(value, key) in insights.self_loops" :key="key">
                    <span>{{ value }}</span>
                  </li>
                </ul>
              </TabPanel>
              <TabPanel header="Short-loop" contentClass="text-sm">
                <p v-if="insights.short_loops.length === 0">No data</p>
                <ul v-else class="list-disc ml-6 space-y-1">
                  <li class="break-words" v-for="(item, key) in insights.short_loops" :key="key">
                    <span v-for="(value, index) in item" :key="index">{{ value }}<span v-if="index !== item.length - 1">&nbsp;<span class="material-symbols-outlined !text-lg align-sub">sync_alt</span>&nbsp;</span>
                    </span>
                  </li>
                </ul>
              </TabPanel>
              <TabPanel header="Shortest Trace" contentClass="text-sm">
                <p v-if="insights.shortest_traces.length === 0">No data</p>
                <ul v-else class="list-disc ml-6 space-y-1">
                  <li class="break-words" v-for="(item, key) in insights.shortest_traces" :key="key">
                    <span v-for="(value, index) in item" :key="index">{{ value }}<span v-if="index !== item.length - 1">&nbsp;<span class="material-symbols-outlined !text-lg align-sub">arrow_forward</span>&nbsp;</span>
                    </span>
                  </li>
                </ul>
              </TabPanel>
              <TabPanel header="Longest Trace" contentClass="text-sm">
                <p v-if="insights.longest_traces.length === 0">No data</p>
                <ul v-else class="list-disc ml-6 space-y-1">
                  <li class="break-words" v-for="(item, key) in insights.longest_traces" :key="key">
                    <span v-for="(value, index) in item" :key="index">{{ value }}<span v-if="index !== item.length - 1">&nbsp;<span class="material-symbols-outlined !text-lg align-sub">arrow_forward</span>&nbsp;</span>
                    </span>
                  </li>
                </ul>
              </TabPanel>
              <TabPanel header="Most Frequent Trace" contentClass="text-sm">
                <ul v-if="insights.most_freq_traces.length === 0">
                  <li >No data</li>
                </ul>                
                <ul v-else class="list-disc ml-6 space-y-1">
                  <li class="break-words" v-for="(item, key) in insights.most_freq_traces" :key="key">
                    <span v-for="(value, index) in item" :key="index">{{ value }}<span v-if="index !== item.length - 1">&nbsp;<span class="material-symbols-outlined !text-lg align-sub">arrow_forward</span>&nbsp;</span>
                    </span>
                  </li>
                </ul>
              </TabPanel>
          </TabView>
        </div>
      </div>
    </div>
  </Sidebar>
</template>

<script>
import { getTimeLabel } from '@/module/timeLabel.js';
import getMoment from 'moment';

export default {
  props:{
    sidebarState: {
      type: Boolean,
      require: false,
    },
    stats: {
      type: Object,
      required: false,
    },
    insights: {
      type: Object,
      required: false,
    }
  },
  data() {
    return {
      tab: 'summary',
      valueCases: 0,
      valueTraces: 0,
      valueTaskInstances: 0,
      valueTasks: 0,
      active1: 0,
    }
  },
  methods: {
    /**
     * @param {string} switch Summary or Insight
     */
    switchTab(tab) {
      this.tab = tab;
    },
    /**
     * @param {number} time use timeLabel.js
     */
    timeLabel(time){
      let result = getTimeLabel(time).match(/(\d+)\s*([a-zA-Z]+)/);
      return result;
    },
    /**
     * @param {number} time use moment
     */
    moment(time){
      return getMoment(time).format('YYYY-MM-DD HH:mm');
    },
    /**
     * Number to percentage
     * @param   {number} val 原始數字
     * @returns {string}     轉換完成的百分比字串
     */
    getPercentLabel(val){
      if((val * 100).toFixed(1) >= 100) return `100%`;
      else return `${(val * 100).toFixed(1)}%`;
    },
    /**
     * Behavior when show
     */
    show(){
      this.valueCases = this.stats.cases.ratio * 100;
      this.valueTraces=  this.stats.traces.ratio * 100;
      this.valueTaskInstances = this.stats.task_instances.ratio * 100;
      this.valueTasks = this.stats.tasks.ratio * 100;
    },
    /**
     * Behavior when hidden
     */
    hide(){
      this.valueCases = 0;
      this.valueTraces=  0;
      this.valueTaskInstances = 0;
      this.valueTasks = 0;
    },
  },
}
</script>

<style scoped>
:deep(.p-progressbar .p-progressbar-value) {
  @apply bg-primary
}
:deep(.p-tabview-nav-container) {
  @apply hidden
}
:deep(.p-tabview-panels) {
  @apply !bg-neutral-100 p-2 rounded
}
:deep(.p-tabview-panel) {
  @apply animate-fadein
}
.caseDurationTable td {
  @apply scroll-pb-12
}
.caseDurationTable td:nth-child(2) {
  @apply text-right
}
.caseDurationTable td:last-child {
  @apply pl-2
}
</style>