| 1 | var _excluded = ["x", "y", "lineHeight", "capHeight", "fill", "scaleToFit", "textAnchor", "verticalAnchor"],
|
|---|
| 2 | _excluded2 = ["dx", "dy", "angle", "className", "breakAll"];
|
|---|
| 3 | function _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); }
|
|---|
| 4 | function _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; }
|
|---|
| 5 | function _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; }
|
|---|
| 6 | import * as React from 'react';
|
|---|
| 7 | import { useMemo, forwardRef } from 'react';
|
|---|
| 8 | import { clsx } from 'clsx';
|
|---|
| 9 | import { isNullish, isNumber, isNumOrStr } from '../util/DataUtils';
|
|---|
| 10 | import { Global } from '../util/Global';
|
|---|
| 11 | import { getStringSize } from '../util/DOMUtils';
|
|---|
| 12 | import { reduceCSSCalc } from '../util/ReduceCSSCalc';
|
|---|
| 13 | import { svgPropertiesAndEvents } from '../util/svgPropertiesAndEvents';
|
|---|
| 14 | import { resolveDefaultProps } from '../util/resolveDefaultProps';
|
|---|
| 15 | import { isWellBehavedNumber } from '../util/isWellBehavedNumber';
|
|---|
| 16 | var BREAKING_SPACES = /[ \f\n\r\t\v\u2028\u2029]+/;
|
|---|
| 17 | var calculateWordWidths = _ref => {
|
|---|
| 18 | var {
|
|---|
| 19 | children,
|
|---|
| 20 | breakAll,
|
|---|
| 21 | style
|
|---|
| 22 | } = _ref;
|
|---|
| 23 | try {
|
|---|
| 24 | var words = [];
|
|---|
| 25 | if (!isNullish(children)) {
|
|---|
| 26 | if (breakAll) {
|
|---|
| 27 | words = children.toString().split('');
|
|---|
| 28 | } else {
|
|---|
| 29 | words = children.toString().split(BREAKING_SPACES);
|
|---|
| 30 | }
|
|---|
| 31 | }
|
|---|
| 32 | var wordsWithComputedWidth = words.map(word => ({
|
|---|
| 33 | word,
|
|---|
| 34 | width: getStringSize(word, style).width
|
|---|
| 35 | }));
|
|---|
| 36 | var spaceWidth = breakAll ? 0 : getStringSize('\u00A0', style).width;
|
|---|
| 37 | return {
|
|---|
| 38 | wordsWithComputedWidth,
|
|---|
| 39 | spaceWidth
|
|---|
| 40 | };
|
|---|
| 41 | } catch (_unused) {
|
|---|
| 42 | return null;
|
|---|
| 43 | }
|
|---|
| 44 | };
|
|---|
| 45 |
|
|---|
| 46 | /**
|
|---|
| 47 | * @inline
|
|---|
| 48 | */
|
|---|
| 49 |
|
|---|
| 50 | export function isValidTextAnchor(value) {
|
|---|
| 51 | return value === 'start' || value === 'middle' || value === 'end' || value === 'inherit';
|
|---|
| 52 | }
|
|---|
| 53 |
|
|---|
| 54 | /**
|
|---|
| 55 | * @inline
|
|---|
| 56 | */
|
|---|
| 57 |
|
|---|
| 58 | /**
|
|---|
| 59 | * @inline
|
|---|
| 60 | */
|
|---|
| 61 |
|
|---|
| 62 | var calculate = (words, lineWidth, spaceWidth, scaleToFit) => words.reduce((result, _ref2) => {
|
|---|
| 63 | var {
|
|---|
| 64 | word,
|
|---|
| 65 | width
|
|---|
| 66 | } = _ref2;
|
|---|
| 67 | var currentLine = result[result.length - 1];
|
|---|
| 68 | if (currentLine && width != null && (lineWidth == null || scaleToFit || currentLine.width + width + spaceWidth < Number(lineWidth))) {
|
|---|
| 69 | // Word can be added to an existing line
|
|---|
| 70 | currentLine.words.push(word);
|
|---|
| 71 | currentLine.width += width + spaceWidth;
|
|---|
| 72 | } else {
|
|---|
| 73 | // Add first word to line or word is too long to scaleToFit on existing line
|
|---|
| 74 | var newLine = {
|
|---|
| 75 | words: [word],
|
|---|
| 76 | width
|
|---|
| 77 | };
|
|---|
| 78 | result.push(newLine);
|
|---|
| 79 | }
|
|---|
| 80 | return result;
|
|---|
| 81 | }, []);
|
|---|
| 82 | var findLongestLine = words => words.reduce((a, b) => a.width > b.width ? a : b);
|
|---|
| 83 | var suffix = '…';
|
|---|
| 84 | var checkOverflow = (text, index, breakAll, style, maxLines, lineWidth, spaceWidth, scaleToFit) => {
|
|---|
| 85 | var tempText = text.slice(0, index);
|
|---|
| 86 | var words = calculateWordWidths({
|
|---|
| 87 | breakAll,
|
|---|
| 88 | style,
|
|---|
| 89 | children: tempText + suffix
|
|---|
| 90 | });
|
|---|
| 91 | if (!words) {
|
|---|
| 92 | return [false, []];
|
|---|
| 93 | }
|
|---|
| 94 | var result = calculate(words.wordsWithComputedWidth, lineWidth, spaceWidth, scaleToFit);
|
|---|
| 95 | var doesOverflow = result.length > maxLines || findLongestLine(result).width > Number(lineWidth);
|
|---|
| 96 | return [doesOverflow, result];
|
|---|
| 97 | };
|
|---|
| 98 | var calculateWordsByLines = (_ref3, initialWordsWithComputedWith, spaceWidth, lineWidth, scaleToFit) => {
|
|---|
| 99 | var {
|
|---|
| 100 | maxLines,
|
|---|
| 101 | children,
|
|---|
| 102 | style,
|
|---|
| 103 | breakAll
|
|---|
| 104 | } = _ref3;
|
|---|
| 105 | var shouldLimitLines = isNumber(maxLines);
|
|---|
| 106 | var text = String(children);
|
|---|
| 107 | var originalResult = calculate(initialWordsWithComputedWith, lineWidth, spaceWidth, scaleToFit);
|
|---|
| 108 | if (!shouldLimitLines || scaleToFit) {
|
|---|
| 109 | return originalResult;
|
|---|
| 110 | }
|
|---|
| 111 | var overflows = originalResult.length > maxLines || findLongestLine(originalResult).width > Number(lineWidth);
|
|---|
| 112 | if (!overflows) {
|
|---|
| 113 | return originalResult;
|
|---|
| 114 | }
|
|---|
| 115 | var start = 0;
|
|---|
| 116 | var end = text.length - 1;
|
|---|
| 117 | var iterations = 0;
|
|---|
| 118 | var trimmedResult;
|
|---|
| 119 | while (start <= end && iterations <= text.length - 1) {
|
|---|
| 120 | var middle = Math.floor((start + end) / 2);
|
|---|
| 121 | var prev = middle - 1;
|
|---|
| 122 | var [doesPrevOverflow, result] = checkOverflow(text, prev, breakAll, style, maxLines, lineWidth, spaceWidth, scaleToFit);
|
|---|
| 123 | var [doesMiddleOverflow] = checkOverflow(text, middle, breakAll, style, maxLines, lineWidth, spaceWidth, scaleToFit);
|
|---|
| 124 | if (!doesPrevOverflow && !doesMiddleOverflow) {
|
|---|
| 125 | start = middle + 1;
|
|---|
| 126 | }
|
|---|
| 127 | if (doesPrevOverflow && doesMiddleOverflow) {
|
|---|
| 128 | end = middle - 1;
|
|---|
| 129 | }
|
|---|
| 130 | if (!doesPrevOverflow && doesMiddleOverflow) {
|
|---|
| 131 | trimmedResult = result;
|
|---|
| 132 | break;
|
|---|
| 133 | }
|
|---|
| 134 | iterations++;
|
|---|
| 135 | }
|
|---|
| 136 |
|
|---|
| 137 | // Fallback to originalResult (result without trimming) if we cannot find the
|
|---|
| 138 | // where to trim. This should not happen :tm:
|
|---|
| 139 | return trimmedResult || originalResult;
|
|---|
| 140 | };
|
|---|
| 141 | var getWordsWithoutCalculate = children => {
|
|---|
| 142 | var words = !isNullish(children) ? children.toString().split(BREAKING_SPACES) : [];
|
|---|
| 143 | return [{
|
|---|
| 144 | words,
|
|---|
| 145 | width: undefined
|
|---|
| 146 | }];
|
|---|
| 147 | };
|
|---|
| 148 | export var getWordsByLines = _ref4 => {
|
|---|
| 149 | var {
|
|---|
| 150 | width,
|
|---|
| 151 | scaleToFit,
|
|---|
| 152 | children,
|
|---|
| 153 | style,
|
|---|
| 154 | breakAll,
|
|---|
| 155 | maxLines
|
|---|
| 156 | } = _ref4;
|
|---|
| 157 | // Only perform calculations if using features that require them (multiline, scaleToFit)
|
|---|
| 158 | if ((width || scaleToFit) && !Global.isSsr) {
|
|---|
| 159 | var wordsWithComputedWidth, spaceWidth;
|
|---|
| 160 | var wordWidths = calculateWordWidths({
|
|---|
| 161 | breakAll,
|
|---|
| 162 | children,
|
|---|
| 163 | style
|
|---|
| 164 | });
|
|---|
| 165 | if (wordWidths) {
|
|---|
| 166 | var {
|
|---|
| 167 | wordsWithComputedWidth: wcw,
|
|---|
| 168 | spaceWidth: sw
|
|---|
| 169 | } = wordWidths;
|
|---|
| 170 | wordsWithComputedWidth = wcw;
|
|---|
| 171 | spaceWidth = sw;
|
|---|
| 172 | } else {
|
|---|
| 173 | return getWordsWithoutCalculate(children);
|
|---|
| 174 | }
|
|---|
| 175 | return calculateWordsByLines({
|
|---|
| 176 | breakAll,
|
|---|
| 177 | children,
|
|---|
| 178 | maxLines,
|
|---|
| 179 | style
|
|---|
| 180 | }, wordsWithComputedWidth, spaceWidth, width, Boolean(scaleToFit));
|
|---|
| 181 | }
|
|---|
| 182 | return getWordsWithoutCalculate(children);
|
|---|
| 183 | };
|
|---|
| 184 | var DEFAULT_FILL = '#808080';
|
|---|
| 185 | export var textDefaultProps = {
|
|---|
| 186 | angle: 0,
|
|---|
| 187 | breakAll: false,
|
|---|
| 188 | // Magic number from d3
|
|---|
| 189 | capHeight: '0.71em',
|
|---|
| 190 | fill: DEFAULT_FILL,
|
|---|
| 191 | lineHeight: '1em',
|
|---|
| 192 | scaleToFit: false,
|
|---|
| 193 | textAnchor: 'start',
|
|---|
| 194 | // Maintain compat with existing charts / default SVG behavior
|
|---|
| 195 | verticalAnchor: 'end',
|
|---|
| 196 | x: 0,
|
|---|
| 197 | y: 0
|
|---|
| 198 | };
|
|---|
| 199 | export var Text = /*#__PURE__*/forwardRef((outsideProps, ref) => {
|
|---|
| 200 | var _resolveDefaultProps = resolveDefaultProps(outsideProps, textDefaultProps),
|
|---|
| 201 | {
|
|---|
| 202 | x: propsX,
|
|---|
| 203 | y: propsY,
|
|---|
| 204 | lineHeight,
|
|---|
| 205 | capHeight,
|
|---|
| 206 | fill,
|
|---|
| 207 | scaleToFit,
|
|---|
| 208 | textAnchor,
|
|---|
| 209 | verticalAnchor
|
|---|
| 210 | } = _resolveDefaultProps,
|
|---|
| 211 | props = _objectWithoutProperties(_resolveDefaultProps, _excluded);
|
|---|
| 212 | var wordsByLines = useMemo(() => {
|
|---|
| 213 | return getWordsByLines({
|
|---|
| 214 | breakAll: props.breakAll,
|
|---|
| 215 | children: props.children,
|
|---|
| 216 | maxLines: props.maxLines,
|
|---|
| 217 | scaleToFit,
|
|---|
| 218 | style: props.style,
|
|---|
| 219 | width: props.width
|
|---|
| 220 | });
|
|---|
| 221 | }, [props.breakAll, props.children, props.maxLines, scaleToFit, props.style, props.width]);
|
|---|
| 222 | var {
|
|---|
| 223 | dx,
|
|---|
| 224 | dy,
|
|---|
| 225 | angle,
|
|---|
| 226 | className,
|
|---|
| 227 | breakAll
|
|---|
| 228 | } = props,
|
|---|
| 229 | textProps = _objectWithoutProperties(props, _excluded2);
|
|---|
| 230 | if (!isNumOrStr(propsX) || !isNumOrStr(propsY) || wordsByLines.length === 0) {
|
|---|
| 231 | return null;
|
|---|
| 232 | }
|
|---|
| 233 | var x = Number(propsX) + (isNumber(dx) ? dx : 0);
|
|---|
| 234 | var y = Number(propsY) + (isNumber(dy) ? dy : 0);
|
|---|
| 235 | if (!isWellBehavedNumber(x) || !isWellBehavedNumber(y)) {
|
|---|
| 236 | return null;
|
|---|
| 237 | }
|
|---|
| 238 | var startDy;
|
|---|
| 239 | switch (verticalAnchor) {
|
|---|
| 240 | case 'start':
|
|---|
| 241 | startDy = reduceCSSCalc("calc(".concat(capHeight, ")"));
|
|---|
| 242 | break;
|
|---|
| 243 | case 'middle':
|
|---|
| 244 | startDy = reduceCSSCalc("calc(".concat((wordsByLines.length - 1) / 2, " * -").concat(lineHeight, " + (").concat(capHeight, " / 2))"));
|
|---|
| 245 | break;
|
|---|
| 246 | default:
|
|---|
| 247 | startDy = reduceCSSCalc("calc(".concat(wordsByLines.length - 1, " * -").concat(lineHeight, ")"));
|
|---|
| 248 | break;
|
|---|
| 249 | }
|
|---|
| 250 | var transforms = [];
|
|---|
| 251 | var firstLine = wordsByLines[0];
|
|---|
| 252 | if (scaleToFit && firstLine != null) {
|
|---|
| 253 | var lineWidth = firstLine.width;
|
|---|
| 254 | var {
|
|---|
| 255 | width
|
|---|
| 256 | } = props;
|
|---|
| 257 | transforms.push("scale(".concat(isNumber(width) && isNumber(lineWidth) ? width / lineWidth : 1, ")"));
|
|---|
| 258 | }
|
|---|
| 259 | if (angle) {
|
|---|
| 260 | transforms.push("rotate(".concat(angle, ", ").concat(x, ", ").concat(y, ")"));
|
|---|
| 261 | }
|
|---|
| 262 | if (transforms.length) {
|
|---|
| 263 | textProps.transform = transforms.join(' ');
|
|---|
| 264 | }
|
|---|
| 265 | return /*#__PURE__*/React.createElement("text", _extends({}, svgPropertiesAndEvents(textProps), {
|
|---|
| 266 | ref: ref,
|
|---|
| 267 | x: x,
|
|---|
| 268 | y: y,
|
|---|
| 269 | className: clsx('recharts-text', className),
|
|---|
| 270 | textAnchor: textAnchor,
|
|---|
| 271 | fill: fill.includes('url') ? DEFAULT_FILL : fill
|
|---|
| 272 | }), wordsByLines.map((line, index) => {
|
|---|
| 273 | var words = line.words.join(breakAll ? '' : ' ');
|
|---|
| 274 | return (
|
|---|
| 275 | /*#__PURE__*/
|
|---|
| 276 | // duplicate words will cause duplicate keys which is why we add the array index here
|
|---|
| 277 | React.createElement("tspan", {
|
|---|
| 278 | x: x,
|
|---|
| 279 | dy: index === 0 ? startDy : lineHeight,
|
|---|
| 280 | key: "".concat(words, "-").concat(index)
|
|---|
| 281 | }, words)
|
|---|
| 282 | );
|
|---|
| 283 | }));
|
|---|
| 284 | });
|
|---|
| 285 | Text.displayName = 'Text'; |
|---|