imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: add Attributes boolean type freq.

Browse Source
This commit is contained in:
chiayin
2023-11-03 13:14:23 +08:00
parent cbb1f7c446
commit 59f59e6280
1 changed files with 37 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/components/Discover/Map/Filter/Attributes.vue
View File

@@ -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">
<Column selectionMode="single" :headerClass="headerModeClass" :bodyClass="bodyModeClass"></Column>
<Column field="label" header="Value" :headerClass="headerClass" :bodyClass="bodyClass"></Column>
<DataTable v-model:selection="selectedAttRange" :value="attRangeData" dataKey="id" breakpoint="0" :tableClass="tableClass" @row-select="onRowSelect" >
<ColumnGroup type="header">
<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;
switch (type) {
case 'boolean':
data = [
{
id: 1,
key: this.selectedAttName.key,
type: type,
value: true,
label: 'Yes'
},
{
id: 2,
key: this.selectedAttName.key,
type: type,
value: false,
label: 'No'
},
]
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;
}
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
};
result.label = type !== 'boolean' ? null : item.value ? 'Yes' : 'No';
return result;
})
return data.sort((x, y) => y.freq - x.freq);
},
// 取出選取的 Attribute radio 數值型的資料
valueData: function() {