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

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

  return _react2.default.createElement(_Codeblock2.default, {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 6
    }
  }, '// MultiSeriesLine.js\nimport React from \'react\';\nimport Mock from \'@vx/mock-data\';\nimport Group from \'@vx/group\';\nimport Curve from \'@vx/curve\';\nimport Scale from \'@vx/scale\';\nimport Axis from \'@vx/axis\';\nimport Shape from \'@vx/shape\';\nimport { extent, max, min } from \'d3-array\';\nimport { timeParse } from \'d3-time-format\';\nimport { compose, withState, withHandlers } from \'recompose\';\n\n// util\nconst parseDate = timeParse("%Y%m%d");\n\n// [{date: "", new york: "", san francisco: "", austin: ""}]\nconst rawData = Mock.cityTemperature;\nconst cityNames = Object.keys(rawData[0]).filter(k => k !== \'date\');\n\n// rawData => [{id: "", values: [{ date, temperature }]}, ...]\nconst data = cityNames.map((cityName) => {\n  return {\n    id: cityName,\n    values: rawData.map((d) => ({\n      date: d.date,\n      temperature: d[cityName],\n    })),\n  }\n});\n\n// utils\nconst getCity = (cityId) => data.find((city) => city.id === cityId);\nconst addCity = (selected, cityId) => selected.concat(cityId);\nconst removeCity = (selected, cityId) => selected.filter((city) => city !== cityId);\nconst removeCityOrResetSelected = (selected, cityId) => {\n  let nextSelected = removeCity(selected, cityId);\n  if (nextSelected.length === 0) nextSelected = initialSelectedState;\n  return nextSelected;\n}\n\n// recompose higher-order function for state and event handlers\nconst initialSelectedState = cityNames;\nconst withSelected = compose(\n  withState(\'selected\', \'setSelected\', initialSelectedState),\n  withHandlers({\n    updateSelected: ({ selected, setSelected }) => cityId => {\n      let fn = addCity;\n      if (selected.includes(cityId)) fn = removeCityOrResetSelected;\n      setSelected(fn(selected, cityId));\n    },\n    resetSelected: ({ setSelected }) => event => {\n      setSelected(initialSelectedState);\n    }\n  })\n);\n\n// the chart\nexport default withSelected(({\n  selected,\n  updateSelected,\n  resetSelected,\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  // accessors\n  const x = d => parseDate(d.date);\n  const y = d => +d.temperature;\n\n  // scales\n  const xScale = Scale.scaleTime({\n    range: [0, xMax],\n    domain: extent(rawData, x),\n  });\n  const yScale = Scale.scaleLinear({\n    range: [yMax, 0],\n    domain: extent(selected.slice().reduce((ret, c) => {\n      return ret.concat(getCity(c).values)\n    }, []), y)\n  });\n  const color = Scale.scaleOrdinal({\n    range: [\'#3b99d8\', \'#239f85\', \'#9a5cb4\'],\n    domain: cityNames,\n  });\n\n  return (\n    <svg width={width} height={height}>\n      <Group top={margin.top} left={margin.left}>\n        <Axis.AxisBottom\n          label=\'\'\n          top={yMax}\n          scale={xScale}\n          hideAxisLine\n        />\n        <Axis.AxisLeft\n          scale={yScale}\n          label="Temperature (\xBAF)"\n        />\n        {selected.map(getCity).map(({ id, values }) => {\n          const lastDatum = values[values.length - 1];\n          return (\n            <g key={\'{id}\'}>\n              <Shape.LinePath\n                data={values}\n                xScale={xScale}\n                yScale={yScale}\n                x={x}\n                y={y}\n                curve={Curve.basis}\n                stroke={color(id)}\n                strokeWidth={1}\n              />\n              <text\n                fontSize={9}\n                dy={"0.35em"}\n                dx={2}\n                x={xScale(x(lastDatum))}\n                y={yScale(y(lastDatum))}\n              >\n                {id}\n              </text>\n            </g>\n          );\n        })}\n        <Legend\n          data={data}\n          selected={selected}\n          xMax={xMax}\n          yMax={yMax}\n          color={color}\n          updateSelected={updateSelected}\n        />\n      </Group>\n    </svg>\n  );\n});\n\nconst Legend = ({\n  data,\n  selected,\n  updateSelected,\n  xMax,\n  yMax,\n  color,\n}) => {\n  const margin = 20;\n  const xPadding = 60;\n  const yPadding = 30;\n  const yOffset = yMax - yPadding;\n  const xOffset = xMax - xPadding;\n  const size = 8;\n  const fontSize = 12;\n  return (\n    <g>\n      {data.map(({ id, values }, i) => {\n        return (\n          <g\n            key={\'legend-{id}\'}\n            className="legend-item"\n            transform={\'translate({xOffset}, {yOffset - i * margin})\'}\n            onClick={() => updateSelected(id)}\n            fillOpacity={selected.includes(id) ? 1 : 0.5}\n          >\n            <rect width={size} height={size} fill={color(id)} />\n            <text fill={color(id)} dy={".7em"} dx={fontSize} fontSize={fontSize}>\n              {id}\n            </text>\n          </g>\n        );\n      })}\n    </g>\n  );\n}');
};