@easyv/charts 1.4.15 → 1.4.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.husky/commit-msg +1 -1
- package/lib/components/Axis.js +139 -85
- package/lib/components/Band.js +50 -16
- package/lib/components/BaseLine.js +16 -5
- package/lib/components/CartesianChart.js +13 -13
- package/lib/components/Label.js +49 -33
- package/lib/components/TextOverflow.js +4 -1
- package/lib/hooks/useAxes.js +250 -61
- package/lib/hooks/useExtentData.js +44 -9
- package/package.json +55 -54
- package/src/components/Axis.tsx +246 -157
- package/src/components/Band.tsx +91 -56
- package/src/components/BaseLine.js +22 -5
- package/src/components/CartesianChart.js +7 -6
- package/src/components/Label.js +56 -46
- package/src/components/TextOverflow.tsx +4 -1
- package/src/hooks/useAxes.js +336 -117
- package/src/hooks/useExtentData.js +37 -10
package/lib/components/Label.js
CHANGED
|
@@ -39,9 +39,12 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
39
39
|
xScaler = _ref$xAxis.scaler,
|
|
40
40
|
step = _ref$xAxis.step,
|
|
41
41
|
direction = _ref$xAxis.direction,
|
|
42
|
-
|
|
42
|
+
_ref$yAxis = _ref.yAxis,
|
|
43
|
+
yScaler = _ref$yAxis.scaler,
|
|
44
|
+
isClipAxis = _ref$yAxis.isClipAxis,
|
|
45
|
+
clipValue = _ref$yAxis.clipValue,
|
|
43
46
|
triggerClick = _ref.triggerClick;
|
|
44
|
-
var lineType = config.hasOwnProperty(
|
|
47
|
+
var lineType = config.hasOwnProperty("line"); // 堆叠处理
|
|
45
48
|
|
|
46
49
|
var showIcon = icon && icon.show;
|
|
47
50
|
var showLabel = label && label.show;
|
|
@@ -61,7 +64,7 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
61
64
|
seriesWidth = _getSeriesInfo.seriesWidth,
|
|
62
65
|
seriesStart = _getSeriesInfo.seriesStart;
|
|
63
66
|
|
|
64
|
-
var isVertical = direction ===
|
|
67
|
+
var isVertical = direction === "vertical";
|
|
65
68
|
var _position = label.position;
|
|
66
69
|
return /*#__PURE__*/React.createElement("g", {
|
|
67
70
|
className: "__easyv-label"
|
|
@@ -77,9 +80,22 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
77
80
|
showY = _ref2$data.showY,
|
|
78
81
|
s = _ref2$data.s;
|
|
79
82
|
|
|
80
|
-
var y1
|
|
83
|
+
var y1, y2;
|
|
84
|
+
|
|
85
|
+
if (isClipAxis) {
|
|
86
|
+
if (end > +clipValue) {
|
|
87
|
+
y1 = yScaler[1](start);
|
|
88
|
+
y2 = yScaler[0](end);
|
|
89
|
+
} else {
|
|
90
|
+
y1 = yScaler[1](start);
|
|
91
|
+
y2 = yScaler[1](end);
|
|
92
|
+
}
|
|
93
|
+
} else {
|
|
94
|
+
y1 = yScaler(isVertical ? end : start); // 处理z型折线图和堆叠柱图的逻辑冲突
|
|
95
|
+
|
|
96
|
+
y2 = lineType ? start ? yScaler(isVertical ? start : end - start) : yScaler(isVertical ? start : end) : yScaler(isVertical ? start : end);
|
|
97
|
+
} // const y2 = yScaler(isVertical ? start : end);
|
|
81
98
|
|
|
82
|
-
var y2 = lineType ? start ? yScaler(isVertical ? start : end - start) : yScaler(isVertical ? start : end) : yScaler(isVertical ? start : end); // const y2 = yScaler(isVertical ? start : end);
|
|
83
99
|
|
|
84
100
|
var positionX = xScaler(x) - step / 2 + seriesStart + index * seriesStep;
|
|
85
101
|
if (isNaN(positionX)) return null;
|
|
@@ -99,10 +115,10 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
99
115
|
});
|
|
100
116
|
var attr = isVertical ? _objectSpread(_objectSpread({}, labelPosition), {}, {
|
|
101
117
|
y: position,
|
|
102
|
-
dominantBaseline:
|
|
118
|
+
dominantBaseline: "middle"
|
|
103
119
|
}) : _objectSpread(_objectSpread({}, labelPosition), {}, {
|
|
104
120
|
x: position,
|
|
105
|
-
textAnchor:
|
|
121
|
+
textAnchor: "middle"
|
|
106
122
|
});
|
|
107
123
|
return /*#__PURE__*/React.createElement("g", {
|
|
108
124
|
key: i,
|
|
@@ -136,9 +152,9 @@ var Label = function Label(_ref3) {
|
|
|
136
152
|
_ref3$config$translat3 = _ref3$config$translat.y,
|
|
137
153
|
translateY = _ref3$config$translat3 === void 0 ? 0 : _ref3$config$translat3,
|
|
138
154
|
_ref3$textAnchor = _ref3.textAnchor,
|
|
139
|
-
textAnchor = _ref3$textAnchor === void 0 ?
|
|
155
|
+
textAnchor = _ref3$textAnchor === void 0 ? "middle" : _ref3$textAnchor,
|
|
140
156
|
_ref3$dominantBaselin = _ref3.dominantBaseline,
|
|
141
|
-
dominantBaseline = _ref3$dominantBaselin === void 0 ?
|
|
157
|
+
dominantBaseline = _ref3$dominantBaselin === void 0 ? "middle" : _ref3$dominantBaselin;
|
|
142
158
|
return /*#__PURE__*/React.createElement("text", (0, _extends2["default"])({
|
|
143
159
|
x: x,
|
|
144
160
|
y: y,
|
|
@@ -164,12 +180,12 @@ var Icon = function Icon(_ref4) {
|
|
|
164
180
|
_ref4$config$size = _ref4$config.size,
|
|
165
181
|
width = _ref4$config$size.width,
|
|
166
182
|
height = _ref4$config$size.height;
|
|
167
|
-
return mode ==
|
|
183
|
+
return mode == "single" ? /*#__PURE__*/React.createElement(Circle, {
|
|
168
184
|
cx: cx,
|
|
169
185
|
cy: cy,
|
|
170
186
|
color: color,
|
|
171
187
|
radius: radius
|
|
172
|
-
}) : mode ==
|
|
188
|
+
}) : mode == "double" ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Circle, (0, _extends2["default"])({
|
|
173
189
|
cx: cx,
|
|
174
190
|
cy: cy
|
|
175
191
|
}, outer)), /*#__PURE__*/React.createElement(Circle, (0, _extends2["default"])({
|
|
@@ -200,82 +216,82 @@ var Circle = function Circle(_ref5) {
|
|
|
200
216
|
|
|
201
217
|
var getVerticalLabel = function getVerticalLabel(_ref6) {
|
|
202
218
|
var _ref6$position = _ref6.position,
|
|
203
|
-
position = _ref6$position === void 0 ?
|
|
219
|
+
position = _ref6$position === void 0 ? "outerStart" : _ref6$position,
|
|
204
220
|
width = _ref6.width,
|
|
205
221
|
y = _ref6.y,
|
|
206
222
|
y1 = _ref6.y1,
|
|
207
223
|
y2 = _ref6.y2;
|
|
208
224
|
|
|
209
225
|
switch (position) {
|
|
210
|
-
case
|
|
226
|
+
case "start":
|
|
211
227
|
return {
|
|
212
228
|
x: y > 0 ? y2 : y1,
|
|
213
|
-
textAnchor:
|
|
229
|
+
textAnchor: "start"
|
|
214
230
|
};
|
|
215
231
|
|
|
216
|
-
case
|
|
232
|
+
case "middle":
|
|
217
233
|
return {
|
|
218
234
|
x: (y1 + y2) / 2,
|
|
219
|
-
textAnchor:
|
|
235
|
+
textAnchor: "middle"
|
|
220
236
|
};
|
|
221
237
|
|
|
222
|
-
case
|
|
238
|
+
case "end":
|
|
223
239
|
return {
|
|
224
240
|
x: y > 0 ? y1 : y2,
|
|
225
|
-
textAnchor:
|
|
241
|
+
textAnchor: "end"
|
|
226
242
|
};
|
|
227
243
|
|
|
228
|
-
case
|
|
244
|
+
case "outerStart":
|
|
229
245
|
return {
|
|
230
246
|
x: y1,
|
|
231
|
-
textAnchor: y > 0 ?
|
|
247
|
+
textAnchor: y > 0 ? "start" : "end"
|
|
232
248
|
};
|
|
233
249
|
|
|
234
|
-
case
|
|
250
|
+
case "chartStart":
|
|
235
251
|
return {
|
|
236
252
|
x: y > 0 ? width : 0,
|
|
237
|
-
textAnchor: y > 0 ?
|
|
253
|
+
textAnchor: y > 0 ? "start" : "end"
|
|
238
254
|
};
|
|
239
255
|
}
|
|
240
256
|
};
|
|
241
257
|
|
|
242
258
|
var getHorizontalLabel = function getHorizontalLabel(_ref7) {
|
|
243
259
|
var _ref7$position = _ref7.position,
|
|
244
|
-
position = _ref7$position === void 0 ?
|
|
260
|
+
position = _ref7$position === void 0 ? "outerStart" : _ref7$position,
|
|
245
261
|
height = _ref7.height,
|
|
246
262
|
y = _ref7.y,
|
|
247
263
|
y1 = _ref7.y1,
|
|
248
264
|
y2 = _ref7.y2;
|
|
249
265
|
|
|
250
266
|
switch (position) {
|
|
251
|
-
case
|
|
267
|
+
case "start":
|
|
252
268
|
return {
|
|
253
269
|
y: y > 0 ? y1 : y2,
|
|
254
|
-
dominantBaseline:
|
|
270
|
+
dominantBaseline: "text-after-edge"
|
|
255
271
|
};
|
|
256
272
|
|
|
257
|
-
case
|
|
273
|
+
case "middle":
|
|
258
274
|
return {
|
|
259
275
|
y: (y1 + y2) / 2,
|
|
260
|
-
dominantBaseline:
|
|
276
|
+
dominantBaseline: "middle"
|
|
261
277
|
};
|
|
262
278
|
|
|
263
|
-
case
|
|
279
|
+
case "end":
|
|
264
280
|
return {
|
|
265
281
|
y: y > 0 ? y2 : y1,
|
|
266
|
-
dominantBaseline:
|
|
282
|
+
dominantBaseline: "text-before-edge"
|
|
267
283
|
};
|
|
268
284
|
|
|
269
|
-
case
|
|
285
|
+
case "outerStart":
|
|
270
286
|
return {
|
|
271
287
|
y: y2,
|
|
272
|
-
dominantBaseline: y >= 0 ?
|
|
288
|
+
dominantBaseline: y >= 0 ? "text-after-edge" : "text-before-edge"
|
|
273
289
|
};
|
|
274
290
|
|
|
275
|
-
case
|
|
291
|
+
case "chartStart":
|
|
276
292
|
return {
|
|
277
293
|
y: y > 0 ? 0 : height,
|
|
278
|
-
dominantBaseline: y > 0 ?
|
|
294
|
+
dominantBaseline: y > 0 ? "text-after-edge" : "text-before-edge"
|
|
279
295
|
};
|
|
280
296
|
}
|
|
281
297
|
};
|
|
@@ -58,6 +58,9 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
|
|
|
58
58
|
|
|
59
59
|
var styles = _objectSpread(_objectSpread({}, getTextOverflow(type)), style);
|
|
60
60
|
|
|
61
|
+
var textDom = document.createElement("div");
|
|
62
|
+
textDom.innerHTML = value;
|
|
63
|
+
var text = textDom.innerText;
|
|
61
64
|
return type == 'marquee' ? /*#__PURE__*/_react["default"].createElement(_Marquee["default"], {
|
|
62
65
|
value: value,
|
|
63
66
|
speed: speed,
|
|
@@ -66,7 +69,7 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
|
|
|
66
69
|
}) : /*#__PURE__*/_react["default"].createElement("div", {
|
|
67
70
|
style: styles,
|
|
68
71
|
ref: ref,
|
|
69
|
-
title: type == "ellipsis" ?
|
|
72
|
+
title: type == "ellipsis" ? text || undefined : undefined,
|
|
70
73
|
dangerouslySetInnerHTML: {
|
|
71
74
|
__html: value
|
|
72
75
|
}
|
package/lib/hooks/useAxes.js
CHANGED
|
@@ -42,12 +42,12 @@ var getNewDomain = function getNewDomain(domain, mode, step) {
|
|
|
42
42
|
maxCount = Math.pow(10, getCount(max));
|
|
43
43
|
|
|
44
44
|
switch (mode) {
|
|
45
|
-
case
|
|
45
|
+
case "count":
|
|
46
46
|
newDomain[0] = Math.floor(domain[0] / minCount) * minCount;
|
|
47
47
|
newDomain[1] = Math.ceil(domain[1] / maxCount) * maxCount;
|
|
48
48
|
break;
|
|
49
49
|
|
|
50
|
-
case
|
|
50
|
+
case "step":
|
|
51
51
|
newDomain = [domain[0], domain[0]];
|
|
52
52
|
|
|
53
53
|
while (newDomain[1] < domain[1]) {
|
|
@@ -113,81 +113,270 @@ var _default = function _default(_ref) {
|
|
|
113
113
|
auto = item.auto,
|
|
114
114
|
mode = item.mode,
|
|
115
115
|
carousel = item.carousel,
|
|
116
|
-
config = item.config
|
|
116
|
+
config = item.config,
|
|
117
|
+
isClipAxis = item.isClipAxis,
|
|
118
|
+
bottomClipAxisCount = item.bottomClipAxisCount,
|
|
119
|
+
topClipAxisCount = item.topClipAxisCount,
|
|
120
|
+
bottomClipAxisStep = item.bottomClipAxisStep,
|
|
121
|
+
topClipAxisStep = item.topClipAxisStep,
|
|
122
|
+
clipValue = item.clipValue,
|
|
123
|
+
clipPosition = item.clipPosition,
|
|
124
|
+
clipDifferenceValue = item.clipDifferenceValue,
|
|
125
|
+
clipAxisMode = item.clipAxisMode; //如果是断轴类型,输出一套完全不同的values
|
|
126
|
+
|
|
127
|
+
/**
|
|
128
|
+
* 获取轴的:朝向direction,起点位置start,终点位置end
|
|
129
|
+
* @param {*} orientation
|
|
130
|
+
* @param {*} width
|
|
131
|
+
* @param {*} height
|
|
132
|
+
* @param {*} paddingOuter
|
|
133
|
+
* @returns {start,end,direction}
|
|
134
|
+
*/
|
|
135
|
+
|
|
136
|
+
function getChartsConfig(orientation, width, height, paddingOuter) {
|
|
137
|
+
var direction = orientation === "top" || orientation === "bottom" ? "horizontal" : orientation === "left" || orientation === "right" ? "vertical" : "";
|
|
138
|
+
var length = direction === "horizontal" ? width : direction === "vertical" ? height : 0;
|
|
139
|
+
|
|
140
|
+
var _paddingOuter = paddingOuter * length;
|
|
141
|
+
|
|
142
|
+
var start = _paddingOuter / 2;
|
|
143
|
+
var end = length - start;
|
|
144
|
+
return {
|
|
145
|
+
start: start,
|
|
146
|
+
end: end,
|
|
147
|
+
direction: direction,
|
|
148
|
+
length: length,
|
|
149
|
+
_paddingOuter: _paddingOuter
|
|
150
|
+
};
|
|
151
|
+
}
|
|
152
|
+
/**
|
|
153
|
+
* 设置scaler
|
|
154
|
+
* @param {*} scales
|
|
155
|
+
* @param {*} type 轴类型
|
|
156
|
+
* @param {*} domain 数据的范围
|
|
157
|
+
* @param {*} range 屏幕坐标的范围
|
|
158
|
+
* @returns
|
|
159
|
+
*/
|
|
160
|
+
|
|
161
|
+
|
|
162
|
+
function setScaler(scales, type, domain, range) {
|
|
163
|
+
//比例将抽象数据的维度映射到可视表示形式。虽然最常用于将数据编码为位置,例如将时间和温度映射到散点图中的水平和垂直位置
|
|
164
|
+
var scaler = scales[type]().domain(domain).range(range);
|
|
165
|
+
scaler.type = type;
|
|
166
|
+
if (type !== "ordinal") scaler.clamp(true); //scaler.nice().clamp(true)
|
|
167
|
+
|
|
168
|
+
return scaler;
|
|
169
|
+
}
|
|
170
|
+
/**
|
|
171
|
+
* 获取所有标签数据
|
|
172
|
+
* @param {*} scaler
|
|
173
|
+
* @param {*} ticks 传入的ticks
|
|
174
|
+
* @param {*} tickCount
|
|
175
|
+
* @returns
|
|
176
|
+
*/
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
function getAllTicks(scaler, ticks, tickCount) {
|
|
180
|
+
return ticks ? ticks : scaler.ticks ? scaler.ticks(tickCount) : scaler.domain();
|
|
181
|
+
}
|
|
182
|
+
/**
|
|
183
|
+
* 计算非自动模式下的标签集合
|
|
184
|
+
* @param {*} allTicks
|
|
185
|
+
* @param {*} type
|
|
186
|
+
* @param {*} carousel
|
|
187
|
+
* @param {*} showLast
|
|
188
|
+
* @param {*} auto
|
|
189
|
+
* @param {*} mode
|
|
190
|
+
* @param {*} newDomain
|
|
191
|
+
* @param {*} tickCount
|
|
192
|
+
* @param {*} step
|
|
193
|
+
* @returns
|
|
194
|
+
*/
|
|
195
|
+
|
|
196
|
+
|
|
197
|
+
function getTicks(allTicks, type, carousel, showLast, auto, mode, newDomain, tickCount, step) {
|
|
198
|
+
var _ticks = allTicks;
|
|
199
|
+
|
|
200
|
+
if (type === "ordinal") {
|
|
201
|
+
if (carousel === false) {
|
|
202
|
+
_ticks = (0, _utils.getTicksOfAxis)(_ticks, +tickCount, showLast);
|
|
203
|
+
}
|
|
204
|
+
} else {
|
|
205
|
+
if (auto === false) {
|
|
206
|
+
switch (mode) {
|
|
207
|
+
case "count":
|
|
208
|
+
_ticks = (0, _utils2.getYTicks)(newDomain[1], newDomain[0], +tickCount);
|
|
209
|
+
break;
|
|
210
|
+
|
|
211
|
+
case "step":
|
|
212
|
+
_ticks = (0, _utils2.getYTicksByStep)(newDomain[1], newDomain[0], +step);
|
|
213
|
+
break;
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
}
|
|
117
217
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
var length = direction === 'horizontal' ? width : direction === 'vertical' ? height : 0;
|
|
218
|
+
return _ticks;
|
|
219
|
+
} //断轴相关
|
|
121
220
|
|
|
122
|
-
var _paddingOuter = paddingOuter * length;
|
|
123
221
|
|
|
124
|
-
var
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
222
|
+
var _isClipAxis = isClipAxis,
|
|
223
|
+
clipAxisDomain = [],
|
|
224
|
+
clipAxisCount = [],
|
|
225
|
+
clipAxisTickCount = [],
|
|
226
|
+
clipAxisStep = [];
|
|
227
|
+
var _count = count,
|
|
228
|
+
_step = step; //计算topDomain,bottomDomain,当断轴值为设置不合理的时候,不开启断轴
|
|
128
229
|
|
|
129
|
-
if (
|
|
130
|
-
|
|
230
|
+
if (isClipAxis && (clipValue > domain[1] || clipValue < domain[0])) {
|
|
231
|
+
_isClipAxis = false;
|
|
232
|
+
_count = topClipAxisCount;
|
|
233
|
+
_step = topClipAxisStep;
|
|
234
|
+
} else {
|
|
235
|
+
clipAxisDomain = [[clipValue, domain[1]], [domain[0], clipValue]];
|
|
236
|
+
clipAxisCount = [topClipAxisCount, bottomClipAxisCount];
|
|
237
|
+
clipAxisStep = [topClipAxisStep, bottomClipAxisStep];
|
|
131
238
|
}
|
|
132
239
|
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
240
|
+
if (_isClipAxis) {
|
|
241
|
+
var getClipAxisRange = function getClipAxisRange(start, end, clipPosition, clipMargin) {
|
|
242
|
+
var topRange = [(end - start) * (clipPosition / 100) - clipMargin / 2, start];
|
|
243
|
+
var bottomRange = [end, (end - start) * (clipPosition / 100) + clipMargin / 2];
|
|
244
|
+
return [topRange, bottomRange];
|
|
245
|
+
}; //计算range填入scaler参数
|
|
246
|
+
|
|
247
|
+
|
|
248
|
+
clipAxisDomain.forEach(function (domain, index) {
|
|
249
|
+
clipAxisTickCount.push(getTickCount(domain, clipAxisCount[index], decimal));
|
|
250
|
+
});
|
|
251
|
+
|
|
252
|
+
var _getChartsConfig = getChartsConfig(orientation, width, height, paddingOuter),
|
|
253
|
+
start = _getChartsConfig.start,
|
|
254
|
+
end = _getChartsConfig.end,
|
|
255
|
+
direction = _getChartsConfig.direction,
|
|
256
|
+
_paddingOuter = _getChartsConfig._paddingOuter,
|
|
257
|
+
length = _getChartsConfig.length;
|
|
258
|
+
|
|
259
|
+
var clipMargin = 10;
|
|
260
|
+
var clipAxisRange = getClipAxisRange(start, end, clipPosition, clipMargin);
|
|
261
|
+
var newClipAxisDomain = []; //如果非自适应模式,计算新的domain,传入scaler,适配强制步长或者数量强制
|
|
262
|
+
|
|
263
|
+
if (!isNaN(domain[1]) && !auto) {
|
|
264
|
+
clipAxisDomain.forEach(function (domain, index) {
|
|
265
|
+
newClipAxisDomain.push(getNewDomain(domain, mode, clipAxisStep[index]));
|
|
266
|
+
});
|
|
267
|
+
} else {
|
|
268
|
+
//如果为刻度自适应,使用原先domain直接传入scaler,使用scaler.ticks来计算出标签集合
|
|
269
|
+
newClipAxisDomain = clipAxisDomain;
|
|
270
|
+
} //设置scaler,scaler会将数值映射真实的坐标(svg坐标)
|
|
271
|
+
|
|
272
|
+
|
|
273
|
+
var clipAxisScaler = [];
|
|
274
|
+
newClipAxisDomain.forEach(function (domain, index) {
|
|
275
|
+
clipAxisScaler.push(setScaler(scales, type, domain, clipAxisRange[index]));
|
|
276
|
+
}); //clipAxisAllTicks作用是使用scaler.ticks方法,来计算标签集合
|
|
277
|
+
|
|
278
|
+
var clipAxisAllTicks = [];
|
|
279
|
+
clipAxisScaler.forEach(function (scaler, index) {
|
|
280
|
+
clipAxisAllTicks.push(getAllTicks(scaler, ticks, clipAxisTickCount[index]));
|
|
281
|
+
});
|
|
282
|
+
var clipAxisTicks = [];
|
|
283
|
+
clipAxisAllTicks.forEach(function (allTicks, index) {
|
|
284
|
+
clipAxisTicks.push(getTicks(allTicks, type, carousel, showLast, auto, mode, newClipAxisDomain[index], clipAxisTickCount[index], clipAxisStep[index]));
|
|
285
|
+
});
|
|
286
|
+
var lengthWithoutPaddingOuter = length - _paddingOuter;
|
|
287
|
+
tmp.set(axisType, _objectSpread(_objectSpread({}, item), {}, {
|
|
288
|
+
isClipAxis: _isClipAxis,
|
|
289
|
+
scaler: clipAxisScaler,
|
|
290
|
+
length: length,
|
|
291
|
+
direction: direction,
|
|
292
|
+
start: start,
|
|
293
|
+
end: end,
|
|
294
|
+
clipAxisRange: clipAxisRange,
|
|
295
|
+
lengthWithoutPaddingOuter: lengthWithoutPaddingOuter,
|
|
296
|
+
step: [lengthWithoutPaddingOuter / clipAxisAllTicks[0].length, lengthWithoutPaddingOuter / clipAxisAllTicks[1].length],
|
|
297
|
+
allTicks: clipAxisAllTicks,
|
|
298
|
+
ticks: clipAxisTicks,
|
|
299
|
+
clipValue: clipValue
|
|
300
|
+
}));
|
|
301
|
+
} else {
|
|
302
|
+
//计算真正需要的tickCount,如果domain区间太小,不能完全按照count来,需要减少count数
|
|
303
|
+
var tickCount = type == "ordinal" ? _count : getTickCount(domain, _count, decimal);
|
|
136
304
|
|
|
137
|
-
|
|
138
|
-
|
|
305
|
+
var _getChartsConfig2 = getChartsConfig(orientation, width, height, paddingOuter),
|
|
306
|
+
_start = _getChartsConfig2.start,
|
|
307
|
+
_end = _getChartsConfig2.end,
|
|
308
|
+
_direction = _getChartsConfig2.direction,
|
|
309
|
+
_paddingOuter2 = _getChartsConfig2._paddingOuter,
|
|
310
|
+
_length = _getChartsConfig2.length;
|
|
139
311
|
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
312
|
+
var range = _direction === "horizontal" ? [_start, _end] : _direction === "vertical" ? [_end, _start] : [0, 0];
|
|
313
|
+
var newDomain = domain;
|
|
314
|
+
|
|
315
|
+
if (type !== "ordinal" && !isNaN(domain[1]) && !auto) {
|
|
316
|
+
newDomain = getNewDomain(domain, mode, _step);
|
|
143
317
|
}
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
318
|
+
|
|
319
|
+
var scaler = scales[type]().domain(newDomain).range(range);
|
|
320
|
+
scaler.type = type;
|
|
321
|
+
if (type !== "ordinal") scaler.clamp(true); //scaler.nice().clamp(true)
|
|
322
|
+
|
|
323
|
+
var allTicks = ticks ? ticks : scaler.ticks ? scaler.ticks(tickCount) : scaler.domain();
|
|
324
|
+
var _ticks = allTicks; //
|
|
325
|
+
|
|
326
|
+
if (type === "ordinal") {
|
|
327
|
+
if (carousel === false) {
|
|
328
|
+
_ticks = (0, _utils.getTicksOfAxis)(_ticks, +tickCount, showLast);
|
|
329
|
+
}
|
|
330
|
+
} else {
|
|
331
|
+
if (auto === false) {
|
|
332
|
+
switch (mode) {
|
|
333
|
+
case "count":
|
|
334
|
+
_ticks = (0, _utils2.getYTicks)(newDomain[1], newDomain[0], +tickCount);
|
|
335
|
+
break;
|
|
336
|
+
|
|
337
|
+
case "step":
|
|
338
|
+
_ticks = (0, _utils2.getYTicksByStep)(newDomain[1], newDomain[0], +_step);
|
|
339
|
+
break;
|
|
340
|
+
}
|
|
154
341
|
}
|
|
155
342
|
}
|
|
156
|
-
}
|
|
157
343
|
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
344
|
+
var _lengthWithoutPaddingOuter = _length - _paddingOuter2;
|
|
345
|
+
|
|
346
|
+
if (type == "linear" && config.on) {
|
|
347
|
+
var zeroPosition = scaler(0);
|
|
348
|
+
|
|
349
|
+
if (zeroPosition !== range[0] && !isNaN(zeroPosition)) {
|
|
350
|
+
if (_direction === "horizontal") {
|
|
351
|
+
xAxisPositions.push({
|
|
352
|
+
x: zeroPosition,
|
|
353
|
+
y: 0
|
|
354
|
+
});
|
|
355
|
+
} else if (_direction === "vertical") {
|
|
356
|
+
xAxisPositions.push({
|
|
357
|
+
x: 0,
|
|
358
|
+
y: zeroPosition
|
|
359
|
+
});
|
|
360
|
+
}
|
|
174
361
|
}
|
|
175
362
|
}
|
|
176
|
-
}
|
|
177
363
|
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
364
|
+
tmp.set(axisType, _objectSpread(_objectSpread({}, item), {}, {
|
|
365
|
+
count: _count,
|
|
366
|
+
isClipAxis: _isClipAxis,
|
|
367
|
+
scaler: scaler,
|
|
368
|
+
length: _length,
|
|
369
|
+
direction: _direction,
|
|
370
|
+
start: _start,
|
|
371
|
+
end: _end,
|
|
372
|
+
lengthWithoutPaddingOuter: _lengthWithoutPaddingOuter,
|
|
373
|
+
step: _lengthWithoutPaddingOuter / allTicks.length,
|
|
374
|
+
allTicks: allTicks,
|
|
375
|
+
ticks: _ticks
|
|
376
|
+
}));
|
|
377
|
+
}
|
|
189
378
|
});
|
|
190
|
-
tmp.get(
|
|
379
|
+
tmp.get("x") && (tmp.get("x").positions = xAxisPositions);
|
|
191
380
|
return tmp;
|
|
192
381
|
}, [axes]);
|
|
193
382
|
|
|
@@ -93,24 +93,59 @@ var _default = function _default(_ref) {
|
|
|
93
93
|
}).keys());
|
|
94
94
|
}, [data]);
|
|
95
95
|
var y = stackData(dataY, _series.y);
|
|
96
|
-
var z = stackData(dataZ, _series.z);
|
|
96
|
+
var z = stackData(dataZ, _series.z); //clipAxisMode如果是auto根据clipDifferenceValue设置clipValue
|
|
97
|
+
|
|
97
98
|
return axes.map(function (item) {
|
|
98
99
|
var axisType = item.axisType,
|
|
99
100
|
domain = item.domain,
|
|
100
101
|
type = item.type;
|
|
101
102
|
|
|
102
103
|
switch (axisType) {
|
|
103
|
-
case
|
|
104
|
+
case "x":
|
|
104
105
|
return _objectSpread(_objectSpread({}, item), {}, {
|
|
105
|
-
domain: type ==
|
|
106
|
+
domain: type == "linear" ? (0, _d3v.extent)(x) : x
|
|
106
107
|
});
|
|
107
108
|
|
|
108
|
-
case
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
109
|
+
case "y":
|
|
110
|
+
{
|
|
111
|
+
if (item.axisType == "y" && item.isClipAxis === true && item.clipAxisMode == "auto") {
|
|
112
|
+
var _dataY = dataY.map(function (_item) {
|
|
113
|
+
return _item.y;
|
|
114
|
+
});
|
|
115
|
+
|
|
116
|
+
var _clipValue = Infinity;
|
|
117
|
+
|
|
118
|
+
if (_dataY.length >= 2) {
|
|
119
|
+
_dataY.sort(function (a, b) {
|
|
120
|
+
return a - b;
|
|
121
|
+
});
|
|
122
|
+
|
|
123
|
+
var clipDifferenceValueArr = [];
|
|
124
|
+
|
|
125
|
+
for (var i = 0; i < _dataY.length - 1; i++) {
|
|
126
|
+
clipDifferenceValueArr.push(_dataY[i + 1] - _dataY[i]);
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
var max = (0, _d3v.max)(clipDifferenceValueArr);
|
|
130
|
+
|
|
131
|
+
if (max >= item.clipDifferenceValue) {
|
|
132
|
+
var index = clipDifferenceValueArr.indexOf(max);
|
|
133
|
+
_clipValue = _dataY[index];
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
return _objectSpread(_objectSpread({}, item), {}, {
|
|
138
|
+
domain: domain ? getDomain(y, domain) : y,
|
|
139
|
+
clipValue: _clipValue
|
|
140
|
+
});
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
return _objectSpread(_objectSpread({}, item), {}, {
|
|
144
|
+
domain: domain ? getDomain(y, domain) : y
|
|
145
|
+
});
|
|
146
|
+
}
|
|
112
147
|
|
|
113
|
-
case
|
|
148
|
+
case "z":
|
|
114
149
|
return _objectSpread(_objectSpread({}, item), {}, {
|
|
115
150
|
domain: domain ? getDomain(z, domain) : z
|
|
116
151
|
});
|
|
@@ -127,5 +162,5 @@ var getDomain = function getDomain(_ref2, _ref3) {
|
|
|
127
162
|
|
|
128
163
|
var min = _ref3.min,
|
|
129
164
|
max = _ref3.max;
|
|
130
|
-
return [min !==
|
|
165
|
+
return [min !== "" ? +min : min1, max !== "" ? +max : max1];
|
|
131
166
|
};
|