@vtex/styleguide/lib/EXPERIMENTAL_Charts/BarChart/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 _helpers = require("../helpers");

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

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 BarChart = function BarChart(_ref) {
  var config = _ref.config,
      xAxisKey = _ref.xAxisKey,
      data = _ref.data,
      yAxisKey = _ref.yAxisKey,
      barProps = _ref.barProps;

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

  var _getBarDefaultProps = (0, _helpers.getBarDefaultProps)(barProps),
      barConfigs = _getBarDefaultProps.barConfigs;

  var dataKey = barConfigs.layout == _constants.Layout.HORIZONTAL ? yAxisKey : xAxisKey;
  return _react2.default.createElement(_recharts.ResponsiveContainer, configs.container, _react2.default.createElement(_recharts.BarChart, _extends({
    data: data,
    barCategoryGap: _constants.BAR_GAP
  }, barConfigs), _react2.default.createElement(_recharts.CartesianGrid, configs.grid), _react2.default.createElement(_recharts.XAxis, _extends({
    dataKey: xAxisKey,
    dy: -5
  }, configs.xAxis)), _react2.default.createElement(_recharts.YAxis, _extends({
    dataKey: yAxisKey,
    dy: 10
  }, configs.yAxis)), _react2.default.createElement(_recharts.Tooltip, _commonProps.tooltipProps), _react2.default.createElement(_recharts.Bar, {
    dataKey: dataKey,
    fill: _commonProps.colors[1],
    radius: [3, 3, 0, 0]
  })));
};

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

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

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

  /** The schema prop changes some styles of the chart.
   * This prop should be given as an object. Check an example [here](/#/Components/Charts/LineChart?id=chart-config)*/
  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
    })
  }),

  /** An object that will change specific bar props, like the orientation */
  barProps: _propTypes2.default.object
};
exports.default = BarChart;