diff --git a/src/components/Discover/Filter/Trace.vue b/src/components/Discover/Filter/Trace.vue
index 82bbead..dc4bb65 100644
--- a/src/components/Discover/Filter/Trace.vue
+++ b/src/components/Discover/Filter/Trace.vue
@@ -12,9 +12,6 @@
Select percentage of case {{ caseTotalPercent }}%
-
{{ this.traces.map(trace => this.getPercentLabel(trace.ratio)).slice(this.selectArea[0], this.selectArea[1]) }}
-
- {{ selectArea }}
@@ -91,38 +88,41 @@ export default {
traceTotal: function() {
return this.traces.length;
},
+ traceCountTotal: function() {
+ return this.traces.map(trace => trace.count).reduce((acc, cur) => acc + cur, 0);
+ },
traceList: function() {
+ let sum = this.traces.map(trace => trace.count).reduce((acc, cur) => acc + cur, 0);
+
return this.traces.map(trace => {
return {
id: trace.id,
value: Number((trace.ratio * 100).toFixed(1)),
count: trace.count,
- ratio: this.getPercentLabel(trace.ratio),
+ ratio: this.getPercentLabel(trace.count / this.traceCountTotal),
};
}).sort((x, y) => x.id - y.id)
.slice(this.selectArea[0], this.selectArea[1]);
},
caseTotalPercent: function() {
- let sum = 0;
- this.traceList.forEach(trace => sum += Number(trace.ratio));
-
- let str = sum.toFixed(1).toString();
- let lastDigit = str[str.length - 1]; // 取得小數點後的第一位數字
-
- return lastDigit === '0' ? sum.toFixed(0) : sum.toFixed(1)
+ let countSum = this.traces.map(trace => trace.count).reduce((acc, cur) => acc + cur, 0);
+ let ratioSum = this.traceList.map(trace => trace.count).reduce((acc, cur) => acc + cur, 0) / this.traceCountTotal;
+ return this.getPercentLabel(ratioSum)
},
chartData: function() {
const start = this.selectArea[0];
const end = this.selectArea[1]-1;
- let selectAreaData = this.traces.map((trace, index) => index >= start && index<= end ? 'rgba(0,153,255)' : 'rgba(203, 213, 225)');
+ const labels = this.traces.map(trace => `#${trace.id}`);
+ const data = this.traces.map(trace => this.getPercentLabel(trace.count / this.traceCountTotal));
+ const selectAreaData = this.traces.map((trace, index) => index >= start && index<= end ? 'rgba(0,153,255)' : 'rgba(203, 213, 225)');
return {
// 要呈現的資料
- labels: this.traces.map(trace => ''),
+ labels,
datasets: [
{
label: 'Trace', // 資料的標題標籤
- data: this.traces.map(trace => this.getPercentLabel(trace.ratio)),
+ data,
backgroundColor: selectAreaData,
categoryPercentage: 1.0,
barPercentage: 1.0
diff --git a/src/components/Discover/SidebarTraces.vue b/src/components/Discover/SidebarTraces.vue
index cc6d888..08124b2 100644
--- a/src/components/Discover/SidebarTraces.vue
+++ b/src/components/Discover/SidebarTraces.vue
@@ -83,12 +83,14 @@ export default {
return this.traces.length;
},
traceList: function() {
+ let sum = this.traces.map(trace => trace.count).reduce((acc, cur) => acc + cur, 0);
+
return this.traces.map(trace => {
return {
id: trace.id,
value: Number((trace.ratio * 100).toFixed(1)),
count: trace.count,
- ratio: this.getPercentLabel(trace.ratio),
+ ratio: this.getPercentLabel(trace.count / sum),
};
}).sort((x, y) => x.id - y.id);
},