compare page locale continue

src/i18n/en.json

@@ -1,6 +1,16 @@
 {
     "Compare": {
+        "timeUsage": "Time Usage",
+        "frequency": "Frequency",
+        "cycleEfficiency": "Cycle Efficiency",
         "avgCycleTimeTitle": "Average Cycle Time",
+        "schedule": "schedule",
+        "info": "info",
+        "ProcessingTime": "Processing Time",
+        "WaitingTime": "Waiting Time",
+        "NoWaitingTime": "No waiting time.",
+        "moving": "moving",
+        "NumberOfCases": "Number of Cases",
         "labelDateX": "Date",
         "avgCycleTimeY": "Cycle time",
         "labelActivityY": "Activity",
@@ -18,6 +28,9 @@
         "freqTitle": "New Cases",
         "freqY": "Count",
         "casesByTaskTitle": "Number of Cases by Activity",
-        "casesByTaskX": "Times"
+        "casesByTaskX": "Times",
+        "avgCycleEfficiency": "Cycle Efficiency: The ratio of the total productive time to the total cycle time of a process. Productive time refers to the time during which value-adding activities are performed, while cycle time is the total time from the start to the end of the process, including both productive and non-productive periods.",
+        "avgWaitingTime": "Average Waiting Time: The average duration during which a task or an item (like a work order, a product, or a piece of information) is on hold or idle before the next step in the process can begin. This time does not contribute to the active progression of the task but is instead a period of inactivity.",
+        "avgWaitingTimeByEdge": "Average Waiting Time Between Activities: The average duration during which a task or an item (like a work order, a product, or a piece of information) is on hold or idle before the next step in the process can begin. This time does not contribute to the active progression of the task but is instead a period of inactivity."
     }
 }

src/views/Compare/Dashboard/index.vue

@@ -6,7 +6,7 @@
         <aside class="border-r border-neutral-300 pr-4 mr-4 h-full sticky top-0 self-start">
           <section class="px-2 space-y-2 w-56 h-full">
             <div>
-              <p class="h1">Time Usage</p>
+              <p class="h1">{{ i18next.t("Compare.timeUsage") }}</p>
               <ul class="list-disc list-inside text-sm leading-5 pl-3">
                 <li v-for="(item, index) in timeUsageData" :key="index" :class="{active: isActive === item.tagId}"
                 @click="isActive = item.tagId" class="cursor-pointer hover:text-primary"><a :href="item.tagId">
@@ -16,7 +16,7 @@
               </ul>
             </div>
             <div>
-              <p class="h1">Frequency</p>
+              <p class="h1">{{ i18next.t("Compare.frequency") }}</p>
               <ul class="list-disc list-inside text-sm leading-5 pl-3">
                 <li v-for="(item, index) in frequencyData" :key="index" :class="{active: isActive === item.tagId}"
                 @click="isActive = item.tagId" class="cursor-pointer hover:text-primary"><a :href="item.tagId">
@@ -30,13 +30,13 @@
         <article class="w-full h-full pr-2 mr-2 overflow-x-hidden overflow-y-auto scrollbar scroll-smooth">
           <section>
             <p class="h1 px-4 border-b border-neutral-900"><span class="material-symbols-outlined mr-2 align-middle">
-              schedule
+              {{ i18next.t("Compare.schedule") }}
             </span>
-              Time Usage
+              {{ i18next.t("Compare.timeUsage") }}
             </p>
             <ul class="list-disc list-inside px-4 pl-7 text-sm">
               <li id="cycleTime" class="scroll-smooth">
-                <span class="inline-block py-4">Cycle Efficiency</span>
+                <span class="inline-block py-4">{{ i18next.t("Compare.cycleEfficiency") }}</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">
@@ -49,14 +49,14 @@
                       {{ contentData.avgCycleEfficiency.title }}
                       <span class="material-symbols-outlined align-middle ml-2 cursor-pointer !text-base"
                       v-tooltip.bottom="tooltip.avgCycleEfficiency">
-                      info
+                      {{ i18next.t("Compare.info") }}
                     </span></span>
                     <Chart type="bar" :data="avgCycleEfficiencyData" :options="avgCycleEfficiencyOptions" class="h-96" />
                   </li>
                 </ul>
               </li>
               <li id="processingTime">
-                <span class="inline-block py-4 text-sm">Processing Time</span>
+                <span class="inline-block py-4 text-sm">{{ i18next.t("Compare.ProcessingTime") }}</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">
@@ -74,7 +74,7 @@
                 </ul>
               </li>
               <li id="waitingTime">
-                <span class="inline-block py-4 text-sm">Waiting Time</span>
+                <span class="inline-block py-4 text-sm">{{ i18next.t("Compare.WaitingTime") }}</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">
@@ -89,12 +89,12 @@
                     <span class="block font-bold text-sm leading-loose text-center my-2">
                       {{ contentData.avgWaitingTimeByEdge.title }}
                       <span class="material-symbols-outlined align-middle ml-2 cursor-pointer !text-base"
-                      v-tooltip.bottom="tooltip.avgWaitingTimeByEdge">info</span></span>
+                      v-tooltip.bottom="tooltip.avgWaitingTimeByEdge">{{ i18next.t("Compare.info") }}</span></span>
                     <div>
                       <Chart v-if="avgWaitingTimeByEdgeData !== null" type="bar" :data="avgWaitingTimeByEdgeData"
                       :options="avgWaitingTimeByEdgeOptions" :style="{ height: avgWaitingTimeByEdgeHeight }" class="h-[500px]" />
                       <div v-else class="h-96 bg-neutral-100 m-4 flex">
