'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

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

var _shape2 = _interopRequireDefault(_shape);

var _point = require('@vx/point');

var _point2 = _interopRequireDefault(_point);

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

var _axis2 = _interopRequireDefault(_axis);

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

var _scale2 = _interopRequireDefault(_scale);

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

var _group2 = _interopRequireDefault(_group);

var _grid = require('@vx/grid');

var _grid2 = _interopRequireDefault(_grid);

var _glyph = require('@vx/glyph');

var _glyph2 = _interopRequireDefault(_glyph);

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

var _curve2 = _interopRequireDefault(_curve);

var _marker = require('@vx/marker');

var _marker2 = _interopRequireDefault(_marker);

var _annotation = require('@vx/annotation');

var _annotation2 = _interopRequireDefault(_annotation);

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

var _text2 = _interopRequireDefault(_text);

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/charts/SimpleLineChart.js';


function identity(x) {
  return x;
}

function numTicksForHeight(height) {
  if (height <= 300) return 3;
  if (300 < height && height <= 600) return 5;
  return 10;
}

function numTicksForWidth(width) {
  if (width <= 300) return 2;
  if (300 < width && width <= 400) return 5;
  return 10;
}

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

  if (!Array.isArray(dataset)) dataset = [dataset];

  var allData = dataset.reduce(function (rec, d) {
    return rec.concat(d.data);
  }, []);

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

  // accessors
  var x = function x(d) {
    return d.date;
  };
  var y = function y(d) {
    return d.value;
  };

  // scales
  var xScale = _scale2.default.scaleTime({
    range: [0, xMax],
    domain: (0, _d3Array.extent)(allData, x),
    nice: true
  });
  var yScale = _scale2.default.scaleLinear({
    range: [yMax, 0],
    domain: [0, (0, _d3Array.max)(allData, y)],
    nice: true
  });

  var yFormat = yScale.tickFormat ? yScale.tickFormat() : identity;
  var xFormat = xScale.tickFormat ? xScale.tickFormat() : identity;

  var markerDatum = allData[3];
  var markerLabel = 'Deploy';
  var markerFrom = new _point2.default({
    x: xScale(x(markerDatum)),
    y: 0
  });
  var markerTo = new _point2.default({
    x: xScale(x(markerDatum)),
    y: yMax
  });

  var annotationPoint = new _point2.default({
    x: xScale(x(allData[3])),
    y: yScale(y(allData[3]))
  });

  return _react2.default.createElement('svg', { width: width, height: height, __source: {
      fileName: _jsxFileName,
      lineNumber: 84
    }
  }, _react2.default.createElement('defs', {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 85
    }
  }, _react2.default.createElement('linearGradient', { id: 'linear', x1: '0%', y1: '0%', x2: '100%', y2: '0%', __source: {
      fileName: _jsxFileName,
      lineNumber: 86
    }
  }, _react2.default.createElement('stop', { offset: '0%', stopColor: '#f101f6', __source: {
      fileName: _jsxFileName,
      lineNumber: 87
    }
  }), _react2.default.createElement('stop', { offset: '100%', stopColor: '#01d4f9', __source: {
      fileName: _jsxFileName,
      lineNumber: 88
    }
  })), _react2.default.createElement('linearGradient', { id: 'linearFade', x1: '0%', y1: '0%', x2: '100%', y2: '0%', __source: {
      fileName: _jsxFileName,
      lineNumber: 90
    }
  }, _react2.default.createElement('stop', { offset: '0%', stopColor: '#f101f6', stopOpacity: '0.3', __source: {
      fileName: _jsxFileName,
      lineNumber: 91
    }
  }), _react2.default.createElement('stop', { offset: '100%', stopColor: '#01d4f9', stopOpacity: '0.3', __source: {
      fileName: _jsxFileName,
      lineNumber: 92
    }
  }))), _react2.default.createElement(_axis2.default.AxisLeft, {
    top: margin.top,
    left: margin.left,
    scale: yScale,
    hideZero: true,
    numTicks: numTicksForHeight(height),
    label: 'value',
    stroke: '#1b1a1e',
    tickTextFill: '#fff',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 95
    }
  }), _react2.default.createElement(_group2.default, {
    top: margin.top,
    left: margin.left,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 105
    }
  }, _react2.default.createElement(_grid2.default.Grid, {
    xScale: xScale,
    yScale: yScale,
    width: xMax,
    height: yMax,
    numTicksRows: numTicksForHeight(height),
    numTicksColumns: numTicksForWidth(width),
    stroke: '#1b1a1e',
    tickStroke: '#1b1a1e',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 109
    }
  }), _react2.default.createElement(_shape2.default.AreaClosed, {
    data: dataset[0].data,
    xScale: xScale,
    yScale: yScale,
    x: x,
    y: y,
    strokeWidth: 2,
    stroke: "url('#linear')",
    fill: "url('#linearFade')",
    curve: _curve2.default.monotoneX,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 120
    }
  }), _react2.default.createElement(_shape2.default.LinePath, {
    data: dataset[1].data,
    xScale: xScale,
    yScale: yScale,
    x: x,
    y: y,
    stroke: "url('#linearFade')",
    strokeWidth: 2,
    strokeDasharray: '5,5',
    curve: _curve2.default.monotoneX,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 132
    }
  }), _react2.default.createElement(_marker2.default, {
    from: markerFrom,
    to: markerTo,
    stroke: 'white',
    label: markerLabel,
    labelStroke: 'none',
    labelDx: 6,
    labelDy: 15,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 144
    }
  }), _react2.default.createElement(_annotation2.default.LinePathAnnotation, {
    label: 'expected from deploy',
    stroke: 'white',
    labelFill: 'white',
    labelStroke: '#1b1a1e',
    labelStrokeWidth: 4,
    points: [annotationPoint, new _point2.default({
      x: annotationPoint.x + width / allData.length,
      y: annotationPoint.y - height / allData.length
    })],
    __source: {
      fileName: _jsxFileName,
      lineNumber: 153
    }
  })), _react2.default.createElement(_axis2.default.AxisBottom, {
    top: height - margin.bottom,
    left: margin.left,
    scale: xScale,
    numTicks: numTicksForWidth(width),
    label: 'time',
    stroke: '#1b1a1e',
    tickStroke: '#1b1a1e',
    tickTextFill: '#fff',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 168
    }
  }));
};