imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP customizing x tick according to time difference

Browse Source
This commit is contained in:
Cindy Chang
2024-06-07 10:37:28 +08:00
parent 92160fab54
commit fc99bac449
3 changed files with 151 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/views/Discover/Performance/index.vue
View File

@@ -224,7 +224,7 @@ export default {
* 手刻折線圖 x label 時間刻度
* @param { object } valueData {min: '2022-02-20T19:54:12', max: '2023-11-27T07:21:53'}
*/
xLabelsData(valueData) {
setXLabelsData(valueData) {
let min = new Date(valueData.min).getTime();
let max = new Date(valueData.max).getTime();
let numPoints = 12;
@@ -260,8 +260,8 @@ export default {
let maxX = chartData.x_axis.max;
let maxY = chartData.y_axis.max;
let xData;
let setData = {};
let setOption = {};
let primeVueSetData = {};
let primeVueSetOption = {};
const getMoment = (time)=> {
return this.$moment(time).format('YYYY/M/D hh:mm:ss')
};
@@ -272,14 +272,14 @@ export default {
case 'date':
datasets = setLineChartData(chartData.data, chartData.x_axis.max, chartData.x_axis.min, false, chartData.y_axis.max,
chartData.y_axis.min);
xData = this.xLabelsData(chartData.x_axis);
xData = this.setXLabelsData(chartData.x_axis);
break;
case 'count': // 次數 10 個點
datasets = chartData.data;
xData = chartData.data.map(item => new Date(item.x).getTime());
break;
}
setData = {
primeVueSetData = {
labels: xData,
datasets: [
{
@@ -291,7 +291,7 @@ export default {
}
]
};
setOption = {
primeVueSetOption = {
responsive: true,
maintainAspectRatio: false,
layout: {
@@ -374,24 +374,24 @@ export default {
};
switch (yUnit) {
case 'date':
setOption.plugins.tooltip.callbacks.label = function(context) {
primeVueSetOption.plugins.tooltip.callbacks.label = function(context) {
return `${content.y}: ${getSimpleTimeLabel(context.parsed.y, 2)}`;
};
setOption.scales.x.min = minX;
setOption.scales.x.max = maxX;
setOption.scales.y.ticks.callback = function (value, index, ticks) {
primeVueSetOption.scales.x.min = minX;
primeVueSetOption.scales.x.max = maxX;
primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
return getFollowTimeLabel(value, maxY, 1)
};
break;
case 'count':
setOption.scales.y.ticks.precision = 0; // y 軸顯示小數點後 0 位
setOption.plugins.tooltip.callbacks.label = function(context) {
primeVueSetOption.scales.y.ticks.precision = 0; // y 軸顯示小數點後 0 位
primeVueSetOption.plugins.tooltip.callbacks.label = function(context) {
return `${content.y}: ${context.parsed.y}`;
};
break;
}
return [setData, setOption]
return [primeVueSetData, primeVueSetOption]
},
/**
* 建立長條圖
@@ -406,8 +406,8 @@ export default {
let datasets = chartData.data;
let xData;
let yData;
let setData = {};
let setOption = {};
let primeVueSetData = {};
let primeVueSetOption = {};
datasets = datasets.map(value => {
return {
@@ -418,7 +418,7 @@ export default {
xData = datasets.map(i => i.x);
yData = datasets.map(i => i.y)
setData = {
primeVueSetData = {
labels: xData,
datasets: [
{
@@ -428,7 +428,7 @@ export default {
}
]
};
setOption = {
primeVueSetOption = {
responsive: true,
maintainAspectRatio: false,
layout: {
@@ -505,7 +505,7 @@ export default {
},
};
return [setData, setOption]
return [primeVueSetData, primeVueSetOption]
},
/**
* 建立水平長條圖
@@ -518,15 +518,15 @@ export default {
const maxY = chartData.y_axis.max;
const getSimpleTimeLabel = simpleTimeLabel;
const getFollowTimeLabel = followTimeLabel;
let setData = {};
let setOption = {};
let primeVueSetData = {};
let primeVueSetOption = {};
// 大到小排序
chartData.data.sort((a, b) => b.y - a.y);
const xData = chartData.data.map(item => item.x);
const yData = chartData.data.map(item => item.y);
setData = {
primeVueSetData = {
labels: xData,
datasets: [
{
@@ -536,7 +536,7 @@ export default {
}
]
};
setOption = {
primeVueSetOption = {
indexAxis: 'y',
responsive: true,
maintainAspectRatio: false,
@@ -609,33 +609,33 @@ export default {
};
switch (xUnit) {
case 'date':
setOption.plugins.tooltip.callbacks.label = function(context) {
primeVueSetOption.plugins.tooltip.callbacks.label = function(context) {
return `${content.x}: ${getSimpleTimeLabel(context.parsed.x, 2)}`;
};
setOption.scales.x.ticks.callback = function (value, index, ticks) {
primeVueSetOption.scales.x.ticks.callback = function (value, index, ticks) {
return getFollowTimeLabel(value, maxY, 1)
};
break;
case 'count':
setOption.scales.x.ticks.precision = 0; // x 軸顯示小數點後 0 位
setOption.plugins.tooltip.callbacks.label = function(context) {
primeVueSetOption.scales.x.ticks.precision = 0; // x 軸顯示小數點後 0 位
primeVueSetOption.plugins.tooltip.callbacks.label = function(context) {
return `${content.x}: ${context.parsed.x}`;
}
break;
}
if(isSingle) { // 設定一個活動的 y label、提示框文字
setOption.plugins.tooltip.callbacks.title = function(context) {
primeVueSetOption.plugins.tooltip.callbacks.title = function(context) {
return `${content.y}: ${context[0].label}`;
};
setOption.scales.y.ticks.callback = function (value, index, ticks) {
primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
let label = xData[index];
return label.length > 21 ? `${label.substring(0, 18)}...` : label
};
}else { // 設定「活動」到「活動」的 y label、提示框文字
setOption.plugins.tooltip.callbacks.title = function(context) {
primeVueSetOption.plugins.tooltip.callbacks.title = function(context) {
return `${content.y}: ${context[0].label.replace(',', ' - ')}`
};
setOption.scales.y.ticks.callback = function (value, index, ticks) {
primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
let label = xData[index];
let labelStart = label[0];
let labelEnd = label[1];
@@ -646,7 +646,7 @@ export default {
};
}
return [setData, setOption]
return [primeVueSetData, primeVueSetOption]
},
},
async created() {