Skip to content

GitLab

S
scratch-www
Commit bc43ad7e authored by Paul Kaplan's avatar Paul Kaplan
Browse files
Options

feat(annual-report): dynamically load the world map when it is scrolled to

parent 8e4ee5fb
Hide whitespace changes
Inline Side-by-side
Showing with 54 additions and 48 deletions
src/components/world-map/world-map.jsx
View file @ bc43ad7e
const Plotly = require('plotly.js/lib/core'); import React from 'react';
import PropTypes from 'prop-types';
import Plotly from 'plotly.js/lib/core';
import choropleth from 'plotly.js/lib/choropleth';
import createPlotlyComponent from 'react-plotly.js/factory';
// Load in the trace type for choropleth // Load in the trace type for choropleth
Plotly.register([ Plotly.register([choropleth]);
require('plotly.js/lib/choropleth')
]);
// create plotly bundle that only has choropleth plots // create plotly bundle that only has choropleth plots
import createPlotlyComponent from 'react-plotly.js/factory';
const Plot = createPlotlyComponent(Plotly); const Plot = createPlotlyComponent(Plotly);
const React = require('react');
const PropTypes = require('prop-types');
const WorldMap = props => ( const WorldMap = props => (
<Plot <Plot
useResizeHandler useResizeHandler
...@@ -86,4 +84,4 @@ WorldMap.propTypes = { ...@@ -86,4 +84,4 @@ WorldMap.propTypes = {
countryNames: PropTypes.arrayOf(PropTypes.string) countryNames: PropTypes.arrayOf(PropTypes.string)
}; };
module.exports = WorldMap; export default WorldMap;
src/views/annual-report/annual-report.jsx
View file @ bc43ad7e
...@@ -15,7 +15,6 @@ const Grid = require('../../components/grid/grid.jsx'); ...@@ -15,7 +15,6 @@ const Grid = require('../../components/grid/grid.jsx');
const Button = require('../../components/forms/button.jsx'); const Button = require('../../components/forms/button.jsx');
const FlexRow = require('../../components/flex-row/flex-row.jsx'); const FlexRow = require('../../components/flex-row/flex-row.jsx');
const Comment = require('../../components/comment/comment.jsx'); const Comment = require('../../components/comment/comment.jsx');
const WorldMap = require('../../components/world-map/world-map.jsx');
const CountryUsage = require('./country-usage.json'); const CountryUsage = require('./country-usage.json');
const PeopleGrid = require('../../components/people-grid/people-grid.jsx'); const PeopleGrid = require('../../components/people-grid/people-grid.jsx');
const People = require('./people.json'); const People = require('./people.json');
...@@ -23,6 +22,11 @@ const BLMProjects = require('./blm-projects.json'); ...@@ -23,6 +22,11 @@ const BLMProjects = require('./blm-projects.json');
const VideoPreview = require('../../components/video-preview/video-preview.jsx'); const VideoPreview = require('../../components/video-preview/video-preview.jsx');
const Supporters = require('./supporters.json'); const Supporters = require('./supporters.json');
const WorldMap = React.lazy(() => import(
/* webpackChunkName: "world-map" */
'../../components/world-map/world-map.jsx'
));
require('./annual-report.scss'); require('./annual-report.scss');
// Some constants used for the page subnav and section refs // Some constants used for the page subnav and section refs
...@@ -831,44 +835,48 @@ class AnnualReport extends React.Component { ...@@ -831,44 +835,48 @@ class AnnualReport extends React.Component {
</div> </div>
</div> </div>
<div className="map-wrapper"> <div className="map-wrapper">
<MediaQuery minWidth={frameless.desktop}> {this.state.currentlyVisible === SECTIONS.reach &&
<WorldMap <React.Suspense fallback={null}>
className="map" <MediaQuery minWidth={frameless.desktop}>
colorIndex={colorIndex} <WorldMap
countryData={countryData} className="map"
countryNames={countryNames} colorIndex={colorIndex}
/> countryData={countryData}
</MediaQuery> countryNames={countryNames}
<MediaQuery />
maxWidth={frameless.desktop - 1} </MediaQuery>
minWidth={frameless.tabletPortrait} <MediaQuery
> maxWidth={frameless.desktop - 1}
<WorldMap minWidth={frameless.tabletPortrait}
className="map" >
colorIndex={colorIndex} <WorldMap
countryData={countryData} className="map"
countryNames={countryNames} colorIndex={colorIndex}
/> countryData={countryData}
</MediaQuery> countryNames={countryNames}
<MediaQuery />
maxWidth={frameless.tabletPortrait - 1} </MediaQuery>
minWidth={frameless.mobileIntermediate} <MediaQuery
> maxWidth={frameless.tabletPortrait - 1}
<WorldMap minWidth={frameless.mobileIntermediate}
className="map" >
colorIndex={colorIndex} <WorldMap
countryData={countryData} className="map"
countryNames={countryNames} colorIndex={colorIndex}
/> countryData={countryData}
</MediaQuery> countryNames={countryNames}
<MediaQuery maxWidth={frameless.mobileIntermediate - 1}> />
<WorldMap </MediaQuery>
className="map" <MediaQuery maxWidth={frameless.mobileIntermediate - 1}>
colorIndex={colorIndex} <WorldMap
countryData={countryData} className="map"
countryNames={countryNames} colorIndex={colorIndex}
/> countryData={countryData}
</MediaQuery> countryNames={countryNames}
/>
</MediaQuery>
</React.Suspense>
}
</div> </div>
</div> </div>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment