@vtex/styleguide/lib/EXPERIMENTAL_Charts/ScatterChart/index.js

> VTEX Styleguide React components ([Docs](https://vtex.github.io/styleguide))

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _recharts = require("recharts");

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

var _uuid = require("uuid");

var _uuid2 = _interopRequireDefault(_uuid);

var _constants = require("./constants");

var _helpers = require("../helpers");

var _commonProps = require("../commonProps");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

var CustomTooltip = function CustomTooltip(props) {
  return props.payload.map(function (item) {
    return _react2.default.createElement("p", {
      key: (0, _uuid2.default)()
    }, item.dataKey + ": " + item.value);
  });
};

var ScatterChart = function ScatterChart(_ref) {
  var data = _ref.data,
      config = _ref.config,
      xAxisKey = _ref.xAxisKey,
      yAxisKey = _ref.yAxisKey,
      zAxisKey = _ref.zAxisKey;

  var _getChartDefaultProps = (0, _helpers.getChartDefaultProps)(config, _constants.commonDefaultProps),
      configs = _getChartDefaultProps.configs;

  return _react2.default.createElement(_recharts.ResponsiveContainer, configs.container, _react2.default.createElement(_recharts.ScatterChart, {
    data: data
  }, _react2.default.createElement(_recharts.CartesianGrid, configs.grid), _react2.default.createElement(_recharts.XAxis, _extends({
    dataKey: xAxisKey
  }, configs.xAxis)), _react2.default.createElement(_recharts.YAxis, _extends({
    dataKey: yAxisKey
  }, configs.yAxis)), zAxisKey && _react2.default.createElement(_recharts.ZAxis, {
    dataKey: zAxisKey,
    range: (0, _helpers.getRangeOfZAxis)(zAxisKey, data)
  }), _react2.default.createElement(_recharts.Tooltip, {
    cursor: false,
    content: _react2.default.createElement(CustomTooltip, null)
  }), _react2.default.createElement(_recharts.Scatter, {
    fill: _commonProps.colors[0]
  })));
};

ScatterChart.propTypes = {
  /** The source data, in which each element is an object. */
  data: _propTypes2.default.arrayOf(_propTypes2.default.object).isRequired,

  /** The config prop changes some styles of the chart. This prop should be given as an object.*/
  config: _propTypes2.default.shape({
    xAxis: _propTypes2.default.shape({
      axisLine: _propTypes2.default.bool,
      tickLine: _propTypes2.default.bool,
      tick: _propTypes2.default.bool,
      hide: _propTypes2.default.bool
    }),
    yAxis: _propTypes2.default.shape({
      axisLine: _propTypes2.default.bool,
      tickLine: _propTypes2.default.bool,
      tick: _propTypes2.default.bool,
      hide: _propTypes2.default.bool
    }),
    container: _propTypes2.default.shape({
      height: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
      width: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number])
    }),
    grid: _propTypes2.default.shape({
      horizontal: _propTypes2.default.bool,
      vertical: _propTypes2.default.bool
    })
  }),

  /** The key of x-axis which is corresponding to the data. */
  xAxisKey: _propTypes2.default.string.isRequired,

  /** The keys of y-axis which is corresponding to the data. */
  yAxisKey: _propTypes2.default.string.isRequired,

  /** The keys or getter of a group of data which should be unique in a ScatterChart. */
  dataKeys: _propTypes2.default.arrayOf(_propTypes2.default.string).isRequired,

  /** The key of y-axis which is corresponding to the data, it measures size of dot. */
  zAxisKey: _propTypes2.default.string.isRequired
};
exports.default = ScatterChart;