60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
import cn from 'classnames';
|
|
import { Tooltip, TextEllipsis } from 'UI';
|
|
import { colorScale } from 'App/utils';
|
|
import { Styles } from '../../Dashboard/Widgets/common';
|
|
import cls from './distributionBar.module.css';
|
|
|
|
function DistributionBar({ className, title, partitions }) {
|
|
if (partitions.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
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) => (
|
|
<Tooltip
|
|
key={p.label}
|
|
title={
|
|
<div className="text-center">
|
|
<span className="capitalize">{p.label}</span>
|
|
<br />
|
|
{`${Math.round(p.prc)}%`}
|
|
</div>
|
|
}
|
|
>
|
|
<div
|
|
className="h-full bg-tealx"
|
|
style={{
|
|
backgroundColor: colors(index),
|
|
marginLeft: '1px',
|
|
width: `${p.prc}%`,
|
|
}}
|
|
/>
|
|
</Tooltip>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
DistributionBar.displayName = 'DistributionBar';
|
|
export default DistributionBar;
|