@alicloud/cloud-charts
Version:
194 lines (189 loc) • 7.23 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = exports.Candlestick = void 0;
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _Base2 = _interopRequireDefault(require("../common/Base"));
var _index = _interopRequireDefault(require("../themes/index"));
var _common = require("../common/common");
var _rectXAxis = _interopRequireDefault(require("../common/rectXAxis"));
var _rectYAxis = _interopRequireDefault(require("../common/rectYAxis"));
var _rectTooltip = _interopRequireDefault(require("../common/rectTooltip"));
var _rectLegend = _interopRequireDefault(require("../common/rectLegend"));
var _guide = _interopRequireDefault(require("../common/guide"));
var _geomSize = _interopRequireDefault(require("../common/geomSize"));
var _geomStyle = _interopRequireDefault(require("../common/geomStyle"));
var _errorWrap = _interopRequireDefault(require("../common/errorWrap"));
var _index2 = require("../common/interaction/index");
function computeDataType(data) {
if (Array.isArray(data)) {
data.forEach(function (d) {
if (Array.isArray(d.y)) {
var _d$y = d.y,
start = _d$y[0],
end = _d$y[1];
d.trend = start <= end ? 'up' : 'down';
}
});
}
return data;
}
var Candlestick = exports.Candlestick = /*#__PURE__*/function (_Base) {
(0, _inheritsLoose2["default"])(Candlestick, _Base);
function Candlestick() {
var _this;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _Base.call.apply(_Base, [this].concat(args)) || this;
// 原 g2Factory 的第一个参数，改为类的属性。
_this.chartName = 'G2Wcandlestick';
_this.legendField = 'trend';
return _this;
}
var _proto = Candlestick.prototype;
// convertData: false,
_proto.getDefaultConfig = function getDefaultConfig() {
return {
colors: [_index["default"]['widgets-color-red'], _index["default"]['widgets-color-green']],
// padding: ['auto', 'auto', 'auto', 'auto'],
xAxis: {
type: 'time',
mask: 'YYYY-MM-DD',
labelFormatter: null,
// 可以强制覆盖，手动设置label
categories: null,
autoRotate: false
},
yAxis: {
labelFormatter: null,
// 可以强制覆盖，手动设置label
max: null,
min: null
},
legend: {
// align: 'left',
nameFormatter: null // 可以强制覆盖，手动设置label
},
tooltip: {
showTitle: true,
titleFormatter: null,
nameFormatter: null,
valueFormatter: null
},
grid: false,
// zoom: false,
size: null
// label: false,
};
};
_proto.init = function init(chart, config, data) {
// 设置数据度量
var defs = {
x: (0, _common.propertyAssign)(_common.propertyMap.axis, {
type: 'time'
}, config.xAxis),
y: (0, _common.propertyAssign)(_common.propertyMap.axis, {
type: 'linear',
tickCount: 5,
nice: true
}, config.yAxis),
type: {
type: 'cat'
},
trend: {
type: 'cat'
}
};
chart.scale(defs);
chart.data(computeDataType(data));
// 设置单个Y轴
(0, _rectYAxis["default"])(this, chart, config);
// 设置X轴
(0, _rectXAxis["default"])(this, chart, config);
chart.legend('x', false);
chart.legend('y', false);
// 设置图例
(0, _rectLegend["default"])(this, chart, config, {
// useHtml: false,
}, 'single', 'trend');
// tooltip
var _ref = config.tooltip || {},
showTitle = _ref.showTitle,
showColon = _ref.showColon;
(0, _rectTooltip["default"])(this, chart, config, {}, null, {
showTitle: true,
showCrosshairs: false,
showMarkers: false,
itemTpl: "<div>\n " + (showTitle ? '<div style="margin:10px 0;"><span style="background-color:{color};width:6px;height:6px;border-radius:50%;display:inline-block;margin-right:8px;"></span>{group}</div>' : '') + "\n <div style=\"margin:8px 0;\"><span class=\"g2-tooltip-item-name\">{labelStart}</span>" + (showColon ? ':' : '') + "<span class=\"g2-tooltip-item-value\">{start}</span></div><div style=\"margin:8px 0;\"><span class=\"g2-tooltip-item-name\">{labelEnd}</span>" + (showColon ? ':' : '') + "<span class=\"g2-tooltip-item-value\">{end}</span></div><div style=\"margin:8px 0;\"><span class=\"g2-tooltip-item-name\">{labelMax}</span>" + (showColon ? ':' : '') + "<span class=\"g2-tooltip-item-value\">{max}</span></div><div style=\"margin:8px 0;\"><span class=\"g2-tooltip-item-name\">{labelMin}</span>" + (showColon ? ':' : '') + "<span class=\"g2-tooltip-item-value\">{min}</span></div>\n </div>"
});
(0, _index2.activeRegionWithTheme)(chart);
// 绘制辅助线，辅助背景区域
(0, _guide["default"])(chart, config);
drawCandle(chart, config, config.colors);
};
_proto.changeData = function changeData(chart, config, data) {
chart.changeData(computeDataType(data));
};
return Candlestick;
}(_Base2["default"]);
var Wcandlestick = (0, _errorWrap["default"])(Candlestick);
var _default = exports["default"] = Wcandlestick;
function drawCandle(chart, config, colors) {
// 分组
var geom = chart.schema().position(['x', 'y']).shape('candle').color('trend', function (trend) {
if (Array.isArray(colors)) {
var colorUp = colors[0],
colorDown = colors[1];
return trend === 'up' ? colorUp : colorDown;
}
if (typeof colors === 'function') {
return colors(trend);
}
return colors;
})
// .tooltip('type*start*end*max*min', (group, start, end, max, min) => {
.tooltip('y*type', function (y, group) {
var _ref2 = config.tooltip || {},
_ref2$labelAlias = _ref2.labelAlias,
labelAlias = _ref2$labelAlias === void 0 ? {} : _ref2$labelAlias;
var labelStart = labelAlias.start,
labelEnd = labelAlias.end,
labelMax = labelAlias.max,
labelMin = labelAlias.min;
var start = y[0],
end = y[1],
max = y[2],
min = y[3];
return {
group: group,
start: start,
end: end,
max: max,
min: min,
labelStart: labelStart || 'start',
labelEnd: labelEnd || 'end',
labelMax: labelMax || 'max',
labelMin: labelMin || 'min'
};
}).state({
active: {
style: function style(ele) {
var _ele$model;
return {
stroke: ele === null || ele === void 0 ? void 0 : (_ele$model = ele.model) === null || _ele$model === void 0 ? void 0 : _ele$model.color
};
}
},
selected: {
style: function style(ele) {
var _ele$model2;
return {
stroke: ele === null || ele === void 0 ? void 0 : (_ele$model2 = ele.model) === null || _ele$model2 === void 0 ? void 0 : _ele$model2.color
};
}
}
});
(0, _geomSize["default"])(geom, config.size, null, 'y', 'x*y*trend*extra');
(0, _geomStyle["default"])(geom, config.geomStyle);
}