CalendarView.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457
  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 * as zrUtil from 'zrender/lib/core/util';
  42. import * as graphic from '../../util/graphic';
  43. import { createTextStyle } from '../../label/labelStyle';
  44. import * as formatUtil from '../../util/format';
  45. import * as numberUtil from '../../util/number';
  46. import ComponentView from '../../view/Component';
  47. var MONTH_TEXT = {
  48. EN: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  49. CN: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
  50. };
  51. var WEEK_TEXT = {
  52. EN: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
  53. CN: ['日', '一', '二', '三', '四', '五', '六']
  54. };
  55. var CalendarView =
  56. /** @class */
  57. function (_super) {
  58. __extends(CalendarView, _super);
  59. function CalendarView() {
  60. var _this = _super !== null && _super.apply(this, arguments) || this;
  61. _this.type = CalendarView.type;
  62. return _this;
  63. }
  64. CalendarView.prototype.render = function (calendarModel, ecModel, api) {
  65. var group = this.group;
  66. group.removeAll();
  67. var coordSys = calendarModel.coordinateSystem; // range info
  68. var rangeData = coordSys.getRangeInfo();
  69. var orient = coordSys.getOrient();
  70. this._renderDayRect(calendarModel, rangeData, group); // _renderLines must be called prior to following function
  71. this._renderLines(calendarModel, rangeData, orient, group);
  72. this._renderYearText(calendarModel, rangeData, orient, group);
  73. this._renderMonthText(calendarModel, orient, group);
  74. this._renderWeekText(calendarModel, rangeData, orient, group);
  75. }; // render day rect
  76. CalendarView.prototype._renderDayRect = function (calendarModel, rangeData, group) {
  77. var coordSys = calendarModel.coordinateSystem;
  78. var itemRectStyleModel = calendarModel.getModel('itemStyle').getItemStyle();
  79. var sw = coordSys.getCellWidth();
  80. var sh = coordSys.getCellHeight();
  81. for (var i = rangeData.start.time; i <= rangeData.end.time; i = coordSys.getNextNDay(i, 1).time) {
  82. var point = coordSys.dataToRect([i], false).tl; // every rect
  83. var rect = new graphic.Rect({
  84. shape: {
  85. x: point[0],
  86. y: point[1],
  87. width: sw,
  88. height: sh
  89. },
  90. cursor: 'default',
  91. style: itemRectStyleModel
  92. });
  93. group.add(rect);
  94. }
  95. }; // render separate line
  96. CalendarView.prototype._renderLines = function (calendarModel, rangeData, orient, group) {
  97. var self = this;
  98. var coordSys = calendarModel.coordinateSystem;
  99. var lineStyleModel = calendarModel.getModel(['splitLine', 'lineStyle']).getLineStyle();
  100. var show = calendarModel.get(['splitLine', 'show']);
  101. var lineWidth = lineStyleModel.lineWidth;
  102. this._tlpoints = [];
  103. this._blpoints = [];
  104. this._firstDayOfMonth = [];
  105. this._firstDayPoints = [];
  106. var firstDay = rangeData.start;
  107. for (var i = 0; firstDay.time <= rangeData.end.time; i++) {
  108. addPoints(firstDay.formatedDate);
  109. if (i === 0) {
  110. firstDay = coordSys.getDateInfo(rangeData.start.y + '-' + rangeData.start.m);
  111. }
  112. var date = firstDay.date;
  113. date.setMonth(date.getMonth() + 1);
  114. firstDay = coordSys.getDateInfo(date);
  115. }
  116. addPoints(coordSys.getNextNDay(rangeData.end.time, 1).formatedDate);
  117. function addPoints(date) {
  118. self._firstDayOfMonth.push(coordSys.getDateInfo(date));
  119. self._firstDayPoints.push(coordSys.dataToRect([date], false).tl);
  120. var points = self._getLinePointsOfOneWeek(calendarModel, date, orient);
  121. self._tlpoints.push(points[0]);
  122. self._blpoints.push(points[points.length - 1]);
  123. show && self._drawSplitline(points, lineStyleModel, group);
  124. } // render top/left line
  125. show && this._drawSplitline(self._getEdgesPoints(self._tlpoints, lineWidth, orient), lineStyleModel, group); // render bottom/right line
  126. show && this._drawSplitline(self._getEdgesPoints(self._blpoints, lineWidth, orient), lineStyleModel, group);
  127. }; // get points at both ends
  128. CalendarView.prototype._getEdgesPoints = function (points, lineWidth, orient) {
  129. var rs = [points[0].slice(), points[points.length - 1].slice()];
  130. var idx = orient === 'horizontal' ? 0 : 1; // both ends of the line are extend half lineWidth
  131. rs[0][idx] = rs[0][idx] - lineWidth / 2;
  132. rs[1][idx] = rs[1][idx] + lineWidth / 2;
  133. return rs;
  134. }; // render split line
  135. CalendarView.prototype._drawSplitline = function (points, lineStyle, group) {
  136. var poyline = new graphic.Polyline({
  137. z2: 20,
  138. shape: {
  139. points: points
  140. },
  141. style: lineStyle
  142. });
  143. group.add(poyline);
  144. }; // render month line of one week points
  145. CalendarView.prototype._getLinePointsOfOneWeek = function (calendarModel, date, orient) {
  146. var coordSys = calendarModel.coordinateSystem;
  147. var parsedDate = coordSys.getDateInfo(date);
  148. var points = [];
  149. for (var i = 0; i < 7; i++) {
  150. var tmpD = coordSys.getNextNDay(parsedDate.time, i);
  151. var point = coordSys.dataToRect([tmpD.time], false);
  152. points[2 * tmpD.day] = point.tl;
  153. points[2 * tmpD.day + 1] = point[orient === 'horizontal' ? 'bl' : 'tr'];
  154. }
  155. return points;
  156. };
  157. CalendarView.prototype._formatterLabel = function (formatter, params) {
  158. if (typeof formatter === 'string' && formatter) {
  159. return formatUtil.formatTplSimple(formatter, params);
  160. }
  161. if (typeof formatter === 'function') {
  162. return formatter(params);
  163. }
  164. return params.nameMap;
  165. };
  166. CalendarView.prototype._yearTextPositionControl = function (textEl, point, orient, position, margin) {
  167. var x = point[0];
  168. var y = point[1];
  169. var aligns = ['center', 'bottom'];
  170. if (position === 'bottom') {
  171. y += margin;
  172. aligns = ['center', 'top'];
  173. } else if (position === 'left') {
  174. x -= margin;
  175. } else if (position === 'right') {
  176. x += margin;
  177. aligns = ['center', 'top'];
  178. } else {
  179. // top
  180. y -= margin;
  181. }
  182. var rotate = 0;
  183. if (position === 'left' || position === 'right') {
  184. rotate = Math.PI / 2;
  185. }
  186. return {
  187. rotation: rotate,
  188. x: x,
  189. y: y,
  190. style: {
  191. align: aligns[0],
  192. verticalAlign: aligns[1]
  193. }
  194. };
  195. }; // render year
  196. CalendarView.prototype._renderYearText = function (calendarModel, rangeData, orient, group) {
  197. var yearLabel = calendarModel.getModel('yearLabel');
  198. if (!yearLabel.get('show')) {
  199. return;
  200. }
  201. var margin = yearLabel.get('margin');
  202. var pos = yearLabel.get('position');
  203. if (!pos) {
  204. pos = orient !== 'horizontal' ? 'top' : 'left';
  205. }
  206. var points = [this._tlpoints[this._tlpoints.length - 1], this._blpoints[0]];
  207. var xc = (points[0][0] + points[1][0]) / 2;
  208. var yc = (points[0][1] + points[1][1]) / 2;
  209. var idx = orient === 'horizontal' ? 0 : 1;
  210. var posPoints = {
  211. top: [xc, points[idx][1]],
  212. bottom: [xc, points[1 - idx][1]],
  213. left: [points[1 - idx][0], yc],
  214. right: [points[idx][0], yc]
  215. };
  216. var name = rangeData.start.y;
  217. if (+rangeData.end.y > +rangeData.start.y) {
  218. name = name + '-' + rangeData.end.y;
  219. }
  220. var formatter = yearLabel.get('formatter');
  221. var params = {
  222. start: rangeData.start.y,
  223. end: rangeData.end.y,
  224. nameMap: name
  225. };
  226. var content = this._formatterLabel(formatter, params);
  227. var yearText = new graphic.Text({
  228. z2: 30,
  229. style: createTextStyle(yearLabel, {
  230. text: content
  231. })
  232. });
  233. yearText.attr(this._yearTextPositionControl(yearText, posPoints[pos], orient, pos, margin));
  234. group.add(yearText);
  235. };
  236. CalendarView.prototype._monthTextPositionControl = function (point, isCenter, orient, position, margin) {
  237. var align = 'left';
  238. var vAlign = 'top';
  239. var x = point[0];
  240. var y = point[1];
  241. if (orient === 'horizontal') {
  242. y = y + margin;
  243. if (isCenter) {
  244. align = 'center';
  245. }
  246. if (position === 'start') {
  247. vAlign = 'bottom';
  248. }
  249. } else {
  250. x = x + margin;
  251. if (isCenter) {
  252. vAlign = 'middle';
  253. }
  254. if (position === 'start') {
  255. align = 'right';
  256. }
  257. }
  258. return {
  259. x: x,
  260. y: y,
  261. align: align,
  262. verticalAlign: vAlign
  263. };
  264. }; // render month and year text
  265. CalendarView.prototype._renderMonthText = function (calendarModel, orient, group) {
  266. var monthLabel = calendarModel.getModel('monthLabel');
  267. if (!monthLabel.get('show')) {
  268. return;
  269. }
  270. var nameMap = monthLabel.get('nameMap');
  271. var margin = monthLabel.get('margin');
  272. var pos = monthLabel.get('position');
  273. var align = monthLabel.get('align');
  274. var termPoints = [this._tlpoints, this._blpoints];
  275. if (zrUtil.isString(nameMap)) {
  276. nameMap = MONTH_TEXT[nameMap.toUpperCase()] || [];
  277. }
  278. var idx = pos === 'start' ? 0 : 1;
  279. var axis = orient === 'horizontal' ? 0 : 1;
  280. margin = pos === 'start' ? -margin : margin;
  281. var isCenter = align === 'center';
  282. for (var i = 0; i < termPoints[idx].length - 1; i++) {
  283. var tmp = termPoints[idx][i].slice();
  284. var firstDay = this._firstDayOfMonth[i];
  285. if (isCenter) {
  286. var firstDayPoints = this._firstDayPoints[i];
  287. tmp[axis] = (firstDayPoints[axis] + termPoints[0][i + 1][axis]) / 2;
  288. }
  289. var formatter = monthLabel.get('formatter');
  290. var name_1 = nameMap[+firstDay.m - 1];
  291. var params = {
  292. yyyy: firstDay.y,
  293. yy: (firstDay.y + '').slice(2),
  294. MM: firstDay.m,
  295. M: +firstDay.m,
  296. nameMap: name_1
  297. };
  298. var content = this._formatterLabel(formatter, params);
  299. var monthText = new graphic.Text({
  300. z2: 30,
  301. style: zrUtil.extend(createTextStyle(monthLabel, {
  302. text: content
  303. }), this._monthTextPositionControl(tmp, isCenter, orient, pos, margin))
  304. });
  305. group.add(monthText);
  306. }
  307. };
  308. CalendarView.prototype._weekTextPositionControl = function (point, orient, position, margin, cellSize) {
  309. var align = 'center';
  310. var vAlign = 'middle';
  311. var x = point[0];
  312. var y = point[1];
  313. var isStart = position === 'start';
  314. if (orient === 'horizontal') {
  315. x = x + margin + (isStart ? 1 : -1) * cellSize[0] / 2;
  316. align = isStart ? 'right' : 'left';
  317. } else {
  318. y = y + margin + (isStart ? 1 : -1) * cellSize[1] / 2;
  319. vAlign = isStart ? 'bottom' : 'top';
  320. }
  321. return {
  322. x: x,
  323. y: y,
  324. align: align,
  325. verticalAlign: vAlign
  326. };
  327. }; // render weeks
  328. CalendarView.prototype._renderWeekText = function (calendarModel, rangeData, orient, group) {
  329. var dayLabel = calendarModel.getModel('dayLabel');
  330. if (!dayLabel.get('show')) {
  331. return;
  332. }
  333. var coordSys = calendarModel.coordinateSystem;
  334. var pos = dayLabel.get('position');
  335. var nameMap = dayLabel.get('nameMap');
  336. var margin = dayLabel.get('margin');
  337. var firstDayOfWeek = coordSys.getFirstDayOfWeek();
  338. if (zrUtil.isString(nameMap)) {
  339. nameMap = WEEK_TEXT[nameMap.toUpperCase()] || [];
  340. }
  341. var start = coordSys.getNextNDay(rangeData.end.time, 7 - rangeData.lweek).time;
  342. var cellSize = [coordSys.getCellWidth(), coordSys.getCellHeight()];
  343. margin = numberUtil.parsePercent(margin, Math.min(cellSize[1], cellSize[0]));
  344. if (pos === 'start') {
  345. start = coordSys.getNextNDay(rangeData.start.time, -(7 + rangeData.fweek)).time;
  346. margin = -margin;
  347. }
  348. for (var i = 0; i < 7; i++) {
  349. var tmpD = coordSys.getNextNDay(start, i);
  350. var point = coordSys.dataToRect([tmpD.time], false).center;
  351. var day = i;
  352. day = Math.abs((i + firstDayOfWeek) % 7);
  353. var weekText = new graphic.Text({
  354. z2: 30,
  355. style: zrUtil.extend(createTextStyle(dayLabel, {
  356. text: nameMap[day]
  357. }), this._weekTextPositionControl(point, orient, pos, margin, cellSize))
  358. });
  359. group.add(weekText);
  360. }
  361. };
  362. CalendarView.type = 'calendar';
  363. return CalendarView;
  364. }(ComponentView);
  365. export default CalendarView;