'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 _area = require('../components/tiles/area');

var _area2 = _interopRequireDefault(_area);

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

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

exports.default = function () {
  return _react2.default.createElement(_show2.default, {
    component: _area2.default,
    title: 'Areas',
    margin: {
      top: 0,
      left: 0,
      right: 0,
      bottom: 0
    },
    __source: {
      fileName: _jsxFileName,
      lineNumber: 7
    }
  }, 'import React from \'react\';\nimport { AreaClosed, Line, Bar } from \'@vx/shape\';\nimport { appleStock } from \'@vx/mock-data\';\nimport { curveMonotoneX } from \'@vx/curve\';\nimport { LinearGradient } from \'@vx/gradient\';\nimport { GridRows, GridColumns } from \'@vx/grid\';\nimport { scaleTime, scaleLinear } from \'@vx/scale\';\nimport { withTooltip, Tooltip } from \'@vx/tooltip\';\nimport { localPoint } from \'@vx/event\';\nimport { extent, max, bisector } from \'d3-array\';\nimport { timeFormat } from \'d3-time-format\';\n\nconst stock = appleStock.slice(800);\nconst formatDate = timeFormat("%b %d, \'%y");\n\n// accessors\nconst xStock = d => new Date(d.date);\nconst yStock = d => d.close;\nconst bisectDate = bisector(d => new Date(d.date)).left;\n\nclass Area extends React.Component {\n  constructor(props) {\n    super(props);\n    this.handleTooltip = this.handleTooltip.bind(this);\n  }\n  handleTooltip({ event, data, xStock, xScale, yScale }) {\n    const { showTooltip } = this.props;\n    const { x } = localPoint(event);\n    const x0 = xScale.invert(x);\n    const index = bisectDate(data, x0, 1);\n    const d0 = data[index - 1];\n    const d1 = data[index];\n    let d = d0;\n    if (d1 && d1.date) {\n      d = x0 - xStock(d0.date) > xStock(d1.date) - x0 ? d1 : d0;\n    }\n    showTooltip({\n      tooltipData: d,\n      tooltipLeft: x,\n      tooltipTop: yScale(d.close),\n    });\n  }\n  render() {\n    const {\n      width,\n      height,\n      margin,\n      showTooltip,\n      hideTooltip,\n      tooltipData,\n      tooltipTop,\n      tooltipLeft,\n      events,\n    } = this.props;\n    if (width < 10) return null;\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(stock, xStock),\n    });\n    const yScale = scaleLinear({\n      range: [yMax, 0],\n      domain: [0, max(stock, yStock) + yMax / 3],\n      nice: true,\n    });\n\n    return (\n      <div>\n        <svg ref={s => (this.svg = s)} width={width} height={height}>\n          <rect\n            x={0}\n            y={0}\n            width={width}\n            height={height}\n            fill="#32deaa"\n            rx={14}\n          />\n          <defs>\n            <linearGradient\n              id="gradient"\n              x1="0%"\n              y1="0%"\n              x2="0%"\n              y2="100%"\n            >\n              <stop\n                offset="0%"\n                stopColor="#FFFFFF"\n                stopOpacity={1}\n              />\n              <stop\n                offset="100%"\n                stopColor="#FFFFFF"\n                stopOpacity={0.2}\n              />\n            </linearGradient>\n          </defs>\n          <GridRows\n            lineStyle={{ pointerEvents: \'none\' }}\n            scale={yScale}\n            width={xMax}\n            strokeDasharray="2,2"\n            stroke="rgba(255,255,255,0.3)"\n          />\n          <GridColumns\n            lineStyle={{ pointerEvents: \'none\' }}\n            scale={xScale}\n            height={yMax}\n            strokeDasharray="2,2"\n            stroke="rgba(255,255,255,0.3)"\n          />\n          <AreaClosed\n            data={stock}\n            xScale={xScale}\n            yScale={yScale}\n            x={xStock}\n            y={yStock}\n            strokeWidth={1}\n            stroke={\'url(#gradient)\'}\n            fill={\'url(#gradient)\'}\n            curve={curveMonotoneX}\n          />\n          <Bar\n            x={0}\n            y={0}\n            width={width}\n            height={height}\n            fill="transparent"\n            rx={14}\n            data={stock}\n            onTouchStart={data => event =>\n              this.handleTooltip({\n                event,\n                data,\n                xStock,\n                xScale,\n                yScale,\n              })}\n            onTouchMove={data => event =>\n              this.handleTooltip({\n                event,\n                data,\n                xStock,\n                xScale,\n                yScale,\n              })}\n            onMouseMove={data => event =>\n              this.handleTooltip({\n                event,\n                data,\n                xStock,\n                xScale,\n                yScale,\n              })}\n            onMouseLeave={data => event => hideTooltip()}\n          />\n          {tooltipData && (\n            <g>\n              <Line\n                from={{ x: tooltipLeft, y: 0 }}\n                to={{ x: tooltipLeft, y: yMax }}\n                stroke="rgba(92, 119, 235, 1.000)"\n                strokeWidth={2}\n                style={{ pointerEvents: \'none\' }}\n                strokeDasharray="2,2"\n              />\n              <circle\n                cx={tooltipLeft}\n                cy={tooltipTop + 1}\n                r={4}\n                fill="black"\n                fillOpacity={0.1}\n                stroke="black"\n                strokeOpacity={0.1}\n                strokeWidth={2}\n                style={{ pointerEvents: \'none\' }}\n              />\n              <circle\n                cx={tooltipLeft}\n                cy={tooltipTop}\n                r={4}\n                fill="rgba(92, 119, 235, 1.000)"\n                stroke="white"\n                strokeWidth={2}\n                style={{ pointerEvents: \'none\' }}\n              />\n            </g>\n          )}\n        </svg>\n        {tooltipData && (\n          <div>\n            <Tooltip\n              top={tooltipTop - 12}\n              left={tooltipLeft + 12}\n              style={{\n                backgroundColor: \'rgba(92, 119, 235, 1.000)\',\n                color: \'white\',\n              }}\n            >\n              {`$${yStock(tooltipData)}`}\n            </Tooltip>\n            <Tooltip\n              top={yMax - 14}\n              left={tooltipLeft}\n              style={{\n                transform: \'translateX(-50%)\',\n              }}\n            >\n              {formatDate(xStock(tooltipData))}\n            </Tooltip>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n\nexport default withTooltip(Area);');
};
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBhZ2VzL2FyZWFzLmpzIl0sIm5hbWVzIjpbIlJlYWN0IiwiU2hvdyIsIkFyZWFzIiwidG9wIiwibGVmdCIsInJpZ2h0IiwiYm90dG9tIl0sIm1hcHBpbmdzIjoiOzs7Ozs7QUFBQSxBQUFPOzs7O0FBQ1AsQUFBTyxBQUFVOzs7O0FBQ2pCLEFBQU8sQUFBVyxBQUVsQjs7Ozs7Ozs7a0JBQWUsWUFBTSxBQUNuQjt5QkFDRSxBQUFDO0FBQUQsQUFDYSxBQUNYO1dBRkYsQUFFUSxBQUNOOztXQUFRLEFBQ0QsQUFDTDtZQUZNLEFBRUEsQUFDTjthQUhNLEFBR0MsQUFDUDtjQVBKLEFBR1UsQUFJRTtBQUpGLEFBQ047O2dCQUpKO2tCQUFBO0FBQUE7QUFDRSxHQURGLEVBREYsQUFDRSxBQTJPSDtBQTdPRCIsImZpbGUiOiJhcmVhcy5qcz9lbnRyeSIsInNvdXJjZVJvb3QiOiIvVXNlcnMvaHNob2ZmL0NvZGUvdngvcGFja2FnZXMvdngtZGVtbyJ9