Conformance: Have activity fix chart Date.

src/components/Discover/Conformance/ConformanceResults.vue

@@ -20,16 +20,22 @@
   <!-- chart -->
   <div class="flex gap-4">
     <div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-1/2">
-      <p class="h2 pl-2 flex justify-between items-center">
+      <p class="p-2 flex justify-between items-center">
-        <span>Conformance Rate<span class="material-symbols-outlined text-sm align-middle ml-2" v-tooltip.bottom="tooltip.rate">info</span></span>
+        <div>
-        <span class="text-2xl">{{ data.charts.rate.rate }}%</span>
+          <span class="block text-sm font-bold mb-2">Conformance Rate<span class="material-symbols-outlined text-sm align-middle ml-2" v-tooltip.bottom="tooltip.rate">info</span></span>
+          <small class="text-neutral-700 font-normal block">{{ data.charts.rate.xMin }} ~ {{ data.charts.rate.xMax }}</small>
+        </div>
+        <span class="text-2xl font-bold">{{ data.charts.rate.rate }}%</span>
       </p>
       <Chart type="line" :data="rateChartData" :options="rateChartOptions" class=""/>
     </div>
     <div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-1/2">
-      <p class="h2 pl-2 flex justify-between items-center">
+      <p class="p-2 flex justify-between items-center">
-        <span>Cases<span class="material-symbols-outlined text-sm align-middle ml-2">info</span></span>
+        <div>
-        <span class="text-2xl"><span class="text-cfm-primary">{{ data.charts.cases.conforming }}</span>&nbsp/&nbsp{{ data.charts.cases.total }}</span>
+          <span class="block text-sm font-bold mb-2">Cases<span class="material-symbols-outlined text-sm align-middle ml-2">info</span></span>
+          <small class="text-neutral-700 font-normal block">{{ data.charts.cases.xMin }} ~ {{ data.charts.cases.xMax }}</small>
+        </div>
+        <span class="text-2xl font-bold"><span class="text-cfm-primary">{{ data.charts.cases.conforming }}</span>&nbsp/&nbsp{{ data.charts.cases.total }}</span>
       </p>
       <Chart type="bar" :data="casesChartData" :options="casesChartOptions" class=""/>
     </div>
@@ -255,6 +261,8 @@ export default {
           rate: {
             rate: rate,
             data: setLineChartData(data.charts.rate.data, data.charts.rate.x_axis.max, data.charts.rate.x_axis.min),
+            xMax: getMoment(data.charts.rate.x_axis.max).format('YYYY/M/D'),
+            xMin: getMoment(data.charts.rate.x_axis.min).format('YYYY/M/D'),
           },
           cases: {
             conforming: getNumberLabel(data.counts.conforming),
@@ -262,7 +270,9 @@ export default {
             data: {
               conforming: setBarChartData(data.charts.cases.data.filter(item => item.label === 'conforming').map(item => item.data)[0]),
               not_conforming: setBarChartData(data.charts.cases.data.filter(item => item.label === 'not-conforming').map(item => item.data)[0]),
-            }
+            },
+            xMax: getMoment(data.charts.cases.x_axis.max).format('YYYY/M/D'),
+            xMin: getMoment(data.charts.cases.x_axis.min).format('YYYY/M/D'),
           },
           fitness: getNumberLabel(data.charts.fitness),
         },
@@ -292,6 +302,10 @@ export default {
       this.setCasesChartData(result.charts.cases.data.conforming, result.charts.cases.data.not_conforming, data.charts.cases.x_axis.max, data.charts.cases.x_axis.min); // 建立圖表 Cases Chart.js
       return result;
     },
+    /**
+     * set Rate Chart Data
+     * @param   {object} data new rate chart data
+     */
     setRateChartData(data){
       this.rateChartData = {
         labels:[],
@@ -313,6 +327,13 @@ export default {
         responsive: true,
         maintainAspectRatio: false,
         aspectRatio: 0.6,
+        layout: {
+          padding: {
+            top: 16,
+            left: 8,
+            right: 8,
+          }
+        },
         plugins: {
           legend: false, // 圖例
           tooltip: {
@@ -330,13 +351,14 @@ export default {
             //   }
             // },
             ticks: {
-              maxRotation: 0, // 不旋轉 lable 0~50
+              display: false,
-              color: '#334155',
+              // maxRotation: 0, // 不旋轉 lable 0~50
-              source: 'data',
+              // color: '#334155',
-              align: 'inner', // label 在軸線的位置
+              // source: 'data',
-              callback: function(value, index, values) {
+              // align: 'inner', // label 在軸線的位置
-                return (index === 0 || index === values.length - 1) ? getMoment(value).format('YYYY/M/D') : null;
+              // callback: function(value, index, values) {
-              },
+              //   return (index === 0 || index === values.length - 1) ? getMoment(value).format('YYYY/M/D') : null;
+              // },
             },
             grid: {
               display: false, // 隱藏 x 軸網格
@@ -368,6 +390,13 @@ export default {
         },
       };
     },
+    /**
+     * set Cases Chart Data
+     * @param   {object} data new cases chart conforming data
+     * @param   {object} data new cases chart not conforming data
+     * @param   {strin} data new cases chart xMax
+     * @param   {string} data new cases chart xMin
+     */
     setCasesChartData(conformingData, notConformingData, xMax, xMin){
       this.casesChartData = {
         datasets: [
@@ -389,6 +418,13 @@ export default {
         responsive: true,
         maintainAspectRatio: false,
         aspectRatio: 0.8,
+        layout: {
+          padding: {
+            top: 16,
+            left: 8,
+            right: 8,
+          }
+        },
         plugins: {
           tooltips: {
             mode: 'index',
@@ -400,15 +436,16 @@ export default {
           x: {
             stacked: true,
             ticks: {
-              autoSkip: false,
+              display: false,
-              maxRotation: 0, // 不旋轉 lable 0~50
+              // autoSkip: false,
-              color: '#334155',
+              // maxRotation: 0, // 不旋轉 lable 0~50
-              align: 'center', // label 在軸線的位置
+              // color: '#334155',
-              callback: function(value, index, values) {
+              // align: 'center', // label 在軸線的位置
-                if(index === 0) return getMoment(xMin).format('yyyy/M/D');
+              // callback: function(value, index, values) {
-                else if(index === values.length - 1) return getMoment(xMax).format('yyyy/M/D');
+              //   if(index === 0) return getMoment(xMin).format('yyyy/M/D');
-                 else return null;
+              //   else if(index === values.length - 1) return getMoment(xMax).format('yyyy/M/D');
-              },
+              //    else return null;
+              // },
             },
             grid: {
               display: false, // 隱藏 x 軸網格

src/components/Discover/Conformance/MoreModal.vue

@@ -104,7 +104,7 @@ export default {
     columnData: function() {
       const data = JSON.parse(JSON.stringify(this.cases)); // 深拷貝原始 cases 的內容
       const result = [
-        { field: 'id', header: 'ID' },
+        { field: 'id', header: 'Case Id' },
         { field: 'started_at', header: 'Start Date' },
         { field: 'completed_at', header: 'End Date' },
         ...data[0].attributes.map((att, index) => ({ field: `att_${index}`, header: att.key })),