update/integrate new react-globe, update dev files

.gitignore

@@ -2,7 +2,7 @@
 node_modules
 
 # logs
-*.log*
+*.log
 
 # files and IDE
 .DS_STORE
@@ -12,3 +12,4 @@ node_modules
 
 # project
 build
+package-lock.json

LICENSE → license

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2019 Chris Zhou <[email protected]>
+Copyright (c) 2020 Chris Zhou <[email protected]>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package.json

@@ -1,48 +1,51 @@
 {
+  "private": true,
   "name": "google-globe-trends",
+  "version": "1.0.0",
   "description": "Create beautiful and interactive Google Trends globe visualizations with ease.",
-  "version": "0.1.0",
+  "license": "MIT",
+  "homepage": "https://google-globe-trends.netlify.com/",
+  "repository": "chrisrzhou/google-globe-trends",
+  "bugs": "https://github.com/chrisrzhou/google-globe-trends/issues",
+  "author": "Chris Zhou <[email protected]> (https://chrisrzhou.io)",
   "keywords": [
     "google",
+    "globe",
     "trends",
+    "react-globe",
     "react",
     "three",
     "threejs",
-    "three.js",
     "webgl",
     "visualization",
     "interactive",
-    "globe",
     "earth",
-    "netlify"
+    "netlify",
+    "jamstack"
   ],
-  "author": "Chris Zhou <[email protected]>",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/chrisrzhou/google-globe-trends.git"
-  },
-  "bugs": {
-    "url": "https://github.com/chrisrzhou/google-globe-trends/issues"
+  "scripts": {
+    "start": "react-scripts start",
+    "build:data": "npm run untrack:data && node ./scripts/build_data.js",
+    "build": "npm run clean && npm run build:data && react-scripts build",
+    "lint": "eslint --ext .js,.jsx,.ts,.tsx, --fix src",
+    "clean": "rm -rf build",
+    "size": "bundlesize",
+    "untrack:data": "git update-index --assume-unchanged ./src/_data.json"
   },
-  "homepage": "https://google-globe-trends.netlify.com/",
-  "private": true,
   "dependencies": {
-    "@types/react": "16.8.14",
-    "@types/react-dom": "16.8.4",
-    "es6-tween": "^5.4.3",
     "moment": "^2.24.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "react-globe": "^3.0.0",
+    "react-globe": "^5.0.0",
     "react-scripts": "2.1.8",
     "react-spring": "^8.0.19",
-    "three": "^0.103.0"
+    "three": "^0.119.1"
   },
   "devDependencies": {
+    "@types/react": "^16.9.45",
+    "@types/react-dom": "^16.9.8",
     "@typescript-eslint/eslint-plugin": "^1.6.0",
     "@typescript-eslint/parser": "^1.6.0",
-    "bundlesize": "^0.17.1",
     "country-reverse-geocoding": "^0.2.2",
     "eslint-config-prettier": "^4.1.0",
     "eslint-plugin-prettier": "^3.0.1",
@@ -54,15 +57,6 @@
     "prop-types": "^15.7.2",
     "typescript": "^3.4.4"
   },
-  "scripts": {
-    "start": "react-scripts start",
-    "build:data": "yarn untrack:data && node ./scripts/build_data.js",
-    "build": "yarn clean && yarn build:data && react-scripts build",
-    "lint": "eslint --ext .js,.jsx,.ts,.tsx, --fix src",
-    "clean": "rm -rf build",
-    "size": "bundlesize",
-    "untrack:data": "git update-index --assume-unchanged ./src/_data.json"
-  },
   "eslintConfig": {
     "extends": "react-app"
   },
@@ -71,11 +65,5 @@
     "not dead",
     "not ie <= 11",
     "not op_mini all"
-  ],
-  "bundlesize": [
-    {
-      "path": "./build/*.js",
-      "maxSize": "1 MB"
-    }
   ]
 }

scripts/build_data.js

