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

var _radar2 = _interopRequireDefault(_radar);

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

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

exports.default = function () {
  return _react2.default.createElement(_show2.default, { component: _radar2.default, title: 'Radar', __source: {
      fileName: _jsxFileName,
      lineNumber: 7
    }
  }, 'import React from \'react\';\nimport { Group } from \'@vx/group\';\nimport { letterFrequency } from \'@vx/mock-data\';\nimport { scaleLinear } from \'@vx/scale\';\nimport { Point } from \'@vx/point\';\nimport { Line, LineRadial } from \'@vx/shape\';\nimport { max, min } from \'d3-array\';\n\nconst ANG = 360;\n\nconst data = letterFrequency.slice(2, 12);\n\nconst calcAxis = length => {\n  if (!length) return [];\n  return new Array(length + 1)\n    .fill(0)\n    .map((v, i) => ({ angle: i * (ANG / length) }));\n};\n\nfunction calcPoints(length, radius) {\n  const step = Math.PI * 2 / length;\n  return new Array(length).fill(0).map((v, i) => {\n    return {\n      x: radius * Math.sin(i * step),\n      y: radius * Math.cos(i * step),\n    };\n  });\n}\n\nfunction calcCoordinates(data, scale, access) {\n  const step = Math.PI * 2 / data.length;\n  const points = new Array(data.length).fill({});\n  const pointStr = new Array(data.length + 1)\n    .fill(\'\')\n    .reduce((res, v, i) => {\n      if (i > data.length) return res;\n      const x = scale(access(data[i - 1])) * Math.sin(i * step);\n      const y = scale(access(data[i - 1])) * Math.cos(i * step);\n      points[i - 1] = { x, y };\n      return (res += `${x},${y} `);\n    });\n\n  points.str = pointStr;\n  return points;\n}\n\nexport default ({\n  width,\n  height,\n  events = false,\n  margin = { top: 40, left: 80, right: 80, bottom: 80 },\n  levels = 5,\n}) => {\n  if (width < 10) return null;\n\n  const xMax = width - margin.left - margin.right;\n  const yMax = height - margin.top - margin.bottom;\n\n  const webs = calcAxis(data.length);\n  const radius = min([xMax, yMax]) / 2;\n  const points = calcPoints(data.length, radius);\n  const labelMargin = max(Object.values(margin)) - 20;\n\n  const x = d => d.letter;\n  const y = d => d.frequency;\n\n  const rScale = scaleLinear({\n    range: [0, Math.PI * 2],\n    domain: [ANG, 0],\n  });\n\n  const yScale = scaleLinear({\n    range: [0, radius],\n    domain: [0, max(data, y)],\n  });\n\n  const polyPoints = calcCoordinates(data, yScale, y);\n\n  return (\n    <svg width={width} height={height}>\n      <rect fill="#FAF7E9" width={width} height={height} rx={14} />\n      <Group top={height / 2 - margin.top} left={width / 2}>\n        {[...new Array(levels)].map((v, i) => (\n          <LineRadial\n            data={webs}\n            key={`web-${i}`}\n            angle={d => rScale(d.angle)}\n            radius={(i + 1) * radius / levels}\n            fill="none"\n            stroke="#d9d9d9"\n            strokeWidth={2}\n            strokeOpacity={0.8}\n            strokeLinecap="round"\n          />\n        ))}\n        {[...new Array(data.length)].map((v, i) => (\n          <Line\n            key={`line-${i}`}\n            from={new Point({ x: 0, y: 0 })}\n            to={new Point({ x: points[i].x, y: points[i].y })}\n            stroke="#d9d9d9"\n          />\n        ))}\n        <polygon\n          points={polyPoints.str}\n          fill="#ff9933"\n          fillOpacity="0.3"\n          stroke="#ff9933"\n          strokeWidth={1}\n        />\n        {polyPoints.map((v, i) => (\n          <circle\n            key={`point-${i}`}\n            cx={v.x}\n            cy={v.y}\n            r={4}\n            fill="#f5810c"\n            className="dots"\n          />\n        ))}\n      </Group>\n    </svg>\n  );\n};\n');
};
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBhZ2VzL3JhZGFyLmpzIl0sIm5hbWVzIjpbIlJlYWN0IiwiU2hvdyIsIlJhZGFyIl0sIm1hcHBpbmdzIjoiOzs7Ozs7QUFBQSxBQUFPOzs7O0FBQ1AsQUFBTyxBQUFVOzs7O0FBQ2pCLEFBQU8sQUFBVyxBQUVsQjs7Ozs7Ozs7a0JBQWUsWUFBTSxBQUNuQjt5QkFDRSxBQUFDLGdDQUFELEFBQU0sQUFBVyw0QkFBTyxPQUF4QixBQUE4QjtnQkFBOUI7a0JBQUE7QUFBQTtHQUFBLEVBREYsQUFDRSxBQWdJSDtBQWxJRCIsImZpbGUiOiJyYWRhci5qcz9lbnRyeSIsInNvdXJjZVJvb3QiOiIvVXNlcnMvaHNob2ZmL2NvZGUvdngvcGFja2FnZXMvdngtZGVtbyJ9