From d7e88f6407d94259b6f643a577d4dedb0c6ff0f7 Mon Sep 17 00:00:00 2001 From: chiayin Date: Wed, 17 May 2023 10:43:50 +0800 Subject: [PATCH] Discover: SidebarFilter Trace done. But backend need to check creat Map. --- src/components/Discover/Filter/Timeframes.vue | 90 ++++++++++++++++++ src/components/Discover/Filter/Trace.vue | 94 +------------------ 2 files changed, 95 insertions(+), 89 deletions(-) create mode 100644 src/components/Discover/Filter/Timeframes.vue diff --git a/src/components/Discover/Filter/Timeframes.vue b/src/components/Discover/Filter/Timeframes.vue new file mode 100644 index 0000000..f7fcd49 --- /dev/null +++ b/src/components/Discover/Filter/Timeframes.vue @@ -0,0 +1,90 @@ + + diff --git a/src/components/Discover/Filter/Trace.vue b/src/components/Discover/Filter/Trace.vue index 3de2629..a3b079c 100644 --- a/src/components/Discover/Filter/Trace.vue +++ b/src/components/Discover/Filter/Trace.vue @@ -112,10 +112,9 @@ export default { const end = this.selectArea[1]-1; 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)'); + const selectAreaData = this.traces.map((trace, index) => index >= start && index <= end ? 'rgba(0,153,255)' : 'rgba(203, 213, 225)'); - return { - // 要呈現的資料 + return { // 要呈現的資料 labels, datasets: [ { @@ -130,6 +129,9 @@ export default { } }, methods: { + /** + * Set bar chart Options + */ barOptions(){ return { maintainAspectRatio: false, @@ -166,96 +168,12 @@ export default { } }; }, - setChartData() { - 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, - - }, - { - 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, - } - }, - 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 * @returns {string} 轉換完成的百分比字串 */ getPercentLabel(val){ - // return (val * 100 === 100) ? `${val * 100}%` : `${(val * 100).toFixed(1)}%`; return (val * 100 === 100) ? val * 100 : (val * 100).toFixed(1); }, /** @@ -331,8 +249,6 @@ export default { this.setEdgesData(); this.createCy(); this.chartOptions = this.barOptions(); - // this.chartData = this.setChartData(); - // this.chartOptions = this.setChartOptions(); this.selectArea = [0, this.traceTotal] }, }