Skip to content

Commit

Permalink
Merge pull request #5 from coveord/feature/UA-8347-globe-v2
Browse files Browse the repository at this point in the history
first attempt at globe v2
  • Loading branch information
mpayne-coveo authored Nov 17, 2023
2 parents 422c8c3 + 67bc27b commit e6ad2e0
Show file tree
Hide file tree
Showing 11 changed files with 1,139 additions and 1,215 deletions.
564 changes: 329 additions & 235 deletions package-lock.json

Large diffs are not rendered by default.

8 changes: 5 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"private": true,
"dependencies": {
"@mantine/core": "^5.6.3",
"@tabler/icons-react": "^2.40.0",
"@tanstack/react-query": "^4.13.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
Expand All @@ -17,6 +18,7 @@
"lodash": "^4.17.21",
"react": "^18.2.0",
"react-chartjs-2": "^4.3.1",
"react-countup": "^6.5.0",
"react-dom": "^18.2.0",
"react-globe.gl": "^2.22.4",
"react-konami-code": "^2.3.0",
Expand All @@ -43,9 +45,9 @@
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"development": [
"last 1 chrome version",
Expand Down
Binary file added public/coveo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="stylesheet" href="https://use.typekit.net/wqe4zqp.css"/>
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
Expand Down
39 changes: 16 additions & 23 deletions src/AnimatedGlobe.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,13 @@ import ReactGlobeGl, { GlobeMethods } from "react-globe.gl";
import globeData from "./data/admin-data.json";
import {
AWSRegionGeo,
BorderColors,
EventTypeColors,
LambdaURLAu,
LambdaURLEU,
LambdaURLUsEast,
LiveEvent,
} from "./Events";
import { uniqBy } from "lodash";
import * as THREE from "three";

interface ArcData {
filter?: any;
Expand Down Expand Up @@ -52,11 +51,9 @@ interface AnimatedGlobeProps {
numberOfAnimation: number;
arcDashGap: number;
arcStroke: number;
earthImg: string;
atmosphereColor: string;
atmosphereAltitude: number;
arcAltitudeAutoScale: number;
discoMode: boolean;
env: string;
}

export const AnimatedGlobe: FunctionComponent<AnimatedGlobeProps> = ({
Expand All @@ -73,18 +70,16 @@ export const AnimatedGlobe: FunctionComponent<AnimatedGlobeProps> = ({
ringRadius,
ringSpeed,
arcDashGap,
earthImg,
arcStroke,
atmosphereColor,
atmosphereAltitude,
arcAltitudeAutoScale,
discoMode,
env
}) => {
const [arcsData, setArcsData] = useState<ArcData[]>([]);
const [ringsData, setRingsData] = useState<RingData[]>([]);
const [labelsData, setLabelsData] = useState<LabelData[]>([]);
const [animationTick, setAnimationTick] = useState(0);
const [geometryCount, setGeometryCount] = useState(0);

const globeRef = useRef<GlobeMethods>();

const emitArc = async () => {
Expand All @@ -108,8 +103,6 @@ export const AnimatedGlobe: FunctionComponent<AnimatedGlobeProps> = ({

const datum = Object.entries(resTotal).flatMap(([region, liveEvents]) => {
return liveEvents.map((liveEvent) => {
const color =
BorderColors[EventTypeColors[liveEvent.type]] || BorderColors[0];
const lattitude = Number(liveEvent.lat);
const longitude = Number(liveEvent.long);
const timestamp = new Date().getTime();
Expand All @@ -120,11 +113,10 @@ export const AnimatedGlobe: FunctionComponent<AnimatedGlobeProps> = ({
endLat: AWSRegionGeo[region as validRegions].lat,
startLng: longitude,
endLng: AWSRegionGeo[region as validRegions].lng,
color,
color: "#8f7000",
timestamp,
} as ArcData,
sourceRing: {
color,
lat: lattitude,
lng: longitude,
timestamp,
Expand Down Expand Up @@ -208,6 +200,12 @@ export const AnimatedGlobe: FunctionComponent<AnimatedGlobeProps> = ({
globeRef.current?.resumeAnimation();
}

const material = new THREE.MeshPhongMaterial({
color: '#9dabf2',
emissive: '#062d70'
});


return (
<ReactGlobeGl
labelsData={
Expand Down Expand Up @@ -253,7 +251,6 @@ export const AnimatedGlobe: FunctionComponent<AnimatedGlobeProps> = ({
labelResolution={2}
labelIncludeDot={false}
labelsTransitionDuration={0}
labelColor={() => "rgba(255, 165, 0, 0.75)"}
ref={globeRef}
arcsData={renderArcs ? arcsData : []}
arcColor={"color"}
Expand All @@ -270,16 +267,12 @@ export const AnimatedGlobe: FunctionComponent<AnimatedGlobeProps> = ({
ringMaxRadius={ringRadius}
ringPropagationSpeed={ringSpeed}
ringRepeatPeriod={(flightTime * arcRelativeLength) / numRings}
backgroundImageUrl="/night-sky.png"
globeImageUrl={discoMode ? "" : earthImg}
atmosphereColor={atmosphereColor}
atmosphereAltitude={atmosphereAltitude}
hexPolygonsData={discoMode ? [...globeData.features] : []}
hexPolygonResolution={3}
globeMaterial={material}
backgroundColor={"#181d3a"}
hexPolygonsData={[...globeData.features]}
hexPolygonColor={() => '#34ad95'}
hexPolygonMargin={0.3}
hexPolygonLabel={(feat: any) => feat.properties.ADMIN}
showGlobe={discoMode ? false : true}
showAtmosphere={discoMode ? false : true}
showGlobe={true}
htmlElementsData={[
{
...AWSRegionGeo["us-east-1"],
Expand Down
25 changes: 1 addition & 24 deletions src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,8 @@ import { ReactRouter6Adapter } from "use-query-params/adapters/react-router-6";
import { GlobeAndPanel } from "./GlobeAndPanel";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { Charts } from "./Charts";
import Konami from 'react-konami-code';
import gif from './dancing-skelly.gif';

function App() {
function easterEgg() {
var imgDiv = document.createElement("div");

var img = document.createElement("img");
img.style.height = "90vh";
img.style.position = "fixed";
img.style.top = "50%";
img.style.left = "50%";
img.style.transform = "translate(-50%, -50%)";

img.src = gif;
imgDiv.appendChild(img);

let root = document.getElementById("root")
if (root != null) {
root.appendChild(imgDiv);
}
}
return (
<BrowserRouter>
<QueryParamProvider adapter={ReactRouter6Adapter}>
Expand All @@ -33,11 +13,8 @@ function App() {
path="/"
element={
<>
<GlobeAndPanel />
<GlobeAndPanel />
<Charts />
<Konami action={easterEgg}>
{"Hey, I'm an Easter Egg! Look at me!"}
</Konami>
</>
}
/>
Expand Down
Loading

0 comments on commit e6ad2e0

Please sign in to comment.