victory-chart/lib/components/victory-scatter/victory-scatter.js

Chart Component for Victory

"use strict";

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

var _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; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _pick = require("lodash/pick");

var _pick2 = _interopRequireDefault(_pick);

var _omit = require("lodash/omit");

var _omit2 = _interopRequireDefault(_omit);

var _defaults = require("lodash/defaults");

var _defaults2 = _interopRequireDefault(_defaults);

var _assign = require("lodash/assign");

var _assign2 = _interopRequireDefault(_assign);

var _point = require("./point");

var _point2 = _interopRequireDefault(_point);

var _pointLabel = require("./point-label");

var _pointLabel2 = _interopRequireDefault(_pointLabel);

var _scale = require("../../helpers/scale");

var _scale2 = _interopRequireDefault(_scale);

var _domain = require("../../helpers/domain");

var _domain2 = _interopRequireDefault(_domain);

var _data = require("../../helpers/data");

var _data2 = _interopRequireDefault(_data);

var _victoryCore = require("victory-core");

var _helperMethods = require("./helper-methods");

var _helperMethods2 = _interopRequireDefault(_helperMethods);

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var defaultStyles = {
  data: {
    fill: "#756f6a",
    opacity: 1,
    stroke: "transparent",
    strokeWidth: 0
  },
  labels: {
    stroke: "transparent",
    fill: "#756f6a",
    fontFamily: "Helvetica",
    fontSize: 10,
    textAnchor: "middle",
    padding: 5
  }
};

