@appearhere/bloom/components/Form/InputRange/InputRangeWithHistogram.js

Appear Here's pattern library and styleguide

import PropTypes from 'prop-types';
import React, { Component } from 'react';

import css from './InputRange.css';
import InputRange from './InputRange';

/* eslint-disable arrow-body-style */
export const getVerticalScale = data => data
  .reduce((currentHighestValue, datum) => {
    return datum >= currentHighestValue
      ? datum
      : currentHighestValue;
  }, 0);
/* eslint-enable arrow-body-style */

export const getPointWidth = data => 100 / data.length;

const defaultValueSelector = value => value;

export default class InputRangeWithHistogram extends Component {
  static propTypes = {
    name: PropTypes.string,
    data: PropTypes.array.isRequired,
    valueSelector: PropTypes.func,
  };

  static defaultProps = {
    valueSelector: defaultValueSelector,
  };

  render() {
    const { valueSelector, data, name, ...rest } = this.props;

    const pointData = data.map((datum) => valueSelector(datum));
    const maxPointHeight = getVerticalScale(pointData);
    const pointWidth = getPointWidth(pointData);

    return (
      <div className={ css.container }>
        <div className={ css.histogram }>
          { pointData.map((datum, i) => (
            <div
              key={ `${name}-${i}` }
              className={ css.barContainer }
              style={ {
                width: `${pointWidth}%`,
                height: `${(datum / maxPointHeight) * 100}%`,
              } }
            >
              <div className={ css.bar } />
            </div>
          )) }
        </div>
        <InputRange name={ name } { ...rest } />
      </div>
    );
  }
}