@talend/react-components/lib/RadarChart/RadarChart.component.js

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.RadarChart = RadarChart;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _recharts = require("recharts");
var _designTokens = _interopRequireDefault(require("@talend/design-tokens"));
var _theme = require("../theme");
var _RadarChartModule = _interopRequireDefault(require("./RadarChart.module.scss"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const theme = (0, _theme.getTheme)(_RadarChartModule.default);

/**
 * This function renders a Recharts radar chart for a given set of data
 * @param {Array} children required child elements
 * @param {string} className style classes for the component
 * @param {number} cx the horizontal start position of the chart
 * @param {number} cy the vertical start position of the chart
 * @param {Array} data the data to be rendered in the chart
 * @param {Array} domain the minimum and maximum chart values
 * @param {number} height the height of the chart container
 * @param {number} innerRadius the starting radius of the chart
 * @param {number} outerRadius the ending radius of the chart
 * @param {boolean} tick option to show a value scale on the chart
 * @param {boolean} tickLine option to draw a line from the chart to the tick/label
 * @param {number} width the width of the chart container
 */
function RadarChart({
  children,
  className,
  cx,
  cy,
  data,
  domain,
  height,
  innerRadius,
  outerRadius,
  tick,
  tickLine,
  width
}) {
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_recharts.RadarChart, {
    className: theme('tc-radar-chart', className),
    cx: cx,
    cy: cy,
    outerRadius: outerRadius,
    innerRadius: innerRadius,
    width: width,
    height: height,
    data: data,
    fill: _designTokens.default.coralColorNeutralBorder,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_recharts.PolarGrid, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_recharts.PolarRadiusAxis, {
      domain: domain,
      tick: tick,
      axisLine: tickLine
    }), children]
  });
}
RadarChart.displayName = 'RadarChart';
RadarChart.propTypes = {
  children: _propTypes.default.node.isRequired,
  className: _propTypes.default.string,
  cx: _propTypes.default.number,
  cy: _propTypes.default.number,
  data: _propTypes.default.array.isRequired,
  domain: _propTypes.default.array,
  height: _propTypes.default.number,
  innerRadius: _propTypes.default.number,
  outerRadius: _propTypes.default.number,
  tick: _propTypes.default.bool,
  tickLine: _propTypes.default.bool,
  width: _propTypes.default.number
};
RadarChart.defaultProps = {
  cx: 210,
  cy: 140,
  height: 250,
  innerRadius: 0,
  outerRadius: 100,
  tick: false,
  tickLine: false,
  width: 420
};

/**
 * This function provides a custom clickable axis label with a data link to the index of the chart data
 * @param {Object} props the current props of the PolarAngleAxis
 */
function LabelWithClick(props) {
  const {
    activeAxis,
    className,
    index,
    payload,
    y,
    ...rest
  } = props;
  let selectedClass = '';
  if (activeAxis === index) {
    selectedClass = theme('tc-radar-chart-label--selected', className);
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("text", {
    ...rest,
    y: y,
    "data-axis-index": index,
    role: "button",
    className: selectedClass,
    children: payload.value
  });
}
LabelWithClick.displayName = 'LabelWithClick';
LabelWithClick.propTypes = {
  activeAxis: _propTypes.default.number,
  className: _propTypes.default.string,
  index: _propTypes.default.number,
  payload: _propTypes.default.object,
  y: _propTypes.default.number
};

/**
 * This function provides a custom dot with a data link to the index of the chart data
 * @param {Object} props the current props of the Radar
 */
function Dot(props) {
  const {
    activeAxis,
    index
  } = props;
  let newR = 4;
  if (activeAxis === index) {
    newR = 4;
  } else {
    newR = 2;
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_recharts.Dot, {
    ...props,
    fillOpacity: 1,
    r: newR
  });
}
Dot.displayName = 'Dot';
Dot.propTypes = {
  activeAxis: _propTypes.default.number,
  index: _propTypes.default.number
};

/**
 * This function provides a clickable axis dot element
 * @param {Object} props the current props of the Radar
 */
function DotWithClick(props) {
  const {
    activeAxis,
    fill = _designTokens.default.coralColorNeutralBorder,
    index,
    onClick,
    ...rest
  } = props;
  const STATE = {
    DEFAULT_RADIUS: 2,
    DEFAULT_STROKE_WIDTH: 12,
    ACTIVE_RADIUS: 4,
    ACTIVE_STROKE_WIDTH: 8
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_recharts.Dot, {
    ...rest,
    fill: fill,
    fillOpacity: 1,
    onClick: params => onClick({
      ...params,
      index
    }),
    r: activeAxis === index ? STATE.ACTIVE_RADIUS : STATE.DEFAULT_RADIUS,
    role: "button",
    stroke: fill,
    strokeOpacity: 0,
    strokeWidth: activeAxis === index ? STATE.ACTIVE_STROKE_WIDTH : STATE.DEFAULT_STROKE_WIDTH,
    tabIndex: 0
  });
}
DotWithClick.displayName = 'DotWithClick';
DotWithClick.propTypes = {
  activeAxis: _propTypes.default.number,
  fill: _propTypes.default.string,
  index: _propTypes.default.number,
  onClick: _propTypes.default.func
};
RadarChart.LabelWithClick = LabelWithClick;
RadarChart.Dot = Dot;
RadarChart.DotWithClick = DotWithClick;
RadarChart.Radar = _recharts.Radar;
RadarChart.PolarAngleAxis = _recharts.PolarAngleAxis;
//# sourceMappingURL=RadarChart.component.js.map