From 0c7765674cc5a422f64e534879d3837950d0dc09 Mon Sep 17 00:00:00 2001 From: chiayin Date: Mon, 15 May 2023 16:08:00 +0800 Subject: [PATCH] Discover: sidebarfilter slider control to chart done. --- src/assets/vendors.css | 10 ++ src/components/Discover/Filter/Trace.vue | 209 ++++++++++++++++------ src/components/Discover/SidebarTraces.vue | 2 - 3 files changed, 164 insertions(+), 57 deletions(-) diff --git a/src/assets/vendors.css b/src/assets/vendors.css index 6fd6f3c..1d7f382 100644 --- a/src/assets/vendors.css +++ b/src/assets/vendors.css @@ -49,3 +49,13 @@ .p-inputswitch .p-inputswitch-slider:before { @apply !w-5 !h-5 !left-0.5 } +/* slider 拉霸 */ +.p-slider .p-slider-handle { + @apply !h-3.5 !w-3.5 !border !border-primary +} +.p-slider.p-slider-horizontal .p-slider-handle { + @apply !-my-2 +} +.p-slider.p-slider-horizontal { + @apply !h-1 +} diff --git a/src/components/Discover/Filter/Trace.vue b/src/components/Discover/Filter/Trace.vue index fc1e312..c3dd826 100644 --- a/src/components/Discover/Filter/Trace.vue +++ b/src/components/Discover/Filter/Trace.vue @@ -2,21 +2,27 @@
-
+

Range Selection

- info + info

Select a percentage range.

- -

Select percentage of case {{ caseTotalPercent }}%

- + +
+

Select percentage of case {{ caseTotalPercent }}%

+ +
+ +

{{ this.traces.map(trace => this.getPercentLabel(trace.ratio)).slice(this.selectArea[0]-1, this.selectArea[1]) }} +
+ {{ selectArea }}
-
-

Trace List ({{ traceTotal }})

+
+

Trace List ({{ traceTotal }})

- infoClick trace number to see more. + infoClick trace number to see more.

@@ -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 {