Fix: add Attributes boolean type freq.

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

@@ -20,9 +20,25 @@
       <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'" class="w-full">
-          <DataTable v-model:selection="selectedAttRange" :value="attRangeData" dataKey="id" breakpoint="0" :tableClass="tableClass" @row-select="onRowSelect">
+          <DataTable v-model:selection="selectedAttRange" :value="attRangeData" dataKey="id" breakpoint="0" :tableClass="tableClass" @row-select="onRowSelect" >
-            <Column selectionMode="single" :headerClass="headerModeClass" :bodyClass="bodyModeClass"></Column>
+            <ColumnGroup type="header">
-            <Column field="label" header="Value" :headerClass="headerClass" :bodyClass="bodyClass"></Column>
+              <Row>
+                  <Column selectionMode="single" :headerClass="headerModeClass" ></Column>
+                  <Column field="value" header="Value" :headerClass="headerClass"  sortable />
+                  <Column field="freq" header="Occurrences" :headerClass="headerClass" sortable :colspan="3" />
+              </Row>
+            </ColumnGroup>
+            <Column selectionMode="single" :bodyClass="bodyModeClass"></Column>
+            <Column field="label" header="Activity" :bodyClass="bodyClass"></Column>
+            <Column header="進度條" bodyClass="!py-2 !border-0 min-w-[96px]">
+              <template #body="slotProps">
+                <div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
+                  <div class="h-full bg-primary" :style="progressWidth(slotProps.data.occ_progress_bar)"></div>
+                </div>
+              </template>
+            </Column>
+            <Column field="occ_value" header="Occurrences" bodyClass="!text-right !py-2 !border-0"></Column>
+            <Column field="occ_ratio" header="Occurrence Ratio" bodyClass="!text-right !py-2 !border-0"></Column>
           </DataTable>
         </div>
         <!-- type: string -->
@@ -77,7 +93,6 @@
               <InputNumber v-model="valueStart" :min="valueStartMin" :max="valueStartMax" :maxFractionDigits="2" inputClass="w-24 text-sm text-right" @blur="sliderValueRange($event, 'start')"></InputNumber>
               <span class="block px-2">~</span>
               <InputNumber v-model="valueEnd" :min="valueEndMin" :max="valueEndMax"  inputClass="w-24 text-sm text-right" :maxFractionDigits="2" @blur="sliderValueRange($event, 'end')"></InputNumber>
-              <!-- :maxFractionDigits="2" -->
             </div>
           </div>
         </div>
@@ -150,47 +165,24 @@ export default {
     attRangeData: function() {
       let data = [];
       const type = this.selectedAttName.type;
-
+      let sum = this.selectedAttName.options.map(item => item.freq).reduce((acc, cur) => acc + cur, 0);
-      switch (type) {
+      data = this.selectedAttName.options.map((item, index) => {
-        case 'boolean':
+        let result;
-          data = [
+        let ratio = item.freq / sum;
-            {
+        result = {
-              id: 1,
+          id: index + 1,
-              key: this.selectedAttName.key,
+          key: this.selectedAttName.key,
-              type: type,
+          type: type,
-              value: true,
+          value: item.value,
-              label: 'Yes'
+          occ_progress_bar: ratio * 100,
-            },
+          occ_value: item.freq.toLocaleString('en-US'),
-            {
+          occ_ratio: this.getPercentLabel(ratio),
-              id: 2,
+          freq: item.freq
-              key: this.selectedAttName.key,
+        };
-              type: type,
+        result.label = type !== 'boolean' ? null : item.value ? 'Yes' : 'No';
-              value: false,
+        return result;
-              label: 'No'
+      })
-            },
+      return data.sort((x, y) => y.freq - x.freq);
-          ]
-          return data;
-        case 'string':
-          let sum = this.selectedAttName.options.map(item => item.freq).reduce((acc, cur) => acc + cur, 0);
-          data = this.selectedAttName.options.map((item, index) => {
-            let result;
-            let ratio = item.freq / sum;
-            result = {
-              id: index + 1,
-              key: this.selectedAttName.key,
-              type: type,
-              value: item.value,
-              occ_progress_bar: ratio * 100,
-              occ_value: item.freq.toLocaleString('en-US'),
-              occ_ratio: this.getPercentLabel(ratio),
-              freq: item.freq
-            };
-            return result;
-          })
-          return data.sort((x, y) => y.freq - x.freq);
-        default:
-          return null;
-      }
     },
     // 取出選取的 Attribute radio 數值型的資料
     valueData: function() {