'use strict';

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

var _keys = require('babel-runtime/core-js/object/keys');

var _keys2 = _interopRequireDefault(_keys);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _mockData2 = _interopRequireDefault(_mockData);

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

var _scale2 = _interopRequireDefault(_scale);

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

var _group2 = _interopRequireDefault(_group);

var _axis = require('@vx/axis');

var _axis2 = _interopRequireDefault(_axis);

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

var _shape2 = _interopRequireDefault(_shape);

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

var _curve2 = _interopRequireDefault(_curve);

var _text = require('@vx/text');

var _text2 = _interopRequireDefault(_text);

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

var _d3Shape = require('d3-shape');

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

var _round = require('../util/round');

var _round2 = _interopRequireDefault(_round);

var _sillyColorScale = require('../util/sillyColorScale');

var _sillyColorScale2 = _interopRequireDefault(_sillyColorScale);

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

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

exports.default = function (_ref) {
  var margin = _ref.margin,
      width = _ref.width,
      height = _ref.height;

  var data = _mockData2.default.browserUsage;
  var keys = (0, _keys2.default)(data[0]).filter(function (k) {
    return k !== 'date';
  });

  var yMax = height - margin.top - margin.bottom;
  var xMax = width - margin.left - margin.right;

  var parseDate = (0, _d3TimeFormat.timeParse)("%Y %b %d");
  var _x = function _x(d) {
    return parseDate(d.date);
  };

  var stack = (0, _d3Shape.stack)().keys(keys);

  var xScale = _scale2.default.scaleTime({
    range: [0, xMax],
    domain: (0, _d3Array.extent)(data, _x)
  });
  var yScale = _scale2.default.scaleLinear({
    range: [yMax, 0]
  });

  return _react2.default.createElement('svg', { height: height, width: width, __source: {
      fileName: _jsxFileName,
      lineNumber: 40
    }
  }, _react2.default.createElement(_axis2.default.AxisLeft, {
    top: margin.top,
    left: margin.left,
    scale: yScale,
    tickFormat: function tickFormat(v) {
      return (0, _round2.default)(v * 100) + '%';
    },
    label: 'browser market share (%)',
    stroke: '#1b1a1e',
    tickTextFill: '#000',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 41
    }
  }), _react2.default.createElement(_group2.default, { top: margin.top, left: margin.left, __source: {
      fileName: _jsxFileName,
      lineNumber: 50
    }
  }, _react2.default.createElement(_shape2.default.AreaStack, {
    top: margin.top,
    left: margin.left,
    keys: keys,
    data: data,
    x: function x(d) {
      return xScale(_x(d.data));
    },
    y0: function y0(d) {
      return yScale(d[0] / 100);
    },
    y1: function y1(d) {
      return yScale(d[1] / 100);
    },
    fill: function fill(d, i) {
      return (0, _sillyColorScale2.default)(i);
    },
    fillOpacity: 0.8,
    stroke: function stroke(d, i) {
      return (0, _sillyColorScale2.default)(i);
    },
    strokeWidth: 1,
    reverse: true,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 51
    }
  }), stack(data).reverse().map(function (series, i) {
    var lastPoint = series[series.length - 1];
    var lastPointY0 = lastPoint[0] / 100;
    var lastPointY1 = lastPoint[1] / 100;

    return _react2.default.createElement('g', { key: 'labels-' + series.key, __source: {
        fileName: _jsxFileName,
        lineNumber: 71
      }
    }, lastPointY1 - lastPointY0 > 0.01 && _react2.default.createElement(_text2.default.TextOutline, {
      fontSize: 10,
      x: xMax,
      y: yScale(lastPointY1 - (lastPointY1 - lastPointY0) / 2),
      dy: '.5em',
      textAnchor: 'end',
      fill: 'black',
      outlineStroke: "white",
      outlineStrokeWidth: 3,
      fontFamily: "Roboto Mono",
      __source: {
        fileName: _jsxFileName,
        lineNumber: 73
      }
    }, series.key));
  })), _react2.default.createElement(_axis2.default.AxisBottom, {
    top: height - margin.bottom,
    left: margin.left,
    scale: xScale,
    label: '',
    tickTextFontSize: 9,
    tickTextFontFamily: 'Roboto Mono',
    stroke: '#1b1a1e',
    tickStroke: '#1b1a1e',
    tickTextFill: 'black',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 91
    }
  }));
};