diff --git a/src/App.tsx b/src/App.tsx index bff8ef5..3596401 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -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 ( @@ -33,11 +13,8 @@ function App() { path="/" element={ <> - + - - {"Hey, I'm an Easter Egg! Look at me!"} - } /> diff --git a/src/Charts.tsx b/src/Charts.tsx index c6a1f0f..c68b761 100644 --- a/src/Charts.tsx +++ b/src/Charts.tsx @@ -1,18 +1,19 @@ /* eslint-disable */ -import {FunctionComponent, useEffect, useState} from "react"; +import { FunctionComponent, useEffect, useState } from "react"; import "chart.js/auto"; // ADD THIS -import {Grid, Text} from "@mantine/core"; +import { Grid, Text } from "@mantine/core"; import { envRegionMapping, LambdaURLAu, LambdaURLEU, LambdaURLUsEast, LiveEvent, - MinuteMetric, + TimeBucketMetric, } from "./Events"; -import axios, {AxiosInstance} from "axios"; -import {StringParam, useQueryParams} from "use-query-params"; +import axios, { AxiosInstance } from "axios"; +import { StringParam, useQueryParams } from "use-query-params"; +import CountUp from 'react-countup'; export interface ChartsProps { tickSpeed?: number; @@ -25,8 +26,8 @@ const auClient: AxiosInstance = axios.create(); const client: AxiosInstance = axios.create(); export const Charts: FunctionComponent = ({ - tickSpeed = 1000, - }) => { + tickSpeed = 1000, +}) => { const [latencyUs, setLatencyUs] = useState(0); const [latencyEu, setLatencyEu] = useState(0); const [latencyAu, setLatencyAu] = useState(0); @@ -35,6 +36,7 @@ export const Charts: FunctionComponent = ({ const [totalRevenue, setTotalRevenue] = useState(0); const [totalAddToCarts, setTotalAddToCarts] = useState(0); + const [prevTotalRevenueAccumulator, setPrevTotalRevenueAccumulator] = useState(0); const [totalRevenueAccumulator, setTotalRevenueAccumulator] = useState(0); @@ -74,38 +76,37 @@ export const Charts: FunctionComponent = ({ currentdate.setMilliseconds(0) currentdate.setSeconds(0) currentdate.setMinutes(currentMinute - 1) - console.log(currentdate.toISOString()) arrayPromises.push(await client - .get(`${regionConfig.lambdaEndpoint}&minuteMetrics=${currentdate.toISOString()}`)); + .get(`${regionConfig.lambdaEndpoint}&metrics=${currentdate.toISOString()}`)); } await Promise.all(arrayPromises); - for(const promise of arrayPromises){ - if(Array.isArray(promise.data)){ - const minuteMetrics = promise.data; - minuteMetrics.forEach((minuteMetric: MinuteMetric) =>{ - if(minuteMetric.type === 'purchases'){ - console.log(`Purchases from region`, minuteMetric.count) - purchases += Number(minuteMetric.count); + for (const promise of arrayPromises) { + if (Array.isArray(promise.data)) { + const metrics = promise.data; + metrics.forEach((metric: TimeBucketMetric) => { + if (metric.type === 'purchases') { + console.log(`Purchases from region`, metric.count) + purchases += Number(metric.count); } - if(minuteMetric.type === 'revenue'){ - console.log(`revenue from region`, minuteMetric.count) - revenue += Number(minuteMetric.count); + if (metric.type === 'revenue') { + console.log(`revenue from region`, metric.count) + revenue += Number(metric.count); } - if(minuteMetric.type === 'addToCart'){ - console.log(`addToCart from region`, minuteMetric.count) - addToCarts += Number(minuteMetric.count); + if (metric.type === 'addToCart') { + console.log(`addToCart from region`, metric.count) + addToCarts += Number(metric.count); } }) } - console.log("updating total purchases to", purchases); setTotalPurchases(purchases); setTotalRevenue(revenue); - setTotalAddToCarts(addToCarts) + setTotalAddToCarts(addToCarts); + const previousRevenue = totalRevenueAccumulator; + setPrevTotalRevenueAccumulator(previousRevenue); const currentTotalRevenue = totalRevenueAccumulator + revenue; console.log("current total", currentTotalRevenue) setTotalRevenueAccumulator(currentTotalRevenue); } - } }; const getUsEvents = async () => { @@ -214,7 +215,7 @@ export const Charts: FunctionComponent = ({ }, [animationTick]); useEffect(() => { - if(env !== undefined){ + if (env !== undefined) { getMetrics() const timeout = setInterval(async () => { getMetrics() @@ -243,9 +244,19 @@ export const Charts: FunctionComponent = ({ height: 100, left: "20%" }}> - - Total sales (USD) - {USDollar.format(totalRevenueAccumulator)} + + Total Sales (USD) + + + = ({ height: 100, left: "20%" }}> - + Sales per minute (USD) - {USDollar.format(totalRevenue)} + {USDollar.format(totalRevenue)} - + Add to cart per minute - {totalAddToCarts} + {totalAddToCarts} - + Transactions per minute - {totalPurchases} + {totalPurchases} @@ -290,7 +301,7 @@ export const Charts: FunctionComponent = ({ - + us-east-1 @@ -309,7 +320,7 @@ export const Charts: FunctionComponent = ({ {latencyUs.toString()} seconds - + eu-west-1 @@ -328,7 +339,7 @@ export const Charts: FunctionComponent = ({ {latencyEu.toString()} seconds - + ap-southeast-2 diff --git a/src/Events.ts b/src/Events.ts index 2cc3b8e..81e2ce2 100644 --- a/src/Events.ts +++ b/src/Events.ts @@ -11,9 +11,9 @@ export interface LiveEvent { price?: string | number; } -export interface MinuteMetric { +export interface TimeBucketMetric { type: string; - minuteBucketTimestamp: string; + bucketTimestamp: string; count: string; }