From fa7884ee7ed827bbca8792ad60155d9ba31c68cd Mon Sep 17 00:00:00 2001
From: Alex <alex.a.mylonas@gmail.com>
Date: Fri, 20 Nov 2020 17:08:44 +0200
Subject: [PATCH] ***TO REVERT THIS***

---
 .../EventsByLogType/EventsByLogType.tsx       | 56 ++++++++++++++++++-
 1 file changed, 54 insertions(+), 2 deletions(-)

diff --git a/web/src/pages/LogAnalysisOverview/EventsByLogType/EventsByLogType.tsx b/web/src/pages/LogAnalysisOverview/EventsByLogType/EventsByLogType.tsx
index c8f87e88cf..16fa57c270 100644
--- a/web/src/pages/LogAnalysisOverview/EventsByLogType/EventsByLogType.tsx
+++ b/web/src/pages/LogAnalysisOverview/EventsByLogType/EventsByLogType.tsx
@@ -17,18 +17,70 @@
  */
 
 import React from 'react';
-import { Flex } from 'pouncejs';
+import { Box, Flex, SimpleGrid } from 'pouncejs';
 import TimeSeriesChart from 'Components/charts/TimeSeriesChart';
 import { LongSeriesData } from 'Generated/schema';
+import { stringToPaleColor } from 'Helpers/colors';
 
 interface EventsByLogTypesProps {
   events: LongSeriesData;
 }
 
+const getTooltip = (aggregate: { [key: string]: number }) => {
+  return (
+    <SimpleGrid columns={2} spacing={3}>
+      {Object.keys(aggregate).map(logType => (
+        <Flex key={logType} justify="space-between" spacing={2}>
+          <Flex spacing={2} align="center">
+            <Box
+              as="span"
+              width={12}
+              height={12}
+              backgroundColor={stringToPaleColor(logType) as any}
+              // @ts-ignore The pounce property is not transformed for unknown reasons
+              borderRadius="10px"
+            />
+            <Box as="span" fontSize="x-small" fontWeight="normal" lineHeight="typical">
+              {logType}
+            </Box>
+          </Flex>
+          <Box font="mono" fontWeight="bold">
+            {aggregate[logType].toLocaleString('en')}
+            {` Hits`}
+          </Box>
+        </Flex>
+      ))}
+    </SimpleGrid>
+  );
+};
 const EventsByLogTypes: React.FC<EventsByLogTypesProps> = ({ events }) => {
+  const metadata = events.series[0].values
+    .map(value => ({
+      'AWS.ALB': value / 4,
+      'Okta.SystemLog': value / 4,
+      'AWS.S3': value / 8,
+      'AWS.1': value / 8,
+      'AWS.2': value / 8,
+      'GSuite:': value / 16,
+      'Slackaa.1': value / 16,
+      'Slackaaaaaa.2': value / 16,
+    }))
+    .map(obj => ({ tooltip: getTooltip(obj) }));
+  const data = {
+    series: [{ ...events.series[0], color: 'indigo-600' }],
+    timestamps: events.timestamps,
+    metadata,
+  };
   return (
     <Flex data-testid="events-by-log-type-chart" height="100%" position="relative">
-      <TimeSeriesChart data={events} zoomable />
+      <TimeSeriesChart
+        data={data}
+        zoomable
+        chartType="bar"
+        hideLegend
+        units="Hits"
+        hideSeriesLabels={false}
+      />
     </Flex>
   );
 };