'use strict';

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

var _keys = require('babel-runtime/core-js/object/keys');

var _keys2 = _interopRequireDefault(_keys);

var _style = require('styled-jsx/style.js');

var _style2 = _interopRequireDefault(_style);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _mockData = require('@vx/mock-data');

var _mockData2 = _interopRequireDefault(_mockData);

var _group = require('@vx/group');

var _group2 = _interopRequireDefault(_group);

var _curve = require('@vx/curve');

var _curve2 = _interopRequireDefault(_curve);

var _scale = require('@vx/scale');

var _scale2 = _interopRequireDefault(_scale);

var _axis = require('@vx/axis');

var _axis2 = _interopRequireDefault(_axis);

var _shape = require('@vx/shape');

var _shape2 = _interopRequireDefault(_shape);

var _d3Array = require('d3-array');

var _d3TimeFormat = require('d3-time-format');

var _recompose = require('recompose');

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

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


// util
var parseDate = (0, _d3TimeFormat.timeParse)("%Y%m%d");

// [{date: "", new york: "", san francisco: "", austin: ""}]
var rawData = _mockData2.default.cityTemperature;
var cityNames = (0, _keys2.default)(rawData[0]).filter(function (k) {
  return k !== 'date';
});

// rawData => [{id: "", values: [{ date, temperature }]}, ...]
var data = cityNames.map(function (cityName) {
  return {
    id: cityName,
    values: rawData.map(function (d) {
      return {
        date: d.date,
        temperature: d[cityName]
      };
    })
  };
});

// utils
var getCity = function getCity(cityId) {
  return data.find(function (city) {
    return city.id === cityId;
  });
};
var addCity = function addCity(selected, cityId) {
  return selected.concat(cityId);
};
var removeCity = function removeCity(selected, cityId) {
  return selected.filter(function (city) {
    return city !== cityId;
  });
};
var removeCityOrResetSelected = function removeCityOrResetSelected(selected, cityId) {
  var nextSelected = removeCity(selected, cityId);
  if (nextSelected.length === 0) nextSelected = initialSelectedState;
  return nextSelected;
};

// recompose higher-order function for state and event handlers
var initialSelectedState = cityNames;
var withSelected = (0, _recompose.compose)((0, _recompose.withState)('selected', 'setSelected', initialSelectedState), (0, _recompose.withHandlers)({
  updateSelected: function updateSelected(_ref) {
    var selected = _ref.selected,
        setSelected = _ref.setSelected;
    return function (cityId) {
      var fn = addCity;
      if (selected.includes(cityId)) fn = removeCityOrResetSelected;
      setSelected(fn(selected, cityId));
    };
  },
  resetSelected: function resetSelected(_ref2) {
    var setSelected = _ref2.setSelected;
    return function (event) {
      setSelected(initialSelectedState);
    };
  }
}));

// the chart
exports.default = withSelected(function (_ref3) {
  var selected = _ref3.selected,
      updateSelected = _ref3.updateSelected,
      resetSelected = _ref3.resetSelected,
      width = _ref3.width,
      height = _ref3.height,
      margin = _ref3.margin;

  // bounds
  var xMax = width - margin.left - margin.right;
  var yMax = height - margin.top - margin.bottom;

  // accessors
  var x = function x(d) {
    return parseDate(d.date);
  };
  var y = function y(d) {
    return +d.temperature;
  };

  // scales
  var xScale = _scale2.default.scaleTime({
    range: [0, xMax],
    domain: (0, _d3Array.extent)(rawData, x)
  });
  var yScale = _scale2.default.scaleLinear({
    range: [yMax, 0],
    domain: (0, _d3Array.extent)(selected.slice().reduce(function (ret, c) {
      return ret.concat(getCity(c).values);
    }, []), y)
  });
  var color = _scale2.default.scaleOrdinal({
    range: ['#3b99d8', '#239f85', '#9a5cb4'],
    domain: cityNames
  });

  return _react2.default.createElement('svg', { width: width, height: height, __source: {
      fileName: _jsxFileName,
      lineNumber: 90
    }
  }, _react2.default.createElement(_group2.default, { top: margin.top, left: margin.left, __source: {
      fileName: _jsxFileName,
      lineNumber: 91
    }
  }, _react2.default.createElement(_axis2.default.AxisBottom, {
    label: '',
    top: yMax,
    scale: xScale,
    hideAxisLine: true,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 92
    }
  }), _react2.default.createElement(_axis2.default.AxisLeft, {
    scale: yScale,
    label: 'Temperature (\xBAF)',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 98
    }
  }), selected.map(getCity).map(function (_ref4) {
    var id = _ref4.id,
        values = _ref4.values;

    var lastDatum = values[values.length - 1];
    return _react2.default.createElement('g', { key: '' + id, __source: {
        fileName: _jsxFileName,
        lineNumber: 105
      }
    }, _react2.default.createElement(_shape2.default.LinePath, {
      data: values,
      xScale: xScale,
      yScale: yScale,
      x: x,
      y: y,
      curve: _curve2.default.basis,
      stroke: color(id),
      strokeWidth: 1,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 106
      }
    }), _react2.default.createElement('text', {
      fontSize: 9,
      dy: "0.35em",
      dx: 2,
      x: xScale(x(lastDatum)),
      y: yScale(y(lastDatum)),
      __source: {
        fileName: _jsxFileName,
        lineNumber: 116
      }
    }, id));
  }), _react2.default.createElement(Legend, {
    data: data,
    selected: selected,
    xMax: xMax,
    yMax: yMax,
    color: color,
    updateSelected: updateSelected,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 128
    }
  })));
});


var Legend = function Legend(_ref5) {
  var data = _ref5.data,
      selected = _ref5.selected,
      updateSelected = _ref5.updateSelected,
      xMax = _ref5.xMax,
      yMax = _ref5.yMax,
      color = _ref5.color;

  var margin = 20;
  var xPadding = 60;
  var yPadding = 30;
  var yOffset = yMax - yPadding;
  var xOffset = xMax - xPadding;
  var size = 8;
  var fontSize = 12;
  return _react2.default.createElement('g', {
    'data-jsx': 1388055448,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 157
    }
  }, data.map(function (_ref6, i) {
    var id = _ref6.id,
        values = _ref6.values;

    return _react2.default.createElement('g', {
      key: 'legend-' + id,
      className: 'legend-item',
      transform: 'translate(' + xOffset + ', ' + (yOffset - i * margin) + ')',
      onClick: function onClick() {
        return updateSelected(id);
      },
      fillOpacity: selected.includes(id) ? 1 : 0.5,
      'data-jsx': 1388055448,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 160
      }
    }, _react2.default.createElement('rect', { width: size, height: size, fill: color(id), 'data-jsx': 1388055448,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 167
      }
    }), _react2.default.createElement('text', { fill: color(id), dy: ".7em", dx: fontSize, fontSize: fontSize, 'data-jsx': 1388055448,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 168
      }
    }, id));
  }), _react2.default.createElement(_style2.default, {
    styleId: 1388055448,
    css: '.legend-item[data-jsx="1388055448"]:hover {cursor: pointer;}\n/*# sourceMappingURL=data:application/json;base64,  */\n/*@ sourceURL=components/charts/MultiSeriesLine.js */'
  }));
};