source: node_modules/recharts/lib/polar/Radar.js@ a762898

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

Added visualizations
  • Property mode set to 100644
File size: 17.5 KB
Line 
1"use strict";
2
3Object.defineProperty(exports, "__esModule", {
4 value: true
5});
6exports.Radar = Radar;
7exports.computeRadarPoints = computeRadarPoints;
8exports.defaultRadarProps = void 0;
9var _react = _interopRequireWildcard(require("react"));
10var React = _react;
11var _last = _interopRequireDefault(require("es-toolkit/compat/last"));
12var _clsx = require("clsx");
13var _DataUtils = require("../util/DataUtils");
14var _PolarUtils = require("../util/PolarUtils");
15var _ChartUtils = require("../util/ChartUtils");
16var _Polygon = require("../shape/Polygon");
17var _Layer = require("../container/Layer");
18var _LabelList = require("../component/LabelList");
19var _Dots = require("../component/Dots");
20var _ActivePoints = require("../component/ActivePoints");
21var _SetTooltipEntrySettings = require("../state/SetTooltipEntrySettings");
22var _radarSelectors = require("../state/selectors/radarSelectors");
23var _hooks = require("../state/hooks");
24var _PanoramaContext = require("../context/PanoramaContext");
25var _SetLegendPayload = require("../state/SetLegendPayload");
26var _useAnimationId = require("../util/useAnimationId");
27var _RegisterGraphicalItemId = require("../context/RegisterGraphicalItemId");
28var _SetGraphicalItem = require("../state/SetGraphicalItem");
29var _svgPropertiesNoEvents = require("../util/svgPropertiesNoEvents");
30var _JavascriptAnimate = require("../animation/JavascriptAnimate");
31var _svgPropertiesAndEvents = require("../util/svgPropertiesAndEvents");
32var _resolveDefaultProps = require("../util/resolveDefaultProps");
33var _ZIndexLayer = require("../zIndex/ZIndexLayer");
34var _DefaultZIndexes = require("../zIndex/DefaultZIndexes");
35var _excluded = ["id"];
36function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
37function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
38function _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); }
39function 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; }
40function _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; }
41function _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; }
42function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
43function _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); }
44function _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; }
45function _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; }
46function getLegendItemColor(stroke, fill) {
47 return stroke && stroke !== 'none' ? stroke : fill;
48}
49var computeLegendPayloadFromRadarSectors = props => {
50 var {
51 dataKey,
52 name,
53 stroke,
54 fill,
55 legendType,
56 hide
57 } = props;
58 return [{
59 inactive: hide,
60 dataKey,
61 type: legendType,
62 color: getLegendItemColor(stroke, fill),
63 value: (0, _ChartUtils.getTooltipNameProp)(name, dataKey),
64 payload: props
65 }];
66};
67var SetRadarTooltipEntrySettings = /*#__PURE__*/React.memo(_ref => {
68 var {
69 dataKey,
70 stroke,
71 strokeWidth,
72 fill,
73 name,
74 hide,
75 tooltipType,
76 id
77 } = _ref;
78 var tooltipEntrySettings = {
79 /*
80 * I suppose this here _could_ return props.points
81 * because while Radar does not support item tooltip mode, it _could_ support it.
82 * But when I actually do return the points here, a defaultIndex test starts failing.
83 * So, undefined it is.
84 */
85 dataDefinedOnItem: undefined,
86 getPosition: _DataUtils.noop,
87 settings: {
88 stroke,
89 strokeWidth,
90 fill,
91 nameKey: undefined,
92 // RadarChart does not have nameKey unfortunately
93 dataKey,
94 name: (0, _ChartUtils.getTooltipNameProp)(name, dataKey),
95 hide,
96 type: tooltipType,
97 color: getLegendItemColor(stroke, fill),
98 unit: '',
99 // why doesn't Radar support unit?
100 graphicalItemId: id
101 }
102 };
103 return /*#__PURE__*/React.createElement(_SetTooltipEntrySettings.SetTooltipEntrySettings, {
104 tooltipEntrySettings: tooltipEntrySettings
105 });
106});
107function RadarDotsWrapper(_ref2) {
108 var {
109 points,
110 props
111 } = _ref2;
112 var {
113 dot,
114 dataKey
115 } = props;
116 var {
117 id
118 } = props,
119 propsWithoutId = _objectWithoutProperties(props, _excluded);
120 var baseProps = (0, _svgPropertiesNoEvents.svgPropertiesNoEvents)(propsWithoutId);
121 return /*#__PURE__*/React.createElement(_Dots.Dots, {
122 points: points,
123 dot: dot,
124 className: "recharts-radar-dots",
125 dotClassName: "recharts-radar-dot",
126 dataKey: dataKey,
127 baseProps: baseProps
128 });
129}
130function computeRadarPoints(_ref3) {
131 var {
132 radiusAxis,
133 angleAxis,
134 displayedData,
135 dataKey,
136 bandSize
137 } = _ref3;
138 var {
139 cx,
140 cy
141 } = angleAxis;
142 var isRange = false;
143 var points = [];
144 var angleBandSize = angleAxis.type !== 'number' ? bandSize !== null && bandSize !== void 0 ? bandSize : 0 : 0;
145 displayedData.forEach((entry, i) => {
146 var _angleAxis$scale$map, _radiusAxis$scale$map;
147 var name = (0, _ChartUtils.getValueByDataKey)(entry, angleAxis.dataKey, i);
148 var value = (0, _ChartUtils.getValueByDataKey)(entry, dataKey);
149 var angle = ((_angleAxis$scale$map = angleAxis.scale.map(name)) !== null && _angleAxis$scale$map !== void 0 ? _angleAxis$scale$map : 0) + angleBandSize;
150 var pointValue = Array.isArray(value) ? (0, _last.default)(value) : value;
151 var radius = (0, _DataUtils.isNullish)(pointValue) ? 0 : (_radiusAxis$scale$map = radiusAxis.scale.map(pointValue)) !== null && _radiusAxis$scale$map !== void 0 ? _radiusAxis$scale$map : 0;
152 if (Array.isArray(value) && value.length >= 2) {
153 isRange = true;
154 }
155 points.push(_objectSpread(_objectSpread({}, (0, _PolarUtils.polarToCartesian)(cx, cy, radius, angle)), {}, {
156 // @ts-expect-error getValueByDataKey does not validate the output type
157 name,
158 // @ts-expect-error getValueByDataKey does not validate the output type
159 value,
160 cx,
161 cy,
162 radius,
163 angle,
164 payload: entry
165 }));
166 });
167 var baseLinePoints = [];
168 if (isRange) {
169 points.forEach(point => {
170 if (Array.isArray(point.value)) {
171 var _radiusAxis$scale$map2;
172 var baseValue = point.value[0];
173 var radius = (0, _DataUtils.isNullish)(baseValue) ? 0 : (_radiusAxis$scale$map2 = radiusAxis.scale.map(baseValue)) !== null && _radiusAxis$scale$map2 !== void 0 ? _radiusAxis$scale$map2 : 0;
174 baseLinePoints.push(_objectSpread(_objectSpread({}, point), {}, {
175 radius
176 }, (0, _PolarUtils.polarToCartesian)(cx, cy, radius, point.angle)));
177 } else {
178 baseLinePoints.push(point);
179 }
180 });
181 }
182 return {
183 points,
184 isRange,
185 baseLinePoints
186 };
187}
188function RadarLabelListProvider(_ref4) {
189 var {
190 showLabels,
191 points,
192 children
193 } = _ref4;
194 /*
195 * Radar provides a Cartesian label list context. Do we want to also provide a polar label list context?
196 * That way, users can choose to use polar positions for the Radar labels.
197 */
198 // const labelListEntries: ReadonlyArray<PolarLabelListEntry> = points.map(
199 // (point): PolarLabelListEntry => ({
200 // value: point.value,
201 // payload: point.payload,
202 // parentViewBox: undefined,
203 // clockWise: false,
204 // viewBox: {
205 // cx: point.cx,
206 // cy: point.cy,
207 // innerRadius: point.radius,
208 // outerRadius: point.radius,
209 // startAngle: point.angle,
210 // endAngle: point.angle,
211 // clockWise: false,
212 // },
213 // }),
214 // );
215
216 var labelListEntries = points.map(point => {
217 var _point$value;
218 var viewBox = {
219 x: point.x,
220 y: point.y,
221 width: 0,
222 lowerWidth: 0,
223 upperWidth: 0,
224 height: 0
225 };
226 return _objectSpread(_objectSpread({}, viewBox), {}, {
227 value: (_point$value = point.value) !== null && _point$value !== void 0 ? _point$value : '',
228 payload: point.payload,
229 parentViewBox: undefined,
230 viewBox,
231 fill: undefined
232 });
233 });
234 return /*#__PURE__*/React.createElement(_LabelList.CartesianLabelListContextProvider, {
235 value: showLabels ? labelListEntries : undefined
236 }, children);
237}
238function StaticPolygon(_ref5) {
239 var {
240 points,
241 baseLinePoints,
242 props
243 } = _ref5;
244 if (points == null) {
245 return null;
246 }
247 var {
248 shape,
249 isRange,
250 connectNulls
251 } = props;
252 var handleMouseEnter = e => {
253 var {
254 onMouseEnter
255 } = props;
256 if (onMouseEnter) {
257 onMouseEnter(props, e);
258 }
259 };
260 var handleMouseLeave = e => {
261 var {
262 onMouseLeave
263 } = props;
264 if (onMouseLeave) {
265 onMouseLeave(props, e);
266 }
267 };
268 var radar;
269 if (/*#__PURE__*/React.isValidElement(shape)) {
270 radar = /*#__PURE__*/React.cloneElement(shape, _objectSpread(_objectSpread({}, props), {}, {
271 points
272 }));
273 } else if (typeof shape === 'function') {
274 radar = shape(_objectSpread(_objectSpread({}, props), {}, {
275 points
276 }));
277 } else {
278 radar = /*#__PURE__*/React.createElement(_Polygon.Polygon, _extends({}, (0, _svgPropertiesAndEvents.svgPropertiesAndEvents)(props), {
279 onMouseEnter: handleMouseEnter,
280 onMouseLeave: handleMouseLeave,
281 points: points,
282 baseLinePoints: isRange ? baseLinePoints : undefined,
283 connectNulls: connectNulls
284 }));
285 }
286 return /*#__PURE__*/React.createElement(_Layer.Layer, {
287 className: "recharts-radar-polygon"
288 }, radar, /*#__PURE__*/React.createElement(RadarDotsWrapper, {
289 props: props,
290 points: points
291 }));
292}
293var interpolatePolarPoint = (prevPoints, prevPointsDiffFactor, t) => (entry, index) => {
294 var prev = prevPoints && prevPoints[Math.floor(index * prevPointsDiffFactor)];
295 if (prev) {
296 return _objectSpread(_objectSpread({}, entry), {}, {
297 x: (0, _DataUtils.interpolate)(prev.x, entry.x, t),
298 y: (0, _DataUtils.interpolate)(prev.y, entry.y, t)
299 });
300 }
301 return _objectSpread(_objectSpread({}, entry), {}, {
302 x: (0, _DataUtils.interpolate)(entry.cx, entry.x, t),
303 y: (0, _DataUtils.interpolate)(entry.cy, entry.y, t)
304 });
305};
306function PolygonWithAnimation(_ref6) {
307 var {
308 props,
309 previousPointsRef,
310 previousBaseLinePointsRef
311 } = _ref6;
312 var {
313 points,
314 baseLinePoints,
315 isAnimationActive,
316 animationBegin,
317 animationDuration,
318 animationEasing,
319 onAnimationEnd,
320 onAnimationStart
321 } = props;
322 var prevPoints = previousPointsRef.current;
323 var prevBaseLinePoints = previousBaseLinePointsRef.current;
324 var prevPointsDiffFactor = prevPoints ? prevPoints.length / points.length : 1;
325 var prevBaseLinePointsDiffFactor = prevBaseLinePoints ? prevBaseLinePoints.length / baseLinePoints.length : 1;
326 var animationId = (0, _useAnimationId.useAnimationId)(props, 'recharts-radar-');
327 var [isAnimating, setIsAnimating] = (0, _react.useState)(false);
328 var showLabels = !isAnimating;
329 var handleAnimationEnd = (0, _react.useCallback)(() => {
330 if (typeof onAnimationEnd === 'function') {
331 onAnimationEnd();
332 }
333 setIsAnimating(false);
334 }, [onAnimationEnd]);
335 var handleAnimationStart = (0, _react.useCallback)(() => {
336 if (typeof onAnimationStart === 'function') {
337 onAnimationStart();
338 }
339 setIsAnimating(true);
340 }, [onAnimationStart]);
341 return /*#__PURE__*/React.createElement(RadarLabelListProvider, {
342 showLabels: showLabels,
343 points: points
344 }, /*#__PURE__*/React.createElement(_JavascriptAnimate.JavascriptAnimate, {
345 animationId: animationId,
346 begin: animationBegin,
347 duration: animationDuration,
348 isActive: isAnimationActive,
349 easing: animationEasing,
350 key: "radar-".concat(animationId),
351 onAnimationEnd: handleAnimationEnd,
352 onAnimationStart: handleAnimationStart
353 }, t => {
354 var stepData = t === 1 ? points : points.map(interpolatePolarPoint(prevPoints, prevPointsDiffFactor, t));
355 var stepBaseLinePoints = t === 1 ? baseLinePoints : baseLinePoints === null || baseLinePoints === void 0 ? void 0 : baseLinePoints.map(interpolatePolarPoint(prevBaseLinePoints, prevBaseLinePointsDiffFactor, t));
356 if (t > 0) {
357 // eslint-disable-next-line no-param-reassign
358 previousPointsRef.current = stepData;
359 // eslint-disable-next-line no-param-reassign
360 previousBaseLinePointsRef.current = stepBaseLinePoints;
361 }
362 return /*#__PURE__*/React.createElement(StaticPolygon, {
363 points: stepData,
364 baseLinePoints: stepBaseLinePoints,
365 props: props
366 });
367 }), /*#__PURE__*/React.createElement(_LabelList.LabelListFromLabelProp, {
368 label: props.label
369 }), props.children);
370}
371function RenderPolygon(props) {
372 var previousPointsRef = (0, _react.useRef)(undefined);
373 var previousBaseLinePointsRef = (0, _react.useRef)(undefined);
374 return /*#__PURE__*/React.createElement(PolygonWithAnimation, {
375 props: props,
376 previousPointsRef: previousPointsRef,
377 previousBaseLinePointsRef: previousBaseLinePointsRef
378 });
379}
380var defaultRadarProps = exports.defaultRadarProps = {
381 activeDot: true,
382 angleAxisId: 0,
383 animationBegin: 0,
384 animationDuration: 1500,
385 animationEasing: 'ease',
386 dot: false,
387 hide: false,
388 isAnimationActive: 'auto',
389 label: false,
390 legendType: 'rect',
391 radiusAxisId: 0,
392 zIndex: _DefaultZIndexes.DefaultZIndexes.area
393};
394function RadarWithState(props) {
395 var {
396 hide,
397 className,
398 points
399 } = props;
400 if (hide) {
401 return null;
402 }
403 var layerClass = (0, _clsx.clsx)('recharts-radar', className);
404 return /*#__PURE__*/React.createElement(_ZIndexLayer.ZIndexLayer, {
405 zIndex: props.zIndex
406 }, /*#__PURE__*/React.createElement(_Layer.Layer, {
407 className: layerClass
408 }, /*#__PURE__*/React.createElement(RenderPolygon, props)), /*#__PURE__*/React.createElement(_ActivePoints.ActivePoints, {
409 points: points,
410 mainColor: getLegendItemColor(props.stroke, props.fill),
411 itemDataKey: props.dataKey,
412 activeDot: props.activeDot
413 }));
414}
415function RadarImpl(props) {
416 var isPanorama = (0, _PanoramaContext.useIsPanorama)();
417 var radarPoints = (0, _hooks.useAppSelector)(state => (0, _radarSelectors.selectRadarPoints)(state, props.radiusAxisId, props.angleAxisId, isPanorama, props.id));
418 if ((radarPoints === null || radarPoints === void 0 ? void 0 : radarPoints.points) == null) {
419 return null;
420 }
421 return /*#__PURE__*/React.createElement(RadarWithState, _extends({}, props, {
422 points: radarPoints === null || radarPoints === void 0 ? void 0 : radarPoints.points,
423 baseLinePoints: radarPoints === null || radarPoints === void 0 ? void 0 : radarPoints.baseLinePoints,
424 isRange: radarPoints === null || radarPoints === void 0 ? void 0 : radarPoints.isRange
425 }));
426}
427
428/**
429 * @consumes PolarChartContext
430 * @provides LabelListContext
431 */
432function Radar(outsideProps) {
433 var props = (0, _resolveDefaultProps.resolveDefaultProps)(outsideProps, defaultRadarProps);
434 return /*#__PURE__*/React.createElement(_RegisterGraphicalItemId.RegisterGraphicalItemId, {
435 id: props.id,
436 type: "radar"
437 }, id => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_SetGraphicalItem.SetPolarGraphicalItem, {
438 type: "radar",
439 id: id,
440 data: undefined // Radar does not have data prop, why?
441 ,
442 dataKey: props.dataKey,
443 hide: props.hide,
444 angleAxisId: props.angleAxisId,
445 radiusAxisId: props.radiusAxisId
446 }), /*#__PURE__*/React.createElement(_SetLegendPayload.SetPolarLegendPayload, {
447 legendPayload: computeLegendPayloadFromRadarSectors(props)
448 }), /*#__PURE__*/React.createElement(SetRadarTooltipEntrySettings, {
449 dataKey: props.dataKey,
450 stroke: props.stroke,
451 strokeWidth: props.strokeWidth,
452 fill: props.fill,
453 name: props.name,
454 hide: props.hide,
455 tooltipType: props.tooltipType,
456 id: id
457 }), /*#__PURE__*/React.createElement(RadarImpl, _extends({}, props, {
458 id: id
459 }))));
460}
461Radar.displayName = 'Radar';
Note: See TracBrowser for help on using the repository browser.