Sha256: 315058755fa051f229ab0ac11ab0a2dac87c18dcc2994e1e7a777a0ed5ce0770
Contents?: true
Size: 1.05 KB
Versions: 11
Compression:
Stored size: 1.05 KB
Contents
/* @flow */
/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
import React from 'react'
type DistributionBarProps = {
className?: String,
data?: String,
id?: String,
size?: 'lg' | 'sm',
widths?: Array<Number>,
}
const normalizeCharacters = (widths) => {
return widths.map(width => {
return parseInt(width.toString().replace(/[^0-9.]/gi, ''))
})
}
const barValues = (normalizedValues) => {
let arrSum = value => value.reduce((a,b) => (a + b), 0)
let widthSum = arrSum(normalizedValues)
return normalizedValues.map((value,i) => {
return(
<div
key={i}
className={`pb_distribution_width`}
style={{width:`${value*100/widthSum}%`}}
/>
)
})
}
const DistributionBar = ({
className,
data,
id,
size='lg',
widths=[1]
}: DistributionBarProps) => {
const normalizedValues = normalizeCharacters(widths)
return(
<div className={`pb_distribution_bar_${size}`}>
{barValues(normalizedValues)}
</div>
)
}
export default DistributionBar
Version data entries
11 entries across 11 versions & 1 rubygems