brush

Brush

Brush Chart reusable API class that renders a simple and configurable brush chart.

Requires: module:d3-array, module:d3-axis, module:d3-brush, module:d3-ease, module:d3-scale, module:d3-shape, module:d3-dispatch, module:d3-selection, module:d3-time, module:d3-transition, module:d3-time-format
Example

let brushChart = brush();

brushChart
    .height(500)
    .width(800);

d3Selection.select('.css-selector')
    .datum(dataset)
    .call(brushChart);

Brush
- exports(_selection, _data) ⏏
  - static
    - .axisTimeCombinations
    - .animationDuration(_x) ⇒ duration | module
    - .areaCurve([_x]) ⇒ String | module
    - .dateRange([_x]) ⇒ dateRange | module
    - .gradient([_x]) ⇒ String | Module
    - .height(_x) ⇒ Number | Module
    - .isAnimated(_x) ⇒ Boolean | module
    - .isLoading(flag) ⇒ boolean | module
    - .isLocked(_x) ⇒ Boolean | module
    - .locale(_x) ⇒ String | Module
    - .margin(_x) ⇒ Object | Module
    - .on(typenames, [callback]) ⇒ exports
    - .width(_x) ⇒ Number | Module
    - .xAxisCustomFormat(_x) ⇒ String | Module
    - .xAxisFormat(_x) ⇒ String | Module
    - .xTicks([_x]) ⇒ Number | Module
    - .roundingTimeInterval([_x]) ⇒ roundingTimeInterval | Module
  - inner
    - "customBrushStart"
    - "customBrushEnd"
    - ~BrushChartData : Array.<Object>
    - ~DateExtent : Array.<Date>
    - ~eventCallback : function

exports(_selection, _data) ⏏

This function creates the graph using the selection as container

Kind: Exported function

Param	Type	Description
_selection	`D3Selection`	A d3 selection that represents the container(s) where the chart(s) will be rendered
_data	`BrushChartData`	The data to attach and generate the chart

exports.axisTimeCombinations

Exposes the constants to be used to force the x axis to respect a certain granularity current options: MINUTE_HOUR, HOUR_DAY, DAY_MONTH, MONTH_YEAR

Kind: static property of exports
Example

brush.xAxisCustomFormat(brush.axisTimeCombinations.HOUR_DAY)

exports.animationDuration(_x) ⇒ `duration` | `module`

Gets or Sets the duration of the area animation

Kind: static method of exports
Returns: duration | module - Current animation duration or Chart module to chain calls
Access: public

Param	Type	Default	Description
_x	`Number`	`1200`	Desired animation duration for the graph

exports.areaCurve([_x]) ⇒ `String` | `module`

Gets or Sets the area curve of the stacked area.

Kind: static method of exports
Returns: String | module - Current area curve setting or Chart module to chain calls
Access: public

Param	Type	Default	Description
[_x]	`String`	`'basis'`	Desired curve for the area. Other options are: monotoneX, natural, linear, monotoneY, step, stepAfter, stepBefore, cardinal, and catmullRom. Visit https://github.com/d3/d3-shape#curves for more information.

Example

brushChart.areaCurve('step')

exports.dateRange([_x]) ⇒ `dateRange` | `module`

Gets or Sets the dateRange for the selected part of the brush

Kind: static method of exports
Returns: dateRange | module - Current dateRange or Chart module to chain calls
Access: public

Param	Type	Default	Description
[_x]	`Array.<String>`	`[null, null]`	Desired dateRange for the graph

exports.gradient([_x]) ⇒ `String` | `Module`

Gets or Sets the gradient of the chart

Kind: static method of exports
Returns: String | Module - Current gradient or Chart module to chain calls
Access: public

Param	Type	Default	Description
[_x]	`Array.<String>`	`colorHelper.colorGradients.greenBlue`	Desired gradient for the graph

exports.height(_x) ⇒ `Number` | `Module`

Gets or Sets the height of the chart

Kind: static method of exports
Returns: Number | Module - Current height or Chart module to chain calls
Access: public

Param	Type	Description
_x	`Number`	Desired width for the graph

