@vtex/styleguide/lib/EXPERIMENTAL_Charts/LineChart/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 _zipWith = require("lodash/zipWith");

var _zipWith2 = _interopRequireDefault(_zipWith);

var _curry = require("lodash/curry");

var _curry2 = _interopRequireDefault(_curry);

var _recharts = require("recharts");

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _uuid = require("uuid");

var _uuid2 = _interopRequireDefault(_uuid);

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

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

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 renderLine = function renderLine(lineConfigs, key, color) {
  return _react2.default.createElement(_recharts.Line, _extends({
    key: (0, _uuid2.default)(),
    dataKey: key,
    stroke: color
  }, lineConfigs));
};

var LineChart = function LineChart(_ref) {
  var data = _ref.data,
      dataKeys = _ref.dataKeys,
      xAxisKey = _ref.xAxisKey,
      config = _ref.config,
      tooltipFormatter = _ref.tooltipFormatter,
      lineProps = _ref.lineProps;

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

  var _getLineDefaultProps = (0, _helpers.getLineDefaultProps)(lineProps),
      lineConfigs = _getLineDefaultProps.lineConfigs;

  return _react2.default.createElement(_recharts.ResponsiveContainer, configs.container, _react2.default.createElement(_recharts.LineChart, _extends({
    data: data
  }, configs.lineChart), _react2.default.createElement(_recharts.CartesianGrid, configs.grid), _react2.default.createElement(_recharts.XAxis, _extends({
    dataKey: xAxisKey
  }, configs.xAxis)), _react2.default.createElement(_recharts.YAxis, configs.yAxis), _react2.default.createElement(_recharts.Tooltip, _extends({
    formatter: tooltipFormatter
  }, _commonProps.tooltipProps, configs.tooltip)), (0, _zipWith2.default)(dataKeys, _commonProps.colors, (0, _curry2.default)(renderLine)(lineConfigs))));
};

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

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

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

  /** The formatter function of value in tooltip. If you return an array, the first entry will be the formatted "value", and the second entry will be the formatted "key" */
  tooltipFormatter: _propTypes2.default.func,

  /** The config prop changes some styles of the chart. This prop should be given as an object.*/
  config: _propTypes2.default.shape({
    /** Container custom configuration (according to the Recharts API) */
    container: _propTypes2.default.object,

    /** LineChart custom configuration (according to the Recharts API) */
    lineChart: _propTypes2.default.object,

    /** XAxis custom configuration (according to the Recharts API) */
    xAxis: _propTypes2.default.object,

    /** YAxis custom configuration (according to the Recharts API) */
    yAxis: _propTypes2.default.object,

    /** Grid custom configuration (according to the Recharts API) */
    grid: _propTypes2.default.object,

    /** Tooltip custom configuration (according to the Recharts API) */
    tooltip: _propTypes2.default.object
  }),

  /** The interpolation defines how data points should be connected when creating a path.*/
  lineProps: _propTypes2.default.object
};
exports.default = LineChart;