From 5d33b6481c574fc1769a0bbf98623d767eedf8d9 Mon Sep 17 00:00:00 2001
From: Cindy Chang <cindy.chang@dsp.im>
Date: Tue, 18 Jun 2024 10:47:58 +0800
Subject: [PATCH] fix: #299 Cycle efficiency X axis should only display to
 YYYYMM.

---
 src/views/Compare/Dashboard/index.vue    | 13 ++++++++++++-
 src/views/Discover/Performance/index.vue |  6 +++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/views/Compare/Dashboard/index.vue b/src/views/Compare/Dashboard/index.vue
index 203bea7..fcdc654 100644
--- a/src/views/Compare/Dashboard/index.vue
+++ b/src/views/Compare/Dashboard/index.vue
@@ -154,6 +154,7 @@
 </template>
 <script>
 import { storeToRefs } from 'pinia';
+import moment from 'moment';
 import LoadingStore from '@/stores/loading.js';
 import CompareStore from '@/stores/compare.js';
 import SidebarStates from '@/components/Compare/SidebarStates.vue';
@@ -438,7 +439,6 @@ export default {
       const maxX = chartData.x_axis.max;
       const minX = chartData.x_axis.min;
       const getMoment = (time)=> this.$moment(time).format('YYYY/MM/DD');
-      const getDateLabel = getDateLabelByMinMaxDate;
       let datasetsPrimary = chartData.data[0].data;
       let xDataPrimary;
       let yDataPrimary;
@@ -522,6 +522,17 @@ export default {
         scales: this.customizeScaleChartOptionTitleByContent(knownScaleBarChartOptions, content),
       };
 
+      primeVueSetOption.scales = {
+        ...primeVueSetOption.scales, 
+          x: {
+            ticks: {
+              callback: function(value, index, ticks) {
+                return moment(xDataPrimary[index]).format('YYYY/MM');
+              },
+            },          
+        },
+      };
+
       if(caller === "Cycle Eff") { //針對 cycle efficiency 特別處理
         primeVueSetOption.scales.y.reverse = true; //不明原因上下顛倒，所以要顛倒過來
         primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
diff --git a/src/views/Discover/Performance/index.vue b/src/views/Discover/Performance/index.vue
index 0af9db8..0c98898 100644
--- a/src/views/Discover/Performance/index.vue
+++ b/src/views/Discover/Performance/index.vue
@@ -141,6 +141,7 @@
 <script>
 import { storeToRefs, mapActions, } from 'pinia';
 import axios from 'axios';
+import moment from 'moment';
 import LoadingStore from '@/stores/loading.js';
 import PerformanceStore from '@/stores/performance.js';
 import ConformanceStore from '@/stores/conformance.js';
@@ -505,9 +506,8 @@ export default {
             ticks: {
               display: true,
               color: '#64748b',
-              callback: function(v, i, t) {
-                let label = xData[i]
-                return getDateLabelByMinMaxDate(label, maxX, minX)
+              callback: function(value, index, ticks) {
+                return moment(xData[index]).format('YYYY/MM');
               },
             },
             border: {