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:54 UTC
[echarts] branch fix-calendar-i18n created (now 3bf7b2e)
This is an automated email from the ASF dual-hosted git repository.
wangzx pushed a change to branch fix-calendar-i18n
in repository https://gitbox.apache.org/repos/asf/echarts.git.
at 3bf7b2e fix(calendar): i18n isn't working in calendar coordinate system, resolves #15932.
This branch includes the following new commits:
new 3bf7b2e fix(calendar): i18n isn't working in calendar coordinate system, resolves #15932.
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts] 01/01: fix(calendar): i18n isn't working in calendar
coordinate system, resolves #15932.
Posted by wa...@apache.org.
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