auto-ellipsis-time.js 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", { value: true });
  3. exports.ellipsisTime = void 0;
  4. var util_1 = require("@antv/util");
  5. var fecha_1 = require("fecha");
  6. var label_1 = require("../../util/label");
  7. var text_1 = require("../../util/text");
  8. var SECOND = 1000;
  9. var MINUTE = 60 * SECOND;
  10. var HOUR = 60 * MINUTE;
  11. var DAY = 24 * HOUR;
  12. var MONTH = 31 * DAY;
  13. var YEAR = 365 * DAY;
  14. /** 时间周期显示 */
  15. function dateTimeAbbrevaite(label, labels, index, timeDuration, limitLength) {
  16. var text = label.attr('text');
  17. var labelLength = label.getBBox().width;
  18. var codeLength = text_1.strLen(text);
  19. var reseveLength = Math.floor((limitLength / labelLength) * codeLength);
  20. var ellipsised = false;
  21. var campareText;
  22. if (index === labels.length - 1) {
  23. campareText = labels[index - 1].attr('text');
  24. }
  25. else {
  26. campareText = labels[index + 1].attr('text');
  27. }
  28. var compare = new Date(campareText);
  29. var current = new Date(label.attr('text'));
  30. // time frequency
  31. var timeCycle = getDateTimeMode(current, compare);
  32. // 如果duration和frequency在同一区间
  33. if (timeDuration === timeCycle) {
  34. if (index !== 0 && index !== labels.length - 1) {
  35. var formatter = sameSectionFormatter(current, timeDuration, reseveLength);
  36. label.attr('text', fecha_1.default.format(current, formatter));
  37. ellipsised = true;
  38. }
  39. return;
  40. }
  41. if (index !== 0) {
  42. var previousText = labels[index - 1].attr('text');
  43. var previous = new Date(previousText);
  44. var isAbbreviate = needAbbrevaite(timeDuration, current, previous);
  45. if (isAbbreviate) {
  46. var formatter = getAbbrevaiteFormatter(timeDuration, timeCycle);
  47. label.attr('text', fecha_1.default.format(current, formatter));
  48. ellipsised = true;
  49. }
  50. }
  51. if (ellipsised) {
  52. label.set('tip', text);
  53. }
  54. else {
  55. label.set('tip', null);
  56. }
  57. }
  58. /** 工具方法: 获取时间周期 */
  59. function getTimeDuration(labels) {
  60. var start = new Date(labels[0].attr('text'));
  61. var end = new Date(labels[labels.length - 1].attr('text'));
  62. return getDateTimeMode(start, end);
  63. }
  64. /** 工具方法: 获取连个时间戳之间差值的时间粒度 */
  65. function getDateTimeMode(a, b) {
  66. var mode;
  67. var dist = Math.abs(a - b);
  68. var mapper = {
  69. minute: [MINUTE, HOUR],
  70. hour: [HOUR, DAY],
  71. day: [DAY, MONTH],
  72. month: [MONTH, YEAR],
  73. year: [YEAR, Infinity],
  74. };
  75. util_1.each(mapper, function (range, key) {
  76. if (dist >= range[0] && dist < range[1]) {
  77. mode = key;
  78. }
  79. });
  80. return mode.toString();
  81. }
  82. /** 判断是否要进行时间周期显示 */
  83. function needAbbrevaite(mode, current, previous) {
  84. var currentStamp = getTime(current, mode);
  85. var previousStamp = getTime(previous, mode);
  86. if (currentStamp !== previousStamp) {
  87. return false;
  88. }
  89. return true;
  90. }
  91. function getTime(date, mode) {
  92. if (mode.toString() === 'year') {
  93. return date.getFullYear();
  94. }
  95. if (mode.toString() === 'month') {
  96. return date.getMonth() + 1;
  97. }
  98. if (mode.toString() === 'day') {
  99. return date.getDay() + 1;
  100. }
  101. if (mode.toString() === 'hour') {
  102. return date.getHours() + 1;
  103. }
  104. if (mode.toString() === 'minute') {
  105. return date.getMinutes() + 1;
  106. }
  107. }
  108. /** 获取时间周期显示的formatter */
  109. function getAbbrevaiteFormatter(duration, cycle) {
  110. var times = ['year', 'month', 'day', 'hour', 'minute'];
  111. var formatters = ['YYYY', 'MM', 'DD', 'HH', 'MM'];
  112. var startIndex = times.indexOf(duration.toString()) + 1;
  113. var endIndex = times.indexOf(cycle.toString());
  114. var formatter = '';
  115. for (var i = startIndex; i <= endIndex; i++) {
  116. formatter += formatters[i];
  117. if (i < endIndex) {
  118. formatter += '-';
  119. }
  120. }
  121. return formatter;
  122. }
  123. /** 逐级显示逻辑 */
  124. function sameSectionFormatter(time, mode, reseveLength) {
  125. var times = ['year', 'month', 'day', 'hour', 'minute'];
  126. var formatters = ['YYYY', 'MM', 'DD', 'HH', 'MM'];
  127. var index = times.indexOf(mode);
  128. var formatter = formatters[index];
  129. /*
  130. * 格式补完、逐级显示逻辑:
  131. * YYYY、MM、DD、HH、mm、ss 为时间格式字段,DD左边的字段为高位字段,右边的字段为低位字段。
  132. * 如果空间允许,DD及之前向高位补一位,HH及之后向低位补一位
  133. */
  134. if (index !== 0 && index !== times.length) {
  135. var extendIndex = index <= 2 ? index - 1 : index + 1;
  136. var extendFormatter = index <= 2 ? formatters[extendIndex] + "-" + formatter : formatter + "-" + formatters[extendIndex];
  137. if (text_1.strLen(fecha_1.default.format(time, extendFormatter)) <= reseveLength) {
  138. return extendFormatter;
  139. }
  140. }
  141. return formatter;
  142. }
  143. function ellipsisTime(labelGroup, limitLength) {
  144. var children = labelGroup.getChildren();
  145. var needEllipsis = false;
  146. var ellipsised = false;
  147. util_1.each(children, function (label) {
  148. var rst = label_1.testLabel(label, limitLength);
  149. needEllipsis = needEllipsis || rst;
  150. });
  151. if (needEllipsis) {
  152. var timeDuration_1 = getTimeDuration(children);
  153. util_1.each(children, function (label, index) {
  154. dateTimeAbbrevaite(label, children, index, timeDuration_1, limitLength);
  155. });
  156. ellipsised = true;
  157. }
  158. return ellipsised;
  159. }
  160. exports.ellipsisTime = ellipsisTime;
  161. //# sourceMappingURL=auto-ellipsis-time.js.map