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

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

  return _react2.default.createElement(_Codeblock2.default, {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 6
    }
  }, '// SimpleLineWithGlyphsChart.js\nfunction SimpleLineWithGlyphsChart({\n  margin,\n  dataset,\n  screenWidth,\n  screenHeight,\n}) {\n  if (!Array.isArray(dataset)) dataset = [dataset];\n\n  const allData = dataset.reduce((rec, d) => {\n    return rec.concat(d.data)\n  }, []);\n\n  const width = screenWidth / 1.5;\n  const height = width / 2;\n\n  // bounds\n  const xMax = width - margin.left - margin.right;\n  const yMax = height - margin.top - margin.bottom;\n\n  // accessors\n  const x = d => d.date;\n  const y = d => d.value;\n\n  // scales\n  const xScale = Scale.scaleTime({\n    range: [0, xMax],\n    domain: extent(allData, x),\n  });\n  const yScale = Scale.scaleLinear({\n    range: [yMax, 0],\n    domain: [0, max(allData, y)],\n    nice: true,\n    clamp: true,\n  });\n\n  const yFormat = yScale.tickFormat ? yScale.tickFormat() : identity;\n\n  return (\n    <svg width={width} height={height}>\n      <Axis.AxisRight\n        top={margin.top}\n        left={width - margin.right}\n        scale={yScale}\n        numTicks={numTicksForHeight(height)}\n        label={\'value\'}\n        hideZero\n      />\n      <Group\n        top={margin.top}\n        left={margin.left}\n      >\n        <Grid.Grid\n          xScale={xScale}\n          yScale={yScale}\n          width={xMax}\n          height={yMax}\n          numTicksRows={numTicksForHeight(height)}\n          numTicksColumns={numTicksForWidth(width)}\n        />\n        {dataset.map((series, i) => {\n          return (\n            <Shape.LinePath\n              key={\'chart-line-{i}\'}\n              data={series.data}\n              xScale={xScale}\n              yScale={yScale}\n              x={x}\n              y={y}\n              stroke={series.chart.stroke}\n              strokeWidth={series.chart.strokeWidth}\n              strokeDasharray={series.chart.strokeDasharray}\n              curve={Curve.monotoneX}\n              glyph={(d, i) => {\n                return (\n                  <Glyph.Dot key={\'line-point-{i}\'}\n                    className={cx(\'vx-linepath-point\')}\n                    cx={xScale(x(d))}\n                    cy={yScale(y(d))}\n                    r={6}\n                    fill={series.chart.stroke}\n                    stroke={series.chart.backgroundColor}\n                    strokeWidth={3}\n                  >\n                    <text\n                      x={xScale(x(d))}\n                      y={yScale(y(d))}\n                      dx={10}\n                      fill={series.chart.stroke}\n                      stroke={series.chart.backgroundColor}\n                      strokeWidth={6}\n                      fontSize={11}\n                    >\n                      {yFormat(y(d))}\n                    </text>\n                    <text\n                      x={xScale(x(d))}\n                      y={yScale(y(d))}\n                      dx={10}\n                      fill={series.chart.stroke}\n                      fontSize={11}\n                    >\n                      {yFormat(y(d))}\n                    </text>\n                  </Glyph.Dot>\n                );\n              }}\n            />\n          );\n        })}\n      </Group>\n      <Axis.AxisBottom\n        top={height - margin.bottom}\n        left={margin.left}\n        scale={xScale}\n        numTicks={numTicksForWidth(width)}\n        label={\'time\'}\n        hideTicks\n      />\n    </svg>\n  );\n}\n\nexport default Responsive.withScreenSize(SimpleLineWithGlyphsChart);');
};