Issues #174: done.

src/components/Discover/Map/Filter/Attributes.vue

@@ -1,11 +1,6 @@
 <template>
 <section class="w-full h-full">
   <p class="h2 ml-1 mb-2">Activity Select</p>
-  <!-- selectedAttName: {{ selectedAttName }} <br> -->
-  <!-- selectedAttRange: {{ selectedAttRange }} <br> -->
-  <!-- attRangeData: {{ attRangeData }} <br> -->
-  <!-- filterAttrs: {{ filterAttrs }} <br> -->
-
   <div class="flex flex-row justify-between items-start gap-4 w-full h-[calc(100%_-_48px)]">
     <!-- Attribute Name -->
     <div class="basis-1/3 bg-neutral-10 border border-neutral-300 rounded-xl px-4 pb-4 w-full h-full relative text-sm">
@@ -270,6 +265,18 @@ export default {
 
       return [start, end];
     },
+    labelsData: function() {
+      let min = new Date(this.valueData.min).getTime();
+      let max = new Date(this.valueData.max).getTime();
+      let numPoints = 11;
+      let step = (max - min) / (numPoints - 1);
+      let data = [];
+      for(let i = 0; i< numPoints; i++) {
+        const x = min + i * step;
+        data.push(x);
+      }
+      return data;
+    },
   },
   methods: {
     /**
@@ -428,11 +435,31 @@ export default {
       const valueData = this.valueData;
       const max = valueData.chart.y_axis.max * 1.1;
       const data = setLineChartData(valueData.chart.data, valueData.chart.x_axis.max, valueData.chart.x_axis.min);
-      const xData = data.map(item => Math.round(item.x));
       const isDateType = valueData.type === 'date';
+      const minX = valueData.chart.x_axis.min;
+      const maxX = valueData.chart.x_axis.max;
       let setChartData= {};
       let setChartOptions= {};
+      let setLabels = [];
 
+      switch (valueData.type) {
+        case 'int':
+          setLabels = data.map(item => Math.round(item.x));
+          break;
+        case 'float':
+          setLabels = data.map((item, index) => {
+            let x = index === 0 ? Math.floor(item.x * 100) / 100 :
+            index === data.length - 1 ? item.x = Math.ceil(item.x * 100) / 100 :
+            Math.round(item.x * 100) / 100;
+            return x
+          });
+          break;
+        case 'date':
+          setLabels = this.labelsData;
+          break;
+        default:
+          break;
+      }
       setChartData = {
         datasets: [
           {
@@ -443,10 +470,9 @@ export default {
             tension: 0.4,
             backgroundColor: 'rgba(0,153,255)',
             pointRadius: 0,
-            x: 'x',
-            y: 'y',
           }
-        ]
+        ],
+        labels: setLabels,
       };
       setChartOptions = {
         responsive: true,
@@ -465,7 +491,6 @@ export default {
           },
           title: false
         },
-        // animations: false, // 取消動畫
         animation: {
           onComplete: e => {
             this.chartComplete = e.chart;
@@ -476,17 +501,6 @@ export default {
           intersect: true,
         },
         scales: {
-          x: {
-            ticks: {
-              autoSkip: true, // 依比例彈性顯示 label 數量
-              maxRotation: 0, // 不旋轉 lable 0~50
-              color: '#334155',
-              display: true,
-            },
-            grid: {
-              display: false, // 隱藏 x 軸網格
-            },
-          },
           y: {
             beginAtZero: true, // scale 包含 0
             max: max,
@@ -504,8 +518,49 @@ export default {
           },
         },
       };
-      if(!isDateType) setChartData.labels = xData;
+      if(isDateType) {
-      if(isDateType) setChartOptions.scales.x.type = 'time';
+        setChartOptions.scales.x = {
+          type: 'time',
+          ticks: {
+            min: minX,
+            max: maxX,
+            autoSkip: true, // 依比例判斷要不要換算時間單位
+            maxRotation: 0, // 不旋轉 lable 0~50
+            color: '#334155',
+            display: true,
+            source: 'labels', // 依比例彈性顯示 label 數量
+          },
+          grid: {
+            display: false, // 隱藏 x 軸網格
+          },
+        }
+      } else {
+        setChartOptions.scales.x = {
+          bounds: 'data',
+          type: 'linear',
+          min: minX,
+          max: maxX,
+          ticks: {
+            autoSkip: true,
+            maxRotation: 0, // 不旋轉 lable 0~50
+            color: '#334155',
+            callback: ((value, index, values) => {
+              switch (valueData.type) {
+                case 'int':
+                  return Math.round(value);
+                case 'float':
+                  let x = index === 0 ? Math.floor(value * 100) / 100 :
+                  index === values.length - 1 ? value = Math.ceil(value * 100) / 100 :
+                  Math.round(value * 100) / 100;
+                  return x
+              }
+            })
+          },
+          grid: {
+            display: false, // 隱藏 x 軸網格
+          },
+        }
+      }
       this.chartData = setChartData;
       this.chartOptions = setChartOptions;
     },

src/components/Discover/Map/Filter/Timeframes.vue

@@ -117,17 +117,29 @@ export default{
 
       // 添加最小值
       data.unshift({
-        x: this.filterTimeframe.x_axis.min,
+        x: this.filterTimeframe.x_axis.min_base,
         y: b,
       })
       // 添加最大值
       data.push({
-        x: this.filterTimeframe.x_axis.max,
+        x: this.filterTimeframe.x_axis.max_base,
         y: mf,
       })
 
       return data;
     },
+    labelsData: function() {
+      let min = new Date(this.filterTimeframe.x_axis.min_base).getTime();
+      let max = new Date(this.filterTimeframe.x_axis.max_base).getTime();
+      let numPoints = 11;
+      let step = (max - min) / (numPoints - 1);
+      let data = [];
+      for(let i = 0; i< numPoints; i++) {
+        const x = min + i * step;
+        data.push(x);
+      }
+      return data;
+    },
   },
   watch:{
     selectTimeFrame(newValue, oldValue) {
@@ -166,8 +178,11 @@ export default{
     },
     createChart() {
       const max = this.filterTimeframe.y_axis.max * 1.1;
+      const minX = this.timeFrameData[0]?.x;
+      const maxX = this.timeFrameData[this.timeFrameData.length - 1]?.x;
 
       const data = {
+        labels:this.labelsData,
         datasets: [
           {
             label: 'Case',
@@ -211,11 +226,14 @@ export default{
         scales: {
           x: {
             type: 'time',
+            min: minX,
+            max: maxX,
             ticks: {
-              autoSkip: false,
+              autoSkip: true,
               maxRotation: 0, // 不旋轉 lable 0~50
               color: '#334155',
               display: true,
+              source: 'labels',
             },
             grid: {
               display: false, // 隱藏 x 軸網格

src/stores/allMapData.js

@@ -105,8 +105,8 @@ export default defineStore('allMapDataStore', {
               break;
             case 'float':
               // Decimal.ROUND_UP|0: 無條件進位； Decimal.ROUND_DOWN|1: 無條件捨去。
-              att.min = att.min !== null ? Number(new Decimal(att.min).toFixed(2, 0)) : null;
+              att.min = att.min !== null ? Number(new Decimal(att.min).toFixed(2, 1)) : null;
-              att.max = att.max !== null ? Number(new Decimal(att.max).toFixed(2, 1)) : null;
+              att.max = att.max !== null ? Number(new Decimal(att.max).toFixed(2, 0)) : null;
               break
             default:
               break;
@@ -244,6 +244,10 @@ export default defineStore('allMapDataStore', {
 
         let min = this.allFilterTimeframe.x_axis.min;
         let max = this.allFilterTimeframe.x_axis.max;
+        // 給 Chart.js 原始資料，格式不同的畫會錯誤輸出
+        this.allFilterTimeframe.x_axis.min_base = min;
+        this.allFilterTimeframe.x_axis.max_base = max;
+        // 轉成無秒的時間格式
         this.allFilterTimeframe.x_axis.min = min !== null ? moment(min).format('YYYY/MM/DD HH:mm') : null;
         this.allFilterTimeframe.x_axis.max = max !== null ? moment(max).format('YYYY/MM/DD HH:mm') : null;
       } catch(error) {