Discover: sidebarfilter slider control to chart done.
This commit is contained in:
chiayin
@@ -2,21 +2,27 @@
|
||||
<div class="flex justify-between items-start bg-neutral-10 border border-neutral-300 rounded-xl px-4 w-full h-full">
|
||||
|
||||
<!-- Range Selection -->
|
||||
<section>
|
||||
<section class="py-2 space-y-2 text-sm w-1/2 h-full">
|
||||
<p class="h2">Range Selection</p>
|
||||
<div class="text-primary h2 flex items-center justify-start">
|
||||
<span class="material-symbols-outlined m-2">info</span>
|
||||
<span class="material-symbols-outlined mr-2 text-base">info</span>
|
||||
<p>Select a percentage range.</p>
|
||||
</div>
|
||||
<Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem" />
|
||||
<p class="my-6">Select percentage of case <span class=" float-right">{{ caseTotalPercent }}%</span></p>
|
||||
<Slider v-model="selectArea" :step="1" :min="1" :max="traceTotal" range class="w-14rem" />
|
||||
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-2/5" />
|
||||
<div class="px-2">
|
||||
<p class="py-2">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" />
|
||||
</div>
|
||||
<!-- @change="chartData = setChartData(traceList)" -->
|
||||
<br/><br/>{{ this.traces.map(trace => this.getPercentLabel(trace.ratio)).slice(this.selectArea[0]-1, this.selectArea[1]) }}
|
||||
<br/>
|
||||
{{ selectArea }}
|
||||
</section>
|
||||
<!-- Trace List -->
|
||||
<section class="h-full">
|
||||
<p class="h2 px-2 mb-2">Trace List ({{ traceTotal }})</p>
|
||||
<section class="h-full py-2 space-y-2">
|
||||
<p class="h2">Trace List ({{ traceTotal }})</p>
|
||||
<p class="text-primary h2 flex items-center justify-start">
|
||||
<span class="material-symbols-outlined m-2">info</span>Click trace number to see more.
|
||||
<span class="material-symbols-outlined mr-2 text-base">info</span>Click trace number to see more.
|
||||
</p>
|
||||
<div class="overflow-y-scroll overflow-x-hidden scrollbar mx-[-8px] max-h-[calc(100%_-_96px)]" >
|
||||
<table class="border-separate border-spacing-x-2 text-sm">
|
||||
@@ -79,10 +85,8 @@ export default {
|
||||
edges:[],
|
||||
},
|
||||
showTraceId: null,
|
||||
|
||||
chartData: null,
|
||||
chartOptions: null,
|
||||
selectArea: [1, 1]
|
||||
selectArea: [1, 2]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -109,54 +113,147 @@ export default {
|
||||
|
||||
return lastDigit === '0' ? sum.toFixed(0) : sum.toFixed(1)
|
||||
// return sum.toFixed(1);
|
||||
},
|
||||
chartData: function() {
|
||||
const start = this.selectArea[0]-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)');
|
||||
|
||||
return {
|
||||
// 要呈現的資料
|
||||
labels: this.traces.map(trace => ''),
|
||||
datasets: [
|
||||
{
|
||||
label: 'Trace', // 資料的標題標籤
|
||||
data: this.traces.map(trace => this.getPercentLabel(trace.ratio)),
|
||||
backgroundColor: selectAreaData,
|
||||
categoryPercentage: 1.0,
|
||||
barPercentage: 1.0
|
||||
},
|
||||
]
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
barOptions(){
|
||||
return {
|
||||
maintainAspectRatio: false,
|
||||
aspectRatio: 0.8,
|
||||
layout: {
|
||||
padding: {
|
||||
top: 16,
|
||||
left: 8,
|
||||
right: 8,
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: { // 圖例
|
||||
display: false,
|
||||
}
|
||||
},
|
||||
animations: false,
|
||||
scales: {
|
||||
x: {
|
||||
display:false
|
||||
},
|
||||
y: {
|
||||
ticks: { // 設定間隔數值
|
||||
display: false, // 隱藏數值，只顯示格線
|
||||
min: 0,
|
||||
max: this.traceList[0].ratio,
|
||||
stepSize: (this.traceList[0].ratio)/4,
|
||||
},
|
||||
grid: {
|
||||
color: 'rgba(148,163,184)',
|
||||
drawBorder: false
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
setChartData() {
|
||||
const documentStyle = getComputedStyle(document.documentElement);
|
||||
const documentStyle = getComputedStyle(document.documentElement);
|
||||
return {
|
||||
// 要呈現的資料
|
||||
labels: this.traces.map(trace => ''),
|
||||
datasets: [
|
||||
{
|
||||
label: 'Trace', // 資料的標題標籤
|
||||
data: this.traces.map(trace => this.getPercentLabel(trace.ratio)),
|
||||
fill: true,
|
||||
// borderColor: documentStyle.getPropertyValue('--primary-500'),
|
||||
showLine: false,
|
||||
tension: 0.4,
|
||||
// backgroundColor: 'rgba(0,153,255)',
|
||||
pointRadius: 0,
|
||||
|
||||
return {
|
||||
// 要呈現的資料
|
||||
labels: ['', '', '', '', '', '', ''], // 水平軸
|
||||
datasets: [
|
||||
{
|
||||
label: 'Trace List', // 資料的標題標籤
|
||||
data: [12, 51, 62, 33, 21, 100, 45],
|
||||
fill: true,
|
||||
borderColor: documentStyle.getPropertyValue('--orange-500'),
|
||||
tension: 0.4,
|
||||
backgroundColor: 'rgba(255,167,38,0.2)'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
{
|
||||
label: 'Selected Trace',
|
||||
// data: [
|
||||
// {x: 0, y:37.8},
|
||||
// {x: 0, y:29.5},
|
||||
// {x: 0, y:17.9},
|
||||
// {x: 0, y:8.8},
|
||||
// {x: 0, y:3.2},
|
||||
// {x: 0, y:0.8},
|
||||
// {x: 0, y:0.4},
|
||||
// {x: 0, y:0.4},
|
||||
// {x: 0, y:0.4},
|
||||
// {x: 0, y:0.4},
|
||||
// {x: 0, y:0.4},
|
||||
// ],
|
||||
data: [
|
||||
{x: 0, y:37.8},
|
||||
{x: 0, y:29.5},
|
||||
{x: null, y:17.9},
|
||||
],
|
||||
// data: this.traces.map(trace=>trace.ratio),
|
||||
fill: true,
|
||||
// borderColor: documentStyle.getPropertyValue('--primary-500'),
|
||||
showLine: false,
|
||||
tension: 0.4,
|
||||
backgroundColor: documentStyle.getPropertyValue('--primary-500'),
|
||||
pointRadius: 0,
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
setChartOptions() {
|
||||
return {
|
||||
// 自訂屬性設定
|
||||
maintainAspectRatio: false,
|
||||
aspectRatio: 0.6,
|
||||
layout: {
|
||||
padding: {
|
||||
top: 16,
|
||||
left: 8,
|
||||
right: 8,
|
||||
}
|
||||
},
|
||||
setChartOptions() {
|
||||
return {
|
||||
// 自訂屬性設定
|
||||
maintainAspectRatio: false,
|
||||
aspectRatio: 0.6,
|
||||
plugins: {
|
||||
legend: { // 圖例
|
||||
display: false,
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: false, // 隱藏 x 軸
|
||||
},
|
||||
y: {
|
||||
ticks: { // 設定間隔數值
|
||||
display: false, // 隱藏數值，只顯示格線
|
||||
min: 0,
|
||||
max: 100,
|
||||
stepSize: 25,
|
||||
},
|
||||
grid: {
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
plugins: {
|
||||
legend: { // 圖例
|
||||
display: false,
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: false, // 隱藏 x 軸
|
||||
},
|
||||
y: {
|
||||
ticks: { // 設定間隔數值
|
||||
display: false, // 隱藏數值，只顯示格線
|
||||
min: 0,
|
||||
max: this.traceList[0].ratio,
|
||||
stepSize: (this.traceList[0].ratio)/4,
|
||||
},
|
||||
grid: {
|
||||
drawBorder: false
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
/**
|
||||
* Number to percentage
|
||||
* @param {number} val
|
||||
@@ -238,8 +335,10 @@ export default {
|
||||
this.setNodesData();
|
||||
this.setEdgesData();
|
||||
this.createCy();
|
||||
this.chartData = this.setChartData();
|
||||
this.chartOptions = this.setChartOptions();
|
||||
// this.chartData = this.barData();
|
||||
this.chartOptions = this.barOptions();
|
||||
// this.chartData = this.setChartData();
|
||||
// this.chartOptions = this.setChartOptions();
|
||||
this.selectArea = [1, this.traceTotal]
|
||||
},
|
||||
}
|
||||
@@ -248,7 +347,7 @@ export default {
|
||||
<style scoped>
|
||||
/* 進度條顏色 */
|
||||
:deep(.p-progressbar .p-progressbar-value) {
|
||||
@apply bg-primary
|
||||
@apply !bg-primary
|
||||
}
|
||||
/* Table set */
|
||||
:deep(.p-datatable-thead th) {
|
||||
|
||||
@@ -67,8 +67,6 @@ export default {
|
||||
},
|
||||
setup() {
|
||||
const allMapDataStore = AllMapDataStore();
|
||||
// const { traces, traceTaskSeq, cases } = storeToRefs(allMapDataStore);
|
||||
|
||||
return {allMapDataStore}
|
||||
},
|
||||
data() {
|
||||
|
||||
Reference in New Issue
Block a user