source: node_modules/recharts/es6/polar/RadialBar.js

Last change on this file was a762898, checked in by istevanoska <ilinastevanoska@…>, 5 months ago

Added visualizations
  • Property mode set to 100644
File size: 19.4 KB
Line 
1var _excluded = ["shape", "activeShape", "cornerRadius", "id"],
2 _excluded2 = ["onMouseEnter", "onClick", "onMouseLeave"],
3 _excluded3 = ["value", "background"];
4function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
5function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
6function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
7function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
8function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
9function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
10function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
11function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
12import * as React from 'react';
13import { PureComponent, useCallback, useRef, useState } from 'react';
14import { clsx } from 'clsx';
15import { parseCornerRadius, RadialBarSector } from '../util/RadialBarUtils';
16import { Layer } from '../container/Layer';
17import { findAllByType } from '../util/ReactUtils';
18import { LabelListFromLabelProp, PolarLabelListContextProvider } from '../component/LabelList';
19import { Cell } from '../component/Cell';
20import { interpolate, mathSign, noop } from '../util/DataUtils';
21import { getCateCoordinateOfBar, getNormalizedStackId, getTooltipNameProp, getValueByDataKey, truncateByDomain } from '../util/ChartUtils';
22import { adaptEventsOfChild } from '../util/types';
23import { useMouseClickItemDispatch, useMouseEnterItemDispatch, useMouseLeaveItemDispatch } from '../context/tooltipContext';
24import { SetTooltipEntrySettings } from '../state/SetTooltipEntrySettings';
25import { selectRadialBarLegendPayload, selectRadialBarSectors } from '../state/selectors/radialBarSelectors';
26import { useAppSelector } from '../state/hooks';
27import { selectActiveTooltipIndex } from '../state/selectors/tooltipSelectors';
28import { SetPolarLegendPayload } from '../state/SetLegendPayload';
29import { useAnimationId } from '../util/useAnimationId';
30import { RegisterGraphicalItemId } from '../context/RegisterGraphicalItemId';
31import { SetPolarGraphicalItem } from '../state/SetGraphicalItem';
32import { svgPropertiesNoEvents, svgPropertiesNoEventsFromUnknown } from '../util/svgPropertiesNoEvents';
33import { JavascriptAnimate } from '../animation/JavascriptAnimate';
34import { resolveDefaultProps } from '../util/resolveDefaultProps';
35import { ZIndexLayer } from '../zIndex/ZIndexLayer';
36import { DefaultZIndexes } from '../zIndex/DefaultZIndexes';
37import { getZIndexFromUnknown } from '../zIndex/getZIndexFromUnknown';
38var STABLE_EMPTY_ARRAY = [];
39function RadialBarLabelListProvider(_ref) {
40 var {
41 showLabels,
42 sectors,
43 children
44 } = _ref;
45 var labelListEntries = sectors.map(sector => ({
46 value: sector.value,
47 payload: sector.payload,
48 parentViewBox: undefined,
49 clockWise: false,
50 viewBox: {
51 cx: sector.cx,
52 cy: sector.cy,
53 innerRadius: sector.innerRadius,
54 outerRadius: sector.outerRadius,
55 startAngle: sector.startAngle,
56 endAngle: sector.endAngle,
57 clockWise: false
58 },
59 fill: sector.fill
60 }));
61 return /*#__PURE__*/React.createElement(PolarLabelListContextProvider, {
62 value: showLabels ? labelListEntries : undefined
63 }, children);
64}
65function RadialBarSectors(_ref2) {
66 var {
67 sectors,
68 allOtherRadialBarProps,
69 showLabels
70 } = _ref2;
71 var {
72 shape,
73 activeShape,
74 cornerRadius,
75 id
76 } = allOtherRadialBarProps,
77 others = _objectWithoutProperties(allOtherRadialBarProps, _excluded);
78 var baseProps = svgPropertiesNoEvents(others);
79 var activeIndex = useAppSelector(selectActiveTooltipIndex);
80 var {
81 onMouseEnter: onMouseEnterFromProps,
82 onClick: onItemClickFromProps,
83 onMouseLeave: onMouseLeaveFromProps
84 } = allOtherRadialBarProps,
85 restOfAllOtherProps = _objectWithoutProperties(allOtherRadialBarProps, _excluded2);
86 var onMouseEnterFromContext = useMouseEnterItemDispatch(onMouseEnterFromProps, allOtherRadialBarProps.dataKey, id);
87 var onMouseLeaveFromContext = useMouseLeaveItemDispatch(onMouseLeaveFromProps);
88 var onClickFromContext = useMouseClickItemDispatch(onItemClickFromProps, allOtherRadialBarProps.dataKey, id);
89 if (sectors == null) {
90 return null;
91 }
92 return /*#__PURE__*/React.createElement(RadialBarLabelListProvider, {
93 showLabels: showLabels,
94 sectors: sectors
95 }, sectors.map((entry, i) => {
96 var isActive = activeShape && activeIndex === String(i);
97 // @ts-expect-error the types need a bit of attention
98 var onMouseEnter = onMouseEnterFromContext(entry, i);
99 // @ts-expect-error the types need a bit of attention
100 var onMouseLeave = onMouseLeaveFromContext(entry, i);
101 // @ts-expect-error the types need a bit of attention
102 var onClick = onClickFromContext(entry, i);
103 var radialBarSectorProps = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, baseProps), {}, {
104 cornerRadius: parseCornerRadius(cornerRadius)
105 }, entry), adaptEventsOfChild(restOfAllOtherProps, entry, i)), {}, {
106 onMouseEnter,
107 onMouseLeave,
108 onClick,
109 className: "recharts-radial-bar-sector ".concat(entry.className),
110 forceCornerRadius: others.forceCornerRadius,
111 cornerIsExternal: others.cornerIsExternal,
112 isActive,
113 option: isActive ? activeShape : shape
114 });
115 if (isActive) {
116 return /*#__PURE__*/React.createElement(ZIndexLayer, {
117 zIndex: DefaultZIndexes.activeBar,
118 key: "sector-".concat(entry.cx, "-").concat(entry.cy, "-").concat(entry.innerRadius, "-").concat(entry.outerRadius, "-").concat(entry.startAngle, "-").concat(entry.endAngle, "-").concat(i)
119 }, /*#__PURE__*/React.createElement(RadialBarSector, radialBarSectorProps));
120 }
121 return /*#__PURE__*/React.createElement(RadialBarSector, _extends({
122 key: "sector-".concat(entry.cx, "-").concat(entry.cy, "-").concat(entry.innerRadius, "-").concat(entry.outerRadius, "-").concat(entry.startAngle, "-").concat(entry.endAngle, "-").concat(i)
123 }, radialBarSectorProps));
124 }), /*#__PURE__*/React.createElement(LabelListFromLabelProp, {
125 label: allOtherRadialBarProps.label
126 }), allOtherRadialBarProps.children);
127}
128function SectorsWithAnimation(_ref3) {
129 var {
130 props,
131 previousSectorsRef
132 } = _ref3;
133 var {
134 sectors,
135 isAnimationActive,
136 animationBegin,
137 animationDuration,
138 animationEasing,
139 onAnimationEnd,
140 onAnimationStart
141 } = props;
142 var animationId = useAnimationId(props, 'recharts-radialbar-');
143 var prevData = previousSectorsRef.current;
144 var [isAnimating, setIsAnimating] = useState(false);
145 var handleAnimationEnd = useCallback(() => {
146 if (typeof onAnimationEnd === 'function') {
147 onAnimationEnd();
148 }
149 setIsAnimating(false);
150 }, [onAnimationEnd]);
151 var handleAnimationStart = useCallback(() => {
152 if (typeof onAnimationStart === 'function') {
153 onAnimationStart();
154 }
155 setIsAnimating(true);
156 }, [onAnimationStart]);
157 return /*#__PURE__*/React.createElement(JavascriptAnimate, {
158 animationId: animationId,
159 begin: animationBegin,
160 duration: animationDuration,
161 isActive: isAnimationActive,
162 easing: animationEasing,
163 onAnimationStart: handleAnimationStart,
164 onAnimationEnd: handleAnimationEnd,
165 key: animationId
166 }, t => {
167 var stepData = t === 1 ? sectors : (sectors !== null && sectors !== void 0 ? sectors : STABLE_EMPTY_ARRAY).map((entry, index) => {
168 var prev = prevData && prevData[index];
169 if (prev) {
170 return _objectSpread(_objectSpread({}, entry), {}, {
171 startAngle: interpolate(prev.startAngle, entry.startAngle, t),
172 endAngle: interpolate(prev.endAngle, entry.endAngle, t)
173 });
174 }
175 var {
176 endAngle,
177 startAngle
178 } = entry;
179 return _objectSpread(_objectSpread({}, entry), {}, {
180 endAngle: interpolate(startAngle, endAngle, t)
181 });
182 });
183 if (t > 0) {
184 // eslint-disable-next-line no-param-reassign
185 previousSectorsRef.current = stepData !== null && stepData !== void 0 ? stepData : null;
186 }
187 return /*#__PURE__*/React.createElement(Layer, null, /*#__PURE__*/React.createElement(RadialBarSectors, {
188 sectors: stepData !== null && stepData !== void 0 ? stepData : STABLE_EMPTY_ARRAY,
189 allOtherRadialBarProps: props,
190 showLabels: !isAnimating
191 }));
192 });
193}
194function RenderSectors(props) {
195 var previousSectorsRef = useRef(null);
196 return /*#__PURE__*/React.createElement(SectorsWithAnimation, {
197 props: props,
198 previousSectorsRef: previousSectorsRef
199 });
200}
201function SetRadialBarPayloadLegend(props) {
202 var legendPayload = useAppSelector(state => selectRadialBarLegendPayload(state, props.legendType));
203 return /*#__PURE__*/React.createElement(SetPolarLegendPayload, {
204 legendPayload: legendPayload !== null && legendPayload !== void 0 ? legendPayload : []
205 });
206}
207var SetRadialBarTooltipEntrySettings = /*#__PURE__*/React.memo(_ref4 => {
208 var {
209 dataKey,
210 sectors,
211 stroke,
212 strokeWidth,
213 name,
214 hide,
215 fill,
216 tooltipType,
217 id
218 } = _ref4;
219 var tooltipEntrySettings = {
220 dataDefinedOnItem: sectors,
221 getPosition: noop,
222 settings: {
223 graphicalItemId: id,
224 stroke,
225 strokeWidth,
226 fill,
227 nameKey: undefined,
228 // RadialBar does not have nameKey, why?
229 dataKey,
230 name: getTooltipNameProp(name, dataKey),
231 hide,
232 type: tooltipType,
233 color: fill,
234 unit: '' // Why does RadialBar not support unit?
235 }
236 };
237 return /*#__PURE__*/React.createElement(SetTooltipEntrySettings, {
238 tooltipEntrySettings: tooltipEntrySettings
239 });
240});
241class RadialBarWithState extends PureComponent {
242 renderBackground(sectors) {
243 if (sectors == null) {
244 return null;
245 }
246 var {
247 cornerRadius
248 } = this.props;
249 var backgroundProps = svgPropertiesNoEventsFromUnknown(this.props.background);
250 return /*#__PURE__*/React.createElement(ZIndexLayer, {
251 zIndex: getZIndexFromUnknown(this.props.background, DefaultZIndexes.barBackground)
252 }, sectors.map((entry, i) => {
253 var {
254 value,
255 background
256 } = entry,
257 rest = _objectWithoutProperties(entry, _excluded3);
258 if (!background) {
259 return null;
260 }
261 var props = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
262 cornerRadius: parseCornerRadius(cornerRadius)
263 }, rest), {}, {
264 // @ts-expect-error backgroundProps is contributing unknown props
265 fill: '#eee'
266 }, background), backgroundProps), adaptEventsOfChild(this.props, entry, i)), {}, {
267 index: i,
268 className: clsx('recharts-radial-bar-background-sector', String(backgroundProps === null || backgroundProps === void 0 ? void 0 : backgroundProps.className)),
269 option: background,
270 isActive: false
271 });
272 return /*#__PURE__*/React.createElement(RadialBarSector, _extends({
273 key: "background-".concat(rest.cx, "-").concat(rest.cy, "-").concat(rest.innerRadius, "-").concat(rest.outerRadius, "-").concat(rest.startAngle, "-").concat(rest.endAngle, "-").concat(i)
274 }, props));
275 }));
276 }
277 render() {
278 var {
279 hide,
280 sectors,
281 className,
282 background
283 } = this.props;
284 if (hide) {
285 return null;
286 }
287 var layerClass = clsx('recharts-area', className);
288 return /*#__PURE__*/React.createElement(ZIndexLayer, {
289 zIndex: this.props.zIndex
290 }, /*#__PURE__*/React.createElement(Layer, {
291 className: layerClass
292 }, background && /*#__PURE__*/React.createElement(Layer, {
293 className: "recharts-radial-bar-background"
294 }, this.renderBackground(sectors)), /*#__PURE__*/React.createElement(Layer, {
295 className: "recharts-radial-bar-sectors"
296 }, /*#__PURE__*/React.createElement(RenderSectors, this.props))));
297 }
298}
299function RadialBarImpl(props) {
300 var _useAppSelector;
301 var cells = findAllByType(props.children, Cell);
302 var radialBarSettings = {
303 data: undefined,
304 hide: false,
305 id: props.id,
306 dataKey: props.dataKey,
307 minPointSize: props.minPointSize,
308 stackId: getNormalizedStackId(props.stackId),
309 maxBarSize: props.maxBarSize,
310 barSize: props.barSize,
311 type: 'radialBar',
312 angleAxisId: props.angleAxisId,
313 radiusAxisId: props.radiusAxisId
314 };
315 var sectors = (_useAppSelector = useAppSelector(state => selectRadialBarSectors(state, props.radiusAxisId, props.angleAxisId, radialBarSettings, cells))) !== null && _useAppSelector !== void 0 ? _useAppSelector : STABLE_EMPTY_ARRAY;
316 return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SetRadialBarTooltipEntrySettings, {
317 dataKey: props.dataKey,
318 sectors: sectors,
319 stroke: props.stroke,
320 strokeWidth: props.strokeWidth,
321 name: props.name,
322 hide: props.hide,
323 fill: props.fill,
324 tooltipType: props.tooltipType,
325 id: props.id
326 }), /*#__PURE__*/React.createElement(RadialBarWithState, _extends({}, props, {
327 sectors: sectors
328 })));
329}
330export var defaultRadialBarProps = {
331 angleAxisId: 0,
332 animationBegin: 0,
333 animationDuration: 1500,
334 animationEasing: 'ease',
335 background: false,
336 cornerIsExternal: false,
337 cornerRadius: 0,
338 forceCornerRadius: false,
339 hide: false,
340 isAnimationActive: 'auto',
341 label: false,
342 legendType: 'rect',
343 minPointSize: 0,
344 radiusAxisId: 0,
345 zIndex: DefaultZIndexes.bar
346};
347export function computeRadialBarDataItems(_ref5) {
348 var {
349 displayedData,
350 stackedData,
351 dataStartIndex,
352 stackedDomain,
353 dataKey,
354 baseValue,
355 layout,
356 radiusAxis,
357 radiusAxisTicks,
358 bandSize,
359 pos,
360 angleAxis,
361 minPointSize,
362 cx,
363 cy,
364 angleAxisTicks,
365 cells,
366 startAngle: rootStartAngle,
367 endAngle: rootEndAngle
368 } = _ref5;
369 if (angleAxisTicks == null || radiusAxisTicks == null) {
370 return STABLE_EMPTY_ARRAY;
371 }
372 return (displayedData !== null && displayedData !== void 0 ? displayedData : []).map((entry, index) => {
373 var value, innerRadius, outerRadius, startAngle, endAngle, backgroundSector;
374 if (stackedData) {
375 // @ts-expect-error truncateByDomain expects only numerical domain, but it can received categorical domain too
376 value = truncateByDomain(stackedData[dataStartIndex + index], stackedDomain);
377 } else {
378 value = getValueByDataKey(entry, dataKey);
379 if (!Array.isArray(value)) {
380 value = [baseValue, value];
381 }
382 }
383 if (layout === 'radial') {
384 var _angleAxis$scale$map, _angleAxis$scale$map2;
385 startAngle = (_angleAxis$scale$map = angleAxis.scale.map(value[0])) !== null && _angleAxis$scale$map !== void 0 ? _angleAxis$scale$map : rootStartAngle;
386 endAngle = (_angleAxis$scale$map2 = angleAxis.scale.map(value[1])) !== null && _angleAxis$scale$map2 !== void 0 ? _angleAxis$scale$map2 : rootEndAngle;
387 innerRadius = getCateCoordinateOfBar({
388 axis: radiusAxis,
389 ticks: radiusAxisTicks,
390 bandSize,
391 offset: pos.offset,
392 entry,
393 index
394 });
395 if (innerRadius != null && endAngle != null && startAngle != null) {
396 outerRadius = innerRadius + pos.size;
397 var deltaAngle = endAngle - startAngle;
398 if (Math.abs(minPointSize) > 0 && Math.abs(deltaAngle) < Math.abs(minPointSize)) {
399 var delta = mathSign(deltaAngle || minPointSize) * (Math.abs(minPointSize) - Math.abs(deltaAngle));
400 endAngle += delta;
401 }
402 backgroundSector = {
403 background: {
404 cx,
405 cy,
406 innerRadius,
407 outerRadius,
408 startAngle: rootStartAngle,
409 endAngle: rootEndAngle
410 }
411 };
412 }
413 } else {
414 innerRadius = radiusAxis.scale.map(value[0]);
415 outerRadius = radiusAxis.scale.map(value[1]);
416 startAngle = getCateCoordinateOfBar({
417 axis: angleAxis,
418 ticks: angleAxisTicks,
419 bandSize,
420 offset: pos.offset,
421 entry,
422 index
423 });
424 if (innerRadius != null && outerRadius != null && startAngle != null) {
425 endAngle = startAngle + pos.size;
426 var deltaRadius = outerRadius - innerRadius;
427 if (Math.abs(minPointSize) > 0 && Math.abs(deltaRadius) < Math.abs(minPointSize)) {
428 var _delta = mathSign(deltaRadius || minPointSize) * (Math.abs(minPointSize) - Math.abs(deltaRadius));
429 outerRadius += _delta;
430 }
431 }
432 }
433 return _objectSpread(_objectSpread(_objectSpread({}, entry), backgroundSector), {}, {
434 payload: entry,
435 value: stackedData ? value : value[1],
436 cx,
437 cy,
438 innerRadius,
439 outerRadius,
440 startAngle,
441 // @ts-expect-error endAngle is used before assigned (?)
442 endAngle
443 }, cells && cells[index] && cells[index].props);
444 });
445}
446
447/**
448 * @consumes PolarChartContext
449 * @provides LabelListContext
450 * @provides CellReader
451 */
452export function RadialBar(outsideProps) {
453 var props = resolveDefaultProps(outsideProps, defaultRadialBarProps);
454 return /*#__PURE__*/React.createElement(RegisterGraphicalItemId, {
455 id: props.id,
456 type: "radialBar"
457 }, id => {
458 var _props$hide, _props$angleAxisId, _props$radiusAxisId;
459 return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SetPolarGraphicalItem, {
460 type: "radialBar",
461 id: id,
462 data: undefined // why does RadialBar not allow data defined on the item?
463 ,
464 dataKey: props.dataKey,
465 hide: (_props$hide = props.hide) !== null && _props$hide !== void 0 ? _props$hide : defaultRadialBarProps.hide,
466 angleAxisId: (_props$angleAxisId = props.angleAxisId) !== null && _props$angleAxisId !== void 0 ? _props$angleAxisId : defaultRadialBarProps.angleAxisId,
467 radiusAxisId: (_props$radiusAxisId = props.radiusAxisId) !== null && _props$radiusAxisId !== void 0 ? _props$radiusAxisId : defaultRadialBarProps.radiusAxisId,
468 stackId: getNormalizedStackId(props.stackId),
469 barSize: props.barSize,
470 minPointSize: props.minPointSize,
471 maxBarSize: props.maxBarSize
472 }), /*#__PURE__*/React.createElement(SetRadialBarPayloadLegend, props), /*#__PURE__*/React.createElement(RadialBarImpl, _extends({}, props, {
473 id: id
474 })));
475 });
476}
477RadialBar.displayName = 'RadialBar';
Note: See TracBrowser for help on using the repository browser.