'use strict';

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

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _from = require('babel-runtime/core-js/array/from');

var _from2 = _interopRequireDefault(_from);

var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _shape = require('@vx/shape');

var _group = require('@vx/group');

var _curve = require('@vx/curve');

var _pattern = require('@vx/pattern');

var _scale = require('@vx/scale');

var _mockData = require('@vx/mock-data');

var _d3TimeFormat = require('d3-time-format');

var _d3Array = require('d3-array');

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

var _jsxFileName = '/Users/hshoff/code/vx/packages/vx-demo/components/tiles/streamgraph.js';
// Inspired by Mike Bostocks Streamgraph bumps
// https://bl.ocks.org/mbostock/4060954

// utils
var max = function max(data, accessor) {
  return Math.max.apply(Math, (0, _toConsumableArray3.default)(data.map(accessor)));
};
var min = function min(data, accessor) {
  return Math.min.apply(Math, (0, _toConsumableArray3.default)(data.map(accessor)));
};
var extent = function extent(data, accessor) {
  return [min(data, accessor), max(data, accessor)];
};
var range = function range(n) {
  return (0, _from2.default)(Array(n), function (d, i) {
    return i;
  });
};

var numLayers = 20;
var samplesPerLayer = 200;
var bumpsPerLayer = 10;

var keys = range(numLayers);

function bumps(n, m) {
  var a = [],
      i;
  for (i = 0; i < n; ++i) {
    a[i] = 0;
  }for (i = 0; i < m; ++i) {
    bump(a, n);
  }return a;
}

function bump(a, n) {
  var x = 1 / (0.1 + Math.random()),
      y = 2 * Math.random() - 0.5,
      z = 10 / (0.1 + Math.random());
  for (var i = 0; i < n; i++) {
    var w = (i / n - y) * z;
    a[i] += x * Math.exp(-w * w);
  }
}

var Streamgraph = function (_React$Component) {
  (0, _inherits3.default)(Streamgraph, _React$Component);

  function Streamgraph() {
    (0, _classCallCheck3.default)(this, Streamgraph);

    return (0, _possibleConstructorReturn3.default)(this, (Streamgraph.__proto__ || (0, _getPrototypeOf2.default)(Streamgraph)).apply(this, arguments));
  }

  (0, _createClass3.default)(Streamgraph, [{
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _props = this.props,
          width = _props.width,
          height = _props.height,
          _props$events = _props.events,
          events = _props$events === undefined ? false : _props$events,
          _props$margin = _props.margin,
          margin = _props$margin === undefined ? {
        top: 40
      } : _props$margin;

      if (width < 10) return null;

      var layers = (0, _d3Array.transpose)(keys.map(function (d) {
        return bumps(samplesPerLayer, bumpsPerLayer);
      }));

      var xScale = (0, _scale.scaleLinear)({
        range: [0, width],
        domain: [0, samplesPerLayer - 1]
      });
      var yScale = (0, _scale.scaleLinear)({
        range: [height, 0],
        domain: [-30, 50]
      });
      var zScale = (0, _scale.scaleOrdinal)({
        domain: keys,
        range: ['#ffc409', '#f14702', '#262d97', 'white', '#036ecd', '#9ecadd', '#51666e']
      });
      var patternScale = (0, _scale.scaleOrdinal)({
        domain: keys,
        range: ['mustard', 'cherry', 'navy', 'circles', 'circles', 'circles', 'circles']
      });

      return _react2.default.createElement('svg', { width: width, height: height, __source: {
          fileName: _jsxFileName,
          lineNumber: 77
        }
      }, _react2.default.createElement(_pattern.PatternCircles, { id: 'mustard', height: 40, width: 40, radius: 5, fill: '#036ecf', complement: true, __source: {
          fileName: _jsxFileName,
          lineNumber: 78
        }
      }), _react2.default.createElement(_pattern.PatternWaves, {
        id: 'cherry',
        height: 12,
        width: 12,
        fill: 'transparent',
        stroke: '#232493',
        strokeWidth: 1,
        complement: true,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 79
        }
      }), _react2.default.createElement(_pattern.PatternCircles, { id: 'navy', height: 60, width: 60, radius: 10, fill: 'white', complement: true, __source: {
          fileName: _jsxFileName,
          lineNumber: 88
        }
      }), _react2.default.createElement(_pattern.PatternCircles, {
        id: 'circles',
        height: 60,
        width: 60,
        radius: 10,
        fill: 'transparent',
        complement: true,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 89
        }
      }), _react2.default.createElement('g', { onClick: function onClick(event) {
          return _this2.forceUpdate();
        }, onTouchStart: function onTouchStart(event) {
          return _this2.forceUpdate();
        }, __source: {
          fileName: _jsxFileName,
          lineNumber: 97
        }
      }, _react2.default.createElement('rect', { x: 0, y: 0, width: width, height: height, fill: '#ffdede', rx: 14, __source: {
          fileName: _jsxFileName,
          lineNumber: 98
        }
      }), _react2.default.createElement(_shape.Stack, {
        data: layers,
        keys: keys,
        offset: 'wiggle',
        x: function x(d, i) {
          return xScale(i);
        },
        y0: function y0(d) {
          return yScale(d[0]);
        },
        y1: function y1(d) {
          return yScale(d[1]);
        },
        render: function render(_ref) {
          var seriesData = _ref.seriesData,
              path = _ref.path;

          return seriesData.map(function (series, i) {
            return _react2.default.createElement('g', { key: 'series-' + series.key, __source: {
                fileName: _jsxFileName,
                lineNumber: 109
              }
            }, _react2.default.createElement('path', { d: path(series), fill: zScale(series.key), __source: {
                fileName: _jsxFileName,
                lineNumber: 110
              }
            }), patternScale(series.key) !== 'circles' && _react2.default.createElement('path', { d: path(series), fill: 'url(#' + patternScale(series.key) + ')', __source: {
                fileName: _jsxFileName,
                lineNumber: 112
              }
            }));
          });
        },
        __source: {
          fileName: _jsxFileName,
          lineNumber: 99
        }
      })));
    }
  }]);

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

