scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-23 23:57:55 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

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

Browse source 
This reverts commit bc43ad7e29.
This commit is contained in:
rschamp 2021-08-05 11:09:04 -04:00
parent bc43ad7e29
commit 81ff3d6216
2 changed files with 48 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/world-map/world-map.jsx
View file

@ -1,15 +1,17 @@
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';
const Plotly = require('plotly.js/lib/core');
// Load in the trace type for choropleth
Plotly.register([choropleth]);
Plotly.register([
require('plotly.js/lib/choropleth')
]);
// create plotly bundle that only has choropleth plots
import createPlotlyComponent from 'react-plotly.js/factory';
const Plot = createPlotlyComponent(Plotly);
const React = require('react');
const PropTypes = require('prop-types');
const WorldMap = props => (
<Plot
useResizeHandler
@ -84,4 +86,4 @@ WorldMap.propTypes = {
countryNames: PropTypes.arrayOf(PropTypes.string)
};
export default WorldMap;
module.exports = WorldMap;

86
src/views/annual-report/annual-report.jsx
View file

@ -15,6 +15,7 @@ const Grid = require('../../components/grid/grid.jsx');
const Button = require('../../components/forms/button.jsx');
const FlexRow = require('../../components/flex-row/flex-row.jsx');
const Comment = require('../../components/comment/comment.jsx');
const WorldMap = require('../../components/world-map/world-map.jsx');
const CountryUsage = require('./country-usage.json');
const PeopleGrid = require('../../components/people-grid/people-grid.jsx');
const People = require('./people.json');
@ -22,11 +23,6 @@ const BLMProjects = require('./blm-projects.json');
const VideoPreview = require('../../components/video-preview/video-preview.jsx');
const Supporters = require('./supporters.json');
const WorldMap = React.lazy(() => import(
/* webpackChunkName: "world-map" */
'../../components/world-map/world-map.jsx'
));
require('./annual-report.scss');
// Some constants used for the page subnav and section refs
@ -835,48 +831,44 @@ class AnnualReport extends React.Component {
</div>
</div>
<div className="map-wrapper">
{this.state.currentlyVisible === SECTIONS.reach &&
<React.Suspense fallback={null}>
<MediaQuery minWidth={frameless.desktop}>
<WorldMap
className="map"
colorIndex={colorIndex}
countryData={countryData}
countryNames={countryNames}
/>
</MediaQuery>
<MediaQuery
maxWidth={frameless.desktop - 1}
minWidth={frameless.tabletPortrait}
>
<WorldMap
className="map"
colorIndex={colorIndex}
countryData={countryData}
countryNames={countryNames}
/>
</MediaQuery>
<MediaQuery
maxWidth={frameless.tabletPortrait - 1}
minWidth={frameless.mobileIntermediate}
>
<WorldMap
className="map"
colorIndex={colorIndex}
countryData={countryData}
countryNames={countryNames}
/>
</MediaQuery>
<MediaQuery maxWidth={frameless.mobileIntermediate - 1}>
<WorldMap
className="map"
colorIndex={colorIndex}
countryData={countryData}
countryNames={countryNames}
/>
</MediaQuery>
</React.Suspense>
}
<MediaQuery minWidth={frameless.desktop}>
<WorldMap
className="map"
colorIndex={colorIndex}
countryData={countryData}
countryNames={countryNames}
/>
</MediaQuery>
<MediaQuery
maxWidth={frameless.desktop - 1}
minWidth={frameless.tabletPortrait}
>
<WorldMap
className="map"
colorIndex={colorIndex}
countryData={countryData}
countryNames={countryNames}
/>
</MediaQuery>
<MediaQuery
maxWidth={frameless.tabletPortrait - 1}
minWidth={frameless.mobileIntermediate}
>
<WorldMap
className="map"
colorIndex={colorIndex}
countryData={countryData}
countryNames={countryNames}
/>
</MediaQuery>
<MediaQuery maxWidth={frameless.mobileIntermediate - 1}>
<WorldMap
className="map"
colorIndex={colorIndex}
countryData={countryData}
countryNames={countryNames}
/>
</MediaQuery>
</div>
</div>
</div>