UNPKG

17.8 kBJavaScriptView Raw
1function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
2
3import _isEqual from "lodash/isEqual";
4import _isFunction from "lodash/isFunction";
5import _isArray from "lodash/isArray";
6
7function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
8
9function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
10
11function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
12
13function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
14
15function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
16
17function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
18
19function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
20
21function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
22
23function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
24
25function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
26
27function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
28
29function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
30
31function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
32
33function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
34
35function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
36
37/**
38 * @fileOverview Render a group of radial bar
39 */
40import React, { PureComponent } from 'react';
41import classNames from 'classnames';
42import Animate from 'react-smooth';
43import { Sector } from '../shape/Sector';
44import { Layer } from '../container/Layer';
45import { findAllByType } from '../util/ReactUtils';
46import { Global } from '../util/Global';
47import { LabelList } from '../component/LabelList';
48import { Cell } from '../component/Cell';
49import { mathSign, interpolateNumber } from '../util/DataUtils';
50import { getCateCoordinateOfBar, findPositionOfBar, getValueByDataKey, truncateByDomain, getBaseValueOfBar, getTooltipItem } from '../util/ChartUtils';
51import { filterProps, adaptEventsOfChild } from '../util/types';
52import { polarToCartesian } from '../util/PolarUtils'; // TODO: Cause of circular dependency. Needs refactoring of functions that need them.
53// import { AngleAxisProps, RadiusAxisProps } from './types';
54
55export var RadialBar = /*#__PURE__*/function (_PureComponent) {
56 _inherits(RadialBar, _PureComponent);
57
58 var _super = _createSuper(RadialBar);
59
60 function RadialBar() {
61 var _this;
62
63 _classCallCheck(this, RadialBar);
64
65 for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
66 args[_key] = arguments[_key];
67 }
68
69 _this = _super.call.apply(_super, [this].concat(args));
70 _this.state = {
71 isAnimationFinished: false
72 };
73
74 _this.handleAnimationEnd = function () {
75 var onAnimationEnd = _this.props.onAnimationEnd;
76
77 _this.setState({
78 isAnimationFinished: true
79 });
80
81 if (_isFunction(onAnimationEnd)) {
82 onAnimationEnd();
83 }
84 };
85
86 _this.handleAnimationStart = function () {
87 var onAnimationStart = _this.props.onAnimationStart;
88
89 _this.setState({
90 isAnimationFinished: false
91 });
92
93 if (_isFunction(onAnimationStart)) {
94 onAnimationStart();
95 }
96 };
97
98 return _this;
99 }
100
101 _createClass(RadialBar, [{
102 key: "getDeltaAngle",
103 value: function getDeltaAngle() {
104 var _this$props = this.props,
105 startAngle = _this$props.startAngle,
106 endAngle = _this$props.endAngle;
107 var sign = mathSign(endAngle - startAngle);
108 var deltaAngle = Math.min(Math.abs(endAngle - startAngle), 360);
109 return sign * deltaAngle;
110 }
111 }, {
112 key: "renderSectorsStatically",
113 value: function renderSectorsStatically(sectors) {
114 var _this2 = this;
115
116 var _this$props2 = this.props,
117 shape = _this$props2.shape,
118 activeShape = _this$props2.activeShape,
119 activeIndex = _this$props2.activeIndex,
120 cornerRadius = _this$props2.cornerRadius,
121 others = _objectWithoutProperties(_this$props2, ["shape", "activeShape", "activeIndex", "cornerRadius"]);
122
123 var baseProps = filterProps(others);
124 return sectors.map(function (entry, i) {
125 var props = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, baseProps), {}, {
126 cornerRadius: cornerRadius
127 }, entry), adaptEventsOfChild(_this2.props, entry, i)), {}, {
128 key: "sector-".concat(i),
129 className: 'recharts-radial-bar-sector',
130 forceCornerRadius: others.forceCornerRadius,
131 cornerIsExternal: others.cornerIsExternal
132 });
133
134 return RadialBar.renderSectorShape(i === activeIndex ? activeShape : shape, props);
135 });
136 }
137 }, {
138 key: "renderSectorsWithAnimation",
139 value: function renderSectorsWithAnimation() {
140 var _this3 = this;
141
142 var _this$props3 = this.props,
143 data = _this$props3.data,
144 isAnimationActive = _this$props3.isAnimationActive,
145 animationBegin = _this$props3.animationBegin,
146 animationDuration = _this$props3.animationDuration,
147 animationEasing = _this$props3.animationEasing,
148 animationId = _this$props3.animationId;
149 var prevData = this.state.prevData;
150 return /*#__PURE__*/React.createElement(Animate, {
151 begin: animationBegin,
152 duration: animationDuration,
153 isActive: isAnimationActive,
154 easing: animationEasing,
155 from: {
156 t: 0
157 },
158 to: {
159 t: 1
160 },
161 key: "radialBar-".concat(animationId),
162 onAnimationStart: this.handleAnimationStart,
163 onAnimationEnd: this.handleAnimationEnd
164 }, function (_ref) {
165 var t = _ref.t;
166 var stepData = data.map(function (entry, index) {
167 var prev = prevData && prevData[index];
168
169 if (prev) {
170 var interpolatorStartAngle = interpolateNumber(prev.startAngle, entry.startAngle);
171 var interpolatorEndAngle = interpolateNumber(prev.endAngle, entry.endAngle);
172 return _objectSpread(_objectSpread({}, entry), {}, {
173 startAngle: interpolatorStartAngle(t),
174 endAngle: interpolatorEndAngle(t)
175 });
176 }
177
178 var endAngle = entry.endAngle,
179 startAngle = entry.startAngle;
180 var interpolator = interpolateNumber(startAngle, endAngle);
181 return _objectSpread(_objectSpread({}, entry), {}, {
182 endAngle: interpolator(t)
183 });
184 });
185 return /*#__PURE__*/React.createElement(Layer, null, _this3.renderSectorsStatically(stepData));
186 });
187 }
188 }, {
189 key: "renderSectors",
190 value: function renderSectors() {
191 var _this$props4 = this.props,
192 data = _this$props4.data,
193 isAnimationActive = _this$props4.isAnimationActive;
194 var prevData = this.state.prevData;
195
196 if (isAnimationActive && data && data.length && (!prevData || !_isEqual(prevData, data))) {
197 return this.renderSectorsWithAnimation();
198 }
199
200 return this.renderSectorsStatically(data);
201 }
202 }, {
203 key: "renderBackground",
204 value: function renderBackground(sectors) {
205 var _this4 = this;
206
207 var cornerRadius = this.props.cornerRadius;
208 var backgroundProps = filterProps(this.props.background);
209 return sectors.map(function (entry, i) {
210 // eslint-disable-next-line @typescript-eslint/no-unused-vars
211 var value = entry.value,
212 background = entry.background,
213 rest = _objectWithoutProperties(entry, ["value", "background"]);
214
215 if (!background) {
216 return null;
217 }
218
219 var props = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
220 cornerRadius: cornerRadius
221 }, rest), {}, {
222 fill: '#eee'
223 }, background), backgroundProps), adaptEventsOfChild(_this4.props, entry, i)), {}, {
224 index: i,
225 key: "sector-".concat(i),
226 className: 'recharts-radial-bar-background-sector'
227 });
228
229 return RadialBar.renderSectorShape(background, props);
230 });
231 }
232 }, {
233 key: "render",
234 value: function render() {
235 var _this$props5 = this.props,
236 hide = _this$props5.hide,
237 data = _this$props5.data,
238 className = _this$props5.className,
239 background = _this$props5.background,
240 isAnimationActive = _this$props5.isAnimationActive;
241
242 if (hide || !data || !data.length) {
243 return null;
244 }
245
246 var isAnimationFinished = this.state.isAnimationFinished;
247 var layerClass = classNames('recharts-area', className);
248 return /*#__PURE__*/React.createElement(Layer, {
249 className: layerClass
250 }, background && /*#__PURE__*/React.createElement(Layer, {
251 className: "recharts-radial-bar-background"
252 }, this.renderBackground(data)), /*#__PURE__*/React.createElement(Layer, {
253 className: "recharts-radial-bar-sectors"
254 }, this.renderSectors()), (!isAnimationActive || isAnimationFinished) && LabelList.renderCallByParent(_objectSpread(_objectSpread({}, this.props), {}, {
255 clockWise: this.getDeltaAngle() < 0
256 }), data));
257 }
258 }], [{
259 key: "getDerivedStateFromProps",
260 value: function getDerivedStateFromProps(nextProps, prevState) {
261 if (nextProps.animationId !== prevState.prevAnimationId) {
262 return {
263 prevAnimationId: nextProps.animationId,
264 curData: nextProps.data,
265 prevData: prevState.curData
266 };
267 }
268
269 if (nextProps.data !== prevState.curData) {
270 return {
271 curData: nextProps.data
272 };
273 }
274
275 return null;
276 }
277 }, {
278 key: "renderSectorShape",
279 value: function renderSectorShape(shape, props) {
280 var sectorShape;
281
282 if ( /*#__PURE__*/React.isValidElement(shape)) {
283 sectorShape = /*#__PURE__*/React.cloneElement(shape, props);
284 } else if (_isFunction(shape)) {
285 sectorShape = shape(props);
286 } else {
287 sectorShape = /*#__PURE__*/React.createElement(Sector, props);
288 }
289
290 return sectorShape;
291 }
292 }]);
293
294 return RadialBar;
295}(PureComponent);
296RadialBar.displayName = 'RadialBar';
297RadialBar.defaultProps = {
298 angleAxisId: 0,
299 radiusAxisId: 0,
300 minPointSize: 0,
301 hide: false,
302 legendType: 'rect',
303 data: [],
304 isAnimationActive: !Global.isSsr,
305 animationBegin: 0,
306 animationDuration: 1500,
307 animationEasing: 'ease',
308 forceCornerRadius: false,
309 cornerIsExternal: false
310};
311
312RadialBar.getComposedData = function (_ref2) {
313 var item = _ref2.item,
314 props = _ref2.props,
315 radiusAxis = _ref2.radiusAxis,
316 radiusAxisTicks = _ref2.radiusAxisTicks,
317 angleAxis = _ref2.angleAxis,
318 angleAxisTicks = _ref2.angleAxisTicks,
319 displayedData = _ref2.displayedData,
320 dataKey = _ref2.dataKey,
321 stackedData = _ref2.stackedData,
322 barPosition = _ref2.barPosition,
323 bandSize = _ref2.bandSize,
324 dataStartIndex = _ref2.dataStartIndex;
325 var pos = findPositionOfBar(barPosition, item);
326
327 if (!pos) {
328 return null;
329 }
330
331 var cx = angleAxis.cx,
332 cy = angleAxis.cy;
333 var layout = props.layout;
334 var _item$props = item.props,
335 children = _item$props.children,
336 minPointSize = _item$props.minPointSize;
337 var numericAxis = layout === 'radial' ? angleAxis : radiusAxis;
338 var stackedDomain = stackedData ? numericAxis.scale.domain() : null;
339 var baseValue = getBaseValueOfBar({
340 numericAxis: numericAxis
341 });
342 var cells = findAllByType(children, Cell.displayName);
343 var sectors = displayedData.map(function (entry, index) {
344 var value, innerRadius, outerRadius, startAngle, endAngle, backgroundSector;
345
346 if (stackedData) {
347 value = truncateByDomain(stackedData[dataStartIndex + index], stackedDomain);
348 } else {
349 value = getValueByDataKey(entry, dataKey);
350
351 if (!_isArray(value)) {
352 value = [baseValue, value];
353 }
354 }
355
356 if (layout === 'radial') {
357 innerRadius = getCateCoordinateOfBar({
358 axis: radiusAxis,
359 ticks: radiusAxisTicks,
360 bandSize: bandSize,
361 offset: pos.offset,
362 entry: entry,
363 index: index
364 });
365 endAngle = angleAxis.scale(value[1]);
366 startAngle = angleAxis.scale(value[0]);
367 outerRadius = innerRadius + pos.size;
368 var deltaAngle = endAngle - startAngle;
369
370 if (Math.abs(minPointSize) > 0 && Math.abs(deltaAngle) < Math.abs(minPointSize)) {
371 var delta = mathSign(deltaAngle || minPointSize) * (Math.abs(minPointSize) - Math.abs(deltaAngle));
372 endAngle += delta;
373 }
374
375 backgroundSector = {
376 background: {
377 cx: cx,
378 cy: cy,
379 innerRadius: innerRadius,
380 outerRadius: outerRadius,
381 startAngle: props.startAngle,
382 endAngle: props.endAngle
383 }
384 };
385 } else {
386 innerRadius = radiusAxis.scale(value[0]);
387 outerRadius = radiusAxis.scale(value[1]);
388 startAngle = getCateCoordinateOfBar({
389 axis: angleAxis,
390 ticks: angleAxisTicks,
391 bandSize: bandSize,
392 offset: pos.offset,
393 entry: entry,
394 index: index
395 });
396 endAngle = startAngle + pos.size;
397 var deltaRadius = outerRadius - innerRadius;
398
399 if (Math.abs(minPointSize) > 0 && Math.abs(deltaRadius) < Math.abs(minPointSize)) {
400 var _delta = mathSign(deltaRadius || minPointSize) * (Math.abs(minPointSize) - Math.abs(deltaRadius));
401
402 outerRadius += _delta;
403 }
404 }
405
406 return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, entry), backgroundSector), {}, {
407 payload: entry,
408 value: stackedData ? value : value[1],
409 cx: cx,
410 cy: cy,
411 innerRadius: innerRadius,
412 outerRadius: outerRadius,
413 startAngle: startAngle,
414 endAngle: endAngle
415 }, cells && cells[index] && cells[index].props), {}, {
416 tooltipPayload: [getTooltipItem(item, entry)],
417 tooltipPosition: polarToCartesian(cx, cy, (innerRadius + outerRadius) / 2, (startAngle + endAngle) / 2)
418 });
419 });
420 return {
421 data: sectors,
422 layout: layout
423 };
424};
\No newline at end of file