Brushable Histogram 
The brushable histogram renders a time histogram with a preview of the whole data below it, that can be used both todemo ).
Brushable histogram is a React component and works as an uncontrolled component.
Kudos to Beatriz Malveiro for the ideia and first proptotype and to Victor Fernandes for improvements to that first version.
Instalation ``shell`
Note that by default no style is included. If you want you can use the css at @feedzai/brushable-histogram/lib/css/brushable-histogram.css to get the same style as in the examples.
Usage example `js
const xAccessor = (datapoint) => datapoint.timestamp;
function histogramTooltipBar(bar) {
export default class HistogramExample extends PureComponent {
For more advanced use cases please checkout the examples in the stories folder.
Props
$3 Type Array.
Required The data to render in the histogram. The properties of each element that will be used to render the histogram will be defined in the
xAccessor and yAccessor props.
$3 Type Function Required A function that will receive an array element as argument and that should return the value of the x axis for that element. A possible example would be
({timestamp}) => timestamp.Important The histogram assumes that
xAccessor will return an unique value for each data element.
$3 Type Function Required A function that will receive an array element as argument and that should return the value of the y axis for that element. A possible example would be
({amount}) => amount.Important currently the histogram only support positive values.
$3 Type Function Default (value) => String(value)A function that will receive the value of the x axis returned by
and should return the formatted value as a string that will be displayed in the chart.
$3 Type Function Default Only renders integer numbers.A function that will receive the value of the y axis returned by
yAccessor and should return the formatted value as a string that will be displayed in the chart.
$3 Type number Default 100The height in pixels that the histogram will have. Currently this does not take into account the height used by the summary chart (TODO: make this the real height).
Type Default () => {}This callback will be called when the selected intervall changes.
Type Default () => {}To render a tooltip when the mouse hovers it this prop should be passed with a function that returns a React Element. This function will receive as an argument the data object relative to that column.
Type Default undefined and max both timestamps in milliseconds. Please note that if the user
How to install it? npm install brushable-histogram --save
Repo Organization `Develop process
$3 #### Development tasks
- generate the component interactive (access to the storybook server using http://localhost:9000)npm run test - run the unit tests (using jest)npm run test:watch - run the unit tests in watch mode (using jest)npm run lint - run the ESLint linter#### Deployment tasks
NOTE: Those tasks should be executed only on the
master branch.-
npm run publish:dry - runs all the publish steps but doesn't actualy publishesnpm run publish:major - creates a tag and publish the X.0.0 versionnpm run publish:minor - creates a tag and publish the X.Y.0 versionnpm run publish:patch` - creates a tag and publish the X.Y.Z version