{"id":22848346,"url":"https://github.com/feedzai/brushable-histogram","last_synced_at":"2025-08-21T22:31:10.672Z","repository":{"id":33962639,"uuid":"161497751","full_name":"feedzai/brushable-histogram","owner":"feedzai","description":"A time histogram with a brushable preview of the whole dataset below it","archived":false,"fork":false,"pushed_at":"2023-10-27T09:49:44.000Z","size":4266,"stargazers_count":91,"open_issues_count":21,"forks_count":9,"subscribers_count":23,"default_branch":"master","last_synced_at":"2024-12-13T04:11:27.793Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/feedzai.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-12-12T14:10:35.000Z","updated_at":"2023-11-24T19:33:26.000Z","dependencies_parsed_at":"2023-02-16T06:15:57.059Z","dependency_job_id":null,"html_url":"https://github.com/feedzai/brushable-histogram","commit_stats":null,"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feedzai%2Fbrushable-histogram","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feedzai%2Fbrushable-histogram/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feedzai%2Fbrushable-histogram/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feedzai%2Fbrushable-histogram/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/feedzai","download_url":"https://codeload.github.com/feedzai/brushable-histogram/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230537062,"owners_count":18241515,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-13T04:11:29.035Z","updated_at":"2024-12-20T05:08:38.726Z","avatar_url":"https://github.com/feedzai.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Brushable Histogram\n\n[![Build Status](https://travis-ci.com/feedzai/brushable-histogram.svg?branch=master)](https://travis-ci.com/feedzai/brushable-histogram)\n[![Coverage Status](https://coveralls.io/repos/github/feedzai/brushable-histogram/badge.svg?branch=master)](https://coveralls.io/github/feedzai/brushable-histogram?branch=master)\n\nThe brushable histogram renders a time histogram with a preview of the whole data below it, that can be used both to\npan and zoom in on specific intervals as well as to see an overview of the distribution of the data ([demo](https://feedzai.github.io/brushable-histogram/)).\n\n\n![](https://i.imgur.com/VUYAnxy.gif?raw=true)\n\nBrushable histogram is a React component and works as an uncontrolled component.\n\nKudos to [Beatriz Malveiro](https://github.com/biamalveiro) for the ideia and first proptotype and to [Victor Fernandes](https://github.com/victorfern91) for improvements to that first version.\n\n## Instalation\n\n```shell\nnpm install --save @feedzai/brushable-histogram\n```\n\nNote 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.\n\n## Usage example\n\n```js\nimport React, { PureComponent, Fragment } from \"react\";\nimport Histogram from \"@feedzai/brushable-histogram\";\nimport \"@feedzai/brushable-histogram/lib/css/brushable-histogram.css\";\n\nconst xAccessor = (datapoint) =\u003e datapoint.timestamp;\nconst yAccessor = (datapoint) =\u003e datapoint.total;\n\nfunction histogramTooltipBar(bar) {\n    return (\n        \u003cFragment\u003e\n            \u003cdiv className=\"fdz-css-graph-histogram-bars--tooltip-value\"\u003e\n                {Math.floor(bar.yValue)} Events\n            \u003c/div\u003e\n        \u003c/Fragment\u003e\n    );\n}\n\nexport default class HistogramExample extends PureComponent {\n    render() {\n        return (\n            \u003cHistogram\n                data={[\n                    {\n                      \"timestamp\": 1170070000000,\n                      \"total\": 100\n                    },\n                    {\n                      \"timestamp\": 1270070000000,\n                      \"total\": 23\n                    }\n                  ]}\n                xAccessor={xAccessor}\n                yAccessor={yAccessor}\n                tooltipBarCustomization={histogramTooltipBar}\n            /\u003e\n        );\n    }\n}\n```\n\nFor more advanced use cases please checkout the examples in the `stories` folder.\n\n\n## Props\n\n### `data`\n**Type** `Array.\u003cObject\u003e` **Required**\n\nThe 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.\n\n### `xAccessor`\n**Type** `Function` **Required**\n\nA 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}) =\u003e timestamp`.\n\n**Important** The histogram assumes that `xAccessor` will return an unique value for each `data` element.\n\n### `yAccessor`\n**Type** `Function` **Required**\n\nA 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}) =\u003e amount`.\n\n**Important** currently the histogram only support positive values.\n\n### `xAxisFormatter`\n**Type** `Function` **Default** `(value) =\u003e String(value)`\n\nA function that will receive the value of the x axis returned by `xAccessor` and should return the formatted value as a string that will be displayed in the chart.\n\n### `yAxisFormatter`\n**Type** `Function` **Default** Only renders integer numbers.\n\nA 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.\n\n### `height`\n**Type** `number` **Default** `100`\n\nThe 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).\n\n## `onIntervalChange`\n**Type** `Function` **Default** `() =\u003e {}`\n\nThis callback will be called when the selected intervall changes.\n\n## `tooltipBarCustomization`\n**Type** `Function` **Default** `() =\u003e {}`\n\nTo 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.\n\n## `brushDomain`\n**Type** `Object` **Default** `undefined`\nA custom brush domain. Should have two properties: `min` and `max` both timestamps in milliseconds. Please note that if the user\nchanges the brush domain by interacting with the brush bar this will be ignored until you pass it a different one.\n\n## How to install it?\n`npm install brushable-histogram` --save\n\n## Repo Organization\n```\n - (root folder)\n  |\n  |\\_ .storybook - This is the place of the storybook configurations (you should not need to change this often)\n  |\n  |\\_ src - Source files including unit tests and the default scss\n  |\n  |\\_ stories - Stories that showcase the usage of the component.\n```\n## Develop process\n\n### `npm` tasks\n\n#### Development tasks\n- `npm run storybook` - generate the component interactive (access to the storybook server using `http://localhost:9000`)\n- `npm run test` - run the unit tests (using jest)\n- `npm run test:watch` - run the unit tests in watch mode (using jest)\n- `npm run lint` - run the ESLint linter\n\n#### Deployment tasks\n\n**NOTE:** Those tasks should be executed only on the `master` branch.\n\n- `npm run publish:dry` - runs all the publish steps but doesn't actualy publishes\n- `npm run publish:major` - creates a tag and publish the X.0.0 version\n- `npm run publish:minor` - creates a tag and publish the X.Y.0 version\n- `npm run publish:patch` - creates a tag and publish the X.Y.Z version\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffeedzai%2Fbrushable-histogram","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffeedzai%2Fbrushable-histogram","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffeedzai%2Fbrushable-histogram/lists"}