This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch time-formatter
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit 2a909d9cfdf43714b1cfe90bd46cf48e6945ac79
Author: Ovilia <zwl.s...@gmail.com>
AuthorDate: Wed Jul 29 13:46:54 2020 +0800
fix(time): tooltip formatter for time axis #12859
---
src/lang.ts | 4 ++--
src/scale/Time.ts | 26 +++++++-------------------
src/util/format.ts | 34 ++++++++++++++++++++++------------
src/util/time.ts | 22 ++++++++++++++++++++--
test/timeZone.html | 17 ++++++++++++++---
5 files changed, 65 insertions(+), 38 deletions(-)
diff --git a/src/lang.ts b/src/lang.ts
index 2c94fef..42dc196 100644
--- a/src/lang.ts
+++ b/src/lang.ts
@@ -28,8 +28,8 @@ export default {
'七月', '八月', '九月', '十月', '十一月', '十二月'
],
monthAbbr: [
- '一', '二', '三', '四', '五', '六',
- '七', '八', '九', '十', '十一', '十二'
+ '1月', '2月', '3月', '4月', '5月', '6月',
+ '7月', '8月', '9月', '10月', '11月', '12月'
],
dayOfWeek: [
'星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'
diff --git a/src/scale/Time.ts b/src/scale/Time.ts
index 6f43e58..b7cd2aa 100644
--- a/src/scale/Time.ts
+++ b/src/scale/Time.ts
@@ -39,7 +39,6 @@
// as its original time, without any time difference.
import * as numberUtil from '../util/number';
-import * as formatUtil from '../util/format';
import * as timeUtil from '../util/time';
import * as scaleHelper from './helper';
import IntervalScale from './Interval';
@@ -82,11 +81,8 @@ class TimeScale extends IntervalScale {
_approxInterval: number;
getLabel(tick: TimeScaleTick): string {
- const labelFormatType = timeUtil.getUnitFromValue(
- tick.value,
- this.getSetting('useUTC')
- );
- return formatUtil.formatTime(labelFormatType, tick.value);
+ const useUTC = this.getSetting('useUTC');
+ return timeUtil.format(tick.value,
timeUtil.defaultLeveledFormatter.none, useUTC);
}
getFormattedLabel(
@@ -281,21 +277,15 @@ function getIntervalTicks(
isUTC: boolean,
extent: number[]
): TimeScaleTick[] {
+ const safeLimit = 10000;
const utc = isUTC ? 'UTC' : '';
const ticks: TimeScaleTick[] = [];
const unitNames = timeUtil.timeUnits;
let levelId = 0;
- for (let i = 0, hasTickInLevel = false; i < unitNames.length; ++i) {
+ for (let i = 0, hasTickInLevel = false; i < unitNames.length &&
ticks.length < safeLimit; ++i) {
let date = new Date(extent[0]) as any;
if (unitNames[i] === 'week' || unitNames[i] === 'half-week') {
- const endDate = new Date(extent[1]) as any;
- if (date['get' + utc + 'FullYear']() === endDate['get' + utc +
'FullYear']()
- && date['get' + utc + 'Month']() === endDate['get' + utc +
'Month']()
- ) {
- continue;
- }
-
date['set' + utc + 'Hours'](0);
date['set' + utc + 'Minutes'](0);
date['set' + utc + 'Seconds'](0);
@@ -310,8 +300,7 @@ function getIntervalTicks(
}
let isDateWithinExtent = true;
- let hasWeekData = false;
- while (isDateWithinExtent) {
+ while (isDateWithinExtent && ticks.length < safeLimit) {
const dates = approxInterval > ONE_DAY * 8 ? []
: (approxInterval > ONE_DAY * 3.5 ? [8, 16, 24] : [4, 8,
12, 16, 20, 24, 28]);
for (let d = 0; d < dates.length; ++d) {
@@ -322,7 +311,6 @@ function getIntervalTicks(
break;
}
else if (dateTime >= extent[0]) {
- hasWeekData = true;
ticks.push({
value: dateTime,
level: levelId
@@ -339,7 +327,7 @@ function getIntervalTicks(
)) {
// Level value changes within extent
let isFirst = true;
- while (true) {
+ while (ticks.length < safeLimit) {
switch (unitNames[i]) {
case 'year':
case 'half-year':
@@ -434,7 +422,7 @@ function getIntervalTicks(
date['set' + utc + 'Milliseconds'](0);
}
else {
- date['set' + utc + 'MilliSeconds'](date['get' +
utc + 'MilliSeconds']() + 100);
+ date['set' + utc + 'Milliseconds'](date['get' +
utc + 'Milliseconds']() + 100);
}
break;
}
diff --git a/src/util/format.ts b/src/util/format.ts
index e9df40f..0becbef 100644
--- a/src/util/format.ts
+++ b/src/util/format.ts
@@ -19,6 +19,7 @@
import * as zrUtil from 'zrender/src/core/util';
import * as numberUtil from './number';
+import * as timeUtil from './time';
import {TooltipRenderMode, ColorString} from './types';
import { Dictionary } from 'zrender/src/core/types';
@@ -93,21 +94,30 @@ export function formatTpl(
return '';
}
- const $vars = paramsList[0].$vars || [];
- for (let i = 0; i < $vars.length; i++) {
- const alias = TPL_VAR_ALIAS[i];
- tpl = tpl.replace(wrapVar(alias), wrapVar(alias, 0));
+ const isTimeAxis = paramsList[0].axisType.indexOf('time') >= 0;
+ if (isTimeAxis) {
+ const axisValue = paramsList[0].data[paramsList[0].axisIndex];
+ const date = timeUtil.getDateFromStr(
+ typeof axisValue === 'number' ? new Date(axisValue) : axisValue
+ );
+ return timeUtil.format(date, tpl);
}
- for (let seriesIdx = 0; seriesIdx < seriesLen; seriesIdx++) {
- for (let k = 0; k < $vars.length; k++) {
- const val = paramsList[seriesIdx][$vars[k]];
- tpl = tpl.replace(
- wrapVar(TPL_VAR_ALIAS[k], seriesIdx),
- encode ? encodeHTML(val) : val
- );
+ else {
+ const $vars = paramsList[0].$vars || [];
+ for (let i = 0; i < $vars.length; i++) {
+ const alias = TPL_VAR_ALIAS[i];
+ tpl = tpl.replace(wrapVar(alias), wrapVar(alias, 0));
+ }
+ for (let seriesIdx = 0; seriesIdx < seriesLen; seriesIdx++) {
+ for (let k = 0; k < $vars.length; k++) {
+ const val = paramsList[seriesIdx][$vars[k]];
+ tpl = tpl.replace(
+ wrapVar(TPL_VAR_ALIAS[k], seriesIdx),
+ encode ? encodeHTML(val) : val
+ );
+ }
}
}
-
return tpl;
}
diff --git a/src/util/time.ts b/src/util/time.ts
index 1c4cc5a..7060ca3 100644
--- a/src/util/time.ts
+++ b/src/util/time.ts
@@ -13,7 +13,7 @@ export const defaultLeveledFormatter = {
minute: '{HH}:{mm}',
second: '{HH}:{mm}:{ss}',
millisecond: '{hh}:{mm}:{ss} {SSS}',
- none: '{yyyy}-{MM}-{dd} {hh}:{mm}'
+ none: '{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}'
};
export type PrimaryTimeUnit = 'millisecond' | 'second' | 'minute' | 'hour'
@@ -50,7 +50,7 @@ export function isPrimaryTimeUnit(timeUnit: TimeUnit):
boolean {
}
-export function format(time: Date, template: string, isUTC?: boolean): string {
+export function format(time: Date | number, template: string, isUTC?:
boolean): string {
const date = numberUtil.parseDate(time);
const utc = isUTC ? 'UTC' : '';
const y = (date as any)['get' + utc + 'FullYear']();
@@ -224,3 +224,21 @@ export function getUnitValue (
return date['get' + utc + 'Milliseconds']();
}
}
+
+/**
+ * Get Date instance from a date string
+ *
+ * @param {string} date should be in date string or second string
+ * e.g., 2020-01-01 or 2020-01-01 02:00:20
+ */
+export function getDateFromStr(date: string | Date): Date {
+ if (!date || date instanceof Date) {
+ return date as Date;
+ }
+ if (date.indexOf(':') < 0) {
+ return new Date(date + ' 00:00:00');
+ }
+ else {
+ return new Date(date);
+ }
+}
diff --git a/test/timeZone.html b/test/timeZone.html
index 78f737c..e959e76 100644
--- a/test/timeZone.html
+++ b/test/timeZone.html
@@ -95,8 +95,12 @@ under the License.
type: 'time',
splitNumber: 7,
axisLabel: {
- formatter: function (value) {
- return echarts.format.formatTime('yyyy-MM-dd
hh:mm:ss', value, useUTC);
+ formatter: function (tick) {
+ return echarts.time.format(
+ tick.value,
+ '{yyyy}-{MM}-{dd} {HH}:{mm}:{ss}',
+ useUTC
+ );
},
rotate: 10
},
@@ -118,7 +122,14 @@ under the License.
normal: {
show: true,
formatter: function (params) {
- return
echarts.format.formatTime('yyyy-MM-dd hh:mm:ss', params.value[0], useUTC);
+ var date = typeof params.value[0] ===
'string'
+ ? new Date(params.value[0] + '
00:00:00')
+ : new Date(params.value[0]);
+ return echarts.time.format(
+ date,
+ '{yyyy}-{MM}-{dd} {HH}:{mm}:{ss}',
+ useUTC
+ );
}
}
}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org
