Skip to content

Commit

Permalink
fix: prep changes for daily metrics [UA-8347]
Browse files Browse the repository at this point in the history
  • Loading branch information
@mpayne-coveo
mpayne-coveo committed Nov 16, 2023
1 parent 29709f4 commit c3d3ca8
Show file tree
Hide file tree
Showing 3 changed files with 52 additions and 64 deletions.
25 changes: 1 addition & 24 deletions src/App.tsx
View file
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
87 changes: 49 additions & 38 deletions src/Charts.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -25,8 +26,8 @@ const auClient: AxiosInstance = axios.create();
const client: AxiosInstance = axios.create();

export const Charts: FunctionComponent<ChartsProps> = ({
tickSpeed = 1000,
}) => {
tickSpeed = 1000,
}) => {
const [latencyUs, setLatencyUs] = useState<number>(0);
const [latencyEu, setLatencyEu] = useState<number>(0);
const [latencyAu, setLatencyAu] = useState<number>(0);
Expand All @@ -35,6 +36,7 @@ export const Charts: FunctionComponent<ChartsProps> = ({
const [totalRevenue, setTotalRevenue] = useState<number>(0);
const [totalAddToCarts, setTotalAddToCarts] = useState<number>(0);

const [prevTotalRevenueAccumulator, setPrevTotalRevenueAccumulator] = useState<number>(0);
const [totalRevenueAccumulator, setTotalRevenueAccumulator] = useState<number>(0);


Expand Down Expand Up @@ -74,38 +76,37 @@ export const Charts: FunctionComponent<ChartsProps> = ({
currentdate.setMilliseconds(0)
currentdate.setSeconds(0)
currentdate.setMinutes(currentMinute - 1)
console.log(currentdate.toISOString())
arrayPromises.push(await client
.get<MinuteMetric[]>(`${regionConfig.lambdaEndpoint}&minuteMetrics=${currentdate.toISOString()}`));
.get<TimeBucketMetric[]>(`${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 () => {
Expand Down Expand Up @@ -214,7 +215,7 @@ export const Charts: FunctionComponent<ChartsProps> = ({
}, [animationTick]);

useEffect(() => {
if(env !== undefined){
if (env !== undefined) {
getMetrics()
const timeout = setInterval(async () => {
getMetrics()
Expand Down Expand Up @@ -243,9 +244,19 @@ export const Charts: FunctionComponent<ChartsProps> = ({
height: 100,
left: "20%"
}}>
<Grid.Col span={4} style={{color: "white", borderLeft: "4px solid white"}}>
<Text size="xl" color={"darkgrey"}>Total sales (USD)</Text>
<Text weight="bold" style={{fontSize: "xx-large"}}>{USDollar.format(totalRevenueAccumulator)}</Text>
<Grid.Col span={4} style={{ color: "white", borderLeft: "4px solid white" }}>
<Text size="xl" color={"darkgrey"}>Total Sales (USD)</Text>
<Text weight="bold" style={{ fontSize: "xx-large" }}>
<CountUp
start={prevTotalRevenueAccumulator}
end={totalRevenueAccumulator}
duration={10}
separator=","
decimal="."
decimals={2}
prefix="$"
/>
</Text>
</Grid.Col>
</Grid>
<Grid style={{
Expand All @@ -257,17 +268,17 @@ export const Charts: FunctionComponent<ChartsProps> = ({
height: 100,
left: "20%"
}}>
<Grid.Col span={4} style={{color: "white", borderLeft: "4px solid white"}}>
<Grid.Col span={4} style={{ color: "white", borderLeft: "4px solid white" }}>
<Text size="xl" color={"darkgrey"}>Sales per minute (USD)</Text>
<Text weight="bold" style={{fontSize: "xx-large"}}>{USDollar.format(totalRevenue)}</Text>
<Text weight="bold" style={{ fontSize: "xx-large" }}>{USDollar.format(totalRevenue)}</Text>
</Grid.Col>
<Grid.Col span={4} style={{color: "white", borderLeft: "4px solid white"}}>
<Grid.Col span={4} style={{ color: "white", borderLeft: "4px solid white" }}>
<Text size="xl" color={"darkgrey"}>Add to cart per minute</Text>
<Text weight="bold" style={{fontSize: "xx-large"}}>{totalAddToCarts}</Text>
<Text weight="bold" style={{ fontSize: "xx-large" }}>{totalAddToCarts}</Text>
</Grid.Col>
<Grid.Col span={4} style={{color: "white", borderLeft: "4px solid white"}}>
<Grid.Col span={4} style={{ color: "white", borderLeft: "4px solid white" }}>
<Text size="xl" color={"darkgrey"}>Transactions per minute</Text>
<Text weight="bold" style={{fontSize: "xx-large"}}>{totalPurchases}</Text>
<Text weight="bold" style={{ fontSize: "xx-large" }}>{totalPurchases}</Text>
</Grid.Col>
</Grid>

Expand All @@ -290,7 +301,7 @@ export const Charts: FunctionComponent<ChartsProps> = ({


<Grid>
<Grid.Col span={4} style={{color: "white"}}>
<Grid.Col span={4} style={{ color: "white" }}>
<Text size={14} color="white">
us-east-1
</Text>
Expand All @@ -309,7 +320,7 @@ export const Charts: FunctionComponent<ChartsProps> = ({
{latencyUs.toString()} seconds
</Text>
</Grid.Col>
<Grid.Col span={4} style={{color: "white"}}>
<Grid.Col span={4} style={{ color: "white" }}>
<Text size={14} color="white">
eu-west-1
</Text>
Expand All @@ -328,7 +339,7 @@ export const Charts: FunctionComponent<ChartsProps> = ({
{latencyEu.toString()} seconds
</Text>
</Grid.Col>
<Grid.Col span={4} style={{color: "white"}}>
<Grid.Col span={4} style={{ color: "white" }}>
<Text size={14} color="white">
ap-southeast-2
</Text>
Expand Down
4 changes: 2 additions & 2 deletions src/Events.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@ export interface LiveEvent {
price?: string | number;
}

export interface MinuteMetric {
export interface TimeBucketMetric {
type: string;
minuteBucketTimestamp: string;
bucketTimestamp: string;
count: string;
}

Expand Down

0 comments on commit c3d3ca8

Please sign in to comment.