components.nf-area Class
Adds an area graph to an nf-graph component.
Optionally, if it's located within an nf-area-stack component, it will work with
sibling nf-area components to create a stacked graph.
Item Index
Methods
Properties
- areaFn
- d
- data
- didTrack
- firstVisibleData
- graph
- hoverData
- interpolator
- isSelected deprecated
- lastVisibleData
- mappedData
- nextArea
- nextYData
- prevArea
- renderedData
- scaleOffsetX
- scaleOffsetY
- scaleZoomX
- scaleZoomY
- selectable
- selected
- showTrackingDot
- trackedData
- trackingDotRadius
- trackingMode
- xprop
- xPropFn
- xScale
- yprop
- yPropFn
- yScale
Methods
_trackedDataChanged
()
private
Observes changes to tracked data and sends the didTrack action.
_updateGraphSelected
()
private
Makes calls to the parent nf-graph to update it's
selected property. Observes changes to selected and also
fires on didInsertElement.
createAreaFn
-
xScale -
yScale -
interpolator
Creates a d3 area function from a given set of scales and an interpolator
Parameters:
-
xScaleFunctiona d3 scale
-
yScaleFunctiona d3 scale
-
interpolatorStringthe name of the d3 interpolator to use.
Returns:
a function that when called will create SVG path data.
getActualTrackData
()
Override from graph-data-graphic mixin
init
()
Initalization method that gets the nf-graph parent
and assigns it to graph
NOTE: all object that mixin and have init, must call super.init()
Properties
areaFn
Function
Gets the area function to use to create the area SVG path data
d
String
The SVG path data for the area
data
Array
Gets or sets the data used by the component to plot itself.
Default: null
didTrack
String
The action to send on didTrack.
Default: null
firstVisibleData
Object
The first element from renderedData that is actually visible within the x domain.
hoverData
Object an object with the following values:
- point: an x, y pair for the exact px coordinates inside the graph-content
- graphX: domain x value at mouse position
- graphY: domain y value at mouse position
- x: nearest x data value
- y: nearest y data value
- data: nearest raw data
- renderX: domain x value to render a tracking dot at (stacked areas are offset)
- renderY: domain x value to render a tracking dot at (stacked areas are offset)
- mouseX: mouse x position in pixels
- mouseY: mouse y position in pixels
The value of the data that is being tracked by the component, ONLY if the graph-content is currently being hovered.
Default: null
interpolator
String
The type of d3 interpolator to use to create the area
Default: 'linear'
isSelected
Unknown
deprecated
Alias of selected
lastVisibleData
Object
The last element from renderedData that is actually visible within the x domain.
mappedData
Array
The current rendered data "zipped" together with the nextYData.
nextArea
components.nf-area
The next area in the stack, if this area is part of an nf-area-stack
Default: null
nextYData
Array
The computed set of next y values to use for the "bottom" of the graphed area. If the area is part of a stack, this will be the "top" of the next area in the stack, otherwise it will return an array of values at the "bottom" of the graph domain.
prevArea
components.nf-area
The previous area in the stack, if this area is part of an nf-area-stack
Default: null
renderedData
Array
The list of data points from mixins.graph-data-graphc/mappedData:property that fits within the x domain, plus up to one data point outside of that domain in each direction.
scaleOffsetX
Number
The offset, in pixels, for the x scale
Default: 0
scaleOffsetY
Number
The offset, in pixels, for the y scale
Default: 0
scaleZoomX
Number
The zoom multiplier for the x scale
Default: 1
scaleZoomY
Number
The zoom multiplier for the y scale
Default: 1
selectable
Boolean
Gets or sets whether or not the graphic is "selectable". Meaning can be "selected" on the nf-graph via some action (usually click). The component will then show up in the nf-graph parent's selected property.
Default: false
selected
Boolean
Gets or sets whether or not the graphic is selected.
Default: false
showTrackingDot
Boolean
Gets or sets whether the tracking dot should be shown at all.
Default: true
trackedData
Object an object with the following values:
- point: an x, y pair for the exact px coordinates inside the graph-content
- graphX: domain x value at mouse position
- graphY: domain y value at mouse position
- x: nearest x data value
- y: nearest y data value
- data: nearest raw data
- renderX: domain x value to render a tracking dot at (stacked areas are offset)
- renderY: domain x value to render a tracking dot at (stacked areas are offset)
- mouseX: mouse x position in pixels
- mouseY: mouse y position in pixels
The value of the data that is being tracked by the component.
Default: null
trackingDotRadius
Number
The radius of the tracking dot in pixels
Default: 2.5
trackingMode
String
Gets or sets the tracking mode of the component.
Possible values are:
- 'none': no tracking behavior
- 'hover': only track while mouse hover
- 'snap-last': track while mouse hover, but snap to the last data element when not hovering
- 'snap-first': track while mouse hover, but snap to the first data element when not hovering
- 'selected-hover': The same as
'hover'tracking mode, but only when the compononent is selected - 'selected-snap-last': The same as
'snap-last'tracking mode, but only when the compononent is selected - 'selected-snap-first': The same as
'snap-first'tracking mode, but only when the compononent is selected
Default: 'none'
xprop
String
The path of the property on each object in data to use as x data to plot on the graph.
Default: 'x'
xScale
d3.scale
The x scale used by this component
yprop
String
The path of the property on each object in data to use as y data to plot on the graph.
Default: 'y'
yScale
d3.scale
The y scale used by this component