Initial commit

voidstar0 · Jul 11, 2020 · dc65a80 · dc65a80
commit dc65a80
Show file tree

Hide file tree

Showing 6 changed files with 154 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,4 @@
+# mact-replay
+Replay your Akamai mact data in the same manner it was recorded.
+Macts can be replaced in `public/data.js`
+![](https://i.imgur.com/sPsH0zw.gif)
diff --git a/index.html b/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        html, body {
+            width: 100%;
+            height: 100%;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+        }
+        #myDiv {
+            width: 100%;
+            height: 100%;
+        }
+    </style>
+    <script src="./public/plotly.js"></script>
+</head>
+<body>
+    <div id='myDiv'>
+    <script src="./public/plotly.js"></script>
+    <script src="./public/data.js"></script>
+    <script src="./public/mact.js"></script>
+    <script src="./public/plot.js"></script>
+</body>
+</html>
+
diff --git a/public/data.js b/public/data.js
diff --git a/public/mact.js b/public/mact.js
@@ -0,0 +1,16 @@
+window.parseMact = (mact) => {
+    let points = [];
+    mact.split(';').forEach(event => {
+        if (event) {
+            var [eventCount, eventType, timeStamp, x, y] = event.split(',');
+            points.push({
+                x: parseInt(x),
+                y: parseInt(y),
+                eventType, 
+                timeStamp: parseInt(timeStamp),
+                eventCount
+            });
+        }
+    });
+    return points;
+}
diff --git a/public/plot.js b/public/plot.js
@@ -0,0 +1,38 @@
+window.startTime = Date.now();
+var layout = {
+    xaxis: {
+        range: [0, 2000]
+    },
+    yaxis: {
+        autorange: 'reversed',
+        range: [0, 2000]
+    }
+};
+
+window.updatePlot = (parsedMacts) => {
+    const elapsedTime = Date.now() - window.startTime;
+    const traces = parsedMacts.map(m => {
+        const firstTimestamp = m[0].timeStamp;
+        const currentPoints = m.filter(p => p.timeStamp - firstTimestamp <= elapsedTime);
+        const text = currentPoints.map(p => {
+            return `Timestamp: ${p.timeStamp}\nCount: ${p.eventCount}`
+        })
+        return {
+            x: currentPoints.map(p => p.x),
+            y: currentPoints.map(p => p.y),
+            text,
+            finalTime:  m[m.length - 1].timeStamp - firstTimestamp,
+            mode: 'markers',
+            type: 'scatter'
+        };
+    });
+
+    const lastTime = Math.max(...traces.map(t => t.finalTime));
+    Plotly.newPlot('myDiv', traces, layout); // Should use an update function instead of creating a new plot everytime.
+
+    if(elapsedTime <= lastTime){
+        requestAnimationFrame(() => window.updatePlot(parsedMacts))
+    }
+}
+
+window.updatePlot(window.mactData.map(window.parseMact))
diff --git a/public/plotly.js b/public/plotly.js