Sha256: 2468d6d8721096f07915f2889851a02adc3fb3586c3fce68f4762e40ded58b8c
Contents?: true
Size: 1.21 KB
Versions: 363
Compression:
Stored size: 1.21 KB
Contents
import React from 'react' import classnames from 'classnames' import { globalProps } from '../utilities/globalProps' type DistributionBarProps = { className?: string, colors: [], data?: string, id?: string, size?: "lg" | "sm", widths?: number[], } const normalizeCharacters = (widths: number[]) => { return widths.map((width) => { return parseInt(width.toString().replace(/[^0-9.]/gi, '')) }) } const barValues = (normalizedValues: number[], colors: []) => { const arrSum = (value: number[]) => value.reduce((a, b) => a + b, 0) const widthSum = arrSum(normalizedValues) return normalizedValues.map((value, i) => { return ( <div className={classnames('pb_distribution_width', colors[i] ? `color_${colors[i]}` : '')} key={i} style={{ width: `${(value * 100) / widthSum}%` }} /> ) }) } const DistributionBar = (props: DistributionBarProps) => { const { size = 'lg', widths = [1], colors = [], } = props const normalizedValues = normalizeCharacters(widths) return ( <div className={classnames(`pb_distribution_bar_${size}`, globalProps(props))}> {barValues(normalizedValues, colors)} </div> ) } export default DistributionBar
Version data entries
363 entries across 363 versions & 1 rubygems