You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by wa...@apache.org on 2021/10/24 16:15:55 UTC
[echarts] 01/01: fix(calendar): i18n isn't working in calendar
coordinate system, resolves #15932.
This is an automated email from the ASF dual-hosted git repository.
wangzx pushed a commit to branch fix-calendar-i18n
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit 3bf7b2e7c7fb3891ee4de2b71b0d000c07cbe4a7
Author: plainheart <yh...@all-my-life.cn>
AuthorDate: Mon Oct 25 00:14:37 2021 +0800
fix(calendar): i18n isn't working in calendar coordinate system, resolves #15932.
---
src/component/calendar/CalendarView.ts | 84 ++++++++++++++++++++--------------
src/coord/calendar/CalendarModel.ts | 19 ++++----
test/calendar-week.html | 19 ++++++--
3 files changed, 73 insertions(+), 49 deletions(-)
diff --git a/src/component/calendar/CalendarView.ts b/src/component/calendar/CalendarView.ts
index d1e1597..547f524 100644
--- a/src/component/calendar/CalendarView.ts
+++ b/src/component/calendar/CalendarView.ts
@@ -20,36 +20,18 @@
import * as zrUtil from 'zrender/src/core/util';
import * as graphic from '../../util/graphic';
import {createTextStyle} from '../../label/labelStyle';
-import * as formatUtil from '../../util/format';
-import * as numberUtil from '../../util/number';
-import CalendarModel from '../../coord/calendar/CalendarModel';
+import { formatTplSimple } from '../../util/format';
+import { parsePercent } from '../../util/number';
+import type CalendarModel from '../../coord/calendar/CalendarModel';
import {CalendarParsedDateRangeInfo, CalendarParsedDateInfo} from '../../coord/calendar/Calendar';
-import GlobalModel from '../../model/Global';
-import ExtensionAPI from '../../core/ExtensionAPI';
+import type GlobalModel from '../../model/Global';
+import type ExtensionAPI from '../../core/ExtensionAPI';
import { LayoutOrient, OptionDataValueDate, ZRTextAlign, ZRTextVerticalAlign } from '../../util/types';
import ComponentView from '../../view/Component';
import { PathStyleProps } from 'zrender/src/graphic/Path';
import { TextStyleProps, TextProps } from 'zrender/src/graphic/Text';
-
-const MONTH_TEXT = {
- EN: [
- 'Jan', 'Feb', 'Mar',
- 'Apr', 'May', 'Jun',
- 'Jul', 'Aug', 'Sep',
- 'Oct', 'Nov', 'Dec'
- ],
- CN: [
- '一月', '二月', '三月',
- '四月', '五月', '六月',
- '七月', '八月', '九月',
- '十月', '十一月', '十二月'
- ]
-};
-
-const WEEK_TEXT = {
- EN: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
- CN: ['日', '一', '二', '三', '四', '五', '六']
-};
+import { LocaleOption, getLocaleModel } from '../../core/locale';
+import type Model from '../../model/Model';
class CalendarView extends ComponentView {
@@ -88,6 +70,9 @@ class CalendarView extends ComponentView {
const rangeData = coordSys.getRangeInfo();
const orient = coordSys.getOrient();
+ // locale
+ const localeModel = ecModel.getLocaleModel();
+
this._renderDayRect(calendarModel, rangeData, group);
// _renderLines must be called prior to following function
@@ -95,9 +80,9 @@ class CalendarView extends ComponentView {
this._renderYearText(calendarModel, rangeData, orient, group);
- this._renderMonthText(calendarModel, orient, group);
+ this._renderMonthText(calendarModel, localeModel, orient, group);
- this._renderWeekText(calendarModel, rangeData, orient, group);
+ this._renderWeekText(calendarModel, localeModel, rangeData, orient, group);
}
// render day rect
@@ -245,7 +230,7 @@ class CalendarView extends ComponentView {
) {
if (typeof formatter === 'string' && formatter) {
- return formatUtil.formatTplSimple(formatter, params);
+ return formatTplSimple(formatter, params);
}
if (typeof formatter === 'function') {
@@ -403,7 +388,12 @@ class CalendarView extends ComponentView {
}
// render month and year text
- _renderMonthText(calendarModel: CalendarModel, orient: LayoutOrient, group: graphic.Group) {
+ _renderMonthText(
+ calendarModel: CalendarModel,
+ localeModel: Model<LocaleOption>,
+ orient: LayoutOrient,
+ group: graphic.Group
+ ) {
const monthLabel = calendarModel.getModel('monthLabel');
if (!monthLabel.get('show')) {
@@ -417,8 +407,16 @@ class CalendarView extends ComponentView {
const termPoints = [this._tlpoints, this._blpoints];
- if (zrUtil.isString(nameMap)) {
- nameMap = MONTH_TEXT[nameMap.toUpperCase() as 'CN' | 'EN'] || [];
+ if (!nameMap || zrUtil.isString(nameMap)) {
+ if (nameMap) {
+ const nameMapUpperCase = (nameMap as string).toUpperCase();
+ localeModel = getLocaleModel(nameMapUpperCase === 'CN' ? 'ZH' : nameMapUpperCase) || localeModel;
+ }
+ // PENDING
+ // for ZH locale, original form is `一月` but current form is `1月`
+ // Consider adding a new configuration for each locale?
+ // For example, `time.monthShortcut` or `calendar.month`
+ nameMap = localeModel.get(['time', 'monthAbbr']) || [];
}
const idx = pos === 'start' ? 0 : 1;
@@ -493,6 +491,7 @@ class CalendarView extends ComponentView {
// render weeks
_renderWeekText(
calendarModel: CalendarModel,
+ localeModel: Model<LocaleOption>,
rangeData: CalendarParsedDateRangeInfo,
orient: LayoutOrient,
group: graphic.Group
@@ -509,8 +508,23 @@ class CalendarView extends ComponentView {
let margin = dayLabel.get('margin');
const firstDayOfWeek = coordSys.getFirstDayOfWeek();
- if (zrUtil.isString(nameMap)) {
- nameMap = WEEK_TEXT[nameMap.toUpperCase() as 'CN' | 'EN'] || [];
+ if (!nameMap || zrUtil.isString(nameMap)) {
+ if (nameMap) {
+ const nameMapUpperCase = (nameMap as string).toUpperCase();
+ localeModel = getLocaleModel(nameMapUpperCase === 'CN' ? 'ZH' : nameMapUpperCase) || localeModel;
+ }
+ // PENDING:
+ // Current each word of `dayOfWeekAbbr` in `EN` locale is a bit long.
+ // Use the capital as shortcut.
+ // ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+ // ↓
+ // ['S', 'M', 'T', 'W', 'T', 'F', 'S']
+ // Or consider adding a new configuration for each locale?
+ // For example, `time.dayOfWeekShortcut` or `calendar.dayOfWeek`
+ nameMap = zrUtil.map(
+ localeModel.get(['time', 'dayOfWeekAbbr']) || [],
+ val => val[0]
+ );
}
let start = coordSys.getNextNDay(
@@ -518,7 +532,7 @@ class CalendarView extends ComponentView {
).time;
const cellSize = [coordSys.getCellWidth(), coordSys.getCellHeight()];
- margin = numberUtil.parsePercent(margin, Math.min(cellSize[1], cellSize[0]));
+ margin = parsePercent(margin, Math.min(cellSize[1], cellSize[0]));
if (pos === 'start') {
start = coordSys.getNextNDay(
@@ -546,4 +560,4 @@ class CalendarView extends ComponentView {
}
}
-export default CalendarView;
\ No newline at end of file
+export default CalendarView;
diff --git a/src/coord/calendar/CalendarModel.ts b/src/coord/calendar/CalendarModel.ts
index 1e8e117..8930b9c 100644
--- a/src/coord/calendar/CalendarModel.ts
+++ b/src/coord/calendar/CalendarModel.ts
@@ -105,11 +105,12 @@ export interface CalendarOption extends ComponentOption, BoxLayoutOptionMixin {
position?: 'start' | 'end'
/**
- * Week text content, defaults to 'en'; It supports Chinese, English, and custom; index 0 always means Sunday
- * en: shortcut to English ['S', 'M', 'T', 'W', 'T', 'F', 'S']
- * cn: shortcut to Chinese ['日', '一', '二', '三', '四', '五', '六']
+ * Week text content
+ * defaults to auto-detected locale by the browser or the specifed locale by `echarts.init` function;
+ * It supports the default built-in locale name: EN, ZH/CN; or ant other registed locale name; or customized array
+ * index 0 always means Sunday
*/
- nameMap?: 'en' | 'cn' | string[]
+ nameMap?: 'en' | 'cn' | 'zh' | string[]
}
monthLabel?: Omit<LabelOption, 'position'> & {
@@ -124,9 +125,12 @@ export interface CalendarOption extends ComponentOption, BoxLayoutOptionMixin {
position?: 'start' | 'end'
/**
- * Month text content, defaults to 'en'; It supports Chinese, English, and custom; Index 0 always means Jan;
+ * Month text content
+ * defaults to auto-detected locale by the browser or the specifed locale by `echarts.init` function;
+ * It supports the default built-in locale name: EN, ZH/CN; or ant other registed locale name; or customized array
+ * index 0 always means Jan
*/
- nameMap?: 'en' | 'cn' | string[]
+ nameMap?: 'en' | 'cn' | 'zh' | string[]
formatter?: string | ((params: CalendarMonthLabelFormatterCallbackParams) => string)
}
@@ -214,7 +218,6 @@ class CalendarModel extends ComponentModel<CalendarOption> {
// start end
position: 'start',
margin: '50%', // 50% of cellSize
- nameMap: 'en',
color: '#000'
},
@@ -229,8 +232,6 @@ class CalendarModel extends ComponentModel<CalendarOption> {
// center or left
align: 'center',
- // cn en []
- nameMap: 'en',
formatter: null,
color: '#000'
},
diff --git a/test/calendar-week.html b/test/calendar-week.html
index cfb8dd2..7b23460 100644
--- a/test/calendar-week.html
+++ b/test/calendar-week.html
@@ -62,9 +62,17 @@ under the License.
}
return datas;
}
- require(['echarts'], function (echarts) {
-
- var chart = echarts.init(document.getElementById('main'));
+ require([
+ 'echarts',
+ 'i18n/langES-obj',
+ 'i18n/langJA-obj'
+ ], function (echarts, langES, langJA) {
+ echarts.registerLocale('ES', langES);
+ echarts.registerLocale('JA', langJA);
+
+ var chart = echarts.init(document.getElementById('main'), null, {
+ // locale: 'ES'
+ });
chart.setOption({
tooltip: {
@@ -82,7 +90,8 @@ under the License.
calendar: [
{
dayLabel: {
- position: 'start'
+ position: 'start',
+ nameMap: 'JA'
},
range: '2017-01'
},
@@ -96,7 +105,7 @@ under the License.
{
dayLabel: {
position: 'start',
- nameMap: 'cn'
+ nameMap: 'en'
},
left: 550,
range: '2017-03'
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org