Discover: SidebarFilter Timeframes LineChart Option done.
This commit is contained in:
chiayin
@@ -1,63 +1,115 @@
|
||||
<template>
|
||||
<div class="bg-neutral-10 border border-neutral-300 rounded-xl px-4 w-full h-full">
|
||||
<p class="h2">Hello World</p>
|
||||
|
||||
<section class="py-2 space-y-2 text-sm min-w-[48%] h-full">
|
||||
<p class="h2">Range Selection</p>
|
||||
<div class="text-primary h2 flex items-center justify-start">
|
||||
<span class="material-symbols-outlined mr-2 text-base">info</span>
|
||||
<p>Select or fill in a time range.</p>
|
||||
</div>
|
||||
<Chart type="line" :data="chartData" :options="chartOptions" class="h-3/5" />
|
||||
<div class="px-2">
|
||||
<Slider v-model="selectArea" :step="1" :min="1" :max="this.filterTimeframe.data.length" range class="mx-2" />
|
||||
<br/>
|
||||
{{ selectArea }}<br/>
|
||||
total: {{ this.filterTimeframe.data.length }}
|
||||
</div>
|
||||
<div>
|
||||
<div @click.stop.prevent="">
|
||||
<span class="block">Start date</span>
|
||||
<Calendar v-model="date" dateFormat="dd/mm/yy" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { storeToRefs } from 'pinia';
|
||||
import AllMapDataStore from '@/stores/allMapData.js';
|
||||
import getMoment from 'moment';
|
||||
|
||||
export default{
|
||||
methods: {
|
||||
setChartData() {
|
||||
const documentStyle = getComputedStyle(document.documentElement);
|
||||
setup() {
|
||||
const allMapDataStore = AllMapDataStore();
|
||||
const { filterTimeframe } = storeToRefs(allMapDataStore);
|
||||
|
||||
return {allMapDataStore, filterTimeframe}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chartOptions: null,
|
||||
selectArea: [1, 2],
|
||||
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
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
// 要呈現的資料
|
||||
labels: this.traces.map(trace => ''),
|
||||
// labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Trace', // 資料的標題標籤
|
||||
data: this.traces.map(trace => this.getPercentLabel(trace.ratio)),
|
||||
label: 'Case', // 資料的標題標籤
|
||||
data: chartData,
|
||||
fill: true,
|
||||
// borderColor: documentStyle.getPropertyValue('--primary-500'),
|
||||
showLine: false,
|
||||
tension: 0.4,
|
||||
// backgroundColor: 'rgba(0,153,255)',
|
||||
pointRadius: 0,
|
||||
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,
|
||||
}
|
||||
// {
|
||||
// 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();
|
||||
|
||||
},
|
||||
setChartOptions() {
|
||||
return {
|
||||
// 自訂屬性設定
|
||||
// 找出 y 軸最大值，乘以 1.1 讓圖的上方多一點空間
|
||||
const max = this.filterTimeframe.y_axis.max * 1.1;
|
||||
|
||||
return { // 自訂屬性設定
|
||||
maintainAspectRatio: false,
|
||||
aspectRatio: 0.6,
|
||||
layout: {
|
||||
@@ -68,28 +120,48 @@ export default{
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: { // 圖例
|
||||
display: false,
|
||||
}
|
||||
legend: false // 圖例
|
||||
},
|
||||
animations: false, // 取消動畫
|
||||
scales: {
|
||||
x: {
|
||||
display: false, // 隱藏 x 軸
|
||||
},
|
||||
y: {
|
||||
ticks: { // 設定間隔數值
|
||||
display: false, // 隱藏數值，只顯示格線
|
||||
min: 0,
|
||||
max: this.traceList[0].ratio,
|
||||
stepSize: (this.traceList[0].ratio)/4,
|
||||
ticks: {
|
||||
color: '#0f172a',
|
||||
},
|
||||
grid: {
|
||||
drawBorder: false
|
||||
// drawOnChartArea: false, // 隱藏 x 軸網格
|
||||
display: false,
|
||||
// drawBorder: false,
|
||||
// drawTicks: false,
|
||||
},
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true, // scale 包含 0
|
||||
max: max,
|
||||
ticks: { // 設定間隔數值
|
||||
display: false, // 隱藏數值，只顯示格線
|
||||
stepSize: max / 4,
|
||||
},
|
||||
grid: {
|
||||
color: 'rgba(100,116,139)',
|
||||
drawBorder: false,
|
||||
z: 1,
|
||||
},
|
||||
border: {
|
||||
display: false,
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.chartOptions = this.setChartOptions();
|
||||
this.selectArea = [1, 2];
|
||||
// console.log(Date.parse('2014/11/01 00:34:44'));
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
canvas{position:relative; z-index:1;}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user