| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229 |
- import { __assign, __extends, __read } from "tslib";
- import { Band, Linear } from '@antv/scale';
- import { clone, isArray, isFunction, isNumber } from '@antv/util';
- import { GUI } from '../../core';
- import { maybeAppend, subStyleProps } from '../../util';
- import { Columns } from './columns';
- import { Lines } from './lines';
- import { dataToLines, linesToAreaPaths, linesToStackAreaPaths, linesToStackCurveAreaPaths, lineToCurvePath, lineToLinePath, } from './path';
- import { getRange, getStackedData } from './utils';
- var Sparkline = /** @class */ (function (_super) {
- __extends(Sparkline, _super);
- function Sparkline(options) {
- return _super.call(this, options, {
- type: 'line',
- width: 200,
- height: 20,
- isStack: false,
- color: ['#83daad', '#edbf45', '#d2cef9', '#e290b3', '#6f63f4'],
- smooth: true,
- lineLineWidth: 1,
- areaOpacity: 0,
- isGroup: false,
- columnLineWidth: 1,
- columnStroke: '#fff',
- }) || this;
- }
- Object.defineProperty(Sparkline.prototype, "rawData", {
- /**
- * 将data统一格式化为数组形式
- * 如果堆叠,则生成堆叠数据
- */
- get: function () {
- var rawData = this.attributes.data;
- if (!rawData || (rawData === null || rawData === void 0 ? void 0 : rawData.length) === 0)
- return [[]];
- var data = clone(rawData);
- // number[] -> number[][]
- return isNumber(data[0]) ? [data] : data;
- },
- enumerable: false,
- configurable: true
- });
- Object.defineProperty(Sparkline.prototype, "data", {
- get: function () {
- if (this.attributes.isStack)
- return getStackedData(this.rawData);
- return this.rawData;
- },
- enumerable: false,
- configurable: true
- });
- Object.defineProperty(Sparkline.prototype, "scales", {
- get: function () {
- return this.createScales(this.data);
- },
- enumerable: false,
- configurable: true
- });
- Object.defineProperty(Sparkline.prototype, "baseline", {
- /**
- * 基准线,默认为 0
- */
- get: function () {
- var y = this.scales.y;
- var _a = __read(y.getOptions().domain || [0, 0], 2), y1 = _a[0], y2 = _a[1];
- if (y2 < 0) {
- return y.map(y2);
- }
- return y.map(y1 < 0 ? 0 : y1);
- },
- enumerable: false,
- configurable: true
- });
- Object.defineProperty(Sparkline.prototype, "containerShape", {
- get: function () {
- var _a = this.attributes, width = _a.width, height = _a.height;
- return { width: width, height: height };
- },
- enumerable: false,
- configurable: true
- });
- Object.defineProperty(Sparkline.prototype, "linesStyle", {
- get: function () {
- var _this = this;
- var _a = this.attributes, type = _a.type, isStack = _a.isStack, smooth = _a.smooth;
- if (type !== 'line')
- throw new Error('linesStyle can only be used in line type');
- var areaStyle = subStyleProps(this.attributes, 'area');
- var lineStyle = subStyleProps(this.attributes, 'line');
- var width = this.containerShape.width;
- var data = this.data;
- if (data[0].length === 0)
- return { lines: [], areas: [] };
- var _b = this.scales, x = _b.x, y = _b.y;
- // 线条Path
- var lines = dataToLines(data, { type: 'line', x: x, y: y });
- // 生成区域path
- var areas = [];
- if (areaStyle) {
- var baseline = this.baseline;
- if (isStack) {
- areas = smooth
- ? linesToStackCurveAreaPaths(lines, width, baseline)
- : linesToStackAreaPaths(lines, width, baseline);
- }
- else {
- areas = linesToAreaPaths(lines, smooth, width, baseline);
- }
- }
- return {
- lines: lines.map(function (line, idx) {
- return __assign({ stroke: _this.getColor(idx), path: smooth ? lineToCurvePath(line) : lineToLinePath(line) }, lineStyle);
- }),
- areas: areas.map(function (path, idx) {
- return __assign({ path: path, fill: _this.getColor(idx) }, areaStyle);
- }),
- };
- },
- enumerable: false,
- configurable: true
- });
- Object.defineProperty(Sparkline.prototype, "columnsStyle", {
- get: function () {
- var _this = this;
- var columnStyle = subStyleProps(this.attributes, 'column');
- var _a = this.attributes, isStack = _a.isStack, type = _a.type;
- if (type !== 'column')
- throw new Error('columnsStyle can only be used in column type');
- var height = this.containerShape.height;
- var data = this.rawData;
- if (!data)
- return { columns: [] };
- if (isStack)
- data = getStackedData(data);
- var _b = this.createScales(data), x = _b.x, y = _b.y;
- var _c = __read(getRange(data), 2), minVal = _c[0], maxVal = _c[1];
- var heightScale = new Linear({
- domain: [0, maxVal - (minVal > 0 ? 0 : minVal)],
- range: [0, height],
- });
- var bandWidth = x.getBandWidth();
- var rawData = this.rawData;
- return {
- columns: data.map(function (column, i) {
- return column.map(function (val, j) {
- var barWidth = bandWidth / data.length;
- return __assign(__assign({ fill: _this.getColor(i) }, columnStyle), (isStack
- ? {
- x: x.map(j),
- y: y.map(val),
- width: bandWidth,
- height: heightScale.map(rawData[i][j]),
- }
- : {
- x: x.map(j) + barWidth * i,
- y: val >= 0 ? y.map(val) : y.map(0),
- width: barWidth,
- height: heightScale.map(Math.abs(val)),
- }));
- });
- }),
- };
- },
- enumerable: false,
- configurable: true
- });
- Sparkline.prototype.render = function (attributes, container) {
- this.container = maybeAppend(container, '.container', 'rect').attr('className', 'container').node();
- var type = attributes.type;
- var className = "spark".concat(type);
- var style = type === 'line' ? this.linesStyle : this.columnsStyle;
- this.spark = maybeAppend(container, ".".concat(className), function () {
- if (type === 'line')
- return new Lines({ className: className, style: style });
- return new Columns({ className: className, style: style });
- })
- .styles(style)
- .node();
- };
- /**
- * 根据数据索引获取color
- */
- Sparkline.prototype.getColor = function (index) {
- var color = this.attributes.color;
- if (isArray(color)) {
- return color[index % color.length];
- }
- if (isFunction(color)) {
- return color.call(null, index);
- }
- return color;
- };
- /**
- * 根据数据生成scale
- */
- Sparkline.prototype.createScales = function (data) {
- var _a, _b;
- var _c = this.attributes, type = _c.type, _d = _c.range, range = _d === void 0 ? [] : _d, isGroup = _c.isGroup, spacing = _c.spacing;
- var _e = this.containerShape, width = _e.width, height = _e.height;
- var _f = __read(getRange(data), 2), minVal = _f[0], maxVal = _f[1];
- var yScale = new Linear({
- domain: [(_a = range[0]) !== null && _a !== void 0 ? _a : minVal, (_b = range[1]) !== null && _b !== void 0 ? _b : maxVal],
- range: [height, 0],
- });
- if (type === 'line') {
- return {
- type: type,
- x: new Linear({
- domain: [0, data[0].length - 1],
- range: [0, width],
- }),
- y: yScale,
- };
- }
- return {
- type: type,
- x: new Band({
- domain: data[0].map(function (val, idx) { return idx; }),
- range: [0, width],
- paddingInner: isGroup ? spacing : 0,
- }),
- y: yScale,
- };
- };
- Sparkline.tag = 'sparkline';
- return Sparkline;
- }(GUI));
- export { Sparkline };
- //# sourceMappingURL=index.js.map
|