'use strict';

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

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

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

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

var _gradient = require('@vx/gradient');

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

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

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

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

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


var data = (0, _mockData.genDateValue)(20);

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

// responsive utils for axis ticks
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 width = _ref.width,
      height = _ref.height,
      margin = _ref.margin;

  if (width < 10) return null;

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

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

  // scale tick formats
  var yFormat = yScale.tickFormat ? yScale.tickFormat() : identity;
  var xFormat = xScale.tickFormat ? xScale.tickFormat() : identity;

  return _react2.default.createElement('svg', { width: width, height: height, __source: {
      fileName: _jsxFileName,
      lineNumber: 54
    }
  }, _react2.default.createElement(_gradient.GradientOrangeRed, { id: 'linear', vertical: false, fromOpacity: 0.8, toOpacity: 0.3, __source: {
      fileName: _jsxFileName,
      lineNumber: 55
    }
  }), _react2.default.createElement('rect', { x: 0, y: 0, width: width, height: height, fill: '#f4419f', rx: 14, __source: {
      fileName: _jsxFileName,
      lineNumber: 56
    }
  }), _react2.default.createElement(_grid.Grid, {
    top: margin.top,
    left: margin.left,
    xScale: xScale,
    yScale: yScale,
    stroke: 'rgba(142, 32, 95, 0.9)',
    width: xMax,
    height: yMax,
    numTicksRows: numTicksForHeight(height),
    numTicksColumns: numTicksForWidth(width),
    __source: {
      fileName: _jsxFileName,
      lineNumber: 57
    }
  }), _react2.default.createElement(_group.Group, { top: margin.top, left: margin.left, __source: {
      fileName: _jsxFileName,
      lineNumber: 68
    }
  }, _react2.default.createElement(_shape.AreaClosed, {
    data: data,
    xScale: xScale,
    yScale: yScale,
    x: x,
    y: y,
    strokeWidth: 2,
    stroke: 'transparent',
    fill: 'url(#linear)',
    curve: _curve.curveBasis,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 69
    }
  }), _react2.default.createElement(_shape.LinePath, {
    data: data,
    xScale: xScale,
    yScale: yScale,
    x: x,
    y: y,
    stroke: "url('#linear')",
    strokeWidth: 2,
    curve: _curve.curveBasis,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 80
    }
  })), _react2.default.createElement(_group.Group, { left: margin.left, __source: {
      fileName: _jsxFileName,
      lineNumber: 91
    }
  }, _react2.default.createElement(_axis.AxisLeft, {
    top: margin.top,
    left: 0,
    scale: yScale,
    hideZero: true,
    numTicks: numTicksForHeight(height),
    label: 'Axis Left Label',
    labelProps: {
      fill: '#8e205f',
      textAnchor: 'middle',
      fontSize: 12,
      fontFamily: 'Arial'
    },
    stroke: '#1b1a1e',
    tickStroke: '#8e205f',
    tickLabelProps: function tickLabelProps(value, index) {
      return {
        fill: '#8e205f',
        textAnchor: 'end',
        fontSize: 10,
        fontFamily: 'Arial',
        dx: '-0.25em',
        dy: '0.25em'
      };
    },
    tickComponent: function tickComponent(_ref2) {
      var formattedValue = _ref2.formattedValue,
          tickProps = (0, _objectWithoutProperties3.default)(_ref2, ['formattedValue']);

      return _react2.default.createElement('text', (0, _extends3.default)({}, tickProps, {
        __source: {
          fileName: _jsxFileName,
          lineNumber: 116
        }
      }), formattedValue);
    },
    __source: {
      fileName: _jsxFileName,
      lineNumber: 92
    }
  }), _react2.default.createElement(_axis.AxisRight, {
    top: margin.top,
    left: xMax,
    scale: yScale,
    hideZero: true,
    numTicks: numTicksForHeight(height),
    label: 'Axis Right Label',
    labelProps: {
      fill: '#8e205f',
      textAnchor: 'middle',
      fontSize: 12,
      fontFamily: 'Arial'
    },
    stroke: '#1b1a1e',
    tickStroke: '#8e205f',
    tickLabelProps: function tickLabelProps(value, index) {
      return {
        fill: '#8e205f',
        textAnchor: 'start',
        fontSize: 10,
        fontFamily: 'Arial',
        dx: '0.25em',
        dy: '0.25em'
      };
    },
    __source: {
      fileName: _jsxFileName,
      lineNumber: 119
    }
  }), _react2.default.createElement(_axis.AxisBottom, {
    top: height - margin.bottom,
    left: 0,
    scale: xScale,
    numTicks: numTicksForWidth(width),
    label: 'Time',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 143
    }
  }, function (props) {
    var tickLabelSize = 10;
    var tickRotate = 45;
    var tickColor = '#8e205f';
    var axisCenter = (props.axisToPoint.x - props.axisFromPoint.x) / 2;
    return _react2.default.createElement('g', { className: 'my-custom-bottom-axis', __source: {
        fileName: _jsxFileName,
        lineNumber: 156
      }
    }, props.ticks.map(function (tick, i) {
      var tickX = tick.to.x;
      var tickY = tick.to.y + tickLabelSize + props.tickLength;
      return _react2.default.createElement(_group.Group, { key: 'vx-tick-' + tick.value + '-' + i, className: 'vx-axis-tick', __source: {
          fileName: _jsxFileName,
          lineNumber: 161
        }
      }, _react2.default.createElement(_shape.Line, { from: tick.from, to: tick.to, stroke: tickColor, __source: {
          fileName: _jsxFileName,
          lineNumber: 162
        }
      }), _react2.default.createElement('text', {
        transform: 'translate(' + tickX + ', ' + tickY + ') rotate(' + tickRotate + ')',
        fontSize: tickLabelSize,
        textAnchor: 'middle',
        fill: tickColor,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 163
        }
      }, tick.formattedValue));
    }), _react2.default.createElement('text', { textAnchor: 'middle', transform: 'translate(' + axisCenter + ', 50)', fontSize: '8', __source: {
        fileName: _jsxFileName,
        lineNumber: 174
      }
    }, props.label));
  })));
};
//# sourceMappingURL=data:application/json;charset=utf-8;base64, 