From 50e5392d35e93a9bf0121bd7fe0c06b2a445ba9f Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Thu, 21 Jul 2022 18:02:10 +0200
Subject: [PATCH] fix(ui) - errors details distribution bar

---
 .../Errors/Error/DistributionBar.js           | 93 ++++++++++---------
 1 file changed, 48 insertions(+), 45 deletions(-)

diff --git a/frontend/app/components/Errors/Error/DistributionBar.js b/frontend/app/components/Errors/Error/DistributionBar.js
index 6df611d0a..e6cc38ca5 100644
--- a/frontend/app/components/Errors/Error/DistributionBar.js
+++ b/frontend/app/components/Errors/Error/DistributionBar.js
@@ -6,52 +6,55 @@ import cls from './distributionBar.module.css';
 import { colorScale } from 'App/utils';
 
 function DistributionBar({ className, title, partitions }) {
-	if (partitions.length === 0) {
-		return null;
-	}
+    if (partitions.length === 0) {
+        return null;
+    }
 
-	const values = Array(partitions.length).fill().map((element, index) => index + 0);
-	const colors = colorScale(values, Styles.colors);
+    const values = Array(partitions.length)
+        .fill()
+        .map((element, index) => index + 0);
+    const colors = colorScale(values, Styles.colors);
 
-	return (
-		<div className={ className } >
-			<div className="flex justify-between text-sm mb-1">
-				<div className="capitalize">{ title }</div>
-				<div className="flex items-center">
-					<div className="font-thin capitalize" style={{ maxWidth: '80px', height: '19px'}}>
-						<TextEllipsis
-							text={ partitions[0].label }
-						/>
-					</div>
-					<div className="ml-2">{ `${ Math.round(partitions[0].prc) }% ` }</div>
-				</div>
-			</div>
-			<div className={ cn("border-radius-3 overflow-hidden flex", cls.bar) }>
-				{ partitions.map((p, index) => 
-					<Popup
-						key={p.label}
-						content={
-							<div className="text-center">
-								<span className="capitalize">{ p.label }</span><br/>
-								{`${ Math.round(p.prc) }%`}
-							</div>
-						}
-						className="w-full"
-					>
-						<div 
-							className="h-full bg-tealx" 
-							style={{
-								marginLeft: '1px',
-								width: `${ p.prc }%`,									
-								backgroundColor: colors(index)
-							}} 
-						/>
-					</Popup>
-				)}
-			</div>
-		</div>
-	);
+    return (
+        <div className={className}>
+            <div className="flex justify-between text-sm mb-1">
+                <div className="capitalize">{title}</div>
+                <div className="flex items-center">
+                    <div className="font-thin capitalize" style={{ maxWidth: '80px', height: '19px' }}>
+                        <TextEllipsis text={partitions[0].label} />
+                    </div>
+                    <div className="ml-2">{`${Math.round(partitions[0].prc)}% `}</div>
+                </div>
+            </div>
+            <div className={cn('border-radius-3 overflow-hidden flex', cls.bar)}>
+                {partitions.map((p, index) => (
+                    <Popup
+                        key={p.label}
+                        content={
+                            <div className="text-center">
+                                <span className="capitalize">{p.label}</span>
+                                <br />
+                                {`${Math.round(p.prc)}%`}
+                            </div>
+                        }
+                        style={{
+                            marginLeft: '1px',
+                            width: `${p.prc}%`,
+							backgroundColor: colors(index),
+                        }}
+                    >
+                        <div
+                            className="h-full bg-tealx"
+                            style={{
+                                backgroundColor: colors(index),
+                            }}
+                        />
+                    </Popup>
+                ))}
+            </div>
+        </div>
+    );
 }
 
-DistributionBar.displayName = "DistributionBar";
-export default DistributionBar;
\ No newline at end of file
+DistributionBar.displayName = 'DistributionBar';
+export default DistributionBar;