exports.isAnimated(_x) ⇒ `Boolean` | `module`

Gets or Sets the isAnimated property of the chart, making it to animate when render.

Kind: static method of exports
Returns: Boolean | module - Current isAnimated flag or Chart module
Access: public

Param	Type	Description
_x	`Boolean`	= false Desired animation flag

exports.isLoading(flag) ⇒ `boolean` | `module`

Gets or Sets the loading state of the chart

Kind: static method of exports
Returns: boolean | module - Current loading state flag or Chart module to chain calls
Access: public

Param	Type	Description
flag	`boolean`	Desired value for the loading state

exports.isLocked(_x) ⇒ `Boolean` | `module`

Gets or Sets the isLocked property of the brush, enforcing the initial brush size set with dateRange

Kind: static method of exports
Returns: Boolean | module - Current isLocked flag or Chart module
Access: public

Param	Type	Description
_x	`Boolean`	= false Whether the brush window is locked, requires a value set with '.dateRange` when true

exports.locale(_x) ⇒ `String` | `Module`

Pass language tag for the tooltip to localize the date. Feature uses Intl.DateTimeFormat, for compatability and support, refer to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat

Kind: static method of exports
Returns: String | Module - Current locale or module to chain calls

Param	Type	Description
_x	`String`	Must be a language tag (BCP 47) like 'en-US' or 'fr-FR'

exports.margin(_x) ⇒ `Object` | `Module`

Gets or Sets the margin of the chart

Kind: static method of exports
Returns: Object | Module - Current margin or Chart module to chain calls
Access: public

Param	Type	Description
_x	`Object`	Margin object to get/set

exports.on(typenames, [callback]) ⇒ `exports`

Adds, removes, or gets the callback for the specified typenames.

Kind: static method of exports
Access: public
See: d3-dispatch:on

Param	Type	Description
typenames	`String`	One or more event type names, delimited by a space
[callback]	`eventCallback`	Callback to register

exports.width(_x) ⇒ `Number` | `Module`

Gets or Sets the width of the chart

Kind: static method of exports
Returns: Number | Module - Current width or Chart module to chain calls
Access: public

Param	Type	Description
_x	`Number`	Desired width for the graph

exports.xAxisCustomFormat(_x) ⇒ `String` | `Module`

Exposes the ability to force the chart to show a certain x format It requires a xAxisFormat of 'custom' in order to work.

Kind: static method of exports
Returns: String | Module - Current format or module to chain calls
Access: public

Param	Type	Description
_x	`String`	Desired format for x axis, one of the d3.js date formats here

exports.xAxisFormat(_x) ⇒ `String` | `Module`

Exposes the ability to force the chart to show a certain x axis grouping

Kind: static method of exports
Returns: String | Module - Current format or module to chain calls
Access: public

Param	Type	Description
_x	`String`	Desired format, a combination of axisTimeCombinations (MINUTE_HOUR, HOUR_DAY, DAY_MONTH, MONTH_YEAR) Set it to 'custom' to make use of specific formats with xAxisCustomFormat

Example

brushChart.xAxisCustomFormat(brushChart.axisTimeCombinations.HOUR_DAY)

exports.xTicks([_x]) ⇒ `Number` | `Module`

Exposes the ability to force the chart to show a certain x ticks. It requires a xAxisCustomFormat of 'custom' in order to work. NOTE: This value needs to be a multiple of 2, 5 or 10. They won't always work as expected, as D3 decides at the end how many and where the ticks will appear.

Kind: static method of exports
Returns: Number | Module - Current number or ticks or module to chain calls
Access: public

Param	Type	Default	Description
[_x]	`Number`		Desired number of x axis ticks (multiple of 2, 5 or 10)

exports.roundingTimeInterval([_x]) ⇒ `roundingTimeInterval` | `Module`

Gets or Sets the rounding time interval of the selection boundary

Kind: static method of exports
Returns: roundingTimeInterval | Module - Current time interval or module to chain calls
Access: public
See: https://github.com/d3/d3-time#intervals

Param	Type	Default	Description
[_x]	`roundingTimeInterval`	`'timeDay'`	Desired time interval for the selection, default 'timeDay'.

