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

var _responsive2 = _interopRequireDefault(_responsive);

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 SimpleLineWithGlyphsChart(_ref) {
  var margin = _ref.margin,
      dataset = _ref.dataset,
      screenWidth = _ref.screenWidth,
      screenHeight = _ref.screenHeight;

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

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

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

  // 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)
  });
  var yScale = _scale2.default.scaleLinear({
    range: [yMax, 0],
    domain: [0, (0, _d3Array.max)(allData, y)],
    nice: true,
    clamp: true
  });

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

  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.AxisRight, {
      top: margin.top,
      left: width - margin.right,
      scale: yScale,
      numTicks: numTicksForHeight(height),
      label: 'value',
      hideZero: true
    }),
    _react2.default.createElement(
      _group2.default,
      {
        top: margin.top,
        left: margin.left
      },
      _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,
          curve: _curve2.default.monotoneX,
          glyph: function glyph(d, i) {
            return _react2.default.createElement(
              _glyph2.default.Dot,
              { key: 'line-point-' + i,
                className: (0, _classnames2.default)('vx-linepath-point'),
                cx: xScale(x(d)),
                cy: yScale(y(d)),
                r: 6,
                fill: series.chart.stroke,
                stroke: series.chart.backgroundColor,
                strokeWidth: 3
              },
              _react2.default.createElement(
                'text',
                {
                  x: xScale(x(d)),
                  y: yScale(y(d)),
                  dx: 10,
                  fill: series.chart.stroke,
                  stroke: series.chart.backgroundColor,
                  strokeWidth: 6,
                  fontSize: 11
                },
                yFormat(y(d))
              ),
              _react2.default.createElement(
                'text',
                {
                  x: xScale(x(d)),
                  y: yScale(y(d)),
                  dx: 10,
                  fill: series.chart.stroke,
                  fontSize: 11
                },
                yFormat(y(d))
              )
            );
          }
        });
      })
    ),
    _react2.default.createElement(
      'text',
      {
        y: height - margin.bottom / 2,
        fontSize: '16',
        fontFamily: 'Arial',
        fill: 'black',
        dx: width / 2,
        textAnchor: 'middle'
      },
      'Simple line chart with glyphs'
    ),
    _react2.default.createElement(_axis2.default.AxisTop, {
      top: margin.top,
      left: margin.left,
      scale: xScale,
      numTicks: numTicksForWidth(width),
      label: 'time',
      hideTicks: true
    })
  );
}

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