var VictoryScatter = function (_React$Component) {
  _inherits(VictoryScatter, _React$Component);

  function VictoryScatter() {
    _classCallCheck(this, VictoryScatter);

    return _possibleConstructorReturn(this, Object.getPrototypeOf(VictoryScatter).apply(this, arguments));
  }

  _createClass(VictoryScatter, [{
    key: "componentWillMount",
    value: function componentWillMount() {
      this.state = {
        dataState: {},
        labelsState: {}
      };
    }
  }, {
    key: "getDataStyles",
    value: function getDataStyles(data, style) {
      var stylesFromData = (0, _omit2.default)(data, ["x", "y", "z", "size", "symbol", "name", "label"]);
      var baseDataStyle = (0, _defaults2.default)({}, stylesFromData, style);
      return _victoryCore.Helpers.evaluateStyle(baseDataStyle, data);
    }
  }, {
    key: "getSharedProps",
    value: function getSharedProps(datum, index, calculatedProps) {
      var style = calculatedProps.style;

      var position = {
        x: calculatedProps.scale.x.call(null, datum.x),
        y: calculatedProps.scale.y.call(null, datum.y)
      };

      var baseSize = _helperMethods2.default.getSize(datum, this.props, calculatedProps);

      var symbol = _helperMethods2.default.getSymbol(datum, this.props);

      return { index: index, datum: datum, baseSize: baseSize, symbol: symbol, style: style, position: position };
    }
  }, {
    key: "addDataProps",
    value: function addDataProps(sharedProps, getBoundEvents) {
      var datum = sharedProps.datum;
      var style = sharedProps.style;
      var index = sharedProps.index;
      var baseSize = sharedProps.baseSize;


      var dataStyle = this.getDataStyles(datum, style.data);
      var size = _victoryCore.Helpers.evaluateProp(baseSize, datum);
      var events = getBoundEvents(this.props.events.data, "data");

      return (0, _assign2.default)({}, sharedProps, { key: "point-" + index, style: dataStyle, events: events, size: size }, this.state.dataState[index]);
    }
  }, {
    key: "addLabelProps",
    value: function addLabelProps(sharedProps, dataProps, getBoundEvents) {
      var datum = sharedProps.datum;
      var style = sharedProps.style;
      var index = sharedProps.index;

      var dataStyle = dataProps.style;
      var size = dataProps.size;


      var matchedStyle = (0, _pick2.default)(dataStyle, ["opacity", "fill"]);
      var padding = style.labels.padding || size * 0.25;
      var baseLabelStyle = (0, _defaults2.default)({}, style.labels, matchedStyle, { padding: padding });
      var labelStyle = _victoryCore.Helpers.evaluateStyle(baseLabelStyle, datum);

      var events = getBoundEvents(this.props.events.labels, "labels");

      return (0, _assign2.default)({}, sharedProps, { style: labelStyle, labelComponent: this.props.labelComponent, events: events }, this.state.labelsState[index]);
    }
  }, {
    key: "renderPoint",
    value: function renderPoint(datum, index, calculatedProps) {
      var getBoundEvents = _victoryCore.Helpers.getEvents.bind(this);
      var sharedProps = this.getSharedProps(datum, index, calculatedProps);
      var dataProps = this.addDataProps(sharedProps, getBoundEvents);
      var pointComponent = _react2.default.cloneElement(this.props.dataComponent, dataProps);
      if (datum.label) {
        var labelProps = this.addLabelProps(sharedProps, dataProps, getBoundEvents);
        return _react2.default.createElement(
          "g",
          { key: "point-group-" + index },
          pointComponent,
          _react2.default.createElement(_pointLabel2.default, labelProps)
        );
      }
      return pointComponent;
    }
  }, {
    key: "renderData",
    value: function renderData(props, style) {
      var _this2 = this;

      var data = _data2.default.getData(props);
      var range = {
        x: _victoryCore.Helpers.getRange(props, "x"),
        y: _victoryCore.Helpers.getRange(props, "y")
      };
      var domain = {
        x: _domain2.default.getDomain(props, "x"),
        y: _domain2.default.getDomain(props, "y")
      };
      var scale = {
        x: _scale2.default.getBaseScale(props, "x").domain(domain.x).range(range.x),
        y: _scale2.default.getBaseScale(props, "y").domain(domain.y).range(range.y)
      };
      var z = props.bubbleProperty || "z";
      var calculatedProps = { data: data, scale: scale, style: style, z: z };
      return data.map(function (datum, index) {
        return _this2.renderPoint(datum, index, calculatedProps);
      });
    }
  }, {
    key: "render",
    value: function render() {
      // If animating, return a `VictoryAnimation` element that will create
      // a new `VictoryScatter` with nearly identical props, except (1) tweened
      // and (2) `animate` set to null so we don't recurse forever.
      if (this.props.animate) {
        // Do less work by having `VictoryAnimation` tween only values that
        // make sense to tween. In the future, allow customization of animated
        // prop whitelist/blacklist?
        var whitelist = ["data", "domain", "height", "maxBubbleSize", "padding", "samples", "size", "style", "width", "x", "y"];
        return _react2.default.createElement(
          _victoryCore.VictoryTransition,
          { animate: this.props.animate, animationWhitelist: whitelist },
          _react2.default.createElement(VictoryScatter, this.props)
        );
      }

      var style = _victoryCore.Helpers.getStyles(this.props.style, defaultStyles, "auto", "100%");
      var group = _react2.default.createElement(
        "g",
        { style: style.parent },
        this.renderData(this.props, style)
      );
      return this.props.standalone ? _react2.default.createElement(
        "svg",
        _extends({
          style: style.parent,
          viewBox: "0 0 " + this.props.width + " " + this.props.height
        }, this.props.events.parent),
        group
      ) : group;
    }
  }]);

  return VictoryScatter;
}(_react2.default.Component);