@@ -302,9 +302,11 @@ async function getTrends({ keyword }) {
           const { lat, lng } = d.coordinates;
           const country = reverseGeocode.get_country(lat, lng);
           if (country && ISO_3_TO_2[country.code]) {
+            const countryCode = ISO_3_TO_2[country.code]
             trends.push({
+              id: countryCode,
               city: d.geoName,
-              countryCode: ISO_3_TO_2[country.code],
+              countryCode,
               countryName: country.name,
               coordinates: [lat, lng],
               value: d.value[0],

src/components/Details.tsx

@@ -6,10 +6,14 @@ import { ActionType } from '../types';
 import Blur from './ui/Blur';
 import Button from './ui/Button';
 
-function getSearchURL(city: string, country: string, keyword: string): string {
+function getSearchURL(
+  city: string,
+  country: string,
+  keyword: string[],
+): string {
   const formattedQuery = `${encodeURIComponent(city)}, ${encodeURIComponent(
     country,
-  )} ${encodeURIComponent(keyword)}`.replace(/(%20| )/g, '+');
+  )} ${encodeURIComponent(keyword.join('|'))}`.replace(/(%20| )/g, '+');
   return `https://www.google.com/search?q=${formattedQuery}`;
 }
 
@@ -22,8 +26,7 @@ function Details(): React.ReactElement {
   }
   const { city, countryCode, countryName, value } = focusedMarker;
   const url = getSearchURL(city, countryName, keyword);
-  const relatedTopics = state.relatedTopics[countryCode];
-  console.log(relatedTopics);
+  const relatedTopics = state.relatedTopics[countryCode] || [];
   return (
     <Blur className="details" config={{ friction: 50 }} shown={start}>
       <div className="header">

src/components/Globe.tsx

@@ -1,37 +1,46 @@
 import React from 'react';
-import ReactGlobe from 'react-globe';
+import ReactGlobe, { Coordinates, Marker, Options } from 'react-globe';
 
 import config from '../config';
 import markerRenderer from '../markerRenderer';
 import { useStateValue } from '../state/StateProvider';
-import { ActionType, Marker } from '../types';
 import Blur from './ui/Blur';
+import { ActionType } from '../types';
 
-const { cameraOptions, focusOptions, globeOptions, lightOptions } = config;
+import 'tippy.js/dist/tippy.css';
+import 'tippy.js/animations/scale.css';
 
 const markerOptions = {
-  enableTooltip: true,
-  getTooltipContent: (marker: Marker): string =>
+  markerTooltipRenderer: (marker: Marker): string =>
     `${marker.city} (${marker.value})`,
-  renderer: markerRenderer,
+  markerRenderer,
 };
 
+const options = {
+  ...config.options,
+  ...markerOptions,
+} as Options;
+
 function Globe(): React.ReactElement {
   const [state, dispatch] = useStateValue();
   const { focusedMarker, start } = state;
+  // @ts-ignore
   const markers = start ? state.markers : [];
   const focus =
     focusedMarker !== undefined ? focusedMarker.coordinates : undefined;
   return (
     <Blur className="globe" config={{ friction: 150 }} shown={true}>
       <ReactGlobe
-        cameraOptions={cameraOptions}
-        focus={focus}
-        focusOptions={focusOptions}
-        globeOptions={globeOptions}
-        lightOptions={lightOptions}
+        globeBackgroundTexture={config.globeBackgroundTexture}
+        globeCloudsTexture={config.globeCloudsTexture}
+        globeTexture={config.globeTexture}
+        height="100vh"
+        initialCameraDistanceRadiusScale={3.5}
+        focus={focus as Coordinates}
+        // @ts-ignore
         markers={markers}
-        markerOptions={markerOptions}
+        width="100vw"
+        options={options}
         onClickMarker={(marker: Marker): void =>
           dispatch({ type: ActionType.Focus, payload: marker })
         }

src/components/Intro.tsx

@@ -12,7 +12,7 @@ function Intro(): React.ReactElement {
     <Blur className="intro" config={{ friction: 50 }} shown={!start}>
       <h1>Google Globe Trends</h1>
       <p>
-        Visualizing <b>{`"${keyword}"`}</b> Google Trends with{' '}
+        Visualizing <b>{`"${keyword.join(', ')}"`}</b> Google Trends with{' '}
         <Link value="REACT_GLOBE_GITHUB" label="react-globe" />
       </p>
       <Button

src/config.js

@@ -1,29 +1,26 @@
 // Update this file to customize trend data and globe UI
-
-// @ts-ignore:  Used by a node script and requires the CommonJS syntax
 module.exports = {
   data: {
-    keyword: 'game of thrones',
+    keyword: ['covid', 'covid19', 'coronavirus'],
   },
-  cameraOptions: {
-    enableZoom: false,
-  },
-  focusOptions: {
-    enableDefocus: false,
-  },
-  globeOptions: {
-    cloudsSpeed: 0.2,
-    cloudsOpacity: 0.05,
-    glowCoefficient: 0.1,
-    glowColor: '#fff9e6',
-    glowPower: 5,
-    glowRadiusScale: 0.2,
-    texture:
-      'https://raw.githubusercontent.com/chrisrzhou/react-globe/master/textures/globe_dark.jpg',
-  },
-  lightOptions: {
-    ambientLightColor: '#babc95',
+  globeBackgroundTexture:
+    'https://raw.githubusercontent.com/chrisrzhou/react-globe/main/textures/background.png',
+  globeCloudsTexture:
+    'https://raw.githubusercontent.com/chrisrzhou/react-globe/main/textures/clouds.png',
+  globeTexture:
+    'https://raw.githubusercontent.com/chrisrzhou/react-globe/main/textures/globe_dark.jpg',
+  options: {
+    ambientLightColor: '#b34444',
     ambientLightIntensity: 1,
+    cameraAutoRotateSpeed: 0.01,
+    cameraRotateSpeed: 0.02,
+    enableCameraZoom: false,
+    enableDefocus: false,
+    globeCloudsOpacity: 0.1,
+    globeGlowCoefficient: 0.1,
+    globeGlowColor: 'red',
+    globeGlowPower: 5,
+    globeGlowRadiusScale: 0.2,
     pointLightIntensity: 3,
     pointLightPositionRadiusScales: [-1, 1.5, -2.5],
   },

src/index.scss

@@ -127,12 +127,6 @@ body {
   text-align: center;
 }
 
-.globe {
-  height: 100vh;
-  overflow: hidden;
-  width: 100vw;
-}
-
 .overlay {
   @extend .fixed;
 

src/index.tsx

@@ -1,12 +1,12 @@
-import './index.scss';
-
 import React from 'react';
 import ReactDOM from 'react-dom';
 
 import App from './components/App';
 import { initialState, reducer } from './state';
 import StateProvider from './state/StateProvider';
 
+import './index.scss';
+
 function Root(): React.ReactElement {
   return (
     <StateProvider initialState={initialState} reducer={reducer}>