2019-11-19 07:30:42 +03:00
|
|
|
import React from 'react';
|
|
|
|
|
|
|
|
function barWidth(count, all) {
|
|
|
|
let maxVal = all[0].count;
|
|
|
|
|
|
|
|
for (const entry of all) {
|
|
|
|
if (entry.count > maxVal) maxVal = entry.count
|
|
|
|
}
|
|
|
|
|
|
|
|
return count / maxVal * 100
|
|
|
|
}
|
|
|
|
|
2021-07-08 09:42:30 +03:00
|
|
|
export default function Bar({count, all, bg, maxWidthDeduction, children}) {
|
2019-11-19 07:30:42 +03:00
|
|
|
const width = barWidth(count, all)
|
|
|
|
|
|
|
|
return (
|
2021-07-08 09:42:30 +03:00
|
|
|
<div
|
|
|
|
className="w-full relative"
|
|
|
|
style={{maxWidth: `calc(100% - ${maxWidthDeduction})`}}
|
|
|
|
>
|
|
|
|
<div
|
|
|
|
className={`absolute top-0 left-0 h-full ${bg || ''}`}
|
|
|
|
style={{width: `${width}%`}}
|
|
|
|
>
|
|
|
|
</div>
|
|
|
|
{children}
|
2019-11-19 07:30:42 +03:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|