fix(ui) - browser bar fix

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;
+  }
+}

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

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