CalendarView.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468
  1. /*
  2. * Licensed to the Apache Software Foundation (ASF) under one
  3. * or more contributor license agreements. See the NOTICE file
  4. * distributed with this work for additional information
  5. * regarding copyright ownership. The ASF licenses this file
  6. * to you under the Apache License, Version 2.0 (the
  7. * "License"); you may not use this file except in compliance
  8. * with the License. You may obtain a copy of the License at
  9. *
  10. * http://www.apache.org/licenses/LICENSE-2.0
  11. *
  12. * Unless required by applicable law or agreed to in writing,
  13. * software distributed under the License is distributed on an
  14. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  15. * KIND, either express or implied. See the License for the
  16. * specific language governing permissions and limitations
  17. * under the License.
  18. */
  19. /**
  20. * AUTO-GENERATED FILE. DO NOT MODIFY.
  21. */
  22. /*
  23. * Licensed to the Apache Software Foundation (ASF) under one
  24. * or more contributor license agreements. See the NOTICE file
  25. * distributed with this work for additional information
  26. * regarding copyright ownership. The ASF licenses this file
  27. * to you under the Apache License, Version 2.0 (the
  28. * "License"); you may not use this file except in compliance
  29. * with the License. You may obtain a copy of the License at
  30. *
  31. * http://www.apache.org/licenses/LICENSE-2.0
  32. *
  33. * Unless required by applicable law or agreed to in writing,
  34. * software distributed under the License is distributed on an
  35. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  36. * KIND, either express or implied. See the License for the
  37. * specific language governing permissions and limitations
  38. * under the License.
  39. */
  40. import { __extends } from "tslib";
  41. import { isString, extend, map, isFunction } from 'zrender/lib/core/util.js';
  42. import * as graphic from '../../util/graphic.js';
  43. import { createTextStyle } from '../../label/labelStyle.js';
  44. import { formatTplSimple } from '../../util/format.js';
  45. import { parsePercent } from '../../util/number.js';
  46. import ComponentView from '../../view/Component.js';
  47. import { getLocaleModel } from '../../core/locale.js';
  48. var CalendarView =
  49. /** @class */
  50. function (_super) {
  51. __extends(CalendarView, _super);
  52. function CalendarView() {
  53. var _this = _super !== null && _super.apply(this, arguments) || this;
  54. _this.type = CalendarView.type;
  55. return _this;
  56. }
  57. CalendarView.prototype.render = function (calendarModel, ecModel, api) {
  58. var group = this.group;
  59. group.removeAll();
  60. var coordSys = calendarModel.coordinateSystem; // range info
  61. var rangeData = coordSys.getRangeInfo();
  62. var orient = coordSys.getOrient(); // locale
  63. var localeModel = ecModel.getLocaleModel();
  64. this._renderDayRect(calendarModel, rangeData, group); // _renderLines must be called prior to following function
  65. this._renderLines(calendarModel, rangeData, orient, group);
  66. this._renderYearText(calendarModel, rangeData, orient, group);
  67. this._renderMonthText(calendarModel, localeModel, orient, group);
  68. this._renderWeekText(calendarModel, localeModel, rangeData, orient, group);
  69. }; // render day rect
  70. CalendarView.prototype._renderDayRect = function (calendarModel, rangeData, group) {
  71. var coordSys = calendarModel.coordinateSystem;
  72. var itemRectStyleModel = calendarModel.getModel('itemStyle').getItemStyle();
  73. var sw = coordSys.getCellWidth();
  74. var sh = coordSys.getCellHeight();
  75. for (var i = rangeData.start.time; i <= rangeData.end.time; i = coordSys.getNextNDay(i, 1).time) {
  76. var point = coordSys.dataToRect([i], false).tl; // every rect
  77. var rect = new graphic.Rect({
  78. shape: {
  79. x: point[0],
  80. y: point[1],
  81. width: sw,
  82. height: sh
  83. },
  84. cursor: 'default',
  85. style: itemRectStyleModel
  86. });
  87. group.add(rect);
  88. }
  89. }; // render separate line
  90. CalendarView.prototype._renderLines = function (calendarModel, rangeData, orient, group) {
  91. var self = this;
  92. var coordSys = calendarModel.coordinateSystem;
  93. var lineStyleModel = calendarModel.getModel(['splitLine', 'lineStyle']).getLineStyle();
  94. var show = calendarModel.get(['splitLine', 'show']);
  95. var lineWidth = lineStyleModel.lineWidth;
  96. this._tlpoints = [];
  97. this._blpoints = [];
  98. this._firstDayOfMonth = [];
  99. this._firstDayPoints = [];
  100. var firstDay = rangeData.start;
  101. for (var i = 0; firstDay.time <= rangeData.end.time; i++) {
  102. addPoints(firstDay.formatedDate);
  103. if (i === 0) {
  104. firstDay = coordSys.getDateInfo(rangeData.start.y + '-' + rangeData.start.m);
  105. }
  106. var date = firstDay.date;
  107. date.setMonth(date.getMonth() + 1);
  108. firstDay = coordSys.getDateInfo(date);
  109. }
  110. addPoints(coordSys.getNextNDay(rangeData.end.time, 1).formatedDate);
  111. function addPoints(date) {
  112. self._firstDayOfMonth.push(coordSys.getDateInfo(date));
  113. self._firstDayPoints.push(coordSys.dataToRect([date], false).tl);
  114. var points = self._getLinePointsOfOneWeek(calendarModel, date, orient);
  115. self._tlpoints.push(points[0]);
  116. self._blpoints.push(points[points.length - 1]);
  117. show && self._drawSplitline(points, lineStyleModel, group);
  118. } // render top/left line
  119. show && this._drawSplitline(self._getEdgesPoints(self._tlpoints, lineWidth, orient), lineStyleModel, group); // render bottom/right line
  120. show && this._drawSplitline(self._getEdgesPoints(self._blpoints, lineWidth, orient), lineStyleModel, group);
  121. }; // get points at both ends
  122. CalendarView.prototype._getEdgesPoints = function (points, lineWidth, orient) {
  123. var rs = [points[0].slice(), points[points.length - 1].slice()];
  124. var idx = orient === 'horizontal' ? 0 : 1; // both ends of the line are extend half lineWidth
  125. rs[0][idx] = rs[0][idx] - lineWidth / 2;
  126. rs[1][idx] = rs[1][idx] + lineWidth / 2;
  127. return rs;
  128. }; // render split line
  129. CalendarView.prototype._drawSplitline = function (points, lineStyle, group) {
  130. var poyline = new graphic.Polyline({
  131. z2: 20,
  132. shape: {
  133. points: points
  134. },
  135. style: lineStyle
  136. });
  137. group.add(poyline);
  138. }; // render month line of one week points
  139. CalendarView.prototype._getLinePointsOfOneWeek = function (calendarModel, date, orient) {
  140. var coordSys = calendarModel.coordinateSystem;
  141. var parsedDate = coordSys.getDateInfo(date);
  142. var points = [];
  143. for (var i = 0; i < 7; i++) {
  144. var tmpD = coordSys.getNextNDay(parsedDate.time, i);
  145. var point = coordSys.dataToRect([tmpD.time], false);
  146. points[2 * tmpD.day] = point.tl;
  147. points[2 * tmpD.day + 1] = point[orient === 'horizontal' ? 'bl' : 'tr'];
  148. }
  149. return points;
  150. };
  151. CalendarView.prototype._formatterLabel = function (formatter, params) {
  152. if (isString(formatter) && formatter) {
  153. return formatTplSimple(formatter, params);
  154. }
  155. if (isFunction(formatter)) {
  156. return formatter(params);
  157. }
  158. return params.nameMap;
  159. };
  160. CalendarView.prototype._yearTextPositionControl = function (textEl, point, orient, position, margin) {
  161. var x = point[0];
  162. var y = point[1];
  163. var aligns = ['center', 'bottom'];
  164. if (position === 'bottom') {
  165. y += margin;
  166. aligns = ['center', 'top'];
  167. } else if (position === 'left') {
  168. x -= margin;
  169. } else if (position === 'right') {
  170. x += margin;
  171. aligns = ['center', 'top'];
  172. } else {
  173. // top
  174. y -= margin;
  175. }
  176. var rotate = 0;
  177. if (position === 'left' || position === 'right') {
  178. rotate = Math.PI / 2;
  179. }
  180. return {
  181. rotation: rotate,
  182. x: x,
  183. y: y,
  184. style: {
  185. align: aligns[0],
  186. verticalAlign: aligns[1]
  187. }
  188. };
  189. }; // render year
  190. CalendarView.prototype._renderYearText = function (calendarModel, rangeData, orient, group) {
  191. var yearLabel = calendarModel.getModel('yearLabel');
  192. if (!yearLabel.get('show')) {
  193. return;
  194. }
  195. var margin = yearLabel.get('margin');
  196. var pos = yearLabel.get('position');
  197. if (!pos) {
  198. pos = orient !== 'horizontal' ? 'top' : 'left';
  199. }
  200. var points = [this._tlpoints[this._tlpoints.length - 1], this._blpoints[0]];
  201. var xc = (points[0][0] + points[1][0]) / 2;
  202. var yc = (points[0][1] + points[1][1]) / 2;
  203. var idx = orient === 'horizontal' ? 0 : 1;
  204. var posPoints = {
  205. top: [xc, points[idx][1]],
  206. bottom: [xc, points[1 - idx][1]],
  207. left: [points[1 - idx][0], yc],
  208. right: [points[idx][0], yc]
  209. };
  210. var name = rangeData.start.y;
  211. if (+rangeData.end.y > +rangeData.start.y) {
  212. name = name + '-' + rangeData.end.y;
  213. }
  214. var formatter = yearLabel.get('formatter');
  215. var params = {
  216. start: rangeData.start.y,
  217. end: rangeData.end.y,
  218. nameMap: name
  219. };
  220. var content = this._formatterLabel(formatter, params);
  221. var yearText = new graphic.Text({
  222. z2: 30,
  223. style: createTextStyle(yearLabel, {
  224. text: content
  225. })
  226. });
  227. yearText.attr(this._yearTextPositionControl(yearText, posPoints[pos], orient, pos, margin));
  228. group.add(yearText);
  229. };
  230. CalendarView.prototype._monthTextPositionControl = function (point, isCenter, orient, position, margin) {
  231. var align = 'left';
  232. var vAlign = 'top';
  233. var x = point[0];
  234. var y = point[1];
  235. if (orient === 'horizontal') {
  236. y = y + margin;
  237. if (isCenter) {
  238. align = 'center';
  239. }
  240. if (position === 'start') {
  241. vAlign = 'bottom';
  242. }
  243. } else {
  244. x = x + margin;
  245. if (isCenter) {
  246. vAlign = 'middle';
  247. }
  248. if (position === 'start') {
  249. align = 'right';
  250. }
  251. }
  252. return {
  253. x: x,
  254. y: y,
  255. align: align,
  256. verticalAlign: vAlign
  257. };
  258. }; // render month and year text
  259. CalendarView.prototype._renderMonthText = function (calendarModel, localeModel, orient, group) {
  260. var monthLabel = calendarModel.getModel('monthLabel');
  261. if (!monthLabel.get('show')) {
  262. return;
  263. }
  264. var nameMap = monthLabel.get('nameMap');
  265. var margin = monthLabel.get('margin');
  266. var pos = monthLabel.get('position');
  267. var align = monthLabel.get('align');
  268. var termPoints = [this._tlpoints, this._blpoints];
  269. if (!nameMap || isString(nameMap)) {
  270. if (nameMap) {
  271. // case-sensitive
  272. localeModel = getLocaleModel(nameMap) || localeModel;
  273. } // PENDING
  274. // for ZH locale, original form is `一月` but current form is `1月`
  275. nameMap = localeModel.get(['time', 'monthAbbr']) || [];
  276. }
  277. var idx = pos === 'start' ? 0 : 1;
  278. var axis = orient === 'horizontal' ? 0 : 1;
  279. margin = pos === 'start' ? -margin : margin;
  280. var isCenter = align === 'center';
  281. for (var i = 0; i < termPoints[idx].length - 1; i++) {
  282. var tmp = termPoints[idx][i].slice();
  283. var firstDay = this._firstDayOfMonth[i];
  284. if (isCenter) {
  285. var firstDayPoints = this._firstDayPoints[i];
  286. tmp[axis] = (firstDayPoints[axis] + termPoints[0][i + 1][axis]) / 2;
  287. }
  288. var formatter = monthLabel.get('formatter');
  289. var name_1 = nameMap[+firstDay.m - 1];
  290. var params = {
  291. yyyy: firstDay.y,
  292. yy: (firstDay.y + '').slice(2),
  293. MM: firstDay.m,
  294. M: +firstDay.m,
  295. nameMap: name_1
  296. };
  297. var content = this._formatterLabel(formatter, params);
  298. var monthText = new graphic.Text({
  299. z2: 30,
  300. style: extend(createTextStyle(monthLabel, {
  301. text: content
  302. }), this._monthTextPositionControl(tmp, isCenter, orient, pos, margin))
  303. });
  304. group.add(monthText);
  305. }
  306. };
  307. CalendarView.prototype._weekTextPositionControl = function (point, orient, position, margin, cellSize) {
  308. var align = 'center';
  309. var vAlign = 'middle';
  310. var x = point[0];
  311. var y = point[1];
  312. var isStart = position === 'start';
  313. if (orient === 'horizontal') {
  314. x = x + margin + (isStart ? 1 : -1) * cellSize[0] / 2;
  315. align = isStart ? 'right' : 'left';
  316. } else {
  317. y = y + margin + (isStart ? 1 : -1) * cellSize[1] / 2;
  318. vAlign = isStart ? 'bottom' : 'top';
  319. }
  320. return {
  321. x: x,
  322. y: y,
  323. align: align,
  324. verticalAlign: vAlign
  325. };
  326. }; // render weeks
  327. CalendarView.prototype._renderWeekText = function (calendarModel, localeModel, rangeData, orient, group) {
  328. var dayLabel = calendarModel.getModel('dayLabel');
  329. if (!dayLabel.get('show')) {
  330. return;
  331. }
  332. var coordSys = calendarModel.coordinateSystem;
  333. var pos = dayLabel.get('position');
  334. var nameMap = dayLabel.get('nameMap');
  335. var margin = dayLabel.get('margin');
  336. var firstDayOfWeek = coordSys.getFirstDayOfWeek();
  337. if (!nameMap || isString(nameMap)) {
  338. if (nameMap) {
  339. // case-sensitive
  340. localeModel = getLocaleModel(nameMap) || localeModel;
  341. } // Use the first letter of `dayOfWeekAbbr` if `dayOfWeekShort` doesn't exist in the locale file
  342. var dayOfWeekShort = localeModel.get(['time', 'dayOfWeekShort']);
  343. nameMap = dayOfWeekShort || map(localeModel.get(['time', 'dayOfWeekAbbr']), function (val) {
  344. return val[0];
  345. });
  346. }
  347. var start = coordSys.getNextNDay(rangeData.end.time, 7 - rangeData.lweek).time;
  348. var cellSize = [coordSys.getCellWidth(), coordSys.getCellHeight()];
  349. margin = parsePercent(margin, Math.min(cellSize[1], cellSize[0]));
  350. if (pos === 'start') {
  351. start = coordSys.getNextNDay(rangeData.start.time, -(7 + rangeData.fweek)).time;
  352. margin = -margin;
  353. }
  354. for (var i = 0; i < 7; i++) {
  355. var tmpD = coordSys.getNextNDay(start, i);
  356. var point = coordSys.dataToRect([tmpD.time], false).center;
  357. var day = i;
  358. day = Math.abs((i + firstDayOfWeek) % 7);
  359. var weekText = new graphic.Text({
  360. z2: 30,
  361. style: extend(createTextStyle(dayLabel, {
  362. text: nameMap[day]
  363. }), this._weekTextPositionControl(point, orient, pos, margin, cellSize))
  364. });
  365. group.add(weekText);
  366. }
  367. };
  368. CalendarView.type = 'calendar';
  369. return CalendarView;
  370. }(ComponentView);
  371. export default CalendarView;