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