VictoryScatter.role = "scatter";
VictoryScatter.defaultTransitions = {
  onExit: {
    duration: 600,
    before: function before() {
      return { opacity: 0 };
    }
  },
  onEnter: {
    duration: 600,
    before: function before() {
      return { opacity: 0 };
    },
    after: function after(datum) {
      return { opacity: datum.opacity || 1 };
    }
  }
};
VictoryScatter.propTypes = {
  /**
   * The animate prop specifies props for VictoryAnimation to use. The animate prop should
   * also be used to specify enter and exit transition configurations with the `onExit`
   * and `onEnter` namespaces respectively.
   * @examples {duration: 500, onEnd: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}
   */
  animate: _react.PropTypes.object,
  /**
   * The categories prop specifies how categorical data for a chart should be ordered.
   * This prop should be given as an array of string values, or an object with
   * these arrays of values specified for x and y. If this prop is not set,
   * categorical data will be plotted in the order it was given in the data array
   * @examples ["dogs", "cats", "mice"]
   */
  categories: _react.PropTypes.oneOfType([_react.PropTypes.arrayOf(_react.PropTypes.string), _react.PropTypes.shape({
    x: _react.PropTypes.arrayOf(_react.PropTypes.string),
    y: _react.PropTypes.arrayOf(_react.PropTypes.string)
  })]),
  /**
   * The bubbleProperty prop indicates which property of the data object should be used
   * to scale data points in a bubble chart
   */
  bubbleProperty: _react.PropTypes.string,
  /**
   * The data prop specifies the data to be plotted.
   * Data should be in the form of an array of data points.
   * Each data point may be any format you wish (depending on the `x` and `y` accessor props),
   * but by default, an object with x and y properties is expected.
   * Other properties may be added to the data point object, such as fill, size, and symbol.
   * These properties will be interpreted and applied to the individual lines
   * @examples [{x: 1, y: 2, fill: "red"}, {x: 2, y: 3, label: "foo"}]
   */

  data: _react.PropTypes.array,
  /**
   * The dataComponent prop takes an entire, HTML-complete data component which will be used to
   * create points for each datum in the scatter plot. The new element created from the passed
   * dataComponent will have the property datum set by the scatter for the point it renders;
   * properties position (x, y), size and symbol are calculated by the scatter for the datum;
   * a key and index property set corresponding to the location of the datum in the data
   * provided to the scatter; style calculated by the scatter based on the scatter's
   * styles and the datum; and all the remaining properties from the scatter's data
   * at the index of the datum. If a dataComponent is not provided, VictoryScatter's
   * Point component will be used.
   */
  dataComponent: _react.PropTypes.element,
  /**
   * The domain prop describes the range of values your chart will include. This prop can be
   * given as a array of the minimum and maximum expected values for your chart,
   * or as an object that specifies separate arrays for x and y.
   * If this prop is not provided, a domain will be calculated from data, or other
   * available information.
   * @examples [-1, 1], {x: [0, 100], y: [0, 1]}
   */
  domain: _react.PropTypes.oneOfType([_victoryCore.PropTypes.domain, _react.PropTypes.shape({
    x: _victoryCore.PropTypes.domain,
    y: _victoryCore.PropTypes.domain
  })]),
  /**
   * The events prop attaches arbitrary event handlers to data and label elements
   * Event handlers are called with their corresponding events, corresponding component props,
   * and their index in the data array, and event name. The return value of event handlers
   * will be stored by unique index on the state object of VictoryScatter
   * i.e. `this.state.dataState[dataIndex] = {style: {fill: "red"}...}`, and will be
   * applied by index to the appropriate child component. Event props on the
   * parent namespace are just spread directly on to the top level svg of VictoryScatter
   * if one exists. If VictoryScatter is set up to render g elements i.e. when it is
   * rendered within chart, or when `standalone={false}` parent events will not be applied.
   *
   * @examples {data: {
   *  onClick: () => onClick: () => return {style: {fill: "green"}}
   *}}
   */
  events: _react.PropTypes.shape({
    data: _react.PropTypes.object,
    labels: _react.PropTypes.object,
    parent: _react.PropTypes.object
  }),
  /**
   * The height props specifies the height the svg viewBox of the chart container.
   * This value should be given as a number of pixels
   */
  height: _victoryCore.PropTypes.nonNegative,
  /**
   * The labelComponent prop takes in an entire, HTML-complete label component which will be used
   * to create labels for each point in the scatter plot. The new element created from the passed
   * labelComponent will have property data provided by the point's datum; properties
   * position (x, y), dy, textAnchor, and verticalAnchor preserved or default values
   * provided by the point; and styles filled out with defaults from the scatter,
   * and overrides from the datum. If labelComponent is omitted, a new VictoryLabel
   * will be created with props and styles from the point.
   */
  labelComponent: _react.PropTypes.element,
  /**
   * The maxBubbleSize prop sets an upper limit for scaling data points in a bubble chart
   */
  maxBubbleSize: _victoryCore.PropTypes.nonNegative,
  /**
   * The padding props specifies the amount of padding in number of pixels between
   * the edge of the chart and any rendered child components. This prop can be given
   * as a number or as an object with padding specified for top, bottom, left
   * and right.
   */
  padding: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.shape({
    top: _react.PropTypes.number,
    bottom: _react.PropTypes.number,
    left: _react.PropTypes.number,
    right: _react.PropTypes.number
  })]),
  /**
   * The samples prop specifies how many individual points to plot when plotting
   * y as a function of x. Samples is ignored if x props are provided instead.
   */
  samples: _victoryCore.PropTypes.nonNegative,
  /**
   * The scale prop determines which scales your chart should use. This prop can be
   * given as a string specifying a supported scale ("linear", "time", "log", "sqrt"),
   * as a d3 scale function, or as an object with scales specified for x and y
   * @exampes d3Scale.time(), {x: "linear", y: "log"}
   */
  scale: _react.PropTypes.oneOfType([_victoryCore.PropTypes.scale, _react.PropTypes.shape({
    x: _victoryCore.PropTypes.scale,
    y: _victoryCore.PropTypes.scale
  })]),
  /**
   * The size prop determines how to scale each data point
   */
  size: _react.PropTypes.oneOfType([_victoryCore.PropTypes.nonNegative, _react.PropTypes.func]),
  /**
   * The standalone prop determines whether the component will render a standalone svg
   * or a <g> tag that will be included in an external svg. Set standalone to false to
   * compose VictoryScatter with other components within an enclosing <svg> tag.
   */
  standalone: _react.PropTypes.bool,
  /**
   * The style prop specifies styles for your VictoryScatter. Any valid inline style properties
   * will be applied. Height, width, and padding should be specified via the height,
   * width, and padding props, as they are used to calculate the alignment of
   * components within chart.
   * @examples {data: {fill: "red"}, labels: {fontSize: 12}}
   */
  style: _react.PropTypes.shape({
    parent: _react.PropTypes.object,
    data: _react.PropTypes.object,
    labels: _react.PropTypes.object
  }),
  /**
   * The symbol prop determines which symbol should be drawn to represent data points.
   */
  symbol: _react.PropTypes.oneOfType([_react.PropTypes.oneOf(["circle", "diamond", "plus", "square", "star", "triangleDown", "triangleUp"]), _react.PropTypes.func]),
  /**
   * The width props specifies the width of the svg viewBox of the chart container
   * This value should be given as a number of pixels
   */
  width: _victoryCore.PropTypes.nonNegative,
  /**
   * The x prop specifies how to access the X value of each data point.
   * If given as a function, it will be run on each data point, and returned value will be used.
   * If given as an integer, it will be used as an array index for array-type data points.
   * If given as a string, it will be used as a property key for object-type data points.
   * If given as an array of strings, or a string containing dots or brackets,
   * it will be used as a nested object property path (for details see Lodash docs for _.get).
   * If `null` or `undefined`, the data value will be used as is (identity function/pass-through).
   * @examples 0, 'x', 'x.value.nested.1.thing', 'x[2].also.nested', null, d => Math.sin(d)
   */
  x: _react.PropTypes.oneOfType([_react.PropTypes.func, _victoryCore.PropTypes.allOfType([_victoryCore.PropTypes.integer, _victoryCore.PropTypes.nonNegative]), _react.PropTypes.string, _react.PropTypes.arrayOf(_react.PropTypes.string)]),
  /**
   * The y prop specifies how to access the Y value of each data point.
   * If given as a function, it will be run on each data point, and returned value will be used.
   * If given as an integer, it will be used as an array index for array-type data points.
   * If given as a string, it will be used as a property key for object-type data points.
   * If given as an array of strings, or a string containing dots or brackets,
   * it will be used as a nested object property path (for details see Lodash docs for _.get).
   * If `null` or `undefined`, the data value will be used as is (identity function/pass-through).
   * @examples 0, 'y', 'y.value.nested.1.thing', 'y[2].also.nested', null, d => Math.sin(d)
   */
  y: _react.PropTypes.oneOfType([_react.PropTypes.func, _victoryCore.PropTypes.allOfType([_victoryCore.PropTypes.integer, _victoryCore.PropTypes.nonNegative]), _react.PropTypes.string, _react.PropTypes.arrayOf(_react.PropTypes.string)])
};
VictoryScatter.defaultProps = {
  events: {},
  height: 300,
  padding: 50,
  samples: 50,
  scale: "linear",
  size: 3,
  standalone: true,
  symbol: "circle",
  width: 450,
  x: "x",
  y: "y",
  dataComponent: _react2.default.createElement(_point2.default, null)
};
VictoryScatter.getDomain = _domain2.default.getDomain.bind(_domain2.default);
VictoryScatter.getData = _data2.default.getData.bind(_data2.default);
exports.default = VictoryScatter;