'use strict';

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

var _objectDestructuringEmpty2 = require('babel-runtime/helpers/objectDestructuringEmpty');

var _objectDestructuringEmpty3 = _interopRequireDefault(_objectDestructuringEmpty2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _Codeblock = require('./Codeblock');

var _Codeblock2 = _interopRequireDefault(_Codeblock);

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

var _jsxFileName = '/Users/hshoff/code/vx/packages/vx-demo/components/codeblocks/BrushChartCode.js';

exports.default = function (_ref) {
  (0, _objectDestructuringEmpty3.default)(_ref);

  return _react2.default.createElement(_Codeblock2.default, {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 6
    }
  }, '// BrushChart.js\nimport React from \'react\';\nimport Mock from \'@vx/mock-data\';\nimport Scale from \'@vx/scale\';\nimport Group from \'@vx/group\';\nimport Axis from \'@vx/axis\';\nimport Brush from \'@vx/brush\';\nimport colors from \'../util/sillyColorScale\';\nimport { Motion, spring } from \'react-motion\';\n\nconst points = Mock.genRandomNormalPoints();\n\nclass BrushChart extends React.Component {\n  constructor(props) {\n    super(props);\n    const { width, height, margin } = props;\n\n    this.extent = {\n      x0: margin.left,\n      x1: width - margin.left,\n      y0: margin.top,\n      y1: height - margin.top,\n    };\n\n    this.initialDomain = {\n      x: [-4.5, 4.5],\n      y: [-4.5 / 2, 4.5 / 2]\n    };\n\n    this.xScale = Scale.scaleLinear({\n      domain: this.initialDomain.x,\n      range: [0, width - margin.left - margin.right],\n      clamp: true,\n    });\n\n    this.yScale = Scale.scaleLinear({\n      domain: this.initialDomain.y,\n      range: [height - margin.top - margin.bottom, 0],\n      clamp: true,\n    });\n\n    this.handleMouseDown = this.handleMouseDown.bind(this);\n    this.handleMouseMove = this.handleMouseMove.bind(this);\n    this.handleMouseUp = this.handleMouseUp.bind(this);\n  }\n\n  scaleReset() {\n    const { xScale, yScale, initialDomain } = this;\n    xScale.domain(initialDomain.x);\n    yScale.domain(initialDomain.y);\n  }\n\n  handleMouseDown(event) {\n    const { onBrushStart } = this.props;\n    const { extent: region } = this;\n    const { x, y } = Brush.getCoordsFromEvent(this.svg, event);\n    onBrushStart(Brush.constrainToRegion({ region, x, y }));\n  }\n\n  handleMouseMove(event) {\n    const { brush, onBrushDrag, updateBrush } = this.props;\n    // only update the brush region if we\'re dragging\n    if (!brush.isBrushing) return;\n    const { extent: region } = this;\n    const { x, y } = Brush.getCoordsFromEvent(this.svg, event);\n    onBrushDrag(Brush.constrainToRegion({ region, x, y }));\n  }\n\n  handleMouseUp(event) {\n    const { brush, onBrushEnd, onBrushReset } = this.props;\n    const { extent: region } = this;\n    if (brush.end) {\n      const { x, y } = Brush.getCoordsFromEvent(this.svg, event);\n      onBrushEnd(Brush.constrainToRegion({ region, x, y }));\n      return;\n    }\n    onBrushReset(event);\n    this.scaleReset();\n  }\n\n  render() {\n    const { width, height, brush, margin } = this.props;\n    const { xScale, yScale } = this;\n\n    const x = d => d[0];\n    const y = d => d[1];\n    const z = d => d[2];\n\n    const xMax = width - margin.left - margin.right;\n    const yMax = height - margin.top - margin.bottom;\n\n    if (brush.domain) {\n      const { domain } = brush;\n      const { x0, x1, y0, y1 } = domain;\n      xScale.domain([x0, x1].map(d => d - margin.left).map(xScale.invert));\n      yScale.domain([y1, y0].map(d => d - margin.top).map(yScale.invert));\n    }\n\n    return (\n      <svg\n        ref={(c) => { this.svg = c; }}\n        width={width}\n        height={height}\n        onMouseDown={this.handleMouseDown}\n        onMouseMove={this.handleMouseMove}\n        onMouseUp={this.handleMouseUp}\n      >\n        <Axis.AxisBottom\n          scale={xScale}\n          top={yMax + margin.top}\n          left={margin.left}\n          label={\'\'}\n          stroke={\'#1b1a1e\'}\n          tickTextFill={\'#1b1a1e\'}\n        />\n        <Axis.AxisLeft\n          scale={yScale}\n          top={margin.top}\n          left={margin.left}\n          label={\'\'}\n          stroke={\'#1b1a1e\'}\n          tickTextFill={\'#1b1a1e\'}\n        />\n        <Group top={margin.top} left={margin.left}>\n          {points.map((point) => {\n            return (\n              <Motion\n                key={"%{x(point)}-%{y(point)}-%{z(point)}"}\n                defaultStyle={{ x: xMax / 2, y: yMax / 2 }}\n                style={{\n                  x: spring(xScale(x(point))),\n                  y: spring(yScale(y(point))),\n                }}>\n                {interpolatingStyle => {\n                  return (\n                    <circle\n                      fill={colors(z(point))}\n                      cx={interpolatingStyle.x}\n                      cy={interpolatingStyle.y}\n                      r={3}\n                    />\n                  );\n                }}\n              </Motion>\n            );\n          })}\n        </Group>\n        <Brush.BoxBrush brush={brush} />\n      </svg>\n    );\n  }\n}\n\nexport default Brush.withBrush(BrushChart);\n');
};