source: node_modules/recharts/lib/cartesian/CartesianAxis.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: 17.1 KB
Line 
1"use strict";
2
3Object.defineProperty(exports, "__esModule", {
4 value: true
5});
6exports.defaultCartesianAxisProps = exports.CartesianAxis = void 0;
7var _react = _interopRequireWildcard(require("react"));
8var React = _react;
9var _get = _interopRequireDefault(require("es-toolkit/compat/get"));
10var _clsx = require("clsx");
11var _Layer = require("../container/Layer");
12var _Text = require("../component/Text");
13var _Label = require("../component/Label");
14var _DataUtils = require("../util/DataUtils");
15var _types = require("../util/types");
16var _getTicks = require("./getTicks");
17var _svgPropertiesNoEvents = require("../util/svgPropertiesNoEvents");
18var _YAxisUtils = require("../util/YAxisUtils");
19var _resolveDefaultProps = require("../util/resolveDefaultProps");
20var _ZIndexLayer = require("../zIndex/ZIndexLayer");
21var _DefaultZIndexes = require("../zIndex/DefaultZIndexes");
22var _getClassNameFromUnknown = require("../util/getClassNameFromUnknown");
23var _excluded = ["axisLine", "width", "height", "className", "hide", "ticks", "axisType"];
24function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
25function _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); }
26function _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; }
27function _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; }
28function _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); }
29function 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; }
30function _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; }
31function _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; }
32function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
33function _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); } /**
34 * @fileOverview Cartesian Axis
35 */
36/** The orientation of the axis in correspondence to the chart */
37
38/** A unit to be appended to a value */
39
40/** The formatter function of tick */
41
42var defaultCartesianAxisProps = exports.defaultCartesianAxisProps = {
43 x: 0,
44 y: 0,
45 width: 0,
46 height: 0,
47 viewBox: {
48 x: 0,
49 y: 0,
50 width: 0,
51 height: 0
52 },
53 // The orientation of axis
54 orientation: 'bottom',
55 // The ticks
56 ticks: [],
57 stroke: '#666',
58 tickLine: true,
59 axisLine: true,
60 tick: true,
61 mirror: false,
62 minTickGap: 5,
63 // The width or height of tick
64 tickSize: 6,
65 tickMargin: 2,
66 interval: 'preserveEnd',
67 zIndex: _DefaultZIndexes.DefaultZIndexes.axis
68};
69
70/*
71 * `viewBox` and `scale` are SVG attributes.
72 * Recharts however - unfortunately - has its own attributes named `viewBox` and `scale`
73 * that are completely different data shape and different purpose.
74 */
75
76function AxisLine(axisLineProps) {
77 var {
78 x,
79 y,
80 width,
81 height,
82 orientation,
83 mirror,
84 axisLine,
85 otherSvgProps
86 } = axisLineProps;
87 if (!axisLine) {
88 return null;
89 }
90 var props = _objectSpread(_objectSpread(_objectSpread({}, otherSvgProps), (0, _svgPropertiesNoEvents.svgPropertiesNoEvents)(axisLine)), {}, {
91 fill: 'none'
92 });
93 if (orientation === 'top' || orientation === 'bottom') {
94 var needHeight = +(orientation === 'top' && !mirror || orientation === 'bottom' && mirror);
95 props = _objectSpread(_objectSpread({}, props), {}, {
96 x1: x,
97 y1: y + needHeight * height,
98 x2: x + width,
99 y2: y + needHeight * height
100 });
101 } else {
102 var needWidth = +(orientation === 'left' && !mirror || orientation === 'right' && mirror);
103 props = _objectSpread(_objectSpread({}, props), {}, {
104 x1: x + needWidth * width,
105 y1: y,
106 x2: x + needWidth * width,
107 y2: y + height
108 });
109 }
110 return /*#__PURE__*/React.createElement("line", _extends({}, props, {
111 className: (0, _clsx.clsx)('recharts-cartesian-axis-line', (0, _get.default)(axisLine, 'className'))
112 }));
113}
114
115/**
116 * Calculate the coordinates of endpoints in ticks.
117 * @param data The data of a simple tick.
118 * @param x The x-coordinate of the axis.
119 * @param y The y-coordinate of the axis.
120 * @param width The width of the axis.
121 * @param height The height of the axis.
122 * @param orientation The orientation of the axis.
123 * @param tickSize The length of the tick line.
124 * @param mirror If true, the ticks are mirrored.
125 * @param tickMargin The margin between the tick line and the tick text.
126 * @returns An object with `line` and `tick` coordinates.
127 * `line` is the coordinates for the tick line, and `tick` is the coordinate for the tick text.
128 */
129function getTickLineCoord(data, x, y, width, height, orientation, tickSize, mirror, tickMargin) {
130 var x1, x2, y1, y2, tx, ty;
131 var sign = mirror ? -1 : 1;
132 var finalTickSize = data.tickSize || tickSize;
133 var tickCoord = (0, _DataUtils.isNumber)(data.tickCoord) ? data.tickCoord : data.coordinate;
134 switch (orientation) {
135 case 'top':
136 x1 = x2 = data.coordinate;
137 y2 = y + +!mirror * height;
138 y1 = y2 - sign * finalTickSize;
139 ty = y1 - sign * tickMargin;
140 tx = tickCoord;
141 break;
142 case 'left':
143 y1 = y2 = data.coordinate;
144 x2 = x + +!mirror * width;
145 x1 = x2 - sign * finalTickSize;
146 tx = x1 - sign * tickMargin;
147 ty = tickCoord;
148 break;
149 case 'right':
150 y1 = y2 = data.coordinate;
151 x2 = x + +mirror * width;
152 x1 = x2 + sign * finalTickSize;
153 tx = x1 + sign * tickMargin;
154 ty = tickCoord;
155 break;
156 default:
157 x1 = x2 = data.coordinate;
158 y2 = y + +mirror * height;
159 y1 = y2 + sign * finalTickSize;
160 ty = y1 + sign * tickMargin;
161 tx = tickCoord;
162 break;
163 }
164 return {
165 line: {
166 x1,
167 y1,
168 x2,
169 y2
170 },
171 tick: {
172 x: tx,
173 y: ty
174 }
175 };
176}
177
178/**
179 * @param orientation The orientation of the axis.
180 * @param mirror If true, the ticks are mirrored.
181 * @returns The text anchor of the tick.
182 */
183function getTickTextAnchor(orientation, mirror) {
184 switch (orientation) {
185 case 'left':
186 return mirror ? 'start' : 'end';
187 case 'right':
188 return mirror ? 'end' : 'start';
189 default:
190 return 'middle';
191 }
192}
193
194/**
195 * @param orientation The orientation of the axis.
196 * @param mirror If true, the ticks are mirrored.
197 * @returns The vertical text anchor of the tick.
198 */
199function getTickVerticalAnchor(orientation, mirror) {
200 switch (orientation) {
201 case 'left':
202 case 'right':
203 return 'middle';
204 case 'top':
205 return mirror ? 'start' : 'end';
206 default:
207 return mirror ? 'end' : 'start';
208 }
209}
210function TickItem(props) {
211 var {
212 option,
213 tickProps,
214 value
215 } = props;
216 var tickItem;
217 var combinedClassName = (0, _clsx.clsx)(tickProps.className, 'recharts-cartesian-axis-tick-value');
218 if (/*#__PURE__*/React.isValidElement(option)) {
219 // @ts-expect-error element cloning is not typed
220 tickItem = /*#__PURE__*/React.cloneElement(option, _objectSpread(_objectSpread({}, tickProps), {}, {
221 className: combinedClassName
222 }));
223 } else if (typeof option === 'function') {
224 tickItem = option(_objectSpread(_objectSpread({}, tickProps), {}, {
225 className: combinedClassName
226 }));
227 } else {
228 var className = 'recharts-cartesian-axis-tick-value';
229 if (typeof option !== 'boolean') {
230 className = (0, _clsx.clsx)(className, (0, _getClassNameFromUnknown.getClassNameFromUnknown)(option));
231 }
232 tickItem = /*#__PURE__*/React.createElement(_Text.Text, _extends({}, tickProps, {
233 className: className
234 }), value);
235 }
236 return tickItem;
237}
238var Ticks = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
239 var {
240 ticks = [],
241 tick,
242 tickLine,
243 stroke,
244 tickFormatter,
245 unit,
246 padding,
247 tickTextProps,
248 orientation,
249 mirror,
250 x,
251 y,
252 width,
253 height,
254 tickSize,
255 tickMargin,
256 fontSize,
257 letterSpacing,
258 getTicksConfig,
259 events,
260 axisType
261 } = props;
262 // @ts-expect-error some properties are optional in props but required in getTicks
263 var finalTicks = (0, _getTicks.getTicks)(_objectSpread(_objectSpread({}, getTicksConfig), {}, {
264 ticks
265 }), fontSize, letterSpacing);
266 var textAnchor = getTickTextAnchor(orientation, mirror);
267 var verticalAnchor = getTickVerticalAnchor(orientation, mirror);
268 var axisProps = (0, _svgPropertiesNoEvents.svgPropertiesNoEvents)(getTicksConfig);
269 var customTickProps = (0, _svgPropertiesNoEvents.svgPropertiesNoEventsFromUnknown)(tick);
270 var tickLinePropsObject = {};
271 if (typeof tickLine === 'object') {
272 tickLinePropsObject = tickLine;
273 }
274 var tickLineProps = _objectSpread(_objectSpread({}, axisProps), {}, {
275 fill: 'none'
276 }, tickLinePropsObject);
277 var tickLineCoords = finalTicks.map(entry => _objectSpread({
278 entry
279 }, getTickLineCoord(entry, x, y, width, height, orientation, tickSize, mirror, tickMargin)));
280 var tickLines = tickLineCoords.map(_ref => {
281 var {
282 entry,
283 line: lineCoord
284 } = _ref;
285 return /*#__PURE__*/React.createElement(_Layer.Layer, {
286 className: "recharts-cartesian-axis-tick",
287 key: "tick-".concat(entry.value, "-").concat(entry.coordinate, "-").concat(entry.tickCoord)
288 }, tickLine && /*#__PURE__*/React.createElement("line", _extends({}, tickLineProps, lineCoord, {
289 className: (0, _clsx.clsx)('recharts-cartesian-axis-tick-line', (0, _get.default)(tickLine, 'className'))
290 })));
291 });
292 var tickLabels = tickLineCoords.map((_ref2, i) => {
293 var _ref3, _tickTextProps$angle;
294 var {
295 entry,
296 tick: tickCoord
297 } = _ref2;
298 // @ts-expect-error we're not checking that padding and orientation types are in sync
299 var tickProps = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
300 verticalAnchor
301 }, axisProps), {}, {
302 textAnchor,
303 stroke: 'none',
304 fill: stroke
305 }, tickCoord), {}, {
306 index: i,
307 payload: entry,
308 visibleTicksCount: finalTicks.length,
309 tickFormatter,
310 padding
311 }, tickTextProps), {}, {
312 angle: (_ref3 = (_tickTextProps$angle = tickTextProps === null || tickTextProps === void 0 ? void 0 : tickTextProps.angle) !== null && _tickTextProps$angle !== void 0 ? _tickTextProps$angle : axisProps.angle) !== null && _ref3 !== void 0 ? _ref3 : 0
313 });
314
315 // @ts-expect-error customTickProps is contributing unknown props which we don't type properly
316 var finalTickProps = _objectSpread(_objectSpread({}, tickProps), customTickProps);
317 return /*#__PURE__*/React.createElement(_Layer.Layer, _extends({
318 className: "recharts-cartesian-axis-tick-label",
319 key: "tick-label-".concat(entry.value, "-").concat(entry.coordinate, "-").concat(entry.tickCoord)
320 }, (0, _types.adaptEventsOfChild)(events, entry, i)), tick && /*#__PURE__*/React.createElement(TickItem, {
321 option: tick,
322 tickProps: finalTickProps,
323 value: "".concat(typeof tickFormatter === 'function' ? tickFormatter(entry.value, i) : entry.value).concat(unit || '')
324 }));
325 });
326 return /*#__PURE__*/React.createElement("g", {
327 className: "recharts-cartesian-axis-ticks recharts-".concat(axisType, "-ticks")
328 }, tickLabels.length > 0 && /*#__PURE__*/React.createElement(_ZIndexLayer.ZIndexLayer, {
329 zIndex: _DefaultZIndexes.DefaultZIndexes.label
330 }, /*#__PURE__*/React.createElement("g", {
331 className: "recharts-cartesian-axis-tick-labels recharts-".concat(axisType, "-tick-labels"),
332 ref: ref
333 }, tickLabels)), tickLines.length > 0 && /*#__PURE__*/React.createElement("g", {
334 className: "recharts-cartesian-axis-tick-lines recharts-".concat(axisType, "-tick-lines")
335 }, tickLines));
336});
337var CartesianAxisComponent = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
338 var {
339 axisLine,
340 width,
341 height,
342 className,
343 hide,
344 ticks,
345 axisType
346 } = props,
347 rest = _objectWithoutProperties(props, _excluded);
348 var [fontSize, setFontSize] = (0, _react.useState)('');
349 var [letterSpacing, setLetterSpacing] = (0, _react.useState)('');
350 var tickRefs = (0, _react.useRef)(null);
351 (0, _react.useImperativeHandle)(ref, () => ({
352 getCalculatedWidth: () => {
353 var _props$labelRef;
354 return (0, _YAxisUtils.getCalculatedYAxisWidth)({
355 ticks: tickRefs.current,
356 label: (_props$labelRef = props.labelRef) === null || _props$labelRef === void 0 ? void 0 : _props$labelRef.current,
357 labelGapWithTick: 5,
358 tickSize: props.tickSize,
359 tickMargin: props.tickMargin
360 });
361 }
362 }));
363 var layerRef = (0, _react.useCallback)(el => {
364 if (el) {
365 var tickNodes = el.getElementsByClassName('recharts-cartesian-axis-tick-value');
366 tickRefs.current = tickNodes;
367 var tick = tickNodes[0];
368 if (tick) {
369 var computedStyle = window.getComputedStyle(tick);
370 var calculatedFontSize = computedStyle.fontSize;
371 var calculatedLetterSpacing = computedStyle.letterSpacing;
372 if (calculatedFontSize !== fontSize || calculatedLetterSpacing !== letterSpacing) {
373 setFontSize(calculatedFontSize);
374 setLetterSpacing(calculatedLetterSpacing);
375 }
376 }
377 }
378 }, [fontSize, letterSpacing]);
379 if (hide) {
380 return null;
381 }
382
383 /*
384 * This is different condition from what validateWidthHeight is doing;
385 * the CartesianAxis does allow width or height to be undefined.
386 */
387 if (width != null && width <= 0 || height != null && height <= 0) {
388 return null;
389 }
390 return /*#__PURE__*/React.createElement(_ZIndexLayer.ZIndexLayer, {
391 zIndex: props.zIndex
392 }, /*#__PURE__*/React.createElement(_Layer.Layer, {
393 className: (0, _clsx.clsx)('recharts-cartesian-axis', className)
394 }, /*#__PURE__*/React.createElement(AxisLine, {
395 x: props.x,
396 y: props.y,
397 width: width,
398 height: height,
399 orientation: props.orientation,
400 mirror: props.mirror,
401 axisLine: axisLine,
402 otherSvgProps: (0, _svgPropertiesNoEvents.svgPropertiesNoEvents)(props)
403 }), /*#__PURE__*/React.createElement(Ticks, {
404 ref: layerRef,
405 axisType: axisType,
406 events: rest,
407 fontSize: fontSize,
408 getTicksConfig: props,
409 height: props.height,
410 letterSpacing: letterSpacing,
411 mirror: props.mirror,
412 orientation: props.orientation,
413 padding: props.padding,
414 stroke: props.stroke,
415 tick: props.tick,
416 tickFormatter: props.tickFormatter,
417 tickLine: props.tickLine,
418 tickMargin: props.tickMargin,
419 tickSize: props.tickSize,
420 tickTextProps: props.tickTextProps,
421 ticks: ticks,
422 unit: props.unit,
423 width: props.width,
424 x: props.x,
425 y: props.y
426 }), /*#__PURE__*/React.createElement(_Label.CartesianLabelContextProvider, {
427 x: props.x,
428 y: props.y,
429 width: props.width,
430 height: props.height,
431 lowerWidth: props.width,
432 upperWidth: props.width
433 }, /*#__PURE__*/React.createElement(_Label.CartesianLabelFromLabelProp, {
434 label: props.label,
435 labelRef: props.labelRef
436 }), props.children)));
437});
438
439/**
440 * @deprecated
441 *
442 * This component is not meant to be used directly in app code.
443 * Use XAxis or YAxis instead.
444 *
445 * Starting from Recharts v4.0 we will make this component internal only.
446 */
447var CartesianAxis = exports.CartesianAxis = /*#__PURE__*/React.forwardRef((outsideProps, ref) => {
448 var props = (0, _resolveDefaultProps.resolveDefaultProps)(outsideProps, defaultCartesianAxisProps);
449 return /*#__PURE__*/React.createElement(CartesianAxisComponent, _extends({}, props, {
450 ref: ref
451 }));
452});
453CartesianAxis.displayName = 'CartesianAxis';
Note: See TracBrowser for help on using the repository browser.