Issues #174: done.

2023-11-02 17:35:43 +08:00
parent 89f0ef9a5a
commit 0be3bcfdd0
3 changed files with 105 additions and 28 deletions
--- a/src/components/Discover/Map/Filter/Attributes.vue
+++ b/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) setChartOptions.scales.x.type = 'time';
+      if(isDateType) {
+        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;
    },
--- a/src/components/Discover/Map/Filter/Timeframes.vue
+++ b/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 軸網格
--- a/src/stores/allMapData.js
+++ b/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.max = att.max !== null ? Number(new Decimal(att.max).toFixed(2, 1)) : 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, 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) {