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

var _legends2 = _interopRequireDefault(_legends);

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

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

exports.default = function () {
  return _react2.default.createElement(_show2.default, {
    events: true,
    margin: {
      top: 10,
      left: 40,
      right: 30,
      bottom: 80
    },
    component: _legends2.default,
    title: 'Legends',
    __source: {
      fileName: _jsxFileName,
      lineNumber: 7
    }
  }, 'import React from \'react\';\nimport { format } from \'d3-format\';\nimport {\n  Legend,\n  LegendLinear,\n  LegendQuantile,\n  LegendOrdinal,\n  LegendSize,\n  LegendThreshold,\n} from \'@vx/legend\';\nimport {\n  scaleQuantize,\n  scaleLinear,\n  scaleOrdinal,\n  scaleThreshold,\n} from \'@vx/scale\';\n\nimport {\n  GlyphStar,\n  GlyphWye,\n  GlyphTriangle,\n  GlyphDiamond,\n} from \'@vx/glyph\';\n\nconst oneDecimalFormat = format(\'.1f\');\nconst twoDecimalFormat = format(\'.2f\');\n\nconst quantile = scaleQuantize({\n  domain: [0, 0.15],\n  range: [\'#eb4d70\', \'#f19938\', \'#6ce18b\', \'#78f6ef\', \'#9096f8\'],\n});\n\nconst linear = scaleLinear({\n  domain: [0, 10],\n  range: [\'#ed4fbb\', \'#e9a039\'],\n});\n\nconst ordinalColor = scaleOrdinal({\n  domain: [\'a\', \'b\', \'c\', \'d\'],\n  range: [\'#7d81f6\', \'#4899f1\', \'#71f5ef\', \'#66d981\'].reverse(),\n});\n\nconst ordinalColor2 = scaleOrdinal({\n  domain: [\'a\', \'b\', \'c\', \'d\'],\n  range: [\'#8386f7\', \'#e64357\', \'#f29b38\', \'#fae856\'].reverse(),\n});\n\nconst ordinalShape = scaleOrdinal({\n  domain: [\'a\', \'b\', \'c\', \'d\', \'e\'],\n  range: [\n    <GlyphStar size={50} top={50 / 6} left={50 / 6} fill="#dd59b8" />,\n    <GlyphWye size={50} top={50 / 6} left={50 / 6} fill="#de6a9a" />,\n    <GlyphTriangle\n      size={50}\n      top={50 / 6}\n      left={50 / 6}\n      fill="#de7d7b"\n    />,\n    <GlyphDiamond\n      size={50}\n      top={50 / 6}\n      left={50 / 6}\n      fill="#df905f"\n    />,\n    props => (\n      <text fontSize="12" dy="1em" dx=".33em" fill="#e0a346">\n        $\n      </text>\n    ),\n  ],\n});\n\nconst threshold = scaleThreshold({\n  domain: [0.01, 0.02, 0.04, 0.06, 0.08, 0.1],\n  range: [\n    \'#f2f0f7\',\n    \'#dadaeb\',\n    \'#bcbddc\',\n    \'#9e9ac8\',\n    \'#756bb1\',\n    \'#54278f\',\n  ],\n});\n\nconst size = scaleLinear({\n  domain: [0, 10],\n  range: [10, 30],\n});\n\nconst sizeOpacity = scaleLinear({\n  domain: [0, 10],\n  range: [0.4, 1],\n});\n\nconst sizeColor = scaleLinear({\n  domain: [0, 10],\n  range: [\'#75fcfc\', \'#3236b8\'],\n});\n\nfunction LegendDemo({ title, children }) {\n  return (\n    <div className="legend">\n      <div className="title">{title}</div>\n      {children}\n      <style jsx>{`\n        .legend {\n          line-height: 0.9em;\n          color: #efefef;\n          font-size: 10px;\n          font-family: arial;\n          padding: 10px 10px;\n          float: left;\n          border: 1px solid rgba(255, 255, 255, 0.3);\n          border-radius: 8px;\n          margin: 5px 5px;\n        }\n        .title {\n          font-size: 12px;\n          margin-bottom: 10px;\n          font-weight: 100;\n        }\n      `}</style>\n    </div>\n  );\n}\n\nexport default ({ width, height, margin }) => {\n  if (width < 10) return null;\n  return (\n    <div className="chart">\n      <LegendDemo title="Size">\n        <LegendSize\n          itemMargin="0"\n          shapeMargin="5px 0"\n          itemDirection="row"\n          scale={size}\n          onClick={data => event => {\n            alert(`clicked: `${JSON.stringify(data)}`);\n          }}\n          onMouseOver={data => event => {\n            console.log(\n              `mouse over: ${data.text}`,\n              `index: ${data.index}`,\n            );\n          }}\n          shapeStyle={props => {\n            return {\n              fill: sizeColor(props.datum),\n            };\n          }}\n          shape={props => {\n            const { size } = props;\n            return (\n              <svg width={size} height={size}>\n                <circle\n                  {...props}\n                  r={size / 2}\n                  cx={size / 2}\n                  cy={size / 2}\n                />\n              </svg>\n            );\n          }}\n        />\n      </LegendDemo>\n      <LegendDemo title="Quantile">\n        <LegendQuantile\n          shape="circle"\n          scale={quantile}\n          onClick={data => event => {\n            alert(`clicked: `${JSON.stringify(data)}`);\n          }}\n          onMouseOver={data => event => {\n            console.log(\n              `mouse over: ${data.text}`,\n              `index: ${data.index}`,\n            );\n          }}\n        />\n      </LegendDemo>\n      <LegendDemo title="Linear">\n        <LegendLinear\n          shape="circle"\n          scale={linear}\n          labelFormat={(d, i) => {\n            if (i % 2 === 0) return oneDecimalFormat(d);\n            return \'\';\n          }}\n          onClick={data => event => {\n            alert(`clicked: `${JSON.stringify(data)}`);\n          }}\n          onMouseOver={data => event => {\n            console.log(\n              `mouse over: ${data.text}`,\n              `index: ${data.index}`,\n            );\n          }}\n        />\n      </LegendDemo>\n      <LegendDemo title="Threshold">\n        <LegendThreshold\n          direction="column-reverse"\n          itemDirection="row"\n          labelMargin="2px 0 0 10px"\n          shapeMargin="1px 0 0"\n          scale={threshold}\n          onClick={data => event => {\n            alert(`clicked: `${JSON.stringify(data)}`);\n          }}\n          onMouseOver={data => event => {\n            console.log(\n              `mouse over: ${data.text}`,\n              `index: ${data.index}`,\n            );\n          }}\n        />\n      </LegendDemo>\n      <LegendDemo title="Ordinal">\n        <LegendOrdinal\n          direction="row"\n          itemDirection="row"\n          shapeMargin="0"\n          labelMargin="0 0 0 4px"\n          itemMargin="0 5px"\n          scale={ordinalColor}\n          shape="rect"\n          fill={({ datum }) => ordinalColor(datum)}\n          labelFormat={label => `${label.toUpperCase()}`}\n          onClick={data => event => {\n            alert(`clicked: `${JSON.stringify(data)}`);\n          }}\n          onMouseOver={data => event => {\n            console.log(\n              `mouse over: ${data.text}`,\n              `index: ${data.index}`,\n            );\n          }}\n        />\n      </LegendDemo>\n      <LegendDemo title="Custom Legend">\n        <Legend\n          direction="row"\n          itemDirection="column"\n          labelMargin="0"\n          shapeMargin="0 0 8px 0"\n          itemMargin="0 4px 0 0"\n          scale={ordinalShape}\n          fill={({ datum }) => ordinalColor2(datum)}\n          shapeWidth={15}\n          onClick={data => event => {\n            alert(`clicked: `${JSON.stringify(data)}`);\n          }}\n          onMouseOver={data => event => {\n            console.log(\n              `mouse over: ${data.text}`,\n              `index: ${data.index}`,\n            );\n          }}\n          shape={props => {\n            return (\n              <svg width={props.width} height={props.height}>\n                {!React.isValidElement(\n                  ordinalShape(props.label.datum),\n                ) &&\n                  React.createElement(\n                    ordinalShape(props.label.datum),\n                    {\n                      ...props,\n                    },\n                  )}\n                {React.isValidElement(\n                  ordinalShape(props.label.datum),\n                ) &&\n                  React.cloneElement(ordinalShape(props.label.datum))}\n              </svg>\n            );\n          }}\n        />\n      </LegendDemo>\n    </div>\n  );\n};\n');
};
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBhZ2VzL2xlZ2VuZHMuanMiXSwibmFtZXMiOlsiUmVhY3QiLCJTaG93IiwiTGVnZW5kcyIsInRvcCIsImxlZnQiLCJyaWdodCIsImJvdHRvbSJdLCJtYXBwaW5ncyI6Ijs7Ozs7O0FBQUEsQUFBTzs7OztBQUNQLEFBQU8sQUFBVTs7OztBQUNqQixBQUFPLEFBQWEsQUFFcEI7Ozs7Ozs7O2tCQUFlLFlBQU0sQUFDbkI7eUJBQ0UsQUFBQztZQUFELEFBRUU7O1dBQVEsQUFDRCxBQUNMO1lBRk0sQUFFQSxBQUNOO2FBSE0sQUFHQyxBQUNQO2NBTkosQUFFVSxBQUlFLEFBRVY7QUFOUSxBQUNOO0FBSEosQUFRYSxBQUNYO1dBVEYsQUFTUTs7Z0JBVFI7a0JBQUE7QUFBQTtBQUNFLEdBREYsRUFERixBQUNFLEFBd1NIO0FBMVNEIiwiZmlsZSI6ImxlZ2VuZHMuanM/ZW50cnkiLCJzb3VyY2VSb290IjoiL1VzZXJzL2hzaG9mZi9jb2RlL3Z4L3BhY2thZ2VzL3Z4LWRlbW8ifQ==