\r\n
\r\n );\r\n\r\n }\r\n\r\n}","import './css/index.css';\r\nimport React, { Component } from 'react';\r\nimport { array, string, bool, object } from 'prop-types';\r\nimport { createPortal } from 'react-dom';\r\nimport globalVPS from 'js/global-vps';\r\nimport focusTrap from 'js/focus-trap';\r\nimport SearchBox from 'components/search-box/component';\r\nimport SuggestedSearch from 'components/suggested-search/component';\r\n\r\nexport default class extends Component {\r\n\r\n static propTypes = {\r\n suggestedSearch: array,\r\n searchPagePath: string,\r\n endpoint: string,\r\n isOpen: bool,\r\n refocusElement: object.isRequired,\r\n wrapper: object.isRequired\r\n };\r\n\r\n constructor( props ) {\r\n\r\n super( props );\r\n\r\n this.state = {\r\n isSVP: globalVPS.current( 'small' ),\r\n isOpen: props.isOpen\r\n };\r\n\r\n this.unsub = null;\r\n this.pageBody = document.querySelector( 'body' );\r\n this.focusTrap = focusTrap( props.wrapper );\r\n\r\n }\r\n\r\n componentDidMount() {\r\n\r\n this.setup();\r\n\r\n }\r\n\r\n componentDidUpdate( prevProps, prevState, snapshot ) {\r\n\r\n const didPropsChange = this.props !== prevProps;\r\n const didStateChange = this.state !== prevState;\r\n\r\n if ( didStateChange && !this.state.isOpen ) this.cleanup();\r\n\r\n if ( didPropsChange && !didStateChange ) {\r\n\r\n this.props.isOpen && this.setup();\r\n\r\n this.setState( {\r\n isOpen: this.props.isOpen\r\n } );\r\n\r\n }\r\n\r\n }\r\n\r\n setup = () => {\r\n\r\n this.unsub = globalVPS( 'small', ( state ) => {\r\n\r\n if ( this.state.isSVP === state.current ) return;\r\n\r\n this.setState( {\r\n isSVP: state.current\r\n } );\r\n\r\n } );\r\n\r\n this.focusTrap.on();\r\n this.pageBody.setAttribute( 'aria-hidden', true );\r\n\r\n };\r\n\r\n cleanup = () => {\r\n\r\n this.unsub();\r\n this.focusTrap.off();\r\n this.pageBody.setAttribute( 'aria-hidden', false );\r\n this.props.wrapper.classList.remove( 'expanded' );\r\n this.props.refocusElement.focus();\r\n\r\n };\r\n\r\n closeOverlay = () => {\r\n\r\n this.setState( { isOpen: false } );\r\n\r\n };\r\n\r\n renderOverlay = () => {\r\n\r\n const portal = createPortal(\r\n Featured Topics
\r\n- { links }
\r\n { !this.state.isSVP && Federal Reserve Bank Philadelphia }\r\n \r\n
\r\n \r\n
\r\n ,\r\n this.props.wrapper\r\n );\r\n\r\n this.props.wrapper.classList.add( 'expanded' );\r\n\r\n return portal;\r\n\r\n };\r\n\r\n render() {\r\n\r\n return this.state.isOpen ? this.renderOverlay() : null;\r\n\r\n }\r\n\r\n}","import './css/index.css';\r\nimport React from 'react';\r\nimport { render } from 'react-dom';\r\nimport globalVPS from 'js/global-vps';\r\nimport focusTrap from 'js/focus-trap';\r\nimport checkKeys from 'js/check-keys';\r\nimport Overlay from './overlay/index';\r\n\r\nexport default class {\r\n\r\n static name = 'global-nav';\r\n\r\n constructor( config ) {\r\n\r\n Object.assign( this, config );\r\n\r\n this.state = {\r\n smallNavOpen: false,\r\n smallNavActive: false\r\n };\r\n\r\n }\r\n\r\n ready() {\r\n\r\n this.menu = document.querySelector( '.nav-menu button' );\r\n this.navLinks = document.querySelector( '#nav-links' );\r\n this.navTopic = document.querySelector( '.nav-topic' );\r\n this.navTopicItems = document.querySelectorAll( '.nav-topic > li' );\r\n this.navInstitution = document.querySelector( '.nav-institution' );\r\n this.searchBox = document.querySelector( '.search-results .search-box' );\r\n this.focusTrap = focusTrap( this.element );\r\n\r\n this.setupOverlayWrapper();\r\n this.bindNavSearchElements();\r\n this.setNavSearchElement();\r\n this.setupVPSubscription();\r\n\r\n }\r\n\r\n /**\r\n * Update this component's options object\r\n *\r\n * @param {Object} options - The options to add/override.\r\n */\r\n setOptions = ( options ) => {\r\n\r\n Object.assign( this.options, options );\r\n\r\n };\r\n\r\n hasDisplay = ( element ) => {\r\n\r\n const style = document.defaultView.getComputedStyle( element );\r\n const value = style.getPropertyValue( 'display' );\r\n\r\n return !!value && value !== 'none';\r\n\r\n };\r\n\r\n setupVPSubscription = () => {\r\n\r\n globalVPS( ( state ) => {\r\n\r\n this.setNavSearchElement();\r\n this.moveInstitutionLinks( globalVPS.current( 'large' ) );\r\n\r\n if ( !globalVPS.current( 'large' ) ) {\r\n\r\n this.setupNavigation();\r\n\r\n }\r\n else if ( this.state.smallNavActive ) {\r\n\r\n this.moveInstitutionLinks( 'afterbegin' );\r\n this.cleanupNavigation();\r\n\r\n }\r\n\r\n } );\r\n\r\n };\r\n\r\n moveInstitutionLinks = () => {\r\n\r\n if ( globalVPS.current( 'large' ) ) {\r\n\r\n this.navLinks.insertBefore( this.navInstitution, this.navTopic );\r\n\r\n }\r\n\r\n else {\r\n\r\n this.navLinks.appendChild( this.navInstitution );\r\n\r\n }\r\n\r\n };\r\n\r\n setupOverlayWrapper = () => {\r\n\r\n this.overlayWrapper = document.createElement( 'div' );\r\n this.overlayWrapper.className = 'overlay-wrapper';\r\n document.body.insertAdjacentElement( 'beforeend', this.overlayWrapper );\r\n\r\n };\r\n\r\n handleSearch = ( e ) => {\r\n\r\n if ( !this.options.showSearchOverlay ) return this.searchBox.focus();\r\n\r\n render(\r\n { childrenWithProps }
\r\n ,\r\n this.props.wrapper\r\n )\r\n );\r\n\r\n };\r\n\r\n removeOverlay = () => {\r\n\r\n const el = this.props.wrapper;\r\n\r\n if ( el ) {\r\n\r\n el.parentNode.removeChild( el );\r\n\r\n }\r\n\r\n };\r\n\r\n updateAriaHidden = () => {\r\n\r\n this.pageBody.setAttribute( 'aria-hidden', false );\r\n\r\n this.removeOverlay();\r\n\r\n this.props.refocusElement ? this.props.refocusElement.focus() : null;\r\n\r\n\r\n return null;\r\n\r\n };\r\n\r\n render() {\r\n\r\n return this.state.isOpen ? this.createOverlay() : this.updateAriaHidden();\r\n\r\n }\r\n\r\n}\r\n","import {formatDecimalParts} from \"./formatDecimal.js\";\n\nexport default function(x) {\n return x = formatDecimalParts(Math.abs(x)), x ? x[1] : NaN;\n}\n","import arrayWithoutHoles from \"./arrayWithoutHoles.js\";\nimport iterableToArray from \"./iterableToArray.js\";\nimport unsupportedIterableToArray from \"./unsupportedIterableToArray.js\";\nimport nonIterableSpread from \"./nonIterableSpread.js\";\nexport default function _toConsumableArray(arr) {\n return arrayWithoutHoles(arr) || iterableToArray(arr) || unsupportedIterableToArray(arr) || nonIterableSpread();\n}","import arrayLikeToArray from \"./arrayLikeToArray.js\";\nexport default function _arrayWithoutHoles(arr) {\n if (Array.isArray(arr)) return arrayLikeToArray(arr);\n}","export default function _nonIterableSpread() {\n throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\");\n}","export default function _taggedTemplateLiteral(strings, raw) {\n if (!raw) {\n raw = strings.slice(0);\n }\n\n return Object.freeze(Object.defineProperties(strings, {\n raw: {\n value: Object.freeze(raw)\n }\n }));\n}","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n\tvalue: true\n});\n\nvar _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _react = require('react');\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _propTypes = require('prop-types');\n\nvar _propTypes2 = _interopRequireDefault(_propTypes);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar sizerStyle = {\n\tposition: 'absolute',\n\ttop: 0,\n\tleft: 0,\n\tvisibility: 'hidden',\n\theight: 0,\n\toverflow: 'scroll',\n\twhiteSpace: 'pre'\n};\n\nvar INPUT_PROPS_BLACKLIST = ['extraWidth', 'injectStyles', 'inputClassName', 'inputRef', 'inputStyle', 'minWidth', 'onAutosize', 'placeholderIsMinWidth'];\n\nvar cleanInputProps = function cleanInputProps(inputProps) {\n\tINPUT_PROPS_BLACKLIST.forEach(function (field) {\n\t\treturn delete inputProps[field];\n\t});\n\treturn inputProps;\n};\n\nvar copyStyles = function copyStyles(styles, node) {\n\tnode.style.fontSize = styles.fontSize;\n\tnode.style.fontFamily = styles.fontFamily;\n\tnode.style.fontWeight = styles.fontWeight;\n\tnode.style.fontStyle = styles.fontStyle;\n\tnode.style.letterSpacing = styles.letterSpacing;\n\tnode.style.textTransform = styles.textTransform;\n};\n\nvar isIE = typeof window !== 'undefined' && window.navigator ? /MSIE |Trident\\/|Edge\\//.test(window.navigator.userAgent) : false;\n\nvar generateId = function generateId() {\n\t// we only need an auto-generated ID for stylesheet injection, which is only\n\t// used for IE. so if the browser is not IE, this should return undefined.\n\treturn isIE ? '_' + Math.random().toString(36).substr(2, 12) : undefined;\n};\n\nvar AutosizeInput = function (_Component) {\n\t_inherits(AutosizeInput, _Component);\n\n\tfunction AutosizeInput(props) {\n\t\t_classCallCheck(this, AutosizeInput);\n\n\t\tvar _this = _possibleConstructorReturn(this, (AutosizeInput.__proto__ || Object.getPrototypeOf(AutosizeInput)).call(this, props));\n\n\t\t_this.inputRef = function (el) {\n\t\t\t_this.input = el;\n\t\t\tif (typeof _this.props.inputRef === 'function') {\n\t\t\t\t_this.props.inputRef(el);\n\t\t\t}\n\t\t};\n\n\t\t_this.placeHolderSizerRef = function (el) {\n\t\t\t_this.placeHolderSizer = el;\n\t\t};\n\n\t\t_this.sizerRef = function (el) {\n\t\t\t_this.sizer = el;\n\t\t};\n\n\t\t_this.state = {\n\t\t\tinputWidth: props.minWidth,\n\t\t\tinputId: props.id || generateId()\n\t\t};\n\t\treturn _this;\n\t}\n\n\t_createClass(AutosizeInput, [{\n\t\tkey: 'componentDidMount',\n\t\tvalue: function componentDidMount() {\n\t\t\tthis.mounted = true;\n\t\t\tthis.copyInputStyles();\n\t\t\tthis.updateInputWidth();\n\t\t}\n\t}, {\n\t\tkey: 'UNSAFE_componentWillReceiveProps',\n\t\tvalue: function UNSAFE_componentWillReceiveProps(nextProps) {\n\t\t\tvar id = nextProps.id;\n\n\t\t\tif (id !== this.props.id) {\n\t\t\t\tthis.setState({ inputId: id || generateId() });\n\t\t\t}\n\t\t}\n\t}, {\n\t\tkey: 'componentDidUpdate',\n\t\tvalue: function componentDidUpdate(prevProps, prevState) {\n\t\t\tif (prevState.inputWidth !== this.state.inputWidth) {\n\t\t\t\tif (typeof this.props.onAutosize === 'function') {\n\t\t\t\t\tthis.props.onAutosize(this.state.inputWidth);\n\t\t\t\t}\n\t\t\t}\n\t\t\tthis.updateInputWidth();\n\t\t}\n\t}, {\n\t\tkey: 'componentWillUnmount',\n\t\tvalue: function componentWillUnmount() {\n\t\t\tthis.mounted = false;\n\t\t}\n\t}, {\n\t\tkey: 'copyInputStyles',\n\t\tvalue: function copyInputStyles() {\n\t\t\tif (!this.mounted || !window.getComputedStyle) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tvar inputStyles = this.input && window.getComputedStyle(this.input);\n\t\t\tif (!inputStyles) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tcopyStyles(inputStyles, this.sizer);\n\t\t\tif (this.placeHolderSizer) {\n\t\t\t\tcopyStyles(inputStyles, this.placeHolderSizer);\n\t\t\t}\n\t\t}\n\t}, {\n\t\tkey: 'updateInputWidth',\n\t\tvalue: function updateInputWidth() {\n\t\t\tif (!this.mounted || !this.sizer || typeof this.sizer.scrollWidth === 'undefined') {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tvar newInputWidth = void 0;\n\t\t\tif (this.props.placeholder && (!this.props.value || this.props.value && this.props.placeholderIsMinWidth)) {\n\t\t\t\tnewInputWidth = Math.max(this.sizer.scrollWidth, this.placeHolderSizer.scrollWidth) + 2;\n\t\t\t} else {\n\t\t\t\tnewInputWidth = this.sizer.scrollWidth + 2;\n\t\t\t}\n\t\t\t// add extraWidth to the detected width. for number types, this defaults to 16 to allow for the stepper UI\n\t\t\tvar extraWidth = this.props.type === 'number' && this.props.extraWidth === undefined ? 16 : parseInt(this.props.extraWidth) || 0;\n\t\t\tnewInputWidth += extraWidth;\n\t\t\tif (newInputWidth < this.props.minWidth) {\n\t\t\t\tnewInputWidth = this.props.minWidth;\n\t\t\t}\n\t\t\tif (newInputWidth !== this.state.inputWidth) {\n\t\t\t\tthis.setState({\n\t\t\t\t\tinputWidth: newInputWidth\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t}, {\n\t\tkey: 'getInput',\n\t\tvalue: function getInput() {\n\t\t\treturn this.input;\n\t\t}\n\t}, {\n\t\tkey: 'focus',\n\t\tvalue: function focus() {\n\t\t\tthis.input.focus();\n\t\t}\n\t}, {\n\t\tkey: 'blur',\n\t\tvalue: function blur() {\n\t\t\tthis.input.blur();\n\t\t}\n\t}, {\n\t\tkey: 'select',\n\t\tvalue: function select() {\n\t\t\tthis.input.select();\n\t\t}\n\t}, {\n\t\tkey: 'renderStyles',\n\t\tvalue: function renderStyles() {\n\t\t\t// this method injects styles to hide IE's clear indicator, which messes\n\t\t\t// with input size detection. the stylesheet is only injected when the\n\t\t\t// browser is IE, and can also be disabled by the `injectStyles` prop.\n\t\t\tvar injectStyles = this.props.injectStyles;\n\n\t\t\treturn isIE && injectStyles ? _react2.default.createElement('style', { dangerouslySetInnerHTML: {\n\t\t\t\t\t__html: 'input#' + this.state.inputId + '::-ms-clear {display: none;}'\n\t\t\t\t} }) : null;\n\t\t}\n\t}, {\n\t\tkey: 'render',\n\t\tvalue: function render() {\n\t\t\tvar sizerValue = [this.props.defaultValue, this.props.value, ''].reduce(function (previousValue, currentValue) {\n\t\t\t\tif (previousValue !== null && previousValue !== undefined) {\n\t\t\t\t\treturn previousValue;\n\t\t\t\t}\n\t\t\t\treturn currentValue;\n\t\t\t});\n\n\t\t\tvar wrapperStyle = _extends({}, this.props.style);\n\t\t\tif (!wrapperStyle.display) wrapperStyle.display = 'inline-block';\n\n\t\t\tvar inputStyle = _extends({\n\t\t\t\tboxSizing: 'content-box',\n\t\t\t\twidth: this.state.inputWidth + 'px'\n\t\t\t}, this.props.inputStyle);\n\n\t\t\tvar inputProps = _objectWithoutProperties(this.props, []);\n\n\t\t\tcleanInputProps(inputProps);\n\t\t\tinputProps.className = this.props.inputClassName;\n\t\t\tinputProps.id = this.state.inputId;\n\t\t\tinputProps.style = inputStyle;\n\n\t\t\treturn _react2.default.createElement(\n\t\t\t\t'div',\n\t\t\t\t{ className: this.props.className, style: wrapperStyle },\n\t\t\t\tthis.renderStyles(),\n\t\t\t\t_react2.default.createElement('input', _extends({}, inputProps, { ref: this.inputRef })),\n\t\t\t\t_react2.default.createElement(\n\t\t\t\t\t'div',\n\t\t\t\t\t{ ref: this.sizerRef, style: sizerStyle },\n\t\t\t\t\tsizerValue\n\t\t\t\t),\n\t\t\t\tthis.props.placeholder ? _react2.default.createElement(\n\t\t\t\t\t'div',\n\t\t\t\t\t{ ref: this.placeHolderSizerRef, style: sizerStyle },\n\t\t\t\t\tthis.props.placeholder\n\t\t\t\t) : null\n\t\t\t);\n\t\t}\n\t}]);\n\n\treturn AutosizeInput;\n}(_react.Component);\n\nAutosizeInput.propTypes = {\n\tclassName: _propTypes2.default.string, // className for the outer element\n\tdefaultValue: _propTypes2.default.any, // default field value\n\textraWidth: _propTypes2.default.oneOfType([// additional width for input element\n\t_propTypes2.default.number, _propTypes2.default.string]),\n\tid: _propTypes2.default.string, // id to use for the input, can be set for consistent snapshots\n\tinjectStyles: _propTypes2.default.bool, // inject the custom stylesheet to hide clear UI, defaults to true\n\tinputClassName: _propTypes2.default.string, // className for the input element\n\tinputRef: _propTypes2.default.func, // ref callback for the input element\n\tinputStyle: _propTypes2.default.object, // css styles for the input element\n\tminWidth: _propTypes2.default.oneOfType([// minimum width for input element\n\t_propTypes2.default.number, _propTypes2.default.string]),\n\tonAutosize: _propTypes2.default.func, // onAutosize handler: function(newWidth) {}\n\tonChange: _propTypes2.default.func, // onChange handler: function(event) {}\n\tplaceholder: _propTypes2.default.string, // placeholder text\n\tplaceholderIsMinWidth: _propTypes2.default.bool, // don't collapse size to less than the placeholder\n\tstyle: _propTypes2.default.object, // css styles for the outer element\n\tvalue: _propTypes2.default.any // field value\n};\nAutosizeInput.defaultProps = {\n\tminWidth: 1,\n\tinjectStyles: true\n};\n\nexports.default = AutosizeInput;","var now = require('performance-now')\n , root = typeof window === 'undefined' ? global : window\n , vendors = ['moz', 'webkit']\n , suffix = 'AnimationFrame'\n , raf = root['request' + suffix]\n , caf = root['cancel' + suffix] || root['cancelRequest' + suffix]\n\nfor(var i = 0; !raf && i < vendors.length; i++) {\n raf = root[vendors[i] + 'Request' + suffix]\n caf = root[vendors[i] + 'Cancel' + suffix]\n || root[vendors[i] + 'CancelRequest' + suffix]\n}\n\n// Some versions of FF have rAF but not cAF\nif(!raf || !caf) {\n var last = 0\n , id = 0\n , queue = []\n , frameDuration = 1000 / 60\n\n raf = function(callback) {\n if(queue.length === 0) {\n var _now = now()\n , next = Math.max(0, frameDuration - (_now - last))\n last = next + _now\n setTimeout(function() {\n var cp = queue.slice(0)\n // Clear queue here to prevent\n // callbacks from appending listeners\n // to the current frame's queue\n queue.length = 0\n for(var i = 0; i < cp.length; i++) {\n if(!cp[i].cancelled) {\n try{\n cp[i].callback(last)\n } catch(e) {\n setTimeout(function() { throw e }, 0)\n }\n }\n }\n }, Math.round(next))\n }\n queue.push({\n handle: ++id,\n callback: callback,\n cancelled: false\n })\n return id\n }\n\n caf = function(handle) {\n for(var i = 0; i < queue.length; i++) {\n if(queue[i].handle === handle) {\n queue[i].cancelled = true\n }\n }\n }\n}\n\nmodule.exports = function(fn) {\n // Wrap in a new function to prevent\n // `cancel` potentially being assigned\n // to the native rAF function\n return raf.call(root, fn)\n}\nmodule.exports.cancel = function() {\n caf.apply(root, arguments)\n}\nmodule.exports.polyfill = function(object) {\n if (!object) {\n object = root;\n }\n object.requestAnimationFrame = raf\n object.cancelAnimationFrame = caf\n}\n","import React from 'react';\nimport createReactContext from 'create-react-context';\n\nvar _typeof = typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; };\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nvar StateContext = createReactContext(null);\n\nvar Container = function () {\n function Container() {\n var _this = this;\n\n _classCallCheck(this, Container);\n\n this._listeners = [];\n\n CONTAINER_DEBUG_CALLBACKS.forEach(function (cb) {\n return cb(_this);\n });\n }\n\n Container.prototype.setState = function setState(updater, callback) {\n var _this2 = this;\n\n return Promise.resolve().then(function () {\n var nextState = void 0;\n\n if (typeof updater === 'function') {\n nextState = updater(_this2.state);\n } else {\n nextState = updater;\n }\n\n if (nextState == null) {\n if (callback) callback();\n return;\n }\n\n _this2.state = Object.assign({}, _this2.state, nextState);\n\n var promises = _this2._listeners.map(function (listener) {\n return listener();\n });\n\n return Promise.all(promises).then(function () {\n if (callback) {\n return callback();\n }\n });\n });\n };\n\n Container.prototype.subscribe = function subscribe(fn) {\n this._listeners.push(fn);\n };\n\n Container.prototype.unsubscribe = function unsubscribe(fn) {\n this._listeners = this._listeners.filter(function (f) {\n return f !== fn;\n });\n };\n\n return Container;\n}();\n\nvar DUMMY_STATE = {};\n\nvar Subscribe = function (_React$Component) {\n _inherits(Subscribe, _React$Component);\n\n function Subscribe() {\n var _temp, _this3, _ret;\n\n _classCallCheck(this, Subscribe);\n\n for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n return _ret = (_temp = (_this3 = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this3), _this3.state = {}, _this3.instances = [], _this3.unmounted = false, _this3.onUpdate = function () {\n return new Promise(function (resolve) {\n if (!_this3.unmounted) {\n _this3.setState(DUMMY_STATE, resolve);\n } else {\n resolve();\n }\n });\n }, _temp), _possibleConstructorReturn(_this3, _ret);\n }\n\n Subscribe.prototype.componentWillUnmount = function componentWillUnmount() {\n this.unmounted = true;\n this._unsubscribe();\n };\n\n Subscribe.prototype._unsubscribe = function _unsubscribe() {\n var _this4 = this;\n\n this.instances.forEach(function (container) {\n container.unsubscribe(_this4.onUpdate);\n });\n };\n\n Subscribe.prototype._createInstances = function _createInstances(map, containers) {\n var _this5 = this;\n\n this._unsubscribe();\n\n if (map === null) {\n throw new Error('You must wrap your { heading }
\r\n \r\n\r\n \r\n
\r\n \r\n\r\n \r\n );\r\n\r\n render(\r\n { data.label }
\r\n );\r\n\r\n };\r\n\r\n const ValueContainer = ( { children, ...props } ) => {\r\n\r\n return (\r\n { filter.label }
\r\n\r\n { React.cloneElement( children[1] ) }\r\n\r\n \r\n
) : '' }\r\n \r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n { resultData.title }
\r\n\r\n \r\n
\r\n { resultData.icon.text }
\r\n\r\n\r\n {\r\n result.results.length > 0 &&\r\n
\r\n );\r\n\r\n};\r\n\r\nResult.propTypes = {\r\n page: number.isRequired,\r\n prev: func.isRequired,\r\n next: func.isRequired,\r\n update: func.isRequired,\r\n paginationButtons: array,\r\n divisor: number.isRequired,\r\n result: shape( {\r\n title: string.isRequired,\r\n results: arrayOf( shape( {\r\n attributes:\r\n shape( {\r\n title: string.isRequired,\r\n url: string.isRequired,\r\n year: string.isRequired,\r\n icon: shape( {\r\n src: string.isRequired,\r\n alt: string.isRequired,\r\n text: string.isRequired\r\n } )\r\n } )\r\n } ) ).isRequired\r\n } ).isRequired\r\n};\r\n\r\nexport default Result;","import React, { Component, Fragment } from 'react';\r\nimport { arrayOf, object, shape, string, func } from 'prop-types';\r\nimport FilterContainer, { Subscribe } from 'js/containers/filter';\r\nimport Filter from 'components/filter/component';\r\nimport Result from './result';\r\n\r\nclass DataPeriodicReleaseArchiveFilter extends Component {\r\n\r\n static propTypes = {\r\n config: shape( {\r\n attributes: shape( {\r\n data: shape( {\r\n filters: arrayOf( shape( {\r\n name: string.isRequired,\r\n facets: arrayOf( shape( {\r\n name: string.isRequired,\r\n query: object.isRequired\r\n } ) )\r\n } ) ).isRequired,\r\n results: arrayOf( shape( {\r\n title: string.isRequired,\r\n results: arrayOf( shape( {\r\n attributes: {\r\n title: string.isRequired,\r\n url: string.isRequired,\r\n year: string.isRequired,\r\n icon: shape( {\r\n src: string.isRequired,\r\n alt: string.isRequired,\r\n text: string.isRequired\r\n } )\r\n }\r\n } ) ).isRequired\r\n } ) ).isRequired\r\n } )\r\n } )\r\n } ).isRequired,\r\n container: shape( {\r\n state: object,\r\n updateStatefromData: func.isRequired\r\n } ).isRequired\r\n };\r\n\r\n constructor( props ) {\r\n\r\n super( props );\r\n\r\n const currentYearValue = {\r\n label: 'All',\r\n value: 'All'\r\n };\r\n\r\n this.state = {\r\n currentResult: this.getResults( currentYearValue ),\r\n page: 1,\r\n currentYearValue\r\n };\r\n\r\n }\r\n\r\n getResults = ( currentYearValue ) => {\r\n\r\n const resultGroups = this.props.config.results.map( ( result ) => {\r\n\r\n const results = result.results.filter( ( items ) => {\r\n\r\n if ( currentYearValue.value === 'All' ) {\r\n\r\n return true;\r\n\r\n }\r\n\r\n return items.attributes.year === currentYearValue.value;\r\n\r\n } );\r\n\r\n return {\r\n title: result.title,\r\n id: result.id,\r\n results: results\r\n };\r\n\r\n } );\r\n\r\n return resultGroups;\r\n\r\n };\r\n\r\n onFilterChange = ( selectedOption ) => {\r\n\r\n const result = this.getResults( selectedOption );\r\n\r\n this.setState( {\r\n currentYearValue: selectedOption,\r\n currentResult: result,\r\n page: 1\r\n } );\r\n\r\n };\r\n\r\n renderFilters = () => {\r\n\r\n return this.props.config.filters.map( ( filter ) => {\r\n\r\n return (\r\n { result.title }
\r\n }\r\n\r\n\r\n { renderResults() }\r\n
\r\n\r\n {\r\n result.results.length > divisor &&\r\n \r\n }\r\n\r\n 
\r\n 
\r\n \r\n {\r\n this.state.currentResult.map( ( result ) => {\r\n\r\n return
\r\n );\r\n\r\n };\r\n\r\n render() {\r\n\r\n return (\r\n \r\n
\r\n Filter by:
\r\n\r\n\r\n { this.renderFilters() }\r\n
\r\n \r\n { this.renderResults() }\r\n\r\n
\r\n { label }\r\n { infoOverlayData && infoOverlayData.showInfoButtonOnly &&
\r\n\r\n
\r\n\r\n );\r\n\r\n};\r\n\r\nToggle.propTypes = {\r\n active: bool,\r\n setActive: func,\r\n labels: array,\r\n customFunc: func\r\n};\r\n\r\n\r\nexport { Toggle };","import {formatDecimalParts} from \"./formatDecimal.js\";\n\nexport var prefixExponent;\n\nexport default function(x, p) {\n var d = formatDecimalParts(x, p);\n if (!d) return x + \"\";\n var coefficient = d[0],\n exponent = d[1],\n i = exponent - (prefixExponent = Math.max(-8, Math.min(8, Math.floor(exponent / 3))) * 3) + 1,\n n = coefficient.length;\n return i === n ? coefficient\n : i > n ? coefficient + new Array(i - n + 1).join(\"0\")\n : i > 0 ? coefficient.slice(0, i) + \".\" + coefficient.slice(i)\n : \"0.\" + new Array(1 - i).join(\"0\") + formatDecimalParts(x, Math.max(0, p + i - 1))[0]; // less than 1y!\n}\n","import formatLocale from \"./locale.js\";\n\nvar locale;\nexport var format;\nexport var formatPrefix;\n\ndefaultLocale({\n thousands: \",\",\n grouping: [3],\n currency: [\"$\", \"\"]\n});\n\nexport default function defaultLocale(definition) {\n locale = formatLocale(definition);\n format = locale.format;\n formatPrefix = locale.formatPrefix;\n return locale;\n}\n","// Trims insignificant zeros, e.g., replaces 1.2000k with 1.2k.\nexport default function(s) {\n out: for (var n = s.length, i = 1, i0 = -1, i1; i < n; ++i) {\n switch (s[i]) {\n case \".\": i0 = i1 = i; break;\n case \"0\": if (i0 === 0) i0 = i; i1 = i; break;\n default: if (!+s[i]) break out; if (i0 > 0) i0 = 0; break;\n }\n }\n return i0 > 0 ? s.slice(0, i0) + s.slice(i1 + 1) : s;\n}\n","import {formatDecimalParts} from \"./formatDecimal.js\";\n\nexport default function(x, p) {\n var d = formatDecimalParts(x, p);\n if (!d) return x + \"\";\n var coefficient = d[0],\n exponent = d[1];\n return exponent < 0 ? \"0.\" + new Array(-exponent).join(\"0\") + coefficient\n : coefficient.length > exponent + 1 ? coefficient.slice(0, exponent + 1) + \".\" + coefficient.slice(exponent + 1)\n : coefficient + new Array(exponent - coefficient.length + 2).join(\"0\");\n}\n","import formatDecimal from \"./formatDecimal.js\";\nimport formatPrefixAuto from \"./formatPrefixAuto.js\";\nimport formatRounded from \"./formatRounded.js\";\n\nexport default {\n \"%\": (x, p) => (x * 100).toFixed(p),\n \"b\": (x) => Math.round(x).toString(2),\n \"c\": (x) => x + \"\",\n \"d\": formatDecimal,\n \"e\": (x, p) => x.toExponential(p),\n \"f\": (x, p) => x.toFixed(p),\n \"g\": (x, p) => x.toPrecision(p),\n \"o\": (x) => Math.round(x).toString(8),\n \"p\": (x, p) => formatRounded(x * 100, p),\n \"r\": formatRounded,\n \"s\": formatPrefixAuto,\n \"X\": (x) => Math.round(x).toString(16).toUpperCase(),\n \"x\": (x) => Math.round(x).toString(16)\n};\n","export default function(x) {\n return x;\n}\n","import exponent from \"./exponent.js\";\nimport formatGroup from \"./formatGroup.js\";\nimport formatNumerals from \"./formatNumerals.js\";\nimport formatSpecifier from \"./formatSpecifier.js\";\nimport formatTrim from \"./formatTrim.js\";\nimport formatTypes from \"./formatTypes.js\";\nimport {prefixExponent} from \"./formatPrefixAuto.js\";\nimport identity from \"./identity.js\";\n\nvar map = Array.prototype.map,\n prefixes = [\"y\",\"z\",\"a\",\"f\",\"p\",\"n\",\"µ\",\"m\",\"\",\"k\",\"M\",\"G\",\"T\",\"P\",\"E\",\"Z\",\"Y\"];\n\nexport default function(locale) {\n var group = locale.grouping === undefined || locale.thousands === undefined ? identity : formatGroup(map.call(locale.grouping, Number), locale.thousands + \"\"),\n currencyPrefix = locale.currency === undefined ? \"\" : locale.currency[0] + \"\",\n currencySuffix = locale.currency === undefined ? \"\" : locale.currency[1] + \"\",\n decimal = locale.decimal === undefined ? \".\" : locale.decimal + \"\",\n numerals = locale.numerals === undefined ? identity : formatNumerals(map.call(locale.numerals, String)),\n percent = locale.percent === undefined ? \"%\" : locale.percent + \"\",\n minus = locale.minus === undefined ? \"−\" : locale.minus + \"\",\n nan = locale.nan === undefined ? \"NaN\" : locale.nan + \"\";\n\n function newFormat(specifier) {\n specifier = formatSpecifier(specifier);\n\n var fill = specifier.fill,\n align = specifier.align,\n sign = specifier.sign,\n symbol = specifier.symbol,\n zero = specifier.zero,\n width = specifier.width,\n comma = specifier.comma,\n precision = specifier.precision,\n trim = specifier.trim,\n type = specifier.type;\n\n // The \"n\" type is an alias for \",g\".\n if (type === \"n\") comma = true, type = \"g\";\n\n // The \"\" type, and any invalid type, is an alias for \".12~g\".\n else if (!formatTypes[type]) precision === undefined && (precision = 12), trim = true, type = \"g\";\n\n // If zero fill is specified, padding goes after sign and before digits.\n if (zero || (fill === \"0\" && align === \"=\")) zero = true, fill = \"0\", align = \"=\";\n\n // Compute the prefix and suffix.\n // For SI-prefix, the suffix is lazily computed.\n var prefix = symbol === \"$\" ? currencyPrefix : symbol === \"#\" && /[boxX]/.test(type) ? \"0\" + type.toLowerCase() : \"\",\n suffix = symbol === \"$\" ? currencySuffix : /[%p]/.test(type) ? percent : \"\";\n\n // What format function should we use?\n // Is this an integer type?\n // Can this type generate exponential notation?\n var formatType = formatTypes[type],\n maybeSuffix = /[defgprs%]/.test(type);\n\n // Set the default precision if not specified,\n // or clamp the specified precision to the supported range.\n // For significant precision, it must be in [1, 21].\n // For fixed precision, it must be in [0, 20].\n precision = precision === undefined ? 6\n : /[gprs]/.test(type) ? Math.max(1, Math.min(21, precision))\n : Math.max(0, Math.min(20, precision));\n\n function format(value) {\n var valuePrefix = prefix,\n valueSuffix = suffix,\n i, n, c;\n\n if (type === \"c\") {\n valueSuffix = formatType(value) + valueSuffix;\n value = \"\";\n } else {\n value = +value;\n\n // Determine the sign. -0 is not less than 0, but 1 / -0 is!\n var valueNegative = value < 0 || 1 / value < 0;\n\n // Perform the initial formatting.\n value = isNaN(value) ? nan : formatType(Math.abs(value), precision);\n\n // Trim insignificant zeros.\n if (trim) value = formatTrim(value);\n\n // If a negative value rounds to zero after formatting, and no explicit positive sign is requested, hide the sign.\n if (valueNegative && +value === 0 && sign !== \"+\") valueNegative = false;\n\n // Compute the prefix and suffix.\n valuePrefix = (valueNegative ? (sign === \"(\" ? sign : minus) : sign === \"-\" || sign === \"(\" ? \"\" : sign) + valuePrefix;\n valueSuffix = (type === \"s\" ? prefixes[8 + prefixExponent / 3] : \"\") + valueSuffix + (valueNegative && sign === \"(\" ? \")\" : \"\");\n\n // Break the formatted value into the integer “value” part that can be\n // grouped, and fractional or exponential “suffix” part that is not.\n if (maybeSuffix) {\n i = -1, n = value.length;\n while (++i < n) {\n if (c = value.charCodeAt(i), 48 > c || c > 57) {\n valueSuffix = (c === 46 ? decimal + value.slice(i + 1) : value.slice(i)) + valueSuffix;\n value = value.slice(0, i);\n break;\n }\n }\n }\n }\n\n // If the fill character is not \"0\", grouping is applied before padding.\n if (comma && !zero) value = group(value, Infinity);\n\n // Compute the padding.\n var length = valuePrefix.length + value.length + valueSuffix.length,\n padding = length < width ? new Array(width - length + 1).join(fill) : \"\";\n\n // If the fill character is \"0\", grouping is applied after padding.\n if (comma && zero) value = group(padding + value, padding.length ? width - valueSuffix.length : Infinity), padding = \"\";\n\n // Reconstruct the final output based on the desired alignment.\n switch (align) {\n case \"<\": value = valuePrefix + value + valueSuffix + padding; break;\n case \"=\": value = valuePrefix + padding + value + valueSuffix; break;\n case \"^\": value = padding.slice(0, length = padding.length >> 1) + valuePrefix + value + valueSuffix + padding.slice(length); break;\n default: value = padding + valuePrefix + value + valueSuffix; break;\n }\n\n return numerals(value);\n }\n\n format.toString = function() {\n return specifier + \"\";\n };\n\n return format;\n }\n\n function formatPrefix(specifier, value) {\n var f = newFormat((specifier = formatSpecifier(specifier), specifier.type = \"f\", specifier)),\n e = Math.max(-8, Math.min(8, Math.floor(exponent(value) / 3))) * 3,\n k = Math.pow(10, -e),\n prefix = prefixes[8 + e / 3];\n return function(value) {\n return f(k * value) + prefix;\n };\n }\n\n return {\n format: newFormat,\n formatPrefix: formatPrefix\n };\n}\n","export default function(grouping, thousands) {\n return function(value, width) {\n var i = value.length,\n t = [],\n j = 0,\n g = grouping[0],\n length = 0;\n\n while (i > 0 && g > 0) {\n if (length + g + 1 > width) g = Math.max(1, width - length);\n t.push(value.substring(i -= g, i + g));\n if ((length += g + 1) > width) break;\n g = grouping[j = (j + 1) % grouping.length];\n }\n\n return t.reverse().join(thousands);\n };\n}\n","export default function(numerals) {\n return function(value) {\n return value.replace(/[0-9]/g, function(i) {\n return numerals[+i];\n });\n };\n}\n","export default function(a, b) {\n if (!b) b = [];\n var n = a ? Math.min(b.length, a.length) : 0,\n c = b.slice(),\n i;\n return function(t) {\n for (i = 0; i < n; ++i) c[i] = a[i] * (1 - t) + b[i] * t;\n return c;\n };\n}\n\nexport function isNumberArray(x) {\n return ArrayBuffer.isView(x) && !(x instanceof DataView);\n}\n","import value from \"./value.js\";\nimport numberArray, {isNumberArray} from \"./numberArray.js\";\n\nexport default function(a, b) {\n return (isNumberArray(b) ? numberArray : genericArray)(a, b);\n}\n\nexport function genericArray(a, b) {\n var nb = b ? b.length : 0,\n na = a ? Math.min(nb, a.length) : 0,\n x = new Array(na),\n c = new Array(nb),\n i;\n\n for (i = 0; i < na; ++i) x[i] = value(a[i], b[i]);\n for (; i < nb; ++i) c[i] = b[i];\n\n return function(t) {\n for (i = 0; i < na; ++i) c[i] = x[i](t);\n return c;\n };\n}\n","export default function(a, b) {\n var d = new Date;\n return a = +a, b = +b, function(t) {\n return d.setTime(a * (1 - t) + b * t), d;\n };\n}\n","import {color} from \"d3-color\";\nimport rgb from \"./rgb.js\";\nimport {genericArray} from \"./array.js\";\nimport date from \"./date.js\";\nimport number from \"./number.js\";\nimport object from \"./object.js\";\nimport string from \"./string.js\";\nimport constant from \"./constant.js\";\nimport numberArray, {isNumberArray} from \"./numberArray.js\";\n\nexport default function(a, b) {\n var t = typeof b, c;\n return b == null || t === \"boolean\" ? constant(b)\n : (t === \"number\" ? number\n : t === \"string\" ? ((c = color(b)) ? (b = c, rgb) : string)\n : b instanceof color ? rgb\n : b instanceof Date ? date\n : isNumberArray(b) ? numberArray\n : Array.isArray(b) ? genericArray\n : typeof b.valueOf !== \"function\" && typeof b.toString !== \"function\" || isNaN(b) ? object\n : number)(a, b);\n}\n","import value from \"./value.js\";\n\nexport default function(a, b) {\n var i = {},\n c = {},\n k;\n\n if (a === null || typeof a !== \"object\") a = {};\n if (b === null || typeof b !== \"object\") b = {};\n\n for (k in b) {\n if (k in a) {\n i[k] = value(a[k], b[k]);\n } else {\n c[k] = b[k];\n }\n }\n\n return function(t) {\n for (k in i) c[k] = i[k](t);\n return c;\n };\n}\n","export default function(constructor, factory, prototype) {\n constructor.prototype = factory.prototype = prototype;\n prototype.constructor = constructor;\n}\n\nexport function extend(parent, definition) {\n var prototype = Object.create(parent.prototype);\n for (var key in definition) prototype[key] = definition[key];\n return prototype;\n}\n","import define, {extend} from \"./define.js\";\n\nexport function Color() {}\n\nexport var darker = 0.7;\nexport var brighter = 1 / darker;\n\nvar reI = \"\\\\s*([+-]?\\\\d+)\\\\s*\",\n reN = \"\\\\s*([+-]?\\\\d*\\\\.?\\\\d+(?:[eE][+-]?\\\\d+)?)\\\\s*\",\n reP = \"\\\\s*([+-]?\\\\d*\\\\.?\\\\d+(?:[eE][+-]?\\\\d+)?)%\\\\s*\",\n reHex = /^#([0-9a-f]{3,8})$/,\n reRgbInteger = new RegExp(\"^rgb\\\\(\" + [reI, reI, reI] + \"\\\\)$\"),\n reRgbPercent = new RegExp(\"^rgb\\\\(\" + [reP, reP, reP] + \"\\\\)$\"),\n reRgbaInteger = new RegExp(\"^rgba\\\\(\" + [reI, reI, reI, reN] + \"\\\\)$\"),\n reRgbaPercent = new RegExp(\"^rgba\\\\(\" + [reP, reP, reP, reN] + \"\\\\)$\"),\n reHslPercent = new RegExp(\"^hsl\\\\(\" + [reN, reP, reP] + \"\\\\)$\"),\n reHslaPercent = new RegExp(\"^hsla\\\\(\" + [reN, reP, reP, reN] + \"\\\\)$\");\n\nvar named = {\n aliceblue: 0xf0f8ff,\n antiquewhite: 0xfaebd7,\n aqua: 0x00ffff,\n aquamarine: 0x7fffd4,\n azure: 0xf0ffff,\n beige: 0xf5f5dc,\n bisque: 0xffe4c4,\n black: 0x000000,\n blanchedalmond: 0xffebcd,\n blue: 0x0000ff,\n blueviolet: 0x8a2be2,\n brown: 0xa52a2a,\n burlywood: 0xdeb887,\n cadetblue: 0x5f9ea0,\n chartreuse: 0x7fff00,\n chocolate: 0xd2691e,\n coral: 0xff7f50,\n cornflowerblue: 0x6495ed,\n cornsilk: 0xfff8dc,\n crimson: 0xdc143c,\n cyan: 0x00ffff,\n darkblue: 0x00008b,\n darkcyan: 0x008b8b,\n darkgoldenrod: 0xb8860b,\n darkgray: 0xa9a9a9,\n darkgreen: 0x006400,\n darkgrey: 0xa9a9a9,\n darkkhaki: 0xbdb76b,\n darkmagenta: 0x8b008b,\n darkolivegreen: 0x556b2f,\n darkorange: 0xff8c00,\n darkorchid: 0x9932cc,\n darkred: 0x8b0000,\n darksalmon: 0xe9967a,\n darkseagreen: 0x8fbc8f,\n darkslateblue: 0x483d8b,\n darkslategray: 0x2f4f4f,\n darkslategrey: 0x2f4f4f,\n darkturquoise: 0x00ced1,\n darkviolet: 0x9400d3,\n deeppink: 0xff1493,\n deepskyblue: 0x00bfff,\n dimgray: 0x696969,\n dimgrey: 0x696969,\n dodgerblue: 0x1e90ff,\n firebrick: 0xb22222,\n floralwhite: 0xfffaf0,\n forestgreen: 0x228b22,\n fuchsia: 0xff00ff,\n gainsboro: 0xdcdcdc,\n ghostwhite: 0xf8f8ff,\n gold: 0xffd700,\n goldenrod: 0xdaa520,\n gray: 0x808080,\n green: 0x008000,\n greenyellow: 0xadff2f,\n grey: 0x808080,\n honeydew: 0xf0fff0,\n hotpink: 0xff69b4,\n indianred: 0xcd5c5c,\n indigo: 0x4b0082,\n ivory: 0xfffff0,\n khaki: 0xf0e68c,\n lavender: 0xe6e6fa,\n lavenderblush: 0xfff0f5,\n lawngreen: 0x7cfc00,\n lemonchiffon: 0xfffacd,\n lightblue: 0xadd8e6,\n lightcoral: 0xf08080,\n lightcyan: 0xe0ffff,\n lightgoldenrodyellow: 0xfafad2,\n lightgray: 0xd3d3d3,\n lightgreen: 0x90ee90,\n lightgrey: 0xd3d3d3,\n lightpink: 0xffb6c1,\n lightsalmon: 0xffa07a,\n lightseagreen: 0x20b2aa,\n lightskyblue: 0x87cefa,\n lightslategray: 0x778899,\n lightslategrey: 0x778899,\n lightsteelblue: 0xb0c4de,\n lightyellow: 0xffffe0,\n lime: 0x00ff00,\n limegreen: 0x32cd32,\n linen: 0xfaf0e6,\n magenta: 0xff00ff,\n maroon: 0x800000,\n mediumaquamarine: 0x66cdaa,\n mediumblue: 0x0000cd,\n mediumorchid: 0xba55d3,\n mediumpurple: 0x9370db,\n mediumseagreen: 0x3cb371,\n mediumslateblue: 0x7b68ee,\n mediumspringgreen: 0x00fa9a,\n mediumturquoise: 0x48d1cc,\n mediumvioletred: 0xc71585,\n midnightblue: 0x191970,\n mintcream: 0xf5fffa,\n mistyrose: 0xffe4e1,\n moccasin: 0xffe4b5,\n navajowhite: 0xffdead,\n navy: 0x000080,\n oldlace: 0xfdf5e6,\n olive: 0x808000,\n olivedrab: 0x6b8e23,\n orange: 0xffa500,\n orangered: 0xff4500,\n orchid: 0xda70d6,\n palegoldenrod: 0xeee8aa,\n palegreen: 0x98fb98,\n paleturquoise: 0xafeeee,\n palevioletred: 0xdb7093,\n papayawhip: 0xffefd5,\n peachpuff: 0xffdab9,\n peru: 0xcd853f,\n pink: 0xffc0cb,\n plum: 0xdda0dd,\n powderblue: 0xb0e0e6,\n purple: 0x800080,\n rebeccapurple: 0x663399,\n red: 0xff0000,\n rosybrown: 0xbc8f8f,\n royalblue: 0x4169e1,\n saddlebrown: 0x8b4513,\n salmon: 0xfa8072,\n sandybrown: 0xf4a460,\n seagreen: 0x2e8b57,\n seashell: 0xfff5ee,\n sienna: 0xa0522d,\n silver: 0xc0c0c0,\n skyblue: 0x87ceeb,\n slateblue: 0x6a5acd,\n slategray: 0x708090,\n slategrey: 0x708090,\n snow: 0xfffafa,\n springgreen: 0x00ff7f,\n steelblue: 0x4682b4,\n tan: 0xd2b48c,\n teal: 0x008080,\n thistle: 0xd8bfd8,\n tomato: 0xff6347,\n turquoise: 0x40e0d0,\n violet: 0xee82ee,\n wheat: 0xf5deb3,\n white: 0xffffff,\n whitesmoke: 0xf5f5f5,\n yellow: 0xffff00,\n yellowgreen: 0x9acd32\n};\n\ndefine(Color, color, {\n copy: function(channels) {\n return Object.assign(new this.constructor, this, channels);\n },\n displayable: function() {\n return this.rgb().displayable();\n },\n hex: color_formatHex, // Deprecated! Use color.formatHex.\n formatHex: color_formatHex,\n formatHsl: color_formatHsl,\n formatRgb: color_formatRgb,\n toString: color_formatRgb\n});\n\nfunction color_formatHex() {\n return this.rgb().formatHex();\n}\n\nfunction color_formatHsl() {\n return hslConvert(this).formatHsl();\n}\n\nfunction color_formatRgb() {\n return this.rgb().formatRgb();\n}\n\nexport default function color(format) {\n var m, l;\n format = (format + \"\").trim().toLowerCase();\n return (m = reHex.exec(format)) ? (l = m[1].length, m = parseInt(m[1], 16), l === 6 ? rgbn(m) // #ff0000\n : l === 3 ? new Rgb((m >> 8 & 0xf) | (m >> 4 & 0xf0), (m >> 4 & 0xf) | (m & 0xf0), ((m & 0xf) << 4) | (m & 0xf), 1) // #f00\n : l === 8 ? rgba(m >> 24 & 0xff, m >> 16 & 0xff, m >> 8 & 0xff, (m & 0xff) / 0xff) // #ff000000\n : l === 4 ? rgba((m >> 12 & 0xf) | (m >> 8 & 0xf0), (m >> 8 & 0xf) | (m >> 4 & 0xf0), (m >> 4 & 0xf) | (m & 0xf0), (((m & 0xf) << 4) | (m & 0xf)) / 0xff) // #f000\n : null) // invalid hex\n : (m = reRgbInteger.exec(format)) ? new Rgb(m[1], m[2], m[3], 1) // rgb(255, 0, 0)\n : (m = reRgbPercent.exec(format)) ? new Rgb(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, 1) // rgb(100%, 0%, 0%)\n : (m = reRgbaInteger.exec(format)) ? rgba(m[1], m[2], m[3], m[4]) // rgba(255, 0, 0, 1)\n : (m = reRgbaPercent.exec(format)) ? rgba(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, m[4]) // rgb(100%, 0%, 0%, 1)\n : (m = reHslPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, 1) // hsl(120, 50%, 50%)\n : (m = reHslaPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, m[4]) // hsla(120, 50%, 50%, 1)\n : named.hasOwnProperty(format) ? rgbn(named[format]) // eslint-disable-line no-prototype-builtins\n : format === \"transparent\" ? new Rgb(NaN, NaN, NaN, 0)\n : null;\n}\n\nfunction rgbn(n) {\n return new Rgb(n >> 16 & 0xff, n >> 8 & 0xff, n & 0xff, 1);\n}\n\nfunction rgba(r, g, b, a) {\n if (a <= 0) r = g = b = NaN;\n return new Rgb(r, g, b, a);\n}\n\nexport function rgbConvert(o) {\n if (!(o instanceof Color)) o = color(o);\n if (!o) return new Rgb;\n o = o.rgb();\n return new Rgb(o.r, o.g, o.b, o.opacity);\n}\n\nexport function rgb(r, g, b, opacity) {\n return arguments.length === 1 ? rgbConvert(r) : new Rgb(r, g, b, opacity == null ? 1 : opacity);\n}\n\nexport function Rgb(r, g, b, opacity) {\n this.r = +r;\n this.g = +g;\n this.b = +b;\n this.opacity = +opacity;\n}\n\ndefine(Rgb, rgb, extend(Color, {\n brighter: function(k) {\n k = k == null ? brighter : Math.pow(brighter, k);\n return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);\n },\n darker: function(k) {\n k = k == null ? darker : Math.pow(darker, k);\n return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);\n },\n rgb: function() {\n return this;\n },\n displayable: function() {\n return (-0.5 <= this.r && this.r < 255.5)\n && (-0.5 <= this.g && this.g < 255.5)\n && (-0.5 <= this.b && this.b < 255.5)\n && (0 <= this.opacity && this.opacity <= 1);\n },\n hex: rgb_formatHex, // Deprecated! Use color.formatHex.\n formatHex: rgb_formatHex,\n formatRgb: rgb_formatRgb,\n toString: rgb_formatRgb\n}));\n\nfunction rgb_formatHex() {\n return \"#\" + hex(this.r) + hex(this.g) + hex(this.b);\n}\n\nfunction rgb_formatRgb() {\n var a = this.opacity; a = isNaN(a) ? 1 : Math.max(0, Math.min(1, a));\n return (a === 1 ? \"rgb(\" : \"rgba(\")\n + Math.max(0, Math.min(255, Math.round(this.r) || 0)) + \", \"\n + Math.max(0, Math.min(255, Math.round(this.g) || 0)) + \", \"\n + Math.max(0, Math.min(255, Math.round(this.b) || 0))\n + (a === 1 ? \")\" : \", \" + a + \")\");\n}\n\nfunction hex(value) {\n value = Math.max(0, Math.min(255, Math.round(value) || 0));\n return (value < 16 ? \"0\" : \"\") + value.toString(16);\n}\n\nfunction hsla(h, s, l, a) {\n if (a <= 0) h = s = l = NaN;\n else if (l <= 0 || l >= 1) h = s = NaN;\n else if (s <= 0) h = NaN;\n return new Hsl(h, s, l, a);\n}\n\nexport function hslConvert(o) {\n if (o instanceof Hsl) return new Hsl(o.h, o.s, o.l, o.opacity);\n if (!(o instanceof Color)) o = color(o);\n if (!o) return new Hsl;\n if (o instanceof Hsl) return o;\n o = o.rgb();\n var r = o.r / 255,\n g = o.g / 255,\n b = o.b / 255,\n min = Math.min(r, g, b),\n max = Math.max(r, g, b),\n h = NaN,\n s = max - min,\n l = (max + min) / 2;\n if (s) {\n if (r === max) h = (g - b) / s + (g < b) * 6;\n else if (g === max) h = (b - r) / s + 2;\n else h = (r - g) / s + 4;\n s /= l < 0.5 ? max + min : 2 - max - min;\n h *= 60;\n } else {\n s = l > 0 && l < 1 ? 0 : h;\n }\n return new Hsl(h, s, l, o.opacity);\n}\n\nexport function hsl(h, s, l, opacity) {\n return arguments.length === 1 ? hslConvert(h) : new Hsl(h, s, l, opacity == null ? 1 : opacity);\n}\n\nfunction Hsl(h, s, l, opacity) {\n this.h = +h;\n this.s = +s;\n this.l = +l;\n this.opacity = +opacity;\n}\n\ndefine(Hsl, hsl, extend(Color, {\n brighter: function(k) {\n k = k == null ? brighter : Math.pow(brighter, k);\n return new Hsl(this.h, this.s, this.l * k, this.opacity);\n },\n darker: function(k) {\n k = k == null ? darker : Math.pow(darker, k);\n return new Hsl(this.h, this.s, this.l * k, this.opacity);\n },\n rgb: function() {\n var h = this.h % 360 + (this.h < 0) * 360,\n s = isNaN(h) || isNaN(this.s) ? 0 : this.s,\n l = this.l,\n m2 = l + (l < 0.5 ? l : 1 - l) * s,\n m1 = 2 * l - m2;\n return new Rgb(\n hsl2rgb(h >= 240 ? h - 240 : h + 120, m1, m2),\n hsl2rgb(h, m1, m2),\n hsl2rgb(h < 120 ? h + 240 : h - 120, m1, m2),\n this.opacity\n );\n },\n displayable: function() {\n return (0 <= this.s && this.s <= 1 || isNaN(this.s))\n && (0 <= this.l && this.l <= 1)\n && (0 <= this.opacity && this.opacity <= 1);\n },\n formatHsl: function() {\n var a = this.opacity; a = isNaN(a) ? 1 : Math.max(0, Math.min(1, a));\n return (a === 1 ? \"hsl(\" : \"hsla(\")\n + (this.h || 0) + \", \"\n + (this.s || 0) * 100 + \"%, \"\n + (this.l || 0) * 100 + \"%\"\n + (a === 1 ? \")\" : \", \" + a + \")\");\n }\n}));\n\n/* From FvD 13.37, CSS Color Module Level 3 */\nfunction hsl2rgb(h, m1, m2) {\n return (h < 60 ? m1 + (m2 - m1) * h / 60\n : h < 180 ? m2\n : h < 240 ? m1 + (m2 - m1) * (240 - h) / 60\n : m1) * 255;\n}\n","import {path} from \"d3-path\";\nimport array from \"./array.js\";\nimport constant from \"./constant.js\";\nimport curveLinear from \"./curve/linear.js\";\nimport {x as pointX, y as pointY} from \"./point.js\";\n\nexport default function(x, y) {\n var defined = constant(true),\n context = null,\n curve = curveLinear,\n output = null;\n\n x = typeof x === \"function\" ? x : (x === undefined) ? pointX : constant(x);\n y = typeof y === \"function\" ? y : (y === undefined) ? pointY : constant(y);\n\n function line(data) {\n var i,\n n = (data = array(data)).length,\n d,\n defined0 = false,\n buffer;\n\n if (context == null) output = curve(buffer = path());\n\n for (i = 0; i <= n; ++i) {\n if (!(i < n && defined(d = data[i], i, data)) === defined0) {\n if (defined0 = !defined0) output.lineStart();\n else output.lineEnd();\n }\n if (defined0) output.point(+x(d, i, data), +y(d, i, data));\n }\n\n if (buffer) return output = null, buffer + \"\" || null;\n }\n\n line.x = function(_) {\n return arguments.length ? (x = typeof _ === \"function\" ? _ : constant(+_), line) : x;\n };\n\n line.y = function(_) {\n return arguments.length ? (y = typeof _ === \"function\" ? _ : constant(+_), line) : y;\n };\n\n line.defined = function(_) {\n return arguments.length ? (defined = typeof _ === \"function\" ? _ : constant(!!_), line) : defined;\n };\n\n line.curve = function(_) {\n return arguments.length ? (curve = _, context != null && (output = curve(context)), line) : curve;\n };\n\n line.context = function(_) {\n return arguments.length ? (_ == null ? context = output = null : output = curve(context = _), line) : context;\n };\n\n return line;\n}\n","module.exports = function(module) {\n\tif (!module.webpackPolyfill) {\n\t\tmodule.deprecate = function() {};\n\t\tmodule.paths = [];\n\t\t// module.parent = undefined by default\n\t\tif (!module.children) module.children = [];\n\t\tObject.defineProperty(module, \"loaded\", {\n\t\t\tenumerable: true,\n\t\t\tget: function() {\n\t\t\t\treturn module.l;\n\t\t\t}\n\t\t});\n\t\tObject.defineProperty(module, \"id\", {\n\t\t\tenumerable: true,\n\t\t\tget: function() {\n\t\t\t\treturn module.i;\n\t\t\t}\n\t\t});\n\t\tmodule.webpackPolyfill = 1;\n\t}\n\treturn module;\n};\n","import React, { useState } from 'react';\r\nimport Select, { components } from 'react-select';\r\nimport { array, arrayOf, oneOfType, object, shape, string, func, bool } from 'prop-types';\r\nimport './css/index.css';\r\n\r\nconst Filter = ( props ) => {\r\n\r\n const { filter, activeFilters, labelId, value, isMulti, isMVP, isSVP, hasSingleFilter } = props;\r\n\r\n const [ manualValue, setManualValue ] = useState( value );\r\n\r\n const facetOptions = filter.facets.map( ( facet ) => {\r\n\r\n return {\r\n label: facet.name,\r\n value: facet.filename,\r\n group: filter.shortName,\r\n disabled: activeFilters.find( ( f ) => f.label === facet.name && f.value === facet.filename ) !== undefined ? true : false\r\n };\r\n\r\n } );\r\n\r\n const iconOption = ( { data, innerProps, isDisabled, isSelected } ) => {\r\n\r\n const optionSelectedClass = isSelected ? 'selected-option' : '';\r\n\r\n return isDisabled ? null : (\r\n \r\n\r\n
\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n { data.label }
\r\n );\r\n\r\n };\r\n\r\n const ValueContainer = ( { children, ...props } ) => {\r\n\r\n return (\r\n { filter.label }
\r\n\r\n { React.cloneElement( children[1] ) }\r\n\r\n \r\n
\r\n );\r\n\r\n } );\r\n\r\n };\r\n\r\n useEffect( () => {\r\n\r\n emit( activeFilters );\r\n\r\n }, [ activeFilters ] );\r\n\r\n const clearAllRegions = () => {\r\n\r\n setActiveFilters( [] );\r\n clearChart();\r\n\r\n };\r\n\r\n return (\r\n { filter.name }
\r\n\r\n= 2 ? 'disabled' : '' }>\r\n
\r\n \r\n
\r\n );\r\n\r\n};\r\n\r\nRegions.propTypes = {\r\n filters: arrayOf ( shape ( {\r\n name: string.isRequired,\r\n placeholder: string.isRequired,\r\n shortName: string.isRequired,\r\n facets: arrayOf( shape( {\r\n filename: string.isRequired,\r\n id: string.isRequired,\r\n name: string.isRequired\r\n } ) ).isRequired\r\n } ) ).isRequired,\r\n emit: func.isRequired,\r\n clearChart: func.isRequired\r\n};\r\n\r\nexport default Regions;","import React, { createRef, Fragment, useEffect, useState } from 'react';\r\nimport { shape, string, func, arrayOf, bool } from 'prop-types';\r\n\r\nconst Characteristics = ( props ) => {\r\n\r\n const { metadata, emit, disabled, clearChart } = props;\r\n\r\n const [ activeGroup, setActiveGroup ] = useState( '' );\r\n const [ activeCharacteristics, setActiveCharacteristics ] = useState( [] );\r\n const [ isMobile, setIsMobile ] = useState( window.innerWidth < 1236 );\r\n\r\n const handleWindowResize = () => {\r\n\r\n setIsMobile( window.innerWidth < 1236 );\r\n\r\n };\r\n\r\n const onInputChange = ( inputRef, groupRef ) => {\r\n\r\n const dataProp = inputRef.current.id;\r\n\r\n if ( activeCharacteristics.length < 2 && inputRef.current.checked ) {\r\n\r\n setActiveCharacteristics( ( prev ) => [ ...prev, dataProp ] );\r\n\r\n }\r\n\r\n if ( !inputRef.current.checked && activeCharacteristics.includes( dataProp ) ) {\r\n\r\n const curState = activeCharacteristics.slice();\r\n\r\n curState.splice( curState.indexOf( dataProp ), 1 );\r\n setActiveCharacteristics( curState );\r\n\r\n }\r\n\r\n clearChart();\r\n\r\n };\r\n\r\n const renderSubFilters = () => {\r\n\r\n const found = metadata.find( ( e ) => e.prefix === activeGroup );\r\n\r\n if ( !found ) return;\r\n\r\n return found.facets.map( ( facet, idx ) => {\r\n\r\n const inputRef = createRef();\r\n\r\n const id = facet.property;\r\n\r\n return (\r\n \r\n
\r\n\r\n Regions
\r\n (select up to 2)\r\n\r\n { renderFilters() }\r\n
\r\n\r\n {\r\n activeFilters.length > 0 &&\r\n \r\n
\r\n }\r\n Selected:
\r\n { activeFilters.map( ( filter, idx ) => {\r\n\r\n return (\r\n\r\n \r\n 
\r\n
\r\n );\r\n\r\n } ) }\r\n\r\n Clear All Regions\r\n { filter.group }:
\r\n{ filter.label }
\r\n \r\n\r\n removeActiveFilter( filter ) }>\r\n = 2 && !activeCharacteristics.includes( id ) )\r\n ? 'ude-characteristics-filtersets-detail-filter disabled'\r\n : 'ude-characteristics-filtersets-detail-filter',\r\n facet.property.includes( 'avg' ) ? 'avg-filter' : '',\r\n facet.property.includes( 'card' ) ? 'credit-overflow' : ''\r\n ].join( ' ' ) }\r\n >\r\n onInputChange( inputRef ) }\r\n />\r\n\r\n \r\n
\r\n \r\n
\r\n\r\n { ( !isMobile && activeGroup.length > 0 ) &&\r\n \r\n
\r\n\r\n {\r\n activeCharacteristics.length > 0 &&\r\n Clear All Debt Characteristics\r\n }\r\n\r\n Debt Characteristics
\r\n (select up to 2)\r\n\r\n { metadata.map( ( field ) => {\r\n\r\n const key = `${ field.name.replace( /\\s/g, '' ) }-id`;\r\n const p = field['prefix'];\r\n\r\n return (\r\n = 2 && !activeCharacteristics.some( ( facet ) => facet.split( '_' )[0] === p ) ? 'disabled' : '',\r\n activeCharacteristics.some( ( facet ) => facet.split( '_' )[0] === p ) ? 'contains-active-characteristic' : ''\r\n ].join( ' ' ) }\r\n onClick={ ( ) => {\r\n\r\n setActiveGroup( p );\r\n\r\n} }\r\n key={ key }\r\n >\r\n
\r\n );\r\n\r\n } ) }\r\n { field.name }
\r\n\r\n { activeGroup === p\r\n ?\r\n { isMobile && renderSubFilters() }\r\n
\r\n : null\r\n }\r\n \r\n { renderSubFilters() }\r\n
\r\n }\r\n \r\n );\r\n\r\n};\r\n\r\nCharacteristics.propTypes = {\r\n metadata: arrayOf( shape ( {\r\n name: string.isRequired,\r\n prefix: string.isRequired,\r\n facets: arrayOf( shape( {\r\n property: string.isRequired,\r\n description: shape( {\r\n mobile: string.isRequired,\r\n desktop: string.isRequired\r\n } ).isRequired\r\n } ) ).isRequired\r\n } ) ).isRequired,\r\n emit: func.isRequired,\r\n disabled: bool.isRequired,\r\n clearChart: func.isRequired\r\n};\r\n\r\nexport default Characteristics;","import React, { createRef, Fragment, useEffect, useState } from 'react';\r\nimport { shape, func, arrayOf, bool, array } from 'prop-types';\r\nimport isEmpty from 'lodash.isempty';\r\n\r\nconst Demographics = ( props ) => {\r\n\r\n const {\r\n emit,\r\n demographics,\r\n disabled,\r\n disabledDemographics,\r\n clearChart\r\n } = props;\r\n\r\n const [ activeDemographics, setActiveDemographics ] = useState( [] );\r\n\r\n const updateDemographics = ( key, isChecked, subDependents ) => {\r\n\r\n if ( activeDemographics.length < 2 && isChecked ) {\r\n\r\n setActiveDemographics( [ ...activeDemographics, key ] );\r\n\r\n }\r\n\r\n if ( !isChecked && activeDemographics.includes( key ) ) {\r\n\r\n const curState = activeDemographics.slice();\r\n\r\n curState.splice( curState.indexOf( key ), 1 );\r\n\r\n setActiveDemographics( curState );\r\n\r\n }\r\n\r\n clearChart();\r\n\r\n };\r\n\r\n const renderDemographics = () => {\r\n\r\n return demographics.map( ( demoGroup, idx ) => {\r\n\r\n let combinedData = [];\r\n\r\n Object.keys( demoGroup.data ).forEach(\r\n ( key ) => ( combinedData = [ ...combinedData, ...demoGroup.data[key] ] )\r\n );\r\n const hasSubs = combinedData.some( ( d ) => d['sub-demographics'] );\r\n\r\n\r\n return (\r\n \r\n { demoGroup.columnTitle }\r\n
\r\n ) }\r\n\r\n { Object.keys( demoGroup.data ).map( ( key ) => {\r\n\r\n return (\r\n
\r\n ) }\r\n \r\n );\r\n\r\n } ) }\r\n \r\n );\r\n\r\n } ) }\r\n \r\n \r\n );\r\n\r\n } );\r\n\r\n };\r\n\r\n useEffect( () => {\r\n\r\n const result = [];\r\n\r\n if ( disabled ) {\r\n\r\n if ( activeDemographics.length > 0 ) {\r\n\r\n setActiveDemographics( [] );\r\n\r\n }\r\n\r\n emit( result );\r\n\r\n return;\r\n\r\n }\r\n\r\n for ( const dem of activeDemographics ) {\r\n\r\n const activeDemo = dem.split( '-' )[0];\r\n const demoData = demographics.filter( ( el ) => el.data[activeDemo] )[0];\r\n const firstLevel = !isEmpty( demoData ) ? demoData.data[activeDemo] : [];\r\n\r\n if ( !firstLevel.length ) {\r\n\r\n const activeSubDemo = activeDemo.includes( '(detailed)' ) ? activeDemo.split( '(detailed)' )[0].trim() : activeDemo.trim();\r\n const subDemoData = demographics.filter( ( el ) => el.data[activeSubDemo] )[0];\r\n const secondLevel = subDemoData.data[activeSubDemo];\r\n const filteredDemographics = secondLevel.filter( ( d ) => d.hasOwnProperty( 'sub-demographics' ) );\r\n const filteredSubDemographics = filteredDemographics[0]['sub-demographics'];\r\n const found = filteredSubDemographics.find(\r\n ( d ) => `${ d['bin'] }-${ d['class'] }` === dem\r\n );\r\n\r\n if ( found ) result.push( found );\r\n\r\n }\r\n else {\r\n\r\n const found = firstLevel.find(\r\n ( d ) => `${ d['bin'] }-${ d['class'] }` === dem\r\n );\r\n\r\n if ( found ) result.push( found );\r\n\r\n }\r\n\r\n }\r\n\r\n emit( result );\r\n\r\n }, [ activeDemographics ] );\r\n\r\n\r\n const clearAllDemographics = () => {\r\n\r\n setActiveDemographics( [] );\r\n clearChart();\r\n\r\n };\r\n\r\n return (\r\n \r\n { demoGroup.data[key].map( ( demo ) => {\r\n\r\n const demoDisabled = disabledDemographics.some(\r\n ( el ) => el.bin === demo.bin && el.class === demo.class\r\n );\r\n const key = `${ demo.bin }-${ demo.class }`;\r\n const demoRef = createRef();\r\n const subGroupKeys = [];\r\n\r\n return (\r\n \r\n = 2 &&\r\n !activeDemographics.includes( key )\r\n ? 'disabled'\r\n : '',\r\n demo['sub-demographics'] ? 'sub-demo' : '',\r\n demoDisabled ? 'disabled' : ''\r\n ].join( ' ' ) }` }\r\n >\r\n \r\n activeDemographics.includes(\r\n `${ d['bin'] }-${ d['class'] }`\r\n )\r\n ) && activeDemographics.includes( key ) }\r\n onChange={ () =>\r\n updateDemographics(\r\n key,\r\n demoRef.current.checked,\r\n subGroupKeys\r\n ) }\r\n />\r\n \r\n { demo.rollover.length ? (\r\n
\r\n { !isEmpty( demo['sub-demographics'] ) && (\r\n \r\n { demo.rollover }\r\n
\r\n ) : (\r\n ''\r\n ) }\r\n\r\n { demo['sub-demographics'].map( ( subDemo ) => {\r\n\r\n const subKey = `${ subDemo.bin }-${ subDemo.class }`;\r\n const subRef = createRef();\r\n\r\n let subDemoDisabled = false;\r\n\r\n if (\r\n disabledDemographics.some(\r\n ( el ) =>\r\n el.bin === subDemo.bin &&\r\n el.class === subDemo.class\r\n )\r\n ) {\r\n\r\n subDemoDisabled = true;\r\n\r\n }\r\n\r\n return (\r\n = 2 &&\r\n !activeDemographics.includes( subKey )\r\n ? 'disabled'\r\n : '',\r\n subDemoDisabled ? 'disabled' : ''\r\n ].join( ' ' ) }` }\r\n >\r\n \r\n updateDemographics(\r\n subKey,\r\n subRef.current.checked,\r\n key\r\n ) }\r\n />\r\n \r\n { subDemo.rollover.length ? (\r\n
\r\n );\r\n\r\n } ) }\r\n \r\n { subDemo.rollover }\r\n
\r\n ) : (\r\n ''\r\n ) }\r\n\r\n
\r\n\r\n { activeDemographics.length > 0 && (\r\n Demographics
\r\n (select up to 2)\r\n\r\n { renderDemographics() }\r\n
\r\n\r\n \r\n Note: Not all data are available for all selections; Large,\r\n single-quarter fluctuations may reflect periodic issues with the\r\n reporting of data by lenders. Users should interpret with caution.\r\n \r\n \r\n );\r\n\r\n};\r\n\r\nDemographics.propTypes = {\r\n demographics: arrayOf(\r\n shape( {\r\n data: shape( {} )\r\n } )\r\n ).isRequired,\r\n emit: func.isRequired,\r\n disabled: bool.isRequired,\r\n disabledDemographics: array,\r\n clearChart: func.isRequired\r\n};\r\n\r\nexport default Demographics;\r\n","import { createContext } from 'react';\r\n\r\nexport const HoverContext = createContext( { xVal: undefined, yVal: undefined, d: undefined } );\r\n","export const demoTooltipTable = {\r\n 'all-all': 'All',\r\n 'income-low/moderate': 'Low/Mod. Income',\r\n 'income-middle/upper': 'Mid./Upper Income',\r\n 'riskscore-prime': 'Prime',\r\n 'riskscore-nonprime': 'Nonprime',\r\n 'age-18-34': '18-34',\r\n 'age-35-54': '35-54',\r\n 'age-55-84': '55-84',\r\n 'race/ethnicity-Majority People of Color': 'Maj. POC',\r\n 'race/ethnicity-Majority Non-Hispanic White': 'Maj. White',\r\n 'race/ethnicity (detailed)-Majority Black': 'Maj. Black',\r\n 'race/ethnicity (detailed)-Majority Native American': 'Maj. Nat. Amer.',\r\n 'race/ethnicity (detailed)-Majority Hispanic or Latino': 'Maj. Hisp. or Lat.',\r\n 'race/ethnicity (detailed)-Majority Asian or Pacific Islander': 'Maj. Asian or PI'\r\n};\r\n","import React, { useContext, useEffect, useState, useRef } from 'react';\r\nimport { HoverContext } from './context';\r\nimport { demoTooltipTable } from './utils/demoTable';\r\nimport { select, selectAll } from 'd3-selection';\r\nimport { object, bool } from 'prop-types';\r\n\r\nconst ToolTip = ( { tooltipProps, isPercent } ) => {\r\n\r\n // can probably simplify this list, this was a big overhaul\r\n // it works as is currently\r\n const { hover: { xVal, yVal, d, lines } } = useContext( HoverContext );\r\n const { label, isLVP, data, yEndVal, chartNo, getX, getY, widthForScale, margin } = tooltipProps;\r\n const tooltipRef = useRef( );\r\n const [ tooltipWidth, setTooltipWidth ] = useState( 0 );\r\n\r\n useEffect( () => {\r\n\r\n if ( tooltipRef.current !== undefined && xVal !== undefined ) {\r\n\r\n setTooltipWidth( tooltipRef.current.getBoundingClientRect().width );\r\n\r\n }\r\n\r\n }, [ xVal ] );\r\n\r\n const tooltipData = data.find( ( datapoint ) => {\r\n\r\n if ( d ) {\r\n\r\n const [ year, month ] = d;\r\n\r\n return datapoint.column.date.getFullYear() === year && datapoint.column.date.getMonth() === month;\r\n\r\n }\r\n\r\n return undefined;\r\n\r\n } );\r\n\r\n const updateHoverDots = () => {\r\n\r\n selectAll( `.${ chartNo } .dot-per-line` )\r\n .attr( 'transform', ( ( _, i ) => {\r\n\r\n if ( !tooltipData ) return 'translate(0,0)';\r\n\r\n const y2 = getY( tooltipData ? tooltipData.rows[i].value : 0 );\r\n\r\n const x2 = getX( new Date( d[0], d[1] ) );\r\n\r\n return `translate(${ x2 || 0 },${ y2 || 0 })`;\r\n\r\n } ) )\r\n .attr( 'fill', '#ffffff' )\r\n .attr( 'stroke', ( _, i ) => ( lines ? lines[i].getAttribute( 'stroke' ) : 'none' ) )\r\n .attr( 'opacity', ( () => ( tooltipData ? 1 : 0 ) ) );\r\n\r\n };\r\n\r\n const updateScrubberLine = () => {\r\n\r\n // Move scrubber line\r\n select( `.${ chartNo } .scrubber` )\r\n .attr( 'd', () => `M${ xVal || 0 },0 ${ xVal || 0 },${ yEndVal }` )\r\n .attr( 'opacity', () => ( tooltipData ? 1 : 0 ) );\r\n\r\n };\r\n\r\n const createTooltipStyles = () => {\r\n\r\n const tooltipOffset = 16;\r\n const style = { top: `${ yEndVal - ( yVal * -1 ) - 180 }px`, left: '' };\r\n const centerChart = widthForScale / 2;\r\n const mobileMiddleAlignZone = 50;\r\n const startTooltip = xVal + margin.left;\r\n\r\n if ( isLVP ) {\r\n\r\n style['left'] = xVal <= centerChart ? `${ startTooltip + tooltipOffset }px` : `${ startTooltip - tooltipWidth - tooltipOffset }px`;\r\n\r\n }\r\n else {\r\n\r\n style['left'] = xVal <= centerChart - mobileMiddleAlignZone\r\n ? `${ startTooltip + tooltipOffset }px`\r\n : xVal <= centerChart + mobileMiddleAlignZone\r\n ? `${ startTooltip - ( tooltipWidth / 2 ) }px`\r\n : `${ startTooltip - tooltipWidth - tooltipOffset }px`;\r\n\r\n }\r\n\r\n return style;\r\n\r\n };\r\n\r\n const renderMultilineTooltip = () => {\r\n\r\n return tooltipData.rows.map( ( line, i ) => {\r\n\r\n let formattedLineValue = '';\r\n\r\n if ( line.value && !isPercent ) {\r\n\r\n // Is a number in the thousands\r\n // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat\r\n const formatter = Intl.NumberFormat( 'en', { notation: 'compact', minimumFractionDigits: 1, maximumFractionDigits: 1 } );\r\n\r\n formattedLineValue = line.value ? `$${ formatter.format( line.value ).toLowerCase()\r\n .split( 'k' )[0] }K` : line.value === 0 ? '0k' : 'N/A';\r\n\r\n }\r\n else {\r\n\r\n // is a percentage\r\n formattedLineValue = line.value ? `${ line.value.toFixed( 1 ) }%` : line.value === 0 ? '0.0%' : 'N/A';\r\n\r\n }\r\n\r\n let k = '';\r\n\r\n const [ region ] = label.find( ( l ) => l[1] === line.color );\r\n\r\n for ( const [ key, value ] of Object.entries( demoTooltipTable ) ) {\r\n\r\n if ( line['name'].includes( key ) ) {\r\n\r\n k = value;\r\n break;\r\n\r\n }\r\n else {\r\n\r\n k = 'Error...';\r\n\r\n }\r\n\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n { renderMultilineTooltip() }\r\n \r\n
\r\n
\r\n : null\r\n );\r\n\r\n};\r\n\r\nToolTip.propTypes = {\r\n tooltipProps: object.isRequired,\r\n isPercent: bool.isRequired\r\n};\r\n\r\nexport default ToolTip;\r\n","/* eslint-disable react/jsx-no-bind */\r\nimport React, { useState, useRef, useContext, useEffect } from 'react';\r\nimport { bisector } from 'd3-array';\r\nimport { axisBottom, axisRight } from 'd3-axis';\r\nimport { scaleTime, scaleLinear } from 'd3-scale';\r\nimport { select } from 'd3-selection';\r\nimport { line } from 'd3-shape';\r\nimport { timeYear } from 'd3-time';\r\nimport { object, number, array, string, exact } from 'prop-types';\r\nimport { HoverContext } from './context';\r\nimport ToolTip from './tooltip';\r\n\r\nfunction chart( props ) {\r\n\r\n /* States and refs */\r\n const chartData = props.data;\r\n\r\n // tooltip data is just derived from prop data, no need for state\r\n const [ hoveredData, setHoveredData ] = useState( props.data[0] );\r\n const [ xAxisYearsGap, setXAxisYearsGap ] = useState( 2 );\r\n\r\n const svgRef = useRef();\r\n const axisXRef = useRef();\r\n const axisYRef = useRef();\r\n const lineRef = useRef();\r\n const scrubberRef = useRef();\r\n const dotRef = useRef();\r\n\r\n const isLVP = props.vps ? props.vps.isLVP : false;\r\n\r\n const { setHover } = useContext( HoverContext );\r\n\r\n const compWrapOffsetLeft = props.componentWrapper ? props.componentWrapper.offsetLeft : 0;\r\n const compWrapOffsetTop = props.componentWrapper ? props.componentWrapper.offsetTop : 0;\r\n const compWrapOffsetWidth = props.componentWrapper ? props.componentWrapper.offsetWidth : 0;\r\n const pageOffsetTop = props.pageWrapper ? props.pageWrapper.offsetTop : 0;\r\n\r\n const isPercent = props.yAxisTitle[0] === 'Percent';\r\n\r\n // Operation that scales x values of the data\r\n const widthForScale = compWrapOffsetWidth - props.margin.left - ( isLVP ? 0 : props.margin.right );\r\n const heightForScale = props.height - props.margin.top - props.margin.bottom;\r\n\r\n /* Defines the domains */\r\n const getXDomain = ( selectedDateRange ) => {\r\n\r\n const xDomain = {\r\n start: selectedDateRange[0].column.date,\r\n end: selectedDateRange[selectedDateRange.length - 1].column.date\r\n };\r\n\r\n return xDomain;\r\n\r\n };\r\n\r\n const { start, end } = getXDomain( chartData );\r\n\r\n const x = scaleTime()\r\n .domain( [ start, end ] )\r\n .range( [ 0, widthForScale ] );\r\n\r\n const y = scaleLinear().domain( [ props.yMin, props.yMax ] )\r\n .range( [ heightForScale, 0 ] )\r\n .nice();\r\n\r\n let xVal = 0;\r\n\r\n let yVal = 0;\r\n\r\n let d = {};\r\n\r\n useEffect( () => {\r\n\r\n if ( props.vps.isSVP ) setXAxisYearsGap( 4 );\r\n else setXAxisYearsGap( 2 );\r\n\r\n }, [ props.vps.isSVP ] );\r\n\r\n const renderXAxis = () => {\r\n\r\n // Creates the x-axis path\r\n const xAxisPath = axisBottom( x );\r\n\r\n // Selects where the axis will be injected\r\n const g = select( axisXRef.current );\r\n\r\n g.call( xAxisPath.tickSizeInner( 6 ).ticks( timeYear.every( xAxisYearsGap ) )\r\n .tickFormat( ( d ) => d.getFullYear() ) );\r\n\r\n // Label only certain points\r\n g.select( '.domain' )\r\n .attr( 'stroke', '#515c70' )\r\n .attr( 'stroke-width', '1.5px' );\r\n\r\n g.selectAll( '.tick line' )\r\n .attr( 'stroke', '#515c70' )\r\n .attr( 'stroke-width', '1.5px' );\r\n\r\n g.selectAll( '.tick text' )\r\n .attr( 'y', 22 )\r\n .attr( 'fill', '#515c70' )\r\n .attr( 'font-size', '12px' )\r\n .attr( 'font-family', 'Graphik-Medium' )\r\n .attr( 'class', '' );\r\n\r\n g.select( '.tick:last-of-type text' )\r\n .attr( 'x', -5 );\r\n\r\n g.selectAll( '.tick text' ).attr( 'fill', '#515c70' )\r\n .attr( 'font-size', '12px' )\r\n .attr( 'font-family', 'Graphik-Medium' );\r\n\r\n // Transformation to move the axis down\r\n const translate = `translate(0,${ props.height - props.margin.top - props.margin.bottom })`; // this moves it down\r\n\r\n // Returns the html for rendering the x-axis\r\n return (\r\n { getDate() }
\r\n\r\n { props.legend.map( ( leg, idx ) => {\r\n\r\n return (\r\n
\r\n );\r\n\r\n };\r\n\r\n const renderDots = () => chartData.map( ( point, i ) => {\r\n\r\n const { value, color } = point.rows[0];\r\n\r\n\r\n if ( value !== null && value !== undefined ) {\r\n\r\n return (\r\n \r\n
\r\n );\r\n\r\n } ) }\r\n { leg['title'] }
\r\n\r\n\r\n { leg['sub'].map( ( sub, subIdx ) => {\r\n\r\n return (\r\n
\r\n \r\n { sub.title }\r\n { sub.color && ( isDataZero( leg['prefix'] ) || sub.hasData )\r\n ? \r\n : No data available\r\n }\r\n
\r\n );\r\n\r\n } ) }\r\n\r\n
\r\n : \r\n
\r\n \r\n { `${ props.yAxisTitle[0].toUpperCase() } ${ props.yAxisTitle[0] === 'Percent' ? '(%)' : '($)' }` }
\r\n { props.yAxisTitle.length > 1 ?({ props.yAxisTitle[1] })
: '' }\r\n\r\n
\r\n { renderLegend() }\r\n { Year
\r\nNo data available for this combination. Please try different selections.
\r\n );\r\n\r\n}\r\n\r\nchart.propTypes = {\r\n data: array.isRequired,\r\n rawData: array.isRequired,\r\n margin: exact( { top: number, right: number, bottom: number, left: number } ),\r\n height: number.isRequired,\r\n width: number.isRequired,\r\n title: string.isRequired,\r\n label: array.isRequired,\r\n colors: array.isRequired,\r\n yAxisTitle: array.isRequired,\r\n componentWrapper: object,\r\n startDate: number,\r\n endDate: number,\r\n vps: object\r\n};\r\n\r\nexport default chart;","export const getMaxYValue = ( isPercent, maxValue, has100Ceiling ) => {\r\n\r\n // need to maintain output chart height between any range of percentages and 1000s of $\r\n // i've found some nice limits here that always give us the correct height\r\n let yMax = isPercent ? 20 : 25000;\r\n\r\n if ( isPercent ) {\r\n\r\n if ( maxValue > 0 && maxValue <= 4.5 ) yMax = 5;\r\n else if ( maxValue > 4.5 && maxValue <= 9.5 ) yMax = 10;\r\n else if ( maxValue > 9.5 && maxValue <= 22.5 ) yMax = 25;\r\n else if ( maxValue > 18 && maxValue <= 50 ) yMax = 60;\r\n else if ( maxValue > 50 && maxValue <= 100 ) yMax = 100;\r\n else if ( maxValue > 100 && maxValue <= 140 ) yMax = 150;\r\n else if ( maxValue > 140 ) yMax += Math.floor( maxValue );\r\n\r\n }\r\n else {\r\n\r\n if ( maxValue > 0 && maxValue <= 9500 ) yMax = 10000;\r\n if ( maxValue > 95000 && maxValue <= 22000 ) yMax = 25000;\r\n else if ( maxValue > 22000 && maxValue <= 45000 ) yMax = 50000;\r\n else if ( maxValue > 45000 && maxValue <= 70000 ) yMax = 80000;\r\n else if ( maxValue > 70000 && maxValue <= 95000 ) yMax = 100000;\r\n else if ( has100Ceiling ) yMax = 100000;\r\n else if ( maxValue > 95000 && maxValue <= 115000 ) yMax = 120000;\r\n else if ( maxValue > 115000 && maxValue <= 137500 ) yMax = 140000;\r\n else if ( maxValue > 137500 && maxValue <= 157500 ) yMax = 160000;\r\n else if ( maxValue > 157500 && maxValue <= 190000 ) yMax = 200000;\r\n else if ( maxValue > 190000 && maxValue <= 280000 ) yMax = 300000;\r\n else if ( maxValue > 280000 ) yMax = 400000;\r\n\r\n }\r\n\r\n return yMax;\r\n\r\n};\r\n\r\nexport const getMinYValue = ( isPercent, minValue ) => {\r\n\r\n let yMin = 0;\r\n\r\n if ( isPercent ) {\r\n\r\n if ( minValue >= -8 && minValue < 0 ) yMin = -10;\r\n else if ( minValue >= -18 && minValue < -8 ) yMin = -20;\r\n else if ( minValue >= -28 && minValue < -18 ) yMin = -30;\r\n else if ( minValue >= -48 && minValue < -28 ) yMin = -60;\r\n else if ( minValue < -48 ) yMin = -100;\r\n\r\n }\r\n\r\n return yMin;\r\n\r\n};\r\n","/* eslint-disable react/jsx-no-bind */\r\n/* eslint-disable jsx-a11y/label-has-for */\r\nimport React, { useState, useEffect, useRef, Fragment } from 'react';\r\nimport { object, array } from 'prop-types';\r\nimport globalVPS from 'js/global-vps';\r\nimport Chart from './chart';\r\nimport './css/index.css';\r\nimport { HoverContext } from './context';\r\nimport { getMaxYValue, getMinYValue } from './utils/getY';\r\n\r\nconst ChartContext = ( props ) => {\r\n\r\n const { chartColors, bulkData } = props;\r\n\r\n const [ width, setWidth ] = useState( props.componentWrapper ? props.componentWrapper.offsetWidth : 0 );\r\n const [ vps, setVps ] = useState( {\r\n isSVP: globalVPS.current( 'small' ),\r\n isMVP: globalVPS.current( 'medium' ),\r\n isLVP: globalVPS.current( 'large' ),\r\n currentVP: globalVPS.current().name\r\n } );\r\n\r\n const [ hover, setHover ] = useState( { xVal: undefined, yVal: undefined, d: undefined } );\r\n\r\n const pageWrapper = document.querySelector( '.page' );\r\n\r\n useEffect( () => {\r\n\r\n setVps( getViewports() );\r\n\r\n window.addEventListener( 'resize', handleResize );\r\n\r\n // Unmounting\r\n return () => {\r\n\r\n window.removeEventListener( 'resize', handleResize );\r\n\r\n };\r\n\r\n }, [] );\r\n\r\n useEffect( () => {\r\n\r\n if ( vps ) {\r\n\r\n bindViewports();\r\n\r\n }\r\n\r\n }, [ vps ] );\r\n\r\n /* Gets the width property based on window size */\r\n const handleResize = () => {\r\n\r\n // 10px padding on left + right\r\n const currWidth = props.componentWrapper.offsetWidth;\r\n\r\n if ( width === currWidth ) return;\r\n\r\n setWidth( currWidth );\r\n\r\n };\r\n\r\n const bindViewports = () => {\r\n\r\n return globalVPS( ( state ) => {\r\n\r\n if ( state.name === vps.currentVP ) return;\r\n setVps( getViewports() );\r\n\r\n } );\r\n\r\n };\r\n\r\n const getViewports = () => {\r\n\r\n return {\r\n isSVP: globalVPS.current( 'small' ),\r\n isMVP: globalVPS.current( 'medium' ),\r\n isLVP: globalVPS.current( 'large' ),\r\n currentVP: globalVPS.current().name\r\n };\r\n\r\n };\r\n\r\n /* Stores all the data together */\r\n const extractData = ( da, colors ) => {\r\n\r\n const rowLabels = da[0].slice( 2 );\r\n\r\n let result = [];\r\n\r\n if ( Array.isArray( da[1][0] ) ) {\r\n\r\n result = da.slice( 1 ).map( ( dataPoints, dIdx ) => {\r\n\r\n const rowObjs = [];\r\n\r\n const forDate = dataPoints[0][1].split( '-' );\r\n const currentDate = new Date( `${ forDate[0] }/${ forDate[1] }/${ forDate[2] }` );\r\n\r\n const colObj = {\r\n date: currentDate,\r\n index: dIdx\r\n };\r\n\r\n for ( const regionalPoints of dataPoints ) {\r\n\r\n const forRegion = regionalPoints[0].split( '&' )[1];\r\n\r\n const pointObjs = regionalPoints.slice( 2 ).map( ( r, rIdx ) => {\r\n\r\n return {\r\n name: `${ forRegion }_${ rowLabels[rIdx] }`,\r\n value: r,\r\n color: colors[forRegion][rowLabels[rIdx]]\r\n };\r\n\r\n } );\r\n\r\n rowObjs.push( pointObjs );\r\n\r\n }\r\n\r\n return {\r\n column: colObj,\r\n rows: rowObjs.flat()\r\n };\r\n\r\n } );\r\n\r\n }\r\n else {\r\n\r\n const chartData = da.slice( 1 ).map( ( d ) => d.slice( 1 ) );\r\n\r\n result = chartData.map( ( cData, i ) => {\r\n\r\n const dateData = cData[0].split( '-' );\r\n const currentDate = new Date( `${ dateData[0] }/${ dateData[1] }/${ dateData[2] }` );\r\n\r\n const chartObj = {\r\n column: {\r\n date: currentDate,\r\n value: cData.slice( 1 ),\r\n index: i\r\n },\r\n rows: []\r\n };\r\n\r\n chartObj.rows = cData.slice( 1 ).map( ( d, j ) => {\r\n\r\n const rowObj = {\r\n name: rowLabels[j],\r\n value: d,\r\n color: chartColors[j]\r\n };\r\n\r\n return rowObj;\r\n\r\n } );\r\n\r\n return chartObj;\r\n\r\n } );\r\n\r\n }\r\n\r\n return result;\r\n\r\n };\r\n\r\n const generateKey = ( s, idx ) => {\r\n\r\n // make the key for charts contain data from each filter\r\n // such that if any of the three's state changes, we properly update\r\n // and re-render chart;\r\n return `${ JSON.stringify( s.region ) } ${ JSON.stringify( s.characteristic ) } ${ JSON.stringify( s.demographic ) } ${ idx }`;\r\n\r\n };\r\n\r\n const getYDomain = ( selectedData ) => {\r\n\r\n const yDomain = {\r\n minValue: 0,\r\n maxValue: 0\r\n };\r\n\r\n selectedData.forEach( ( data ) => {\r\n\r\n data.rows.forEach( ( v ) => {\r\n\r\n yDomain.minValue = parseFloat( v.value ) <= parseFloat( yDomain.minValue ) ? v.value : yDomain.minValue;\r\n yDomain.maxValue = parseFloat( v.value ) >= parseFloat( yDomain.maxValue ) ? v.value : yDomain.maxValue;\r\n\r\n } );\r\n\r\n } );\r\n\r\n return yDomain;\r\n\r\n };\r\n\r\n return (\r\n 1 ? 'multiple-chart' : '' }` } ref={ chartWrapper }>\r\n
\r\n );\r\n\r\n } ) }\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n { name }
\r\n\r\n \r\n {\r\n 1 }\r\n allSameUnits={ allSameUnits }\r\n colors={ chartColors }\r\n disclaimer={ disclaimer }\r\n componentWrapper={ chartWrapper.current }\r\n vps={ vps }\r\n startDate={ 0 }\r\n endDate={ chosenData.length || null }\r\n chartNo={ `chartNo-${ bIdx }` }\r\n yMin={ yMin }\r\n yMax={ yMax }\r\n pageWrapper={ pageWrapper }\r\n />\r\n }\r\n \r\n
\r\n \r\n
\r\n\r\n { !nextChartData.length && currentChartData.length\r\n ? Select another combination to generate a new chart.
\r\n : null\r\n }\r\n\r\n generateNewChart() } className={ `ude-generatebtn ${ ( !region.length || !characteristic.length || !demographic.length ) || !nextChartData.length ? 'ude-generatebtn-disabled' : '' }` }>\r\n Generate Charts\r\n \r\n\r\n\r\n { currentChartData.length\r\n ? saveToPNG() } className='main-chart-download'>\r\n
\r\n\r\n PNG
\r\n\r\n\r\n 
\r\n
\r\n \r\n : ''\r\n }\r\n\r\n \r\n \r\n { renderCharts() }\r\n
\r\n\r\n { currentChartData.length\r\n ? \r\n
\r\n : ''\r\n }\r\n { disclaimer.notes }
\r\n{ disclaimer.sources }
\r\n\r\n
,\r\n this.wrapper\r\n );\r\n\r\n }\r\n\r\n}","import './css/index.css';\r\nimport 'components/download-button/css/defaults.css';\r\nimport 'components/footer';\r\nimport 'components/breadcrumbs';\r\nimport 'components/contact-info';\r\nimport 'components/notification';\r\nimport 'components/data-explorer';\r\nimport 'components/local-navigation';\r\nimport 'components/release-calendar';\r\nimport 'components/resources-tileset';\r\nimport 'components/email-notification';\r\nimport 'components/data-download-table';\r\nimport 'components/data-viz-detail-hero';\r\nimport 'components/data-viz-landing-hero';\r\nimport 'components/text-block-full-width';\r\nimport 'components/cta-share-page-release';\r\nimport 'components/cta-tables-charts-data';\r\nimport 'components/link-grid-with-filters';\r\nimport 'components/link-grid-promos';\r\nimport 'components/related-charts-and-data';\r\nimport 'components/related-content-tileset';\r\nimport 'components/recent-releases-carousel';\r\nimport 'components/text-with-background-image';\r\nimport 'components/text-block-full-width-terms';\r\nimport 'components/release-calendar-with-contact';\r\nimport 'components/text-block-full-width-accordion';\r\nimport 'components/related-content-tileset-with-resources';\r\nimport 'components/text-with-background-image-with-contact';\r\nimport 'components/group-cards-data';\r\nimport 'components/card-content-image';\r\nimport 'components/card-promo-boxes';\r\nimport 'components/custom-select';\r\nimport 'components/info-overlay';\r\nimport 'components/navigation-sub-section';\r\nimport 'components/suggested-citation';\r\nimport 'components/toggle-custom-code';\r\n\r\n// import last\r\nimport 'components/snippets/callouts';\r\nimport 'components/snippets/images';\r\nimport 'components/snippets/footnotes';\r\n\r\nimport DataPeriodicReleaseArchiveFilter from 'components/data-periodic-release-archive-filter';\r\nimport Mediator from 'js/mediator';\r\nimport Navigation from 'components/navigation';\r\nimport createTabs from './create-tableau-tabs';\r\nimport createSubSectionScroll from 'js/sub-section-nav-scroll';\r\nimport UpdatedDataExplorer from 'components/updated-data-explorer';\r\n\r\nMediator.create( {\r\n\r\n componentClasses: [\r\n Navigation,\r\n UpdatedDataExplorer,\r\n DataPeriodicReleaseArchiveFilter,\r\n {\r\n name: 'custom-select',\r\n module: () => import(\r\n 'components/custom-select'\r\n )\r\n },\r\n {\r\n name: 'chart-select-2',\r\n module: () => import(\r\n 'components/chart-select-2'\r\n )\r\n },\r\n {\r\n name: 'info-overlay',\r\n module: () => import(\r\n 'components/info-overlay'\r\n )\r\n },\r\n {\r\n name: 'toggle-custom-code',\r\n module: () => import(\r\n 'components/toggle-custom-code'\r\n )\r\n }\r\n ],\r\n\r\n init() {\r\n\r\n console.info( 'The Release - Historical Release Page has initiated.' );\r\n\r\n },\r\n\r\n ready() {\r\n\r\n console.info( 'The Release - Historical Release Page is ready.' );\r\n\r\n console.info( 'Components:', this.components );\r\n\r\n createTabs( '.navigation-sub-section' );\r\n createSubSectionScroll( '.navigation-sub-section' );\r\n\r\n }\r\n\r\n} );\r\n","import * as qs from 'query-string';\r\n\r\n/**\r\n * Create a tabbed interface.\r\n *\r\n * @example Required markup:\r\n *\r\n * \r\n * \r\n *\r\n * \r\n * \r\n { titleOn &&
\r\n );\r\n\r\n}\r\nToggleCustom.propTypes = {\r\n data: exact( { titleOn: bool, title: string, startRight: bool, labels: array, customFunc: func } )\r\n};","import './css/index.css';\r\nimport React from 'react';\r\nimport { render } from 'react-dom';\r\nimport ToggleCustom from './toggle-custom';\r\n\r\nexport default class {\r\n\r\n static name = 'toggle-custom-code';\r\n\r\n constructor( config ) {\r\n\r\n Object.assign( this, config );\r\n\r\n this.pageWrapper = document.querySelector( '.page' );\r\n\r\n }\r\n\r\n ready() {\r\n\r\n render(\r\n { title }
}\r\n\r\n