-                        <p class="h2 text-danger m-auto">No waiting time.</p>
+                        <p class="h2 text-danger m-auto">{{ i18next.t("Compare.NoWaitingTime") }}</p>
                       </div>
                     </div>
                   </li>
@@ -104,13 +104,13 @@
           </section>
           <section>
             <p class="h1 px-4 border-b border-neutral-900 mt-2"><span class="material-symbols-outlined mr-2 align-middle">
-              moving
+              {{i18next.t("Compare.moving")}}
             </span>
-              Frequency
+              {{ i18next.t("Compare.frequency") }}
             </p>
             <ul class="list-disc list-inside px-4 pl-7 text-sm">
               <li id="cases">
-                <span class="inline-block py-4">Number of Cases</span>
+                <span class="inline-block py-4">{{ i18next.t("Compare.NumberOfCases") }}</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>
@@ -169,6 +169,7 @@ export default {
   },
   data() {
     return {
+      i18next: i18next,
       timeUsageData: [
         {tagId: '#cycleTime', label: 'Cycle Efficiency'},
         {tagId: '#processingTime', label: 'Processing Time'},
@@ -180,32 +181,36 @@ export default {
         // {tagId: '#resource', label: 'Resource'},
       ],
       contentData: {
-        avgCycleTime: {title: i18next.t("Compare.avgCycleTimeTitle"), x: i18next.t("Compare.labelDateX"), y: i18next.t("Compare.avgCycleTimeY")},
+        avgCycleTime: {title: i18next.t("Compare.avgCycleTimeTitle"), x: i18next.t("Compare.labelDateX"),
+          y: i18next.t("Compare.avgCycleTimeY")},
         avgCycleEfficiency: {title: i18next.t("Compare.avgCycleEfficiencyTitle"), x: i18next.t("Compare.labelDateX"),
           y: i18next.t("Compare.avgCycleEfficiencyY")},
         avgProcessTime: {title: i18next.t("Compare.avgProcessTimeTitle"), x: i18next.t("Compare.labelDateX"),
           y: i18next.t("Compare.avgProcessTimeY")},
-        avgProcessTimeByTask: {title: i18next.t("Compare.avgProcessTimeByTaskTitle"), 
+        avgProcessTimeByTask: {title: i18next.t("Compare.avgProcessTimeByTaskTitle"),
           x: i18next.t("Compare.avgProcessTimeByTaskX"), y: i18next.t("Compare.labelActivityY")},
-        avgWaitingTime: {title: i18next.t("Compare.avgWaitingTimeTitle"), x: i18next.t("Compare.labelDateX"), y: i18next.t("Compare.avgWaitingTimeY")},
+        avgWaitingTime: {title: i18next.t("Compare.avgWaitingTimeTitle"), x: i18next.t("Compare.labelDateX"),
-        avgWaitingTimeByEdge: {title: i18next.t("Compare.avgWaitingTimeByEdgeTitle"), x: i18next.t("Compare.avgWaitingTimeByEdgeX"),
+          y: i18next.t("Compare.avgWaitingTimeY")},
+        avgWaitingTimeByEdge: {title: i18next.t("Compare.avgWaitingTimeByEdgeTitle"),
+          x: i18next.t("Compare.avgWaitingTimeByEdgeX"),
           y: i18next.t("Compare.avgWaitingTimeByEdgeY")},
         freq: {title: i18next.t("Compare.freqTitle"), x: i18next.t("Compare.labelDateX"), y: i18next.t("Compare.freqY")},
-        casesByTask: {title: i18next.t("Compare.casesByTaskTitle"), x: i18next.t("Compare.casesByTaskX"), y: i18next.t("Compare.labelActivityY")},
+        casesByTask: {title: i18next.t("Compare.casesByTaskTitle"), x: i18next.t("Compare.casesByTaskX"),
+          y: i18next.t("Compare.labelActivityY")},
       },
       tooltip: {
         avgCycleEfficiency: {
-          value: 'Cycle Efficiency: The ratio of the total productive time to the total cycle time of a process. Productive time refers to the time during which value-adding activities are performed, while cycle time is the total time from the start to the end of the process, including both productive and non-productive periods.',
+          value: i18next.t("Compare.avgCycleEfficiency"),
           class: '!max-w-[212px] !text-[10px] !opacity-80',
           autoHide: false,
         },
         avgWaitingTime: {
-          value: 'Average Waiting Time: The average duration during which a task or an item (like a work order, a product, or a piece of information) is on hold or idle before the next step in the process can begin. This time does not contribute to the active progression of the task but is instead a period of inactivity.',
+          value: i18next.t("Compare.avgWaitingTime"),
           class: '!max-w-[212px] !text-[10px] !opacity-80',
           autoHide: false,
         },
         avgWaitingTimeByEdge: {
-          value: 'Average Waiting Time Between Activities: The average duration during which a task or an item (like a work order, a product, or a piece of information) is on hold or idle before the next step in the process can begin. This time does not contribute to the active progression of the task but is instead a period of inactivity.',
+          value: i18next.t("Compare.avgWaitingTimeByEdge"),
           class: '!max-w-[212px] !text-[10px] !opacity-80',
           autoHide: false,
         },