// // utils
// const max = (data, accessor) => Math.max(...data.map(accessor));
// const min = (data, accessor) => Math.min(...data.map(accessor));
// const extent = (data, accessor) => [
//   min(data, accessor),
//   max(data, accessor),
// ];

// // accessors
// const x = d => parseDate(d.date);
// const y = d => d.value;

// // data formatting + parsing
// const parseDate = timeParse('%Y%m%d');
// const keys = Object.keys(cityTemperature[0]).filter(
//   d => d !== 'date',
// );
// const totals = cityTemperature.reduce((ret, cur) => {
//   const t = keys.reduce((dailyTotal, k) => {
//     dailyTotal += +cur[k];
//     return dailyTotal;
//   }, 0);
//   ret.push(t);
//   return ret;
// }, []);

// export default class Streamgraph extends React.Component {
//   constructor(props) {
//     super(props);
//     this.state = { activeKey: undefined };
//     this.handleMouseEnter = this.handleMouseEnter.bind(this);
//     this.handleMouseLeave = this.handleMouseLeave.bind(this);
//   }
//   handleMouseEnter(key) {
//     this.setState({ activeKey: key });
//   }
//   handleMouseLeave() {
//     this.setState({ activeKey: undefined });
//   }
//   render() {
// const {
//   width,
//   height,
//   events = false,
//   margin = {
//     top: 40,
//   },
// } = this.props;
// if (width < 10) return null;

//     // bounds
//     const xMax = width;
//     const yMax = height - margin.top - 100;

//     // scales
//     const xScale = scaleTime({
//       range: [0, xMax],
//       domain: extent(cityTemperature, x),
//     });
//     const yScale = scaleLinear({
//       rangeRound: [yMax, 0],
//       domain: [0, max(totals, d => d)],
//     });
// const zScale = scaleOrdinal({
//   domain: keys,
//   range: ['#ffc409', '#f14702', '#262d97'],
// });
// const patternScale = scaleOrdinal({
//   domain: keys,
//   range: ['mustard', 'cherry', 'navy'],
// });

//     return (
// <div style={{ position: 'relative' }}>
//   <svg width={width} height={height}>
//     <PatternCircles
//       id="mustard"
//       height={40}
//       width={40}
//       radius={5}
//       fill="#036ecf"
//       complement
//     />
//     <PatternWaves
//       id="cherry"
//       height={12}
//       width={12}
//       fill="transparent"
//       stroke="#232493"
//       strokeWidth={1}
//       complement
//     />
//     <PatternCircles
//       id="navy"
//       height={60}
//       width={60}
//       radius={10}
//       fill="white"
//       complement
//     />
//     <rect
//       x={0}
//       y={0}
//       width={width}
//       height={height}
//       fill={`#ffdede`}
//       rx={14}
//     />
//           <Stack
//             data={cityTemperature}
//             keys={keys}
//             offset="wiggle"
//             curve={curveBasis}
//             x={d => xScale(x(d.data))}
//             y0={d => yScale(d[0])}
//             y1={d => yScale(d[1])}
//             fill={d => zScale(d.series.key)}
//             fillOpacity={d =>
//               this.state.activeKey
//                 ? d.series.key !== this.state.activeKey ? 0.4 : 1
//                 : 1}
//           />
//           <Stack
//             data={cityTemperature}
//             keys={keys}
//             offset="wiggle"
//             curve={curveBasis}
//             x={d => xScale(x(d.data))}
//             y0={d => yScale(d[0])}
//             y1={d => yScale(d[1])}
//             fill={d => `url(#${patternScale(d.series.key)})`}
//             onMouseEnter={d => event =>
//               this.handleMouseEnter(d.series.key)}
//             onMouseLeave={d => event => this.handleMouseLeave()}
//           />
//         </svg>
//       </div>
//     );
//   }
// }


exports.default = Streamgraph;
//# sourceMappingURL=data:application/json;charset=utf-8;base64, 