From 5a94e3c23f650d3e117d5f81fc3eda4d9a476aa8 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Fri, 15 Apr 2022 16:31:53 +0200
Subject: [PATCH] fix(ui) - browser bar fix

---
 .../SessionsPerBrowser/Bar.css                | 20 +++++++++++
 .../SessionsPerBrowser/Bar.js                 | 34 +++++++++++++++++++
 .../SessionsPerBrowser/SessionsPerBrowser.tsx |  3 +-
 3 files changed, 55 insertions(+), 2 deletions(-)
 create mode 100644 frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/Bar.css
 create mode 100644 frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/Bar.js

diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/Bar.css b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/Bar.css
new file mode 100644
index 000000000..dde6009e4
--- /dev/null
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/Bar.css
@@ -0,0 +1,20 @@
+.bar {
+  height: 5px;
+  width: 100%;
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  & div {
+    padding: 0 5px;
+    height: 20px;
+    color: #FFF;
+  }
+  & div:first-child {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  & div:last-child {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+}
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/Bar.js b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/Bar.js
new file mode 100644
index 000000000..b1204ee9e
--- /dev/null
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/Bar.js
@@ -0,0 +1,34 @@
+import React from 'react'
+import stl from './Bar.css'
+// import { Styles } from '../common'
+import { TextEllipsis } from 'UI';
+
+const Bar = ({ className = '', versions = [], width = 0, avg, domain, colors }) => {
+  return (
+    <div className={className}>
+      <div className="flex items-center">
+        <div className={stl.bar} style={{ width: `${width < 15 ? 15 : width }%`}}>
+          {versions.map((v, i) => {
+            const w = (v.value * 100)/ avg;
+            return ( 
+            <div key={i} className="text-xs" style={{ width: `${w }%`, backgroundColor: colors[i]}}>
+              <TextEllipsis text={v.key} hintText={
+                <div className="text-sm">
+                  <div>Version: {v.key}</div>
+                  <div>Sessions: {v.value}</div>
+                </div>
+              } />
+            </div> 
+            )
+          })}
+        </div>
+        <div className="ml-2">
+          <span className="font-medium">{`${avg}`}</span>
+        </div>
+      </div>
+      <div className="text-sm">{domain}</div>
+    </div>
+  )
+}
+
+export default Bar
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/SessionsPerBrowser.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/SessionsPerBrowser.tsx
index 5fd2c8d48..ad8663390 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/SessionsPerBrowser.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/SessionsPerBrowser.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 import { NoContent } from 'UI';
 import { Styles } from '../../common';
-import { numberWithCommas } from 'App/utils';
-import Bar from 'App/components/Dashboard/Widgets/ErrorsPerDomain/Bar';
+import Bar from './Bar';
 
 interface Props {
     data: any