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

Discover: SidebarFilter Trace Slider control to table and chart done.

Browse Source
This commit is contained in:
chiayin
2023-05-16 11:17:08 +08:00
parent 518842e112
commit 85ed1f84b7
1 changed files with 7 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/Discover/Filter/Trace.vue
View File

@@ -10,10 +10,9 @@
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-2/5" />
<div class="px-2">
<p class="py-4">Select percentage of case <span class=" float-right">{{ caseTotalPercent }}%</span></p>
<Slider v-model="selectArea" :step="1" :min="1" :max="traceTotal" range class="mx-2" />
<Slider v-model="selectArea" :step="1" :min="0" :max="traceTotal" range class="mx-2" />
</div>
<!-- @change="chartData = setChartData(traceList)" -->
<br/><br/>{{ this.traces.map(trace => this.getPercentLabel(trace.ratio)).slice(this.selectArea[0]-1, this.selectArea[1]) }}
<br/><br/>{{ this.traces.map(trace => this.getPercentLabel(trace.ratio)).slice(this.selectArea[0], this.selectArea[1]) }}
<br/>
{{ selectArea }}
</section>
@@ -47,7 +46,7 @@
</div>
</section>
<!-- Trace item Table -->
<section v-show="showTraceId" class="pl-4 h-full min-w-full">
<section v-show="showTraceId" class="pl-4 h-full min-w-full py-2 space-y-2">
<p class="h2 mb-2">Trace #{{ showTraceId }}</p>
<div class="h-52 w-full px-2 mb-2 border border-neutral-300 rounded">
<div class="h-full w-full">
@@ -85,7 +84,7 @@ export default {
},
showTraceId: null,
chartOptions: null,
selectArea: [1, 2]
selectArea: [0, 1]
}
},
computed: {
@@ -101,7 +100,7 @@ export default {
ratio: this.getPercentLabel(trace.ratio),
};
}).sort((x, y) => x.id - y.id)
.slice(this.selectArea[0]-1, this.selectArea[1]);
.slice(this.selectArea[0], this.selectArea[1]);
},
caseTotalPercent: function() {
let sum = 0;
@@ -113,7 +112,7 @@ export default {
return lastDigit === '0' ? sum.toFixed(0) : sum.toFixed(1)
},
chartData: function() {
const start = this.selectArea[0]-1;
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)');
@@ -336,7 +335,7 @@ export default {
this.chartOptions = this.barOptions();
// this.chartData = this.setChartData();
// this.chartOptions = this.setChartOptions();
this.selectArea = [1, this.traceTotal]
this.selectArea = [0, this.traceTotal]
},
}
</script>