lucia-frontend/src/components/Compare/SidebarStates.vue

<template>
  <Sidebar :visible="sidebarState" :closeIcon="'pi pi-angle-right'" :modal="false" position="right" :dismissable="false" class="!w-[440px]" @hide="hide" @show="show">
    <template #header>
      <p class="pl-2 text-base font-bold text-neutral-900">Summary</p>
    </template>
    <!-- header: summary -->
    <div class="flex justify-start items-start">
      <!-- 001 -->
      <section class="w-[204px] box-border pr-4">
        <div class="mb-4">
          <p class="h2">File Name</p>
          <p class="text-sm leading-normal whitespace-nowrap break-keep overflow-hidden text-ellipsis" :title="primaryStatData.name">{{ primaryStatData.name }}</p>
        </div>
        <!-- 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-4">
                <span class="block text-sm">{{ primaryStatData.cases.count }} / {{ primaryStatData.cases.total }}</span>
                <ProgressBar :value="primaryValueCases" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-primary"></ProgressBar>
              </div>
              <span class="block text-primary text-2xl text-right font-medium basis-28">{{ primaryStatData.cases.ratio }}%</span>
            </div>
          </li>
          <li>
            <p class="h2">Traces</p>
            <div class="flex justify-between items-center">
              <div class="w-full mr-4">
                <span class="block text-sm">{{ primaryStatData.traces.count }} / {{ primaryStatData.traces.total }}</span>
                <ProgressBar :value="primaryValueTraces" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-primary"></ProgressBar>
              </div>
              <span class="block text-primary text-2xl text-right font-medium basis-28">{{ primaryStatData.traces.ratio }}%</span>
            </div>
          </li>
          <li>
            <p class="h2">Activity Instances</p>
            <div class="flex justify-between items-center">
              <div class="w-full mr-4">
                <span class="block text-sm">{{ primaryStatData.task_instances.count }} / {{ primaryStatData.task_instances.total }}</span>
                <ProgressBar :value="primaryValueTaskInstances" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-primary"></ProgressBar>
              </div>
              <span class="block text-primary text-2xl text-right font-medium basis-28">{{ primaryStatData.task_instances.ratio }}%</span>
            </div>
          </li>
          <li>
            <p class="h2">Activities</p>
            <div class="flex justify-between items-center">
              <div class="w-full mr-4">
                <span class="block text-sm">{{ primaryStatData.tasks.count }} / {{ primaryStatData.tasks.total }}</span>
                <ProgressBar :value="primaryValueTasks" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-primary"></ProgressBar>
              </div>
              <span class="block text-primary text-2xl text-right font-medium basis-28">{{ primaryStatData.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>
          <div class="space-y-2 text-sm text-center">
            <span class="block">{{ primaryStatData.started_at }}&nbsp</span>
            <span class="block">~</span>
            <span class="block">&nbsp{{ primaryStatData.completed_at }}</span>
          </div>
        </div>
        <!-- Case Duration -->
        <div class="pt-1 pb-4">
          <p class="h2">Case Duration</p>
          <ul class="space-y-1 text-sm">
            <li><Tag value="MIN" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ primaryStatData.case_duration.min }}</li>
            <li><Tag value="AVG" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ primaryStatData.case_duration.average }}</li>
            <li><Tag value="MED" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ primaryStatData.case_duration.median }}</li>
            <li><Tag value="MAX" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ primaryStatData.case_duration.max }}</li>
          </ul>
        </div>
      </section>
      <!-- 002 -->
      <section class="w-[204px] box-border pl-4">
        <div class="mb-4">
          <p class="h2">File Name</p>
          <p class="text-sm leading-normal whitespace-nowrap break-keep overflow-hidden text-ellipsis" :title="secondaryStatData.name">{{ secondaryStatData.name }}</p>
        </div>
        <!-- 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-4">
                <span class="block text-sm">{{ secondaryStatData.cases.count }} / {{ secondaryStatData.cases.total }}</span>
                <ProgressBar :value="secondaryValueTraces" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-secondary"></ProgressBar>
              </div>
              <span class="block text-secondary text-2xl text-right font-medium basis-28">{{ secondaryStatData.cases.ratio }}%</span>
            </div>
          </li>
          <li>
            <p class="h2">Traces</p>
            <div class="flex justify-between items-center">
              <div class="w-full mr-4">
                <span class="block text-sm">{{ secondaryStatData.traces.count }} / {{ secondaryStatData.traces.total }}</span>
                <ProgressBar :value="secondaryValueTraces" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-secondary"></ProgressBar>
              </div>
              <span class="block text-secondary text-2xl text-right font-medium basis-28">{{ secondaryStatData.traces.ratio }}%</span>
            </div>
          </li>
          <li>
            <p class="h2">Activity Instances</p>
            <div class="flex justify-between items-center">
              <div class="w-full mr-4">
                <span class="block text-sm">{{ secondaryStatData.task_instances.count }} / {{ secondaryStatData.task_instances.total }}</span>
                <ProgressBar :value="secondaryValueTaskInstances" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-secondary"></ProgressBar>
              </div>
              <span class="block text-secondary text-2xl text-right font-medium basis-28">{{ secondaryStatData.task_instances.ratio }}%</span>
            </div>
          </li>
          <li>
            <p class="h2">Activities</p>
            <div class="flex justify-between items-center">
              <div class="w-full mr-4">
                <span class="block text-sm">{{ secondaryStatData.tasks.count }} / {{ secondaryStatData.tasks.total }}</span>
                <ProgressBar :value="secondaryValueTasks" :showValue="false" class="!h-2 !rounded-full my-2 !bg-neutral-300 progressbar-secondary"></ProgressBar>
              </div>
              <span class="block text-secondary text-2xl text-right font-medium basis-28">{{ secondaryStatData.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>
          <div class="space-y-2 text-sm text-center">
            <span class="block">{{ secondaryStatData.started_at }}&nbsp</span>
            <span class="block">~</span>
            <span class="block">&nbsp{{ secondaryStatData.completed_at }}</span>
          </div>
        </div>
        <!-- Case Duration -->
        <div class="pt-1 pb-4">
          <p class="h2">Case Duration</p>
          <ul class="space-y-1 text-sm">
            <li><Tag value="MIN" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ secondaryStatData.case_duration.min }}</li>
            <li><Tag value="AVG" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ secondaryStatData.case_duration.average }}</li>
            <li><Tag value="MED" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ secondaryStatData.case_duration.median }}</li>
            <li><Tag value="MAX" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ secondaryStatData.case_duration.max }}</li>
          </ul>
        </div>
      </section>
    </div>
  </Sidebar>
