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

var _barstackhorizontal2 = _interopRequireDefault(_barstackhorizontal);

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

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

exports.default = function () {
  return _react2.default.createElement(_show2.default, {
    events: true,
    margin: {
      top: 80,
      left: 80,
      right: 40,
      bottom: 100
    },
    component: _barstackhorizontal2.default,
    title: 'Bar Stack Horizontal',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 7
    }
  }, 'import React from \'react\';\nimport { BarStackHorizontal } from \'@vx/shape\';\nimport { Group } from \'@vx/group\';\nimport { AxisBottom, AxisLeft } from \'@vx/axis\';\nimport { cityTemperature } from \'@vx/mock-data\';\nimport { scaleBand, scaleLinear, scaleOrdinal } from \'@vx/scale\';\nimport { timeParse, timeFormat } from \'d3-time-format\';\nimport { withTooltip, Tooltip } from \'@vx/tooltip\';\nimport { LegendOrdinal } from \'@vx/legend\';\nimport { extent, max } from \'d3-array\';\n\nconst data = cityTemperature.slice(0, 12);\nconst keys = Object.keys(data[0]).filter(d => d !== \'date\');\nconst parseDate = timeParse(\'%Y%m%d\');\nconst format = timeFormat(\'%b %d\');\nconst formatDate = date => format(parseDate(date));\n\nconst totals = data.reduce((ret, cur) => {\n  const t = keys.reduce((dailyTotal, k) => {\n    dailyTotal += +cur[k];\n    return dailyTotal;\n  }, 0);\n  ret.push(t);\n  return ret;\n}, []);\n\nexport default withTooltip(\n  ({\n    width,\n    height,\n    events = false,\n    margin = {\n      top: 40,\n      left: 50,\n      right: 40,\n      bottom: 100,\n    },\n    tooltipOpen,\n    tooltipLeft,\n    tooltipTop,\n    tooltipData,\n    hideTooltip,\n    showTooltip,\n  }) => {\n    if (width < 10) return null;\n\n    // accessors\n    const y = d => d.date;\n    const x = d => d.value;\n\n    // bounds\n    const xMax = width - margin.left - margin.right;\n    const yMax = height - margin.top - margin.bottom;\n\n    // // scales\n    const xScale = scaleLinear({\n      rangeRound: [0, xMax],\n      domain: [0, max(totals)],\n      nice: true,\n    });\n    const yScale = scaleBand({\n      rangeRound: [yMax, 0],\n      domain: data.map(y),\n      padding: 0.2,\n      tickFormat: () => val => formatDate(val),\n    });\n    const zScale = scaleOrdinal({\n      domain: keys,\n      range: [\'#6c5efb\', \'#c998ff\', \'#a44afe\'],\n    });\n\n    let tooltipTimeout;\n\n    return (\n      <div style={{ position: \'relative\' }}>\n        <svg width={width} height={height}>\n          <rect\n            x={0}\n            y={0}\n            width={width}\n            height={height}\n            fill="#eaedff"\n            rx={14}\n          />\n          <Group top={margin.top} left={margin.left}>\n            <BarStackHorizontal\n              data={data}\n              keys={keys}\n              height={yMax}\n              y={y}\n              xScale={xScale}\n              yScale={yScale}\n              zScale={zScale}\n              onClick={data => event => {\n                if (!events) return;\n                alert(`clicked: ${JSON.stringify(data)}`);\n              }}\n              onMouseLeave={data => event => {\n                tooltipTimeout = setTimeout(() => {\n                  hideTooltip();\n                }, 300);\n              }}\n              onMouseMove={data => event => {\n                if (tooltipTimeout) clearTimeout(tooltipTimeout);\n                showTooltip({\n                  tooltipData: data,\n                  tooltipTop: margin.top + yScale(y(data.data)),\n                  tooltipLeft: margin.left + data.width + 75,\n                });\n              }}\n            />\n            <AxisLeft\n              hideAxisLine={true}\n              hideTicks={true}\n              scale={yScale}\n              stroke="#a44afe"\n              tickStroke="#a44afe"\n              tickLabelProps={(value, index) => ({\n                fill: \'#a44afe\',\n                fontSize: 11,\n                textAnchor: \'end\',\n                dy: \'0.33em\',\n              })}\n            />\n            <AxisBottom\n              scale={xScale}\n              top={yMax}\n              stroke="#a44afe"\n              tickStroke="#a44afe"\n              tickLabelProps={(value, index) => ({\n                fill: \'#a44afe\',\n                fontSize: 11,\n                textAnchor: \'middle\',\n              })}\n            />\n          </Group>\n        </svg>\n        <div\n          style={{\n            position: \'absolute\',\n            top: margin.top / 2 - 10,\n            width: \'100%\',\n            display: \'flex\',\n            justifyContent: \'center\',\n            fontSize: \'14px\',\n          }}\n        >\n          <LegendOrdinal\n            scale={zScale}\n            direction="row"\n            labelMargin="0 15px 0 0"\n          />\n        </div>\n        {tooltipOpen && (\n          <Tooltip\n            top={tooltipTop}\n            left={tooltipLeft}\n            style={{\n              minWidth: 60,\n              backgroundColor: \'rgba(0,0,0,0.9)\',\n              color: \'white\',\n            }}\n          >\n            <div style={{ color: zScale(tooltipData.key) }}>\n              <strong>{tooltipData.key}</strong>\n            </div>\n            <div>{tooltipData.data[tooltipData.key]}\u2109</div>\n            <div>\n              <small>{tooltipData.xFormatted}</small>\n            </div>\n          </Tooltip>\n        )}\n      </div>\n    );\n  },\n);');
};
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBhZ2VzL2JhcnN0YWNraG9yaXpvbnRhbC5qcyJdLCJuYW1lcyI6WyJSZWFjdCIsIlNob3ciLCJCYXJTdGFja0hvcml6b250YWwiLCJ0b3AiLCJsZWZ0IiwicmlnaHQiLCJib3R0b20iXSwibWFwcGluZ3MiOiI7Ozs7OztBQUFBLEFBQU87Ozs7QUFDUCxBQUFPLEFBQVU7Ozs7QUFDakIsQUFBTyxBQUF3QixBQUUvQjs7Ozs7Ozs7a0JBQWUsWUFBTSxBQUNuQjt5QkFDRSxBQUFDO1lBQUQsQUFFRTs7V0FBUSxBQUNELEFBQ0w7WUFGTSxBQUVBLEFBQ047YUFITSxBQUdDLEFBQ1A7Y0FOSixBQUVVLEFBSUUsQUFFVjtBQU5RLEFBQ047QUFISixBQVFhLEFBQ1g7V0FURixBQVNROztnQkFUUjtrQkFBQTtBQUFBO0FBQ0UsR0FERixFQURGLEFBQ0UsQUE2TEg7QUEvTEQiLCJmaWxlIjoiYmFyc3RhY2tob3Jpem9udGFsLmpzP2VudHJ5Iiwic291cmNlUm9vdCI6Ii9Vc2Vycy9oc2hvZmYvY29kZS92eC9wYWNrYWdlcy92eC1kZW1vIn0=