'use strict';

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

var _objectDestructuringEmpty2 = require('babel-runtime/helpers/objectDestructuringEmpty');

var _objectDestructuringEmpty3 = _interopRequireDefault(_objectDestructuringEmpty2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _Codeblock = require('./Codeblock');

var _Codeblock2 = _interopRequireDefault(_Codeblock);

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

var _jsxFileName = '/Users/hshoff/code/vx/packages/vx-demo/components/codeblocks/StackedAreaCode.js';

exports.default = function (_ref) {
  (0, _objectDestructuringEmpty3.default)(_ref);

  return _react2.default.createElement(_Codeblock2.default, {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 6
    }
  }, '// StackAreaChart.js\nimport React from \'react\';\nimport Mock from \'@vx/mock-data\';\nimport Scale from \'@vx/scale\';\nimport Group from \'@vx/group\';\nimport Axis from \'@vx/axis\';\nimport Shape from \'@vx/shape\';\nimport Curve from \'@vx/curve\';\nimport Text from \'@vx/text\';\nimport { extent, max } from \'d3-array\';\nimport { stack as d3stack } from \'d3-shape\';\nimport { timeParse } from \'d3-time-format\';\nimport round from \'../util/round\';\nimport colorScale from \'../util/sillyColorScale\';\n\nexport default ({\n  margin,\n  width,\n  height,\n}) => {\n  const data = Mock.browserUsage;\n  const keys = Object.keys(data[0]).filter(k => k !== \'date\');\n\n  const yMax = height - margin.top - margin.bottom;\n  const xMax = width - margin.left - margin.right;\n\n  const parseDate = timeParse("%Y %b %d");\n  const x = d => parseDate(d.date);\n\n  const stack = d3stack().keys(keys);\n\n  const xScale = Scale.scaleTime({\n    range: [0, xMax],\n    domain: extent(data, x),\n  });\n  const yScale = Scale.scaleLinear({\n    range: [yMax, 0],\n  });\n\n  return (\n    <svg height={height} width={width}>\n      <Axis.AxisLeft\n        top={margin.top}\n        left={margin.left}\n        scale={yScale}\n        tickFormat={(v) => \'{round(v * 100)}%\'}\n        label={\'browser market share (%)\'}\n        stroke={\'#1b1a1e\'}\n        tickTextFill={\'#000\'}\n      />\n      <Group top={margin.top} left={margin.left}>\n        <Shape.AreaStack\n          top={margin.top}\n          left={margin.left}\n          keys={keys}\n          data={data}\n          x={(d) => xScale(x(d.data))}\n          y0={(d) => yScale(d[0] / 100)}\n          y1={(d) => yScale(d[1] / 100)}\n          fill={(d,i) => colorScale(i)}\n          fillOpacity={0.8}\n          stroke={(d,i) => colorScale(i)}\n          strokeWidth={1}\n          reverse\n        />\n        {stack(data).reverse().map((series,i) => {\n          const lastPoint = series[series.length - 1];\n          const lastPointY0 = lastPoint[0] / 100;\n          const lastPointY1 = lastPoint[1] / 100;\n\n          return (\n            <g key={\'labels-{series.key}\'}>\n              {lastPointY1 - lastPointY0 > 0.01 &&\n                <Text.TextOutline\n                  fontSize={10}\n                  x={xMax}\n                  y={yScale((lastPointY1 - ((lastPointY1 - lastPointY0) /2)))}\n                  dy={\'.5em\'}\n                  textAnchor={\'end\'}\n                  fill="black"\n                  outlineStroke={"rgba(255,255,255,0.5)"}\n                  outlineStrokeWidth={2}\n                  fontFamily={"Roboto Mono"}\n                >\n                  {series.key}\n                </Text.TextOutline>\n              }\n            </g>\n          );\n        })}\n      </Group>\n      <Axis.AxisBottom\n        top={height - margin.bottom}\n        left={margin.left}\n        scale={xScale}\n        label={\'\'}\n        tickTextFontSize={9}\n        tickTextFontFamily=\'Roboto Mono\'\n        stroke={\'#1b1a1e\'}\n        tickStroke={\'#1b1a1e\'}\n        tickTextFill={\'black\'}\n      />\n    </svg>\n  );\n}');
};