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