- \n {React.Children.map(this.props.children, child => {\n const wrappedChild = (\n
{this.props.name}
\n\n {/* TODO: New legend code goes here */}\n\t\t\t\t\n\t\t\t\t\t
\n \n - \n\t\t\t\t\t\t{/*
- Learn more about this data. \n\t\t\t\t\t\t{' '} */}\n\t\t\t\t\t\t
- Recovery Goal \n\t\t\t\t\t\t{' '}\n\t\t\t\t\t\t
- Wild \n\t\t\t\t\t\t{' '}\n\t\t\t\t\t\t
- Hatchery + Wild \n\t\t\t\t\t
\n { this.props.esa_assessment_year &&\n <>ESA Listing Year: {this.props.esa_assessment_year}
\n }\n { this.props.abundance_type === 'Adult' &&\n <>\n Recovery Goal:\n {' '}\n { this.buildRecoveryGoalText() }
\n \n }\n
\n Download Population Data
\n View Population Detail\n
\n \n }\n { this.props.abundance_type === 'Adult' &&\n <>\n Recovery Goal:\n {' '}\n { this.buildRecoveryGoalText() }
\n \n }\n
\n Download Population Data
\n View Population Detail\n
\n \n 
*/}\n\n \n \n
\n )\n }\n}\n\nexport default ESUSection;","import React from 'react';\n\nfunction FilterChecklist(props) {\n return (\n {this.props.name}
\n\n {/*\n Abundance Analysis Details\n
\n \nIndividual Populations
\n- \n {\n this.props.populations.map((population) => {\n const totalPoints = population.lines.reduce((tot, l) => {\n const ltot = l.data.length;\n return ltot > tot ? ltot : tot;\n }, 0)\n \n return (\n
- \n
\n {\n this.props.populations.map((population) => {\n return (\n
\n \n
\n \n
*/}\n {\n (props.filterOptions||[]).map((option) => {\n return (\n
\n
\n );\n }\n}\n\nexport default LoadingAnimation;","import 'react-app-polyfill/ie11';\nimport 'react-app-polyfill/stable';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\n// Local Components\nimport RegionMap from './components/region-map.js'\nimport ESUSection from './components/esu-section.js'\nimport AccordionSection from './components/accordion-section.js';\nimport FilterChecklist from './components/filter-checklist.js';\nimport FilterRadio from './components/filter-radio.js';\nimport LoadingAnimation from './components/loading-animation';\n\n// Temporary data import\nimport sampleData from './data/abundance-sample.json';\n\n/**\n * This serves as the root component for the SOS Dashboard page react app.\n * \n * This file also serves as the webpack entry point for this react app, and\n * is compiled to dist/reactDashboard.js\n */\nclass SOSDashboard extends React.Component {\n /**\n * Create a SOSDashboard instance\n * @param {Object} props \n */\n constructor(props) {\n super(props);\n\n // TODO\n // Bind event handlers\n this.handleRegionSelect = this.handleRegionSelect.bind(this);\n this.handleFilterCheck = this.handleFilterCheck.bind(this);\n this.handleTypeSelect = this.handleTypeSelect.bind(this);\n\n // Set initial state\n // TODO: use the return from the API, instead of props\n this.state = {\n // regionId: props.filters.regions[0],\n // filters: props.filters\n // regionId: 4\n loading: true,\n filterLoading: true,\n esus: [],\n filters: {}\n };\n\n // TODO: Construct initial filters from the query string\n // const urlFilters = url\n }\n\n componentDidMount() {\n // TODO: Construct filters from URL\n let urlFilters = {}\n \n const region = getParamFromURL('region');\n if(region) {\n urlFilters['regions'] = [region];\n }\n \n const species = getParamFromURL('species');\n if(species) {\n urlFilters['species'] = [{id: species, checked: true}];\n }\n \n const esu = getParamFromURL('esu');\n if(esu) {\n urlFilters['esu'] = [{id: esu, checked: true}];\n }\n\n this.runDataUpdate(urlFilters, false);\n }\n\n copyFilterState() {\n return JSON.parse(JSON.stringify(this.state.filters))\n }\n\n /**\n * Handle selection of a new region via the map\n * \n * @param {int} newRegionId \n */\n handleRegionSelect(newRegionId) {\n const regionId = newRegionId\n ? parseInt(newRegionId)\n : null;\n\n \n if(regionId > 0) {\n\n // The commented out version doesn't reset the other filters\n // let newFilters = this.copyFilterState()\n // if(newFilters.regions.includes(regionId)) {\n // newFilters.regions = [];\n // } else {\n // newFilters.regions = [regionId];\n // }\n\n let oldFilters = this.copyFilterState();\n let newFilters = {regions: [], type: oldFilters.type};\n\n if(oldFilters.regions.includes(regionId)) {\n newFilters.regions = [];\n } else {\n newFilters.regions = [regionId];\n }\n\n this.runDataUpdate(newFilters, false);\n }\n }\n\n handleFilterCheck(e, key, id) {\n let newFilters = this.copyFilterState()\n let filterItem = newFilters[key].find(i => i.id === id)\n if(filterItem) {\n filterItem.checked = e.target.checked\n } else {\n console.log(\"Item not found in filters list.\")\n }\n this.setState({filters: newFilters});\n this.runDataUpdate(newFilters, false);\n }\n\n handleTypeSelect(e) {\n if(['Adult', 'Juvenile'].includes(e.target.value)) {\n let newFilters = this.copyFilterState();\n newFilters.type = e.target.value;\n this.runDataUpdate(newFilters, false);\n }\n }\n\n constructAPIQuery(filters) {\n\n const urlBase = 'sos/v1/abundance/'\n let urlQuery = '?'\n\n // Loop over all filters and set URL query parameters\n if(filters.regions) {\n filters.regions.forEach(item => urlQuery += \"region[]=\"+item+'&')\n }\n if(filters.type === 'Juvenile') {\n urlQuery += 'type=Juvenile&';\n }\n if(filters.esu) {\n filters.esu.forEach(item => {\n if(item.id && item.checked) {\n urlQuery += 'esu[]='+item.id+'&'\n }\n })\n }\n if(filters.species) {\n filters.species.forEach(item => {\n if(item.id && item.checked) {\n urlQuery += 'species[]='+item.id+'&'\n }\n })\n }\n\n return(urlBase+urlQuery);\n }\n\n runDataUpdate(filters, sample=false) {\n this.setState({loading: true});\n\n const self = this;\n\n const query = wp.apiRequest({\n path: this.constructAPIQuery(filters)\n });\n\n query.done(function(res) {\n // TODO: Check JSON format\n let newState = {};\n if(sample) {\n newState = {\n esus: sampleData.esus,\n filters: sampleData.filters,\n loading: false,\n filterLoading: false\n }\n } else {\n newState = {\n esus: res.esus,\n filters: res.filters,\n loading: false,\n filterLoading: false\n }\n }\n\n self.setState(newState)\n })\n }\n\n /**\n * Renders all the things\n * \n * @returns {JSX}\n */\n render() {\n return (\n
\n
\n\t\t\t#*/}\n \n
\n \n \n
\n \n
\n \n
\n - \n
- Recovery Goal \n {' '}\n
- Wild \n {' '}\n
- Hatchery + Wild \n
\n \n\n\n
\n {/* //.dashboard-app__column-wrapper */}\n \n\n {/* FILTER TOGGLE FOR MOBILE */}\n \n \n
{/* //.container */}\n \n
{/* //.flex-row */}\n\n \n\n {/* FILTER BLOCK HERE */}\n { !this.state.filterLoading &&\n \n }\n {/* END FITLER BLOCK HERE */}\n\n
{/* //.col- */}\n \n \n {/* MOBILE ONLY LEGEND */}\n \n\n {/* CHARTS BLOCK HERE */}\n
{/* //.col- */}\n \n { this.state.loading &&\n
{/* //.dashboard-app__charts */}\n {/* END CHARTS BLOCK HERE */}\n\n \n
\n }\n { !this.state.loading && /* Loop over ESUs */\n this.state.esus.map((esu) => {\n return(\n