'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _show = require('../components/show');

var _show2 = _interopRequireDefault(_show);

var _axis = require('../components/tiles/axis');

var _axis2 = _interopRequireDefault(_axis);

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

var _jsxFileName = '/Users/hshoff/code/vx/packages/vx-demo/pages/axis.js?entry';

exports.default = function () {
  return _react2.default.createElement(_show2.default, { component: _axis2.default, title: 'Axis', margin: {
      top: 20,
      left: 60,
      right: 40,
      bottom: 60
    }, __source: {
      fileName: _jsxFileName,
      lineNumber: 7
    }
  }, 'import React from \'react\';\nimport { Grid } from \'@vx/grid\';\nimport { Group } from \'@vx/group\';\nimport { curveBasis } from \'@vx/curve\';\nimport { GradientOrangeRed } from \'@vx/gradient\';\nimport { genDateValue} from \'@vx/mock-data\';\nimport { AxisLeft, AxisBottom } from \'@vx/axis\';\nimport { AreaClosed, LinePath } from \'@vx/shape\';\nimport { scaleTime, scaleLinear } from \'@vx/scale\';\nimport { extent, max } from \'d3-array\';\n\nconst data = genDateValue(20);\n\n// accessors\nconst x = d => d.date;\nconst y = d => d.value;\n\n// responsive utils for axis ticks\nfunction numTicksForHeight(height) {\n  if (height <= 300) return 3;\n  if (300 < height && height <= 600) return 5;\n  return 10;\n}\n\nfunction numTicksForWidth(width) {\n  if (width <= 300) return 2;\n  if (300 < width && width <= 400) return 5;\n  return 10;\n}\n\nexport default ({\n  width,\n  height,\n  margin,\n}) => {\n  // bounds\n  const xMax = width - margin.left - margin.right;\n  const yMax = height - margin.top - margin.bottom;\n\n  // scales\n  const xScale = scaleTime({\n    range: [0, xMax],\n    domain: extent(data, x),\n  });\n  const yScale = scaleLinear({\n    range: [yMax, 0],\n    domain: [0, max(data, y)],\n    nice: true,\n  });\n\n  // scale tick formats\n  const yFormat = yScale.tickFormat ? yScale.tickFormat() : identity;\n  const xFormat = xScale.tickFormat ? xScale.tickFormat() : identity;\n\n  return (\n    <svg width={width} height={height}>\n      <GradientOrangeRed id="linear" />\n      <Grid\n        top={margin.top}\n        left={margin.left}\n        xScale={xScale}\n        yScale={yScale}\n        stroke=\'#8a265f\'\n        width={xMax}\n        height={yMax}\n        numTicksRows={numTicksForHeight(height)}\n        numTicksColumns={numTicksForWidth(width)}\n      />\n      <Group top={margin.top} left={margin.left}>\n        <AreaClosed\n          data={data}\n          xScale={xScale}\n          yScale={yScale}\n          x={x}\n          y={y}\n          strokeWidth={2}\n          stroke=\'transparent\'\n          fill="url(\'#linear\')"\n          fillOpacity=\'0.9\'\n          curve={curveBasis}\n        />\n        <LinePath\n          data={data}\n          xScale={xScale}\n          yScale={yScale}\n          x={x}\n          y={y}\n          stroke="url(\'#linear\')"\n          strokeWidth={2}\n          curve={curveBasis}\n        />\n      </Group>\n      <AxisLeft\n        top={margin.top}\n        left={margin.left}\n        scale={yScale}\n        hideZero\n        numTicks={numTicksForHeight(height)}\n        label=\'value\'\n        stroke=\'#1b1a1e\'\n        tickTextFill=\'#8e205f\'\n      />\n      <AxisBottom\n        top={height - margin.bottom}\n        left={margin.left}\n        scale={xScale}\n        numTicks={numTicksForWidth(width)}\n        label={\'time\'}\n        stroke=\'#1b1a1e\'\n        tickStroke=\'#1b1a1e\'\n        tickTextFill=\'#8e205f\'\n      />\n    </svg>\n  );\n}');
};