Name: lucify-bar-chart-range-selector
Owner: Lucify
Description: A selectable stacked bar chart React component
Created: 2016-03-29 10:46:00.0
Updated: 2018-02-06 15:08:57.0
Pushed: 2016-06-09 18:52:59.0
Homepage: null
Size: 362
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
A controlled stacked bar chart React component that allows users to select a range of the stacked bars. Built using React and D3.js.
This is a pre-release of a package belonging to the Lucify platform. It has been published to satisfy dependencies of other packages. Any APIs may change without notice.
Add lucify-bar-chart-range-selector along with its dependencies (React.js and
D3.js) to your project's dependencies:
m install react d3 lucify-bar-chart-range-selector --save
Require it in your Javascript:
LucifyBarChartRangeSelector = require('lucify-bar-chart-range-selector').default;
rt LucifyBarChartRangeSelector from 'lucify-bar-chart-range-selector';
Now you can use it like any other React component.
data (required): The array of data objects. Has the following format:
y: 606, // integer index, either as a string or int. should be adjacent integers
tal: 58, // sum of "values" fields of objects in values array
lues: [ // each object in this array is represented by a stacked bar
{
key: "Foo",
values: 4
},
{
key: "Bar",
values: 30
},
{
key: "Baz",
values: 10
},
{
key: "Hey",
values: 14
}
y: 607,
.
selectedRange: An array of two integers that denote the indices of the
selected range.
height: The height of the component in pixels. Default: 160
width: The width of the component in pixels. Default: 1000
margin: An object with top, bottom, left and right properties that
denote internal margins for the chart.
Default: { top: 5, right: 2, bottom: 20, left: 10 }
customColors: An array of two-member arrays to define custom fill colors for
bars. The first member of each array is a string of the key property of the
bar, and the second member of the array is a string of the fill color.
onChange: The function that should be called when the selection range
changes. Is passed a two-member array that includes the extent of the
selection in based on the key value of the bar groups.
xTickFormat: Function that formats x axis tick labels. Is passed the key
value of the bar group. Default: d3.format('n')
yTickFormat: Function that formats y axis tick labels. Is passed the
values value. Default: d3.format('s')
xTickValues: An array of the values that should be displayed on the x axis.
rangeFormat: Function that formats the x axis labels when selecting a range.
Default: the identity function
onMouseOver: Function to be called when the user hovers on a bar group. Is
passed an object parameter that contains the index (key value of the group)
and value (total value of the group) properties.
onMouseLeave: Function to be called when the user no longer hovers on a bar
group.
incompleteDataIndices: An array of the indices of the bar groups that should
be displayed with a thatched pattern. Useful for indicating if some data is
incomplete. Default: []
TODO
Build the Javascript files into lib/ with:
m run build
Or build the development version and start watching for changes with:
m run dev
To serve the example page on port 3000 and see changes live, start Gulp:
lp
Then point your browser to http://localhost:3000/
To develop this component in tandem with a parent project using npm link,
first link this project to the parent project:
path_to_this_project
m link
path_to_parent_project
m link lucify-bar-chart-range-selector
Then link the parent project's React folder to this project:
path_to_parent_project
node_modules/react
m link
path_to_this_project
m link react
This is needed in order to prevent React from being loaded twice.
Note that if you do not use Webpack to build your parent project, the
development build will likely not work. You can build the production version
while watching for changes by running node_modules/.bin/webpack -p --watch.