CalendarView.js 14 KB

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