jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui) - errors details distribution bar

Browse source
This commit is contained in:
Shekar Siri 2022-07-21 18:02:10 +02:00
parent 23d1923582
commit 50e5392d35
1 changed files with 48 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

93
frontend/app/components/Errors/Error/DistributionBar.js
View file

@ -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;
DistributionBar.displayName = 'DistributionBar';
export default DistributionBar;