index.js 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  1. import { __assign, __extends, __read } from "tslib";
  2. import { Band, Linear } from '@antv/scale';
  3. import { clone, isArray, isFunction, isNumber } from '@antv/util';
  4. import { GUI } from '../../core';
  5. import { maybeAppend, subStyleProps } from '../../util';
  6. import { Columns } from './columns';
  7. import { Lines } from './lines';
  8. import { dataToLines, linesToAreaPaths, linesToStackAreaPaths, linesToStackCurveAreaPaths, lineToCurvePath, lineToLinePath, } from './path';
  9. import { getRange, getStackedData } from './utils';
  10. var Sparkline = /** @class */ (function (_super) {
  11. __extends(Sparkline, _super);
  12. function Sparkline(options) {
  13. return _super.call(this, options, {
  14. type: 'line',
  15. width: 200,
  16. height: 20,
  17. isStack: false,
  18. color: ['#83daad', '#edbf45', '#d2cef9', '#e290b3', '#6f63f4'],
  19. smooth: true,
  20. lineLineWidth: 1,
  21. areaOpacity: 0,
  22. isGroup: false,
  23. columnLineWidth: 1,
  24. columnStroke: '#fff',
  25. }) || this;
  26. }
  27. Object.defineProperty(Sparkline.prototype, "rawData", {
  28. /**
  29. * 将data统一格式化为数组形式
  30. * 如果堆叠,则生成堆叠数据
  31. */
  32. get: function () {
  33. var rawData = this.attributes.data;
  34. if (!rawData || (rawData === null || rawData === void 0 ? void 0 : rawData.length) === 0)
  35. return [[]];
  36. var data = clone(rawData);
  37. // number[] -> number[][]
  38. return isNumber(data[0]) ? [data] : data;
  39. },
  40. enumerable: false,
  41. configurable: true
  42. });
  43. Object.defineProperty(Sparkline.prototype, "data", {
  44. get: function () {
  45. if (this.attributes.isStack)
  46. return getStackedData(this.rawData);
  47. return this.rawData;
  48. },
  49. enumerable: false,
  50. configurable: true
  51. });
  52. Object.defineProperty(Sparkline.prototype, "scales", {
  53. get: function () {
  54. return this.createScales(this.data);
  55. },
  56. enumerable: false,
  57. configurable: true
  58. });
  59. Object.defineProperty(Sparkline.prototype, "baseline", {
  60. /**
  61. * 基准线,默认为 0
  62. */
  63. get: function () {
  64. var y = this.scales.y;
  65. var _a = __read(y.getOptions().domain || [0, 0], 2), y1 = _a[0], y2 = _a[1];
  66. if (y2 < 0) {
  67. return y.map(y2);
  68. }
  69. return y.map(y1 < 0 ? 0 : y1);
  70. },
  71. enumerable: false,
  72. configurable: true
  73. });
  74. Object.defineProperty(Sparkline.prototype, "containerShape", {
  75. get: function () {
  76. var _a = this.attributes, width = _a.width, height = _a.height;
  77. return { width: width, height: height };
  78. },
  79. enumerable: false,
  80. configurable: true
  81. });
  82. Object.defineProperty(Sparkline.prototype, "linesStyle", {
  83. get: function () {
  84. var _this = this;
  85. var _a = this.attributes, type = _a.type, isStack = _a.isStack, smooth = _a.smooth;
  86. if (type !== 'line')
  87. throw new Error('linesStyle can only be used in line type');
  88. var areaStyle = subStyleProps(this.attributes, 'area');
  89. var lineStyle = subStyleProps(this.attributes, 'line');
  90. var width = this.containerShape.width;
  91. var data = this.data;
  92. if (data[0].length === 0)
  93. return { lines: [], areas: [] };
  94. var _b = this.scales, x = _b.x, y = _b.y;
  95. // 线条Path
  96. var lines = dataToLines(data, { type: 'line', x: x, y: y });
  97. // 生成区域path
  98. var areas = [];
  99. if (areaStyle) {
  100. var baseline = this.baseline;
  101. if (isStack) {
  102. areas = smooth
  103. ? linesToStackCurveAreaPaths(lines, width, baseline)
  104. : linesToStackAreaPaths(lines, width, baseline);
  105. }
  106. else {
  107. areas = linesToAreaPaths(lines, smooth, width, baseline);
  108. }
  109. }
  110. return {
  111. lines: lines.map(function (line, idx) {
  112. return __assign({ stroke: _this.getColor(idx), path: smooth ? lineToCurvePath(line) : lineToLinePath(line) }, lineStyle);
  113. }),
  114. areas: areas.map(function (path, idx) {
  115. return __assign({ path: path, fill: _this.getColor(idx) }, areaStyle);
  116. }),
  117. };
  118. },
  119. enumerable: false,
  120. configurable: true
  121. });
  122. Object.defineProperty(Sparkline.prototype, "columnsStyle", {
  123. get: function () {
  124. var _this = this;
  125. var columnStyle = subStyleProps(this.attributes, 'column');
  126. var _a = this.attributes, isStack = _a.isStack, type = _a.type;
  127. if (type !== 'column')
  128. throw new Error('columnsStyle can only be used in column type');
  129. var height = this.containerShape.height;
  130. var data = this.rawData;
  131. if (!data)
  132. return { columns: [] };
  133. if (isStack)
  134. data = getStackedData(data);
  135. var _b = this.createScales(data), x = _b.x, y = _b.y;
  136. var _c = __read(getRange(data), 2), minVal = _c[0], maxVal = _c[1];
  137. var heightScale = new Linear({
  138. domain: [0, maxVal - (minVal > 0 ? 0 : minVal)],
  139. range: [0, height],
  140. });
  141. var bandWidth = x.getBandWidth();
  142. var rawData = this.rawData;
  143. return {
  144. columns: data.map(function (column, i) {
  145. return column.map(function (val, j) {
  146. var barWidth = bandWidth / data.length;
  147. return __assign(__assign({ fill: _this.getColor(i) }, columnStyle), (isStack
  148. ? {
  149. x: x.map(j),
  150. y: y.map(val),
  151. width: bandWidth,
  152. height: heightScale.map(rawData[i][j]),
  153. }
  154. : {
  155. x: x.map(j) + barWidth * i,
  156. y: val >= 0 ? y.map(val) : y.map(0),
  157. width: barWidth,
  158. height: heightScale.map(Math.abs(val)),
  159. }));
  160. });
  161. }),
  162. };
  163. },
  164. enumerable: false,
  165. configurable: true
  166. });
  167. Sparkline.prototype.render = function (attributes, container) {
  168. this.container = maybeAppend(container, '.container', 'rect').attr('className', 'container').node();
  169. var type = attributes.type;
  170. var className = "spark".concat(type);
  171. var style = type === 'line' ? this.linesStyle : this.columnsStyle;
  172. this.spark = maybeAppend(container, ".".concat(className), function () {
  173. if (type === 'line')
  174. return new Lines({ className: className, style: style });
  175. return new Columns({ className: className, style: style });
  176. })
  177. .styles(style)
  178. .node();
  179. };
  180. /**
  181. * 根据数据索引获取color
  182. */
  183. Sparkline.prototype.getColor = function (index) {
  184. var color = this.attributes.color;
  185. if (isArray(color)) {
  186. return color[index % color.length];
  187. }
  188. if (isFunction(color)) {
  189. return color.call(null, index);
  190. }
  191. return color;
  192. };
  193. /**
  194. * 根据数据生成scale
  195. */
  196. Sparkline.prototype.createScales = function (data) {
  197. var _a, _b;
  198. var _c = this.attributes, type = _c.type, _d = _c.range, range = _d === void 0 ? [] : _d, isGroup = _c.isGroup, spacing = _c.spacing;
  199. var _e = this.containerShape, width = _e.width, height = _e.height;
  200. var _f = __read(getRange(data), 2), minVal = _f[0], maxVal = _f[1];
  201. var yScale = new Linear({
  202. domain: [(_a = range[0]) !== null && _a !== void 0 ? _a : minVal, (_b = range[1]) !== null && _b !== void 0 ? _b : maxVal],
  203. range: [height, 0],
  204. });
  205. if (type === 'line') {
  206. return {
  207. type: type,
  208. x: new Linear({
  209. domain: [0, data[0].length - 1],
  210. range: [0, width],
  211. }),
  212. y: yScale,
  213. };
  214. }
  215. return {
  216. type: type,
  217. x: new Band({
  218. domain: data[0].map(function (val, idx) { return idx; }),
  219. range: [0, width],
  220. paddingInner: isGroup ? spacing : 0,
  221. }),
  222. y: yScale,
  223. };
  224. };
  225. Sparkline.tag = 'sparkline';
  226. return Sparkline;
  227. }(GUI));
  228. export { Sparkline };
  229. //# sourceMappingURL=index.js.map