From 99155af44ee9ac90aca164dd0605ba980442e63d Mon Sep 17 00:00:00 2001
From: Ajay Thorve <ajaythorve1994@gmail.com>
Date: Tue, 8 Nov 2022 00:34:01 -0800
Subject: [PATCH] fix area chart

---
 morpheus-DFP/src/components/area.js         | 20 ++++++-------
 morpheus-DFP/src/components/server/utils.js | 31 ++++++++++++++++++++-
 morpheus-DFP/src/pages/api/[...param].js    | 11 ++------
 morpheus-DFP/src/pages/index.js             |  9 ++----
 4 files changed, 44 insertions(+), 27 deletions(-)

diff --git a/morpheus-DFP/src/components/area.js b/morpheus-DFP/src/components/area.js
index c190bdc..b3f2b4b 100644
--- a/morpheus-DFP/src/components/area.js
+++ b/morpheus-DFP/src/components/area.js
@@ -93,19 +93,20 @@ function AreaChart({ totalEvents, anomalousEvents }) {
     },
     series: [
       {
-        name: "Anomalous Traffic",
+        name: "Network Traffic",
         type: "line",
         symbol: "none",
         stack: true,
         lineStyle: {
           width: 0.7,
+          color: "#ffffff",
         },
         areaStyle: {
-          opacity: 1,
+          opacity: 0.7,
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1.5, [
             {
               offset: 0,
-              color: "#f73d0a",
+              color: "#ffffff",
             },
             {
               offset: 1,
@@ -113,23 +114,22 @@ function AreaChart({ totalEvents, anomalousEvents }) {
             },
           ]),
         },
-        data: anomalousEvents,
+        data: totalEvents,
       },
       {
-        name: "Network Traffic",
+        name: "Anomalous Traffic",
         type: "line",
         symbol: "none",
         stack: true,
         lineStyle: {
           width: 0.7,
-          color: "#ffffff",
         },
         areaStyle: {
-          opacity: 0.7,
+          opacity: 1,
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1.5, [
             {
               offset: 0,
-              color: "#ffffff",
+              color: "#f73d0a",
             },
             {
               offset: 1,
@@ -137,10 +137,10 @@ function AreaChart({ totalEvents, anomalousEvents }) {
             },
           ]),
         },
-        data: totalEvents,
+        data: anomalousEvents,
       },
     ],
-    notMerge: true,
+    notMerge: false,
     backgroundColor: "#0f0f0f",
   };
 
diff --git a/morpheus-DFP/src/components/server/utils.js b/morpheus-DFP/src/components/server/utils.js
index e94d55e..6f53049 100644
--- a/morpheus-DFP/src/components/server/utils.js
+++ b/morpheus-DFP/src/components/server/utils.js
@@ -317,7 +317,36 @@ export function getInstances(
     .select(["userID", "time", "index", "anomalyScore_scaled"])
     .sortValues({ anomalyScore_scaled: { ascending: false } });
 }
-
+export function getEventStats(df, threshold) {
+  const totalEvents = df
+    .groupBy({ by: "time" })
+    .count()
+    .select(["time", "user"])
+    .sortValues({ time: { ascending: false } })
+    .rename({ user: "count" })
+    .toArrow()
+    .toArray();
+  const anomalousEvents = df
+    .filter(df.get("anomalyScore_scaled").ge(threshold))
+    .groupBy({ by: "time" })
+    .count()
+    .select(["time", "user"])
+    .sortValues({ time: { ascending: false } })
+    .rename({ user: "count" })
+    .toArrow()
+    .toArray();
+
+  return {
+    totalEvents: totalEvents.reduce(
+      (map, value) => map.concat([Object.values(value)]),
+      []
+    ),
+    anomalousEvents: anomalousEvents.reduce(
+      (map, value) => map.concat([Object.values(value)]),
+      []
+    ),
+  };
+}
 export function generateData(
   df,
   df_queried,
diff --git a/morpheus-DFP/src/pages/api/[...param].js b/morpheus-DFP/src/pages/api/[...param].js
index 0ec01f6..3855b6b 100644
--- a/morpheus-DFP/src/pages/api/[...param].js
+++ b/morpheus-DFP/src/pages/api/[...param].js
@@ -16,6 +16,7 @@ import {
   sendDF,
   generateData,
   getInstances,
+  getEventStats,
 } from "../../components/server/utils";
 const cache = require("../../components/server/cacheDatasets")();
 import runMiddleware from "../../components/server/runMiddleware";
@@ -96,15 +97,7 @@ export default async function handler(req, res) {
         ? parseFloat(req.query.anomalyThreshold)
         : 0.385;
 
-      res.send({
-        totalEvents:
-          req[datasetName].numRows -
-          req[datasetName].get("anomalyScore_scaled").nullCount,
-        totalAnomalousEvents: req[datasetName].filter(
-          req[datasetName].get("anomalyScore_scaled").ge(anomalyThreshold)
-        ).numRows,
-        time: req[datasetName].get("time").getValue(0),
-      });
+      res.send(getEventStats(req[datasetName + "_queried"], anomalyThreshold));
       break;
     case "getInstances":
       const id = req.query.id ? parseInt(req.query.id) : -1;
diff --git a/morpheus-DFP/src/pages/index.js b/morpheus-DFP/src/pages/index.js
index 7f17569..ee3d696 100644
--- a/morpheus-DFP/src/pages/index.js
+++ b/morpheus-DFP/src/pages/index.js
@@ -127,19 +127,14 @@ export default class CustomD3 extends React.Component {
     const timestamps = await requestJSON("getTimeStamps", this.appendPayload());
     const userIDs = await requestData("getUniqueIDs", this.appendPayload());
     const totalTime = await requestJSON("getTotalTime", this.appendPayload());
-
     this.setState({
       position: elevation.batches[0].data.children[0].values,
       colors: colors.batches[0].data.children[0].values,
       userIDs: new TextDecoder().decode(
         userIDs.batches[0].data.children[0].values
       ),
-      anomalousEvents: this.state.anomalousEvents.concat([
-        [new Date(data.time), data.totalAnomalousEvents],
-      ]),
-      totalEvents: this.state.totalEvents.concat([
-        [new Date(data.time), data.totalEvents],
-      ]),
+      anomalousEvents: data.anomalousEvents,
+      totalEvents: data.totalEvents,
       selectedEvent: {
         ...this.state.selectedEvent,
         instanceId: -1,