@mui/x-charts/legacy/ChartsText/ChartsText.js

The community edition of the charts components (MUI X).

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["x", "y", "style", "text", "ownerState"],
  _excluded2 = ["angle", "textAnchor", "dominantBaseline"];
import * as React from 'react';
import PropTypes from 'prop-types';
import { getWordsByLines } from '../internals/getWordsByLines';
import { jsx as _jsx } from "react/jsx-runtime";
/**
 * Helper component to manage multiline text in SVG
 */
function ChartsText(props) {
  var x = props.x,
    y = props.y,
    styleProps = props.style,
    text = props.text,
    ownerState = props.ownerState,
    textProps = _objectWithoutProperties(props, _excluded);
  var _ref = styleProps != null ? styleProps : {},
    angle = _ref.angle,
    textAnchor = _ref.textAnchor,
    dominantBaseline = _ref.dominantBaseline,
    style = _objectWithoutProperties(_ref, _excluded2);
  var wordsByLines = React.useMemo(function () {
    return getWordsByLines({
      style: style,
      needsComputation: text.includes('\n'),
      text: text
    });
  }, [style, text]);
  var startDy;
  switch (dominantBaseline) {
    case 'hanging':
      startDy = 0;
      break;
    case 'central':
      startDy = (wordsByLines.length - 1) / 2 * -wordsByLines[0].height;
      break;
    default:
      startDy = (wordsByLines.length - 1) * -wordsByLines[0].height;
      break;
  }
  var transforms = [];
  // if (scaleToFit) {
  //   const lineWidth = wordsByLines[0].width;
  //   transforms.push(`scale(${(isNumber(width as number) ? (width as number) / lineWidth : 1) / lineWidth})`);
  // }
  if (angle) {
    transforms.push("rotate(".concat(angle, ", ").concat(x, ", ").concat(y, ")"));
  }
  if (transforms.length) {
    textProps.transform = transforms.join(' ');
  }
  return /*#__PURE__*/_jsx("text", _extends({}, textProps, {
    x: x,
    y: y,
    textAnchor: textAnchor,
    dominantBaseline: dominantBaseline,
    style: style,
    children: wordsByLines.map(function (line, index) {
      return /*#__PURE__*/_jsx("tspan", {
        x: x,
        dy: "".concat(index === 0 ? startDy : wordsByLines[0].height, "px"),
        dominantBaseline: dominantBaseline // Propagated to fix Safari issue: https://github.com/mui/mui-x/issues/10808
        ,
        children: line.text
      }, index);
    })
  }));
}
process.env.NODE_ENV !== "production" ? ChartsText.propTypes = {
  // ----------------------------- Warning --------------------------------
  // | These PropTypes are generated from the TypeScript type definitions |
  // | To update them edit the TypeScript types and run "yarn proptypes"  |
  // ----------------------------------------------------------------------
  /**
   * Height of a text line (in `em`).
   */
  lineHeight: PropTypes.number,
  /**
   * If `true`, the line width is computed.
   * @default false
   */
  needsComputation: PropTypes.bool,
  ownerState: PropTypes.any,
  /**
   * Style applied to text elements.
   */
  style: PropTypes.object,
  /**
   * Text displayed.
   */
  text: PropTypes.string.isRequired
} : void 0;
export { ChartsText };