diff --git a/public/timeFrameSlope.jpg b/public/timeFrameSlope.jpg
new file mode 100644
index 0000000..025834d
Binary files /dev/null and b/public/timeFrameSlope.jpg differ
diff --git a/src/components/Discover/Filter/Timeframes.vue b/src/components/Discover/Filter/Timeframes.vue
index 12e629f..c6907d4 100644
--- a/src/components/Discover/Filter/Timeframes.vue
+++ b/src/components/Discover/Filter/Timeframes.vue
@@ -8,17 +8,18 @@
-
+
{{ selectArea }}
- total: {{ this.filterTimeframe.data.length }}
+ total: {{ timeFrameData.length }}
+
@@ -26,6 +27,7 @@
import { storeToRefs } from 'pinia';
import AllMapDataStore from '@/stores/allMapData.js';
import getMoment from 'moment';
+import Chart from 'chart.js/auto'
export default{
setup() {
@@ -36,24 +38,71 @@ export default{
},
data() {
return {
+ // timeFrameData: [],
chartOptions: null,
- selectArea: [1, 2],
+ selectArea: [1, 10],
date: null
}
},
computed: {
- chartData: function() {
- let labels = this.filterTimeframe.data.map(time => getMoment(time.x).format("YYYY-MM-DD"));
- let chartData = this.filterTimeframe.data.map(item => {
- return {
- x: getMoment(item.x).format("YYYY-MM-DD"),
- y: item.y
- }
+ // Set Slider Time Range，滑塊範圍: 最小值 + data(10 個) + 最大值
+ timeFrameData: function(){
+ let data = [...this.filterTimeframe.data];
+ // y 軸斜率計算請參考 ./public/timeFrameSlope 的圖
+ // x 值為 0 ~ 11,
+ // 將三的座標(ax, ay), (bx, by), (cx, cy)命名為 (a, b), (c, d), (e, f)
+ // 最小值: (f - b)(c - a) = (e - a)(d - b)，求 b = (ed - ad - fa - fc) / (e - c - a)
+ // 最大值: (f - b)(e - c) = (f - d)(e - a)，求 f = (be - bc -de + da) / (a - c)
+
+ // y 軸最小值
+ let a = 0;
+ let b;
+ let c = 1;
+ let d = this.filterTimeframe.data[0].y;
+ let e = 2;
+ let f = this.filterTimeframe.data[1].y;
+ b = (e*d - a*d - f*a - f*c) / (e - c - a)
+ // y 軸最大值
+ let ma = 9;
+ let mb = this.filterTimeframe.data[8].y;
+ let mc = 10;
+ let md = this.filterTimeframe.data[9].y;
+ let me = 11;
+ let mf;
+ mf = (mb*me - mb*mc -md*me + md*ma) / (ma - mc)
+
+ // 添加最小值
+ data.unshift({
+ x: this.filterTimeframe.x_axis.min,
+ y: b,
})
+ // 添加最大值
+ data.push({
+ x: this.filterTimeframe.x_axis.max,
+ y: mf,
+ })
+
+ return data;
+ },
+ timeFrameTotal: function() {
+ return this.timeFrameData.length;
+ },
+ chartData: function() {
+ // !!畫面顯示的時間，資料轉換，在這邊最後一個步驟做就好!!
+ let labels = this.timeFrameData.map(time => getMoment(time.x).format("YYYY-MM-DD"));
+ let chartData = this.timeFrameData.map(item => {
+ return item.y
+ // x: getMoment(item.x).format("YYYY-MM-DD"),
+ })
+
+ const start = this.selectArea[0]-1;
+ const end = this.selectArea[1]-1;
+ const inside = (ctx, value) => ctx.p0DataIndex >= start && ctx.p1DataIndex <= end ? value : undefined;
+ const outside = (ctx, value) => ctx.p0DataIndex < start || ctx.p1DataIndex > end ? value : undefined;
return {
// 要呈現的資料
- // labels,
+ labels,
datasets: [
{
label: 'Case', // 資料的標題標籤
@@ -61,50 +110,21 @@ export default{
fill: true,
showLine: false,
tension: 0.4,
- backgroundColor: 'rgba(0,153,255)',
- // pointRadius: 0,
-
+ backgroundColor: 'rgba(203, 213, 225)',
+ pointRadius: 0,
+ spanGaps: true,
+ segment: {
+ backgroundColor: ctx => inside(ctx, 'rgb(0,153,255)') || outside(ctx, 'rgb(203, 213, 225)'),
+ },
},
- // {
- // 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,
- // }
]
};
}
},
methods: {
- sss(e){
- console.log(e);
- // e.stop();
- // e.prevent();
- // e.preventDefault();
-
- },
+ /**
+ * Set bar chart Options
+ */
setChartOptions() {
// 找出 y 軸最大值，乘以 1.1 讓圖的上方多一點空間
const max = this.filterTimeframe.y_axis.max * 1.1;
@@ -120,7 +140,10 @@ export default{
}
},
plugins: {
- legend: false // 圖例
+ legend: false, // 圖例
+ filler: {
+ propagate: false
+ }
},
animations: false, // 取消動畫
scales: {
@@ -153,11 +176,9 @@ export default{
},
mounted() {
this.chartOptions = this.setChartOptions();
- this.selectArea = [1, 2];
- // console.log(Date.parse('2014/11/01 00:34:44'));
+ this.selectArea = [1, this.timeFrameTotal];
},
}
diff --git a/src/components/Discover/SidebarFilter.vue b/src/components/Discover/SidebarFilter.vue
index aee714c..d630829 100644
--- a/src/components/Discover/SidebarFilter.vue
+++ b/src/components/Discover/SidebarFilter.vue
@@ -132,7 +132,7 @@ export default {
'Mode': ['Directly follows', 'Eventually follows'],
'ModeAtt': ['Case', 'Activity'],
'Refine': ['Include', 'Exclude'],
- 'Containment': ['Contained in', 'Started in', 'End in', 'Activity in', 'Trim'],
+ 'Containment': ['Contained in', 'Started in', 'Ended in', 'Active in', 'Trim'],
},
tab: 'filter', // filter | funnel
selectValue: {
diff --git a/src/stores/files.js b/src/stores/files.js
index 741290b..b4fa4ba 100644
--- a/src/stores/files.js
+++ b/src/stores/files.js
@@ -75,6 +75,7 @@ export default defineStore('filesStore', {
})
if(this.httpStatus < 300) loading.isLoading = false;
} catch(error) {
+ console.dir(error); // safari 測試
this.httpStatus = error.request.status;
delay().then(() =>{
loading.isLoading = true;
@@ -107,6 +108,7 @@ export default defineStore('filesStore', {
});
if(this.httpStatus < 300) loading.isLoading = false;
} catch(error) {
+ console.dir(error); // safari 測試
this.httpStatus = error.request.status;
delay().then(() =>{
loading.isLoading = true;
diff --git a/src/stores/login.js b/src/stores/login.js
index 41511f7..4e4a793 100644
--- a/src/stores/login.js
+++ b/src/stores/login.js
@@ -41,6 +41,7 @@ export default defineStore('loginStore', {
this.$router.push('/files');
}
} catch(error) {
+ console.dir(error); // safari 測試
this.isInvalid = true;
};
},
@@ -68,6 +69,7 @@ export default defineStore('loginStore', {
this.userData = response.data;
} catch(error) {
+ console.dir(error); // safari 測試
};
},
/**
@@ -80,6 +82,7 @@ export default defineStore('loginStore', {
const response = await axios.get(api);
if(response.status !== 200) this.$router.push('/login');
} catch(error) {
+ console.dir(error); // safari 測試
this.$router.push('/login');
};
},