packages/client/src/components/home/ExamplePeek.tsx
import React, { useEffect, useState, useReducer } from "react";
import Plot from "react-plotly.js";
type Location = {
location: string;
size: number;
};
const INITIAL_STATE = [
{ location: "ABW", size: 0 },
{ location: "AFG", size: 0 },
{ location: "AGO", size: 0 },
{ location: "AIA", size: 0 },
{ location: "ALA", size: 0 },
{ location: "ALB", size: 0 },
{ location: "AND", size: 0 },
{ location: "ARE", size: 0 },
{ location: "ARG", size: 0 },
{ location: "ARM", size: 0 },
{ location: "ASM", size: 0 },
{ location: "ATA", size: 0 },
{ location: "ATF", size: 0 },
{ location: "ATG", size: 0 },
{ location: "AUS", size: 0 },
{ location: "AUT", size: 0 },
{ location: "AZE", size: 0 },
{ location: "BDI", size: 0 },
{ location: "BEL", size: 0 },
{ location: "BEN", size: 0 },
{ location: "BES", size: 0 },
{ location: "BFA", size: 0 },
{ location: "BGD", size: 0 },
{ location: "BGR", size: 0 },
{ location: "BHR", size: 0 },
{ location: "BHS", size: 0 },
{ location: "BIH", size: 0 },
{ location: "BLM", size: 0 },
{ location: "BLR", size: 0 },
{ location: "BLZ", size: 0 },
{ location: "BMU", size: 0 },
{ location: "BOL", size: 0 },
{ location: "BRA", size: 0 },
{ location: "BRB", size: 0 },
{ location: "BRN", size: 0 },
{ location: "BTN", size: 0 },
{ location: "BVT", size: 0 },
{ location: "BWA", size: 0 },
{ location: "CAF", size: 0 },
{ location: "CAN", size: 0 },
{ location: "CCK", size: 0 },
{ location: "CHE", size: 0 },
{ location: "CHL", size: 0 },
{ location: "CHN", size: 0 },
{ location: "CIV", size: 0 },
{ location: "CMR", size: 0 },
{ location: "COD", size: 0 },
{ location: "COG", size: 0 },
{ location: "COK", size: 0 },
{ location: "COL", size: 0 },
{ location: "COM", size: 0 },
{ location: "CPV", size: 0 },
{ location: "CRI", size: 0 },
{ location: "CUB", size: 0 },
{ location: "CUW", size: 0 },
{ location: "CXR", size: 0 },
{ location: "CYM", size: 0 },
{ location: "CYP", size: 0 },
{ location: "CZE", size: 0 },
{ location: "DEU", size: 0 },
{ location: "DJI", size: 0 },
{ location: "DMA", size: 0 },
{ location: "DNK", size: 0 },
{ location: "DOM", size: 0 },
{ location: "DZA", size: 0 },
{ location: "ECU", size: 0 },
{ location: "EGY", size: 0 },
{ location: "ERI", size: 0 },
{ location: "ESH", size: 0 },
{ location: "ESP", size: 0 },
{ location: "EST", size: 0 },
{ location: "ETH", size: 0 },
{ location: "FIN", size: 0 },
{ location: "FJI", size: 0 },
{ location: "FLK", size: 0 },
{ location: "FRA", size: 0 },
{ location: "FRO", size: 0 },
{ location: "FSM", size: 0 },
{ location: "GAB", size: 0 },
{ location: "GBR", size: 0 },
{ location: "GEO", size: 0 },
{ location: "GGY", size: 0 },
{ location: "GHA", size: 0 },
{ location: "GIB", size: 0 },
{ location: "GIN", size: 0 },
{ location: "GLP", size: 0 },
{ location: "GMB", size: 0 },
{ location: "GNB", size: 0 },
{ location: "GNQ", size: 0 },
{ location: "GRC", size: 0 },
{ location: "GRD", size: 0 },
{ location: "GRL", size: 0 },
{ location: "GTM", size: 0 },
{ location: "GUF", size: 0 },
{ location: "GUM", size: 0 },
{ location: "GUY", size: 0 },
{ location: "HKG", size: 0 },
{ location: "HMD", size: 0 },
{ location: "HND", size: 0 },
{ location: "HRV", size: 0 },
{ location: "HTI", size: 0 },
{ location: "HUN", size: 0 },
{ location: "IDN", size: 0 },
{ location: "IMN", size: 0 },
{ location: "IND", size: 0 },
{ location: "IOT", size: 0 },
{ location: "IRL", size: 0 },
{ location: "IRN", size: 0 },
{ location: "IRQ", size: 0 },
{ location: "ISL", size: 0 },
{ location: "ISR", size: 0 },
{ location: "ITA", size: 0 },
{ location: "JAM", size: 0 },
{ location: "JEY", size: 0 },
{ location: "JOR", size: 0 },
{ location: "JPN", size: 0 },
{ location: "KAZ", size: 0 },
{ location: "KEN", size: 0 },
{ location: "KGZ", size: 0 },
{ location: "KHM", size: 0 },
{ location: "KIR", size: 0 },
{ location: "KNA", size: 0 },
{ location: "KOR", size: 0 },
{ location: "KWT", size: 0 },
{ location: "LAO", size: 0 },
{ location: "LBN", size: 0 },
{ location: "LBR", size: 0 },
{ location: "LBY", size: 0 },
{ location: "LCA", size: 0 },
{ location: "LIE", size: 0 },
{ location: "LKA", size: 0 },
{ location: "LSO", size: 0 },
{ location: "LTU", size: 0 },
{ location: "LUX", size: 0 },
{ location: "LVA", size: 0 },
{ location: "MAC", size: 0 },
{ location: "MAF", size: 0 },
{ location: "MAR", size: 0 },
{ location: "MCO", size: 0 },
{ location: "MDA", size: 0 },
{ location: "MDG", size: 0 },
{ location: "MDV", size: 0 },
{ location: "MEX", size: 0 },
{ location: "MHL", size: 0 },
{ location: "MKD", size: 0 },
{ location: "MLI", size: 0 },
{ location: "MLT", size: 0 },
{ location: "MMR", size: 0 },
{ location: "MNE", size: 0 },
{ location: "MNG", size: 0 },
{ location: "MNP", size: 0 },
{ location: "MOZ", size: 0 },
{ location: "MRT", size: 0 },
{ location: "MSR", size: 0 },
{ location: "MTQ", size: 0 },
{ location: "MUS", size: 0 },
{ location: "MWI", size: 0 },
{ location: "MYS", size: 0 },
{ location: "MYT", size: 0 },
{ location: "NAM", size: 0 },
{ location: "NCL", size: 0 },
{ location: "NER", size: 0 },
{ location: "NFK", size: 0 },
{ location: "NGA", size: 0 },
{ location: "NIC", size: 0 },
{ location: "NIU", size: 0 },
{ location: "NLD", size: 0 },
{ location: "NOR", size: 0 },
{ location: "NPL", size: 0 },
{ location: "NRU", size: 0 },
{ location: "NZL", size: 0 },
{ location: "OMN", size: 0 },
{ location: "PAK", size: 0 },
{ location: "PAN", size: 0 },
{ location: "PCN", size: 0 },
{ location: "PER", size: 0 },
{ location: "PHL", size: 0 },
{ location: "PLW", size: 0 },
{ location: "PNG", size: 0 },
{ location: "POL", size: 0 },
{ location: "PRI", size: 0 },
{ location: "PRK", size: 0 },
{ location: "PRT", size: 0 },
{ location: "PRY", size: 0 },
{ location: "PSE", size: 0 },
{ location: "PYF", size: 0 },
{ location: "QAT", size: 0 },
{ location: "REU", size: 0 },
{ location: "ROU", size: 0 },
{ location: "RUS", size: 0 },
{ location: "RWA", size: 0 },
{ location: "SAU", size: 0 },
{ location: "SDN", size: 0 },
{ location: "SEN", size: 0 },
{ location: "SGP", size: 0 },
{ location: "SGS", size: 0 },
{ location: "SHN", size: 0 },
{ location: "SJM", size: 0 },
{ location: "SLB", size: 0 },
{ location: "SLE", size: 0 },
{ location: "SLV", size: 0 },
{ location: "SMR", size: 0 },
{ location: "SOM", size: 0 },
{ location: "SPM", size: 0 },
{ location: "SRB", size: 0 },
{ location: "SSD", size: 0 },
{ location: "STP", size: 0 },
{ location: "SUR", size: 0 },
{ location: "SVK", size: 0 },
{ location: "SVN", size: 0 },
{ location: "SWE", size: 0 },
{ location: "SWZ", size: 0 },
{ location: "SXM", size: 0 },
{ location: "SYC", size: 0 },
{ location: "SYR", size: 0 },
{ location: "TCA", size: 0 },
{ location: "TCD", size: 0 },
{ location: "TGO", size: 0 },
{ location: "THA", size: 0 },
{ location: "TJK", size: 0 },
{ location: "TKL", size: 0 },
{ location: "TKM", size: 0 },
{ location: "TLS", size: 0 },
{ location: "TON", size: 0 },
{ location: "TTO", size: 0 },
{ location: "TUN", size: 0 },
{ location: "TUR", size: 0 },
{ location: "TUV", size: 0 },
{ location: "TWN", size: 0 },
{ location: "TZA", size: 0 },
{ location: "UGA", size: 0 },
{ location: "UKR", size: 0 },
{ location: "UMI", size: 0 },
{ location: "URY", size: 0 },
{ location: "USA", size: 0 },
{ location: "UZB", size: 0 },
{ location: "VAT", size: 0 },
{ location: "VCT", size: 0 },
{ location: "VEN", size: 0 },
{ location: "VGB", size: 0 },
{ location: "VIR", size: 0 },
{ location: "VNM", size: 0 },
{ location: "VUT", size: 0 },
{ location: "WLF", size: 0 },
{ location: "WSM", size: 0 },
{ location: "YEM", size: 0 },
{ location: "ZAF", size: 0 },
{ location: "ZMB", size: 0 },
{ location: "ZWE", size: 0 },
];
export const ExamplePeek = () => {
const newSize = (state: Location[]): Location[] => {
state[Math.floor(state.length * Math.random())].size += 5;
return [...state];
};
const [sizes, setSizes] = useReducer(newSize, INITIAL_STATE);
useEffect(() => {
setTimeout(setSizes, 800);
});
return (
<Plot
data={[
{
type: "scattergeo",
marker: {
color: "rgb(88, 80, 236)",
size: sizes.map(({ size }) => size),
},
locations: sizes.map(({ location }) => location),
} as any,
]}
layout={{}}
config={{ responsive: true, displaylogo: false }}
style={{ width: "100%", height: 520 }}
/>
);
};