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

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

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _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) {
  const {
      x,
      y,
      style: styleProps,
      text
    } = props,
    textProps = _objectWithoutPropertiesLoose(props, _excluded);
  const _ref = styleProps != null ? styleProps : {},
    {
      angle,
      textAnchor,
      dominantBaseline
    } = _ref,
    style = _objectWithoutPropertiesLoose(_ref, _excluded2);
  const wordsByLines = React.useMemo(() => getWordsByLines({
    style,
    needsComputation: text.includes('\n'),
    text
  }), [style, text]);
  let 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;
  }
  const 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(${angle}, ${x}, ${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((line, index) => /*#__PURE__*/_jsx("tspan", {
      x: x,
      dy: `${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 };