</template>
<script>
import CompareStore from '@/stores/compare.js';
import { getTimeLabel } from '@/module/timeLabel.js';
import getMoment from 'moment';

export default {
  setup() {
    const compareStore = CompareStore();

    return { compareStore };
  },
  props:{
    sidebarState: {
      type: Boolean,
      require: false,
    },
  },
  data() {
    return {
      primaryValueCases: 0,
      primaryValueTraces: 0,
      primaryValueTaskInstances: 0,
      primaryValueTasks: 0,
      secondaryValueCases: 0,
      secondaryValueTraces: 0,
      secondaryValueTaskInstances: 0,
      secondaryValueTasks: 0,
      primaryStatData: null,
      secondaryStatData: null,
    }
  },
  methods: {
    /**
     * Number to percentage
     * @param   {number} val 原始數字
     * @returns {string} 轉換完成的百分比字串
     */
     getPercentLabel(val){
      if((val * 100).toFixed(1) >= 100) return 100;
      else return parseFloat((val * 100).toFixed(1));
    },
    /**
     * setting stats data
     * @param { object } data fetch API stats data
     * @param { string } fileName file Name
     * @returns { object }  primaryStatData | secondaryStatData，回傳 primaryStatData 或 secondaryStatData
     */
    getStatData(data, fileName) {
      return {
        name: fileName,
        cases: {
          count: data.cases.count.toLocaleString('en-US'),
          total: data.cases.total.toLocaleString('en-US'),
          ratio: this.getPercentLabel(data.cases.ratio)
        },
        traces: {
          count: data.traces.count.toLocaleString('en-US'),
          total: data.traces.total.toLocaleString('en-US'),
          ratio: this.getPercentLabel(data.traces.ratio)
        },
        task_instances: {
          count: data.task_instances.count.toLocaleString('en-US'),
          total: data.task_instances.total.toLocaleString('en-US'),
          ratio: this.getPercentLabel(data.task_instances.ratio)
        },
        tasks: {
          count: data.tasks.count.toLocaleString('en-US'),
          total: data.tasks.total.toLocaleString('en-US'),
          ratio: this.getPercentLabel(data.tasks.ratio)
        },
        started_at: getMoment(data.started_at).format('YYYY.MM.DD HH:mm'),
        completed_at: getMoment(data.completed_at).format('YYYY.MM.DD HH:mm'),
        case_duration: {
          min: getTimeLabel(data.case_duration.min, 2),
          max: getTimeLabel(data.case_duration.max, 2),
          average: getTimeLabel(data.case_duration.average, 2),
          median: getTimeLabel(data.case_duration.median, 2),
        }
      }
    },
    /**
     * Behavior when show
     */
    show(){
      this.primaryValueCases = this.primaryStatData.cases.ratio;
      this.primaryValueTraces=  this.primaryStatData.traces.ratio;
      this.primaryValueTaskInstances = this.primaryStatData.task_instances.ratio;
      this.primaryValueTasks = this.primaryStatData.tasks.ratio;
      this.secondaryValueCases = this.secondaryStatData.cases.ratio;
      this.secondaryValueTraces=  this.secondaryStatData.traces.ratio;
      this.secondaryValueTaskInstances = this.secondaryStatData.task_instances.ratio;
      this.secondaryValueTasks = this.secondaryStatData.tasks.ratio;
    },
    /**
     * Behavior when hidden
     */
    hide(){
      this.primaryValueCases = 0;
      this.primaryValueTraces=  0;
      this.primaryValueTaskInstances = 0;
      this.primaryValueTasks = 0;
      this.secondaryValueCases = 0;
      this.secondaryValueTraces=  0;
      this.secondaryValueTaskInstances = 0;
      this.secondaryValueTasks = 0;
    },
  },
  async mounted() {
    const routeParams = this.$route.params;
    const primaryType = routeParams.primaryType;
    const secondaryType = routeParams.secondaryType;
    const primaryId = routeParams.primaryId;
    const secondaryId = routeParams.secondaryId;
    const primaryData  = await this.compareStore.getStateData(primaryType, primaryId);
    const secondaryData  = await this.compareStore.getStateData(secondaryType, secondaryId);

    const primaryFileName = await this.compareStore.getFileName(primaryId)
    const secondaryFileName = await this.compareStore.getFileName(secondaryId)
    this.primaryStatData = await this.getStatData(primaryData, primaryFileName);
    this.secondaryStatData = await this.getStatData(secondaryData, secondaryFileName);
  }
}
</script>
<style scoped>
:deep(.p-progressbar .p-progressbar-value) {
  background-color: var(--bg-color);
}
.progressbar-primary {
  --bg-color: #0099FF;
}
.progressbar-secondary {
  --bg-color: #FFAA44;
}
</style>