Example

All options are:
timeMillisecond, utcMillisecond, timeSecond, utcSecond, timeMinute, utcMinute, timeHour, utcHour, timeDay, utcDay
timeWeek, utcWeek, timeSunday, utcSunday, timeMonday, utcMonday, timeTuesday, utcTuesday, timeWednesday,
utcWednesday, timeThursday, utcThursday, timeFriday, utcFriday, timeSaturday, utcSaturday, timeMonth, utcMonth,
timeYear and utcYear.

"customBrushStart"

Event indicating when the brush moves

Kind: event emitted by exports
See: d3-brush:on(brush)

"customBrushEnd"

Event indicating the end of a brush gesture

Kind: event emitted by exports
See: d3-brush:on(end)

exports~BrushChartData : `Array.<Object>`

Kind: inner typedef of exports
Properties

Name	Type	Description
value	`Number`	Value to chart (required)
date	`Date`	Date of the value in ISO8601 format (required)

Example

[
    {
        value: 1,
        date: '2011-01-06T00:00:00Z'
    },
    {
        value: 2,
        date: '2011-01-07T00:00:00Z'
    }
]

exports~DateExtent : `Array.<Date>`

Date range

Kind: inner typedef of exports
See: d3-brush:brushSelection
Properties

Name	Type	Description
0	`Date`	Lower bound date selection
1	`Date`	Upper bound date selection

exports~eventCallback : `function`

Kind: inner typedef of exports

Param	Type	Description
dateExtent	`DateExtent`	Date range

Brush

exports(_selection, _data) ⏏​

exports.axisTimeCombinations​

exports.animationDuration(_x) ⇒ duration | module​

exports.areaCurve([_x]) ⇒ String | module​

exports.dateRange([_x]) ⇒ dateRange | module​

exports.gradient([_x]) ⇒ String | Module​

exports.height(_x) ⇒ Number | Module​

exports.isAnimated(_x) ⇒ Boolean | module​

exports.isLoading(flag) ⇒ boolean | module​

exports.isLocked(_x) ⇒ Boolean | module​

exports.locale(_x) ⇒ String | Module​

exports.margin(_x) ⇒ Object | Module​

exports.on(typenames, [callback]) ⇒ exports​

exports.width(_x) ⇒ Number | Module​

exports.xAxisCustomFormat(_x) ⇒ String | Module​

exports.xAxisFormat(_x) ⇒ String | Module​

exports.xTicks([_x]) ⇒ Number | Module​

exports.roundingTimeInterval([_x]) ⇒ roundingTimeInterval | Module​

"customBrushStart"​

"customBrushEnd"​

exports~BrushChartData : Array.<Object>​

exports~DateExtent : Array.<Date>​

exports~eventCallback : function​

exports(_selection, _data) ⏏

exports.axisTimeCombinations

exports.animationDuration(_x) ⇒ `duration` | `module`

exports.areaCurve([_x]) ⇒ `String` | `module`

exports.dateRange([_x]) ⇒ `dateRange` | `module`

exports.gradient([_x]) ⇒ `String` | `Module`

exports.height(_x) ⇒ `Number` | `Module`

exports.isAnimated(_x) ⇒ `Boolean` | `module`

exports.isLoading(flag) ⇒ `boolean` | `module`

exports.isLocked(_x) ⇒ `Boolean` | `module`

exports.locale(_x) ⇒ `String` | `Module`

exports.margin(_x) ⇒ `Object` | `Module`

exports.on(typenames, [callback]) ⇒ `exports`

exports.width(_x) ⇒ `Number` | `Module`

exports.xAxisCustomFormat(_x) ⇒ `String` | `Module`

exports.xAxisFormat(_x) ⇒ `String` | `Module`

exports.xTicks([_x]) ⇒ `Number` | `Module`

exports.roundingTimeInterval([_x]) ⇒ `roundingTimeInterval` | `Module`

"customBrushStart"

"customBrushEnd"

exports~BrushChartData : `Array.<Object>`

exports~DateExtent : `Array.<Date>`

exports~eventCallback : `function`