Map Attributes: value type int and float Chart.js done.

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

@@ -1,5 +1,5 @@
 <template>
-<section class="h-full">
+<section class="w-full h-full">
   <p class="h2 ml-1 mb-2">Activity Select</p>
   <!-- selectedAttName: {{ selectedAttName }} <br> -->
   <!-- selectedAttRange: {{ selectedAttRange }} <br> -->
@@ -22,16 +22,16 @@
       <div class="flex justify-between items-center my-2 flex-wrap">
         <p class="h2">Range Selection {{ attRangeTotal }}</p>
       </div>
-      <div class="overflow-y-auto overflow-x-auto scrollbar -mx-2 h-[calc(100%_-_70px)]">
+      <div class="overflow-y-auto overflow-x-auto scrollbar -mx-2 w-full h-[calc(100%_-_70px)]">
         <!-- type: boolean -->
-        <div v-if="selectedAttName?.type === 'boolean'">
+        <div v-if="selectedAttName?.type === 'boolean'" class="w-full">
           <DataTable v-model:selection="selectedAttRange" :value="attRangeData" dataKey="id" breakpoint="0" :tableClass="tableClass" @row-select="onRowSelect">
             <Column selectionMode="single" :headerClass="headerModeClass" :bodyClass="bodyModeClass"></Column>
             <Column field="label" header="Value" :headerClass="headerClass" :bodyClass="bodyClass"></Column>
           </DataTable>
         </div>
         <!-- type: string -->
-        <div v-else-if="selectedAttName?.type === 'string'">
+        <div v-else-if="selectedAttName?.type === 'string'" class="w-full">
           <DataTable v-model:selection="selectedAttRange" :value="attRangeData" dataKey="id" breakpoint="0" tableClass="w-full !border-separate !border-spacing-x-2 !table-auto text-sm"  @row-select="onRowSelect">
             <ColumnGroup type="header">
               <Row>
@@ -54,7 +54,7 @@
           </DataTable>
         </div>
         <!-- type: value -->
-        <div v-else-if="valueTypes.includes(selectedAttName?.type)">
+        <div v-else-if="valueTypes.includes(selectedAttName?.type)" class="space-y-2 text-sm w-full">
           <!-- Chart.js -->
           <div class="h-3/5 relative">
             <Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" id="chartCanvasId"/>
@@ -88,7 +88,7 @@ import { storeToRefs } from 'pinia';
 import AllMapDataStore from '@/stores/allMapData.js';
 import { Chart, registerables } from 'chart.js';
 import 'chartjs-adapter-date-fns';
-import { setLineChartData, setBarChartData, timeRange, yTimeRange, getXIndex, formatTime } from '@/module/setChartData.js';
+import { setLineChartData } from '@/module/setChartData.js';
 import getMoment from 'moment';
 
 export default {
@@ -104,8 +104,8 @@ export default {
       selectedAttRange: null,
       valueTypes: ['int', 'float', 'date'],
       classTypes: ['boolean', 'string'],
-      chartData: null,
+      chartData: {},
-      chartOptions: null,
+      chartOptions: {},
       chartComplete: null, // 已出圖的 chart.js 資料
       selectArea: null,
       selectRange: 1000, // 更改 select 的切分數
@@ -293,11 +293,13 @@ 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';
 
       this.chartData = {
         datasets: [
           {
-            label: 'Case',
+            label: 'Attribute Value',
             data: data,
             fill: 'start',
             showLine: false,
@@ -338,9 +340,8 @@ export default {
         },
         scales: {
           x: {
-            type: 'time',
             ticks: {
-              autoSkip: false,
+              autoSkip: true, // 依比例彈性顯示 label 數量
               maxRotation: 0, // 不旋轉 lable 0~50
               color: '#334155',
               display: true,
@@ -366,6 +367,8 @@ export default {
           },
         },
       };
+      if(!isDateType) this.chartData.labels = xData;
+      if(isDateType) this.chartOptions.scales.x.type = 'time';
     },
     /**
      * 滑塊改變的時候