ChartNode() — react Function Reference

Architecture documentation for the ChartNode() function in ChartNode.js from the react codebase.

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ ChartNode() — react Function Reference

Dependency Diagram

graph TD
  b359961f_cc11_89c8_9f4d_ba4c236458c1["ChartNode()"]
  56bcba00_c929_183d_07ac_24aeb71afa91["ChartNode.js"]
  b359961f_cc11_89c8_9f4d_ba4c236458c1 -->|defined in| 56bcba00_c929_183d_07ac_24aeb71afa91
  style b359961f_cc11_89c8_9f4d_ba4c236458c1 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js lines 33–80

export default function ChartNode({
  color,
  height,
  isDimmed = false,
  label,
  onClick,
  onMouseEnter,
  onMouseLeave,
  onDoubleClick,
  textStyle,
  width,
  x,
  y,
}: Props): React.Node {
  return (
    <g className={styles.Group} transform={`translate(${x},${y})`}>
      <rect
        width={width}
        height={height}
        fill={color}
        onClick={onClick}
        onMouseEnter={onMouseEnter}
        onMouseLeave={onMouseLeave}
        onDoubleClick={onDoubleClick}
        className={styles.Rect}
        style={{
          opacity: isDimmed ? 0.5 : 1,
        }}
      />
      {width >= minWidthToDisplay && (
        <foreignObject
          width={width}
          height={height}
          className={styles.ForeignObject}
          style={{
            paddingLeft: x < 0 ? -x : 0,
            opacity: isDimmed ? 0.75 : 1,
            display: width < minWidthToDisplay ? 'none' : 'block',
          }}
          y={0}>
          <div className={styles.Div} style={textStyle}>
            {label}
          </div>
        </foreignObject>
      )}
    </g>
  );
}