'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 _responsive = require('@vx/responsive');

var _responsive2 = _interopRequireDefault(_responsive);

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

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

function SimpleLineChart(_ref, state, n) {
  var margin = _ref.margin,
      dataset = _ref.dataset,
      screenWidth = _ref.screenWidth,
      screenHeight = _ref.screenHeight;

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

  var width = screenWidth / 1.5;
  var height = width / 2;

  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 },
    _react2.default.createElement('rect', {
      width: width,
      height: height,
      stroke: 'black',
      strokeWidth: 1,
      fill: 'none'
    }),
    _react2.default.createElement(_axis2.default.AxisLeft, {
      top: margin.top,
      left: margin.left,
      scale: yScale,
      hideZero: true,
      numTicks: numTicksForHeight(height),
      label: 'value'
    }),
    _react2.default.createElement(
      _group2.default,
      {
        top: margin.top,
        left: margin.left
      },
      _react2.default.createElement(
        'text',
        {
          dy: -margin.top / 2,
          dx: width / 2 - margin.left,
          textAnchor: 'middle',
          fontSize: '16',
          fontFamily: 'Arial',
          fill: 'black'
        },
        'Simple line chart with a marker and annotation'
      ),
      _react2.default.createElement(_grid2.default.Grid, {
        xScale: xScale,
        yScale: yScale,
        width: xMax,
        height: yMax,
        numTicksRows: numTicksForHeight(height),
        numTicksColumns: numTicksForWidth(width)
      }),
      dataset.map(function (series, i) {
        return _react2.default.createElement(_shape2.default.LinePath, {
          key: 'chart-line-' + i,
          data: series.data,
          xScale: xScale,
          yScale: yScale,
          x: x,
          y: y,
          stroke: series.chart.stroke,
          strokeWidth: series.chart.strokeWidth,
          strokeDasharray: series.chart.strokeDasharray
        });
      }),
      _react2.default.createElement(_marker2.default, {
        from: markerFrom,
        to: markerTo,
        label: markerLabel,
        labelDx: 6,
        labelDy: 15
      }),
      _react2.default.createElement(_annotation2.default.LinePathAnnotation, {
        label: 'expected from deploy',
        labelFill: 'black',
        labelStrokeWidth: 2,
        points: [annotationPoint, new _point2.default({
          x: annotationPoint.x + width / allData.length,
          y: annotationPoint.y - height / allData.length
        })]
      })
    ),
    _react2.default.createElement(_axis2.default.AxisBottom, {
      top: height - margin.bottom,
      left: margin.left,
      scale: xScale,
      numTicks: numTicksForWidth(width),
      label: 'time'
    })
  );
}

exports.default = _responsive2.default.withScreenSize(SimpleLineChart);