components.nf-graph Class
A container component for building complex Cartesian graphs.
Minimal example
{{#nf-graph width=100 height=50}}
{{#nf-graph-content}}
{{nf-line data=lineData xprop="foo" yprop="bar"}}
{{/nf-graph-content}}
{{/nf-graph}}
The above will create a simple 100x50 graph, with no axes, and a single line
plotting the data it finds on each object in the array lineData at properties
foo and bar for x and y values respectively.
More advanced example
{{#nf-graph width=500 height=300}}
{{#nf-x-axis height="50" as |tick|}}
<text>{{tick.value}}</text>
{{/nf-x-axis}}
{{#nf-y-axis width="120" as |tick|}}
<text>{{tick.value}}</text>
{{/nf-y-axis}}
{{#nf-graph-content}}
{{nf-line data=lineData xprop="foo" yprop="bar"}}
{{/nf-graph-content}}
{{/nf-graph}}
The above example will create a 500x300 graph with both axes visible. The graph will not render either axis unless its component is present.
Item Index
Methods
Properties
- _xMax
- _xMin
- _yMax
- _yMin
- autoScaleXAction
- autoScaleYAction
- brushAction
- brushEndAction
- brushStartAction
- brushThreshold
- contentClipPathId
- dataExtents
- graphHeight
- graphics
- graphTransform
- graphWidth
- graphX
- graphY
- hasData
- hasRendered
- height
- isGraph
- isScaleSource
- paddingBottom
- paddingLeft
- paddingRight
- paddingTop
- parentController
- selected
- selectMultiple
- showFrets
- showLanes
- showXAxis
- showYAxis
- width
- xAxis
- xDataExtent
- xDomain
- xLogMin
- xMax
- xMaxMode
- xMin
- xMinMode
- xOrdinalOuterPadding
- xOrdinalPadding
- xPowerExponent
- xRange
- xScale
- xScaleFactory
- xScaleType
- xUniqueData
- yAxis
- yDataExtent
- yDomain
- yLogMin
- yMax
- yMaxMode
- yMin
- yMinMode
- yOrdinalOuterPadding
- yOrdinalPadding
- yPowerExponent
- yRange
- yScale
- yScaleFactory
- yScaleType
- yUniqueData
Methods
_notifyHasRendered
()
private
Sets hasRendered to true on willInsertElement.
_setup
()
private
The initialization method. Fired on init.
deselectGraphic
-
graphic
deselects the graphic passed.
Parameters:
-
graphicEmber.Componentthe graph child component to deselect.
didAutoUpdateMaxX
()
Event handler that is fired for the didAutoUpdateMaxX event
didAutoUpdateMaxY
()
Event handler that is fired for the didAutoUpdateMaxY event
didAutoUpdateMinX
()
Event handler that is fired for the didAutoUpdateMinX event
didAutoUpdateMinY
()
Event handler that is fired for the didAutoUpdateMinY event
mousePoint
-
container -
e
Gets the mouse position relative to the container
Parameters:
-
containerSVGElementthe SVG element that contains the mouse event
-
eObjectthe DOM mouse event
Returns:
an array of [xMouseCoord, yMouseCoord]
registerGraphic
-
graphic
Registers a graphic such as nf-line or nf-area components with the graph.
Parameters:
-
graphicEmber.ComponentThe component object to register
selectGraphic
-
graphic
Selects the graphic passed. If selectMultiple is false, it will deselect the currently
selected graphic if it's different from the one passed.
Parameters:
-
graphicEmber.Componentthe graph component to select within the graph.
unregisterGraphic
-
graphic
Unregisters a graphic such as an nf-line or nf-area from the graph.
Parameters:
-
graphicEmber.ComponentThe component to unregister
Properties
_xMax
Unknown
private
Backing field for xMax
_xMin
Unknown
private
Backing field for xMin
_yMax
Unknown
private
Backing field for yMax
_yMin
Unknown
private
Backing field for yMin
autoScaleXAction
String
The action to trigger when the graph automatically updates the xScale due to an "auto" "push" or "push-tick" domainMode.
sends the graph component instance value as the argument.
Default: null
autoScaleYAction
String
The action to trigger when the graph automatically updates the yScale due to an "auto" "push" or "push-tick" domainMode.
Sends the graph component instance as the argument.
Default: null
brushAction
String
The name of the action to trigger when brushing emits a new value
Default: null
brushEndAction
String
The name of the action to trigger when brushing ends
Default: null
brushStartAction
String
The name of the action to trigger when brushing starts
Default: null
brushThreshold
Number
The amount of leeway, in pixels, to give before triggering a brush start.
Default: 7
contentClipPathId
String
private
Gets the DOM id for the content clipPath element.
dataExtents
Object
The data extents for all data in the registered graphics.
Default: { xMin: Number.MAX_VALUE, xMax: Number.MIN_VALUE, yMin: Number.MAX_VALUE, yMax: Number.MIN_VALUE }
graphHeight
Number
The height, in pixels, of the graph content
graphics
Array
Registry of contained graphic elements such as nf-line or nf-area components.
This registry is used to pool data for scaling purposes.
graphTransform
String
An SVG transform to position the graph content
graphWidth
Number
The width, in pixels, of the graph content
graphX
Number
The x coordinate position of the graph content
graphY
Number
The y coordinate position of the graph content
hasData
Boolean
Returns true if the graph has data to render. Data is conveyed
to the graph by registered graphics.
Default: false
hasRendered
Unknown
private
height
Number
The height of the graph in pixels.
Default: 100
isGraph
Unknown
private
Allows child compoenents to identify graph parent.
isScaleSource
Unknown
private
Identifies this graph to its children as providing scales.
paddingBottom
Number
The padding at the bottom of the graph
Default: 0
paddingLeft
Number
The padding at the left of the graph
Default: 0
paddingRight
Number
The padding at the right of the graph
Default: 0
paddingTop
Number
The padding at the top of the graph
Default: 0
parentController
Ember.Controller
A computed property returned the view's controller.
selected
Array
An array of "selectable" graphics that have been selected within this graph.
selectMultiple
Boolean
Gets or sets the whether or not multiple selectable graphics may be selected simultaneously.
Default: false
showFrets
Boolean
Determines whether to display "frets" in the background of the graph.
Default: false
showLanes
Boolean
Determines whether to display "lanes" in the background of the graph.
Default: false
showXAxis
Boolean
Computed property to show xAxis. Returns true if an xAxis is present.
Default: false
showYAxis
Boolean
Computed property to show yAxis. Returns true if a yAxis is present.
Default: false
width
Number
The width of the graph in pixels.
Default: 300
xAxis
Unknown
The nf-x-axis component is registered here if there is one present
Default: null
xDataExtent
Array
Gets the highest and lowest x values of the graphed data in a two element array.
xDomain
Array
Gets the domain of x values.
xLogMin
Number
The min value to use for xScaleType "log" if xMin <= 0
Default: 0.1
xMax
Unknown
Gets or sets the maximum x domain value to display on the graph.
Behavior depends on xMaxMode.
xMaxMode
String
Sets the behavior of xMax for the graph.
Possible values:
- 'auto': (default) xMax is always equal to the maximum domain value contained in the graphed data. Cannot be set.
- 'fixed': xMax can be set to an exact value and will not change based on graphed data.
- 'push': xMax can be set to a specific value, but will update if the maximum x value contained in the graph is greater than what xMax is currently set to.
- 'push-tick': xMax can be set to a specific value, but will update to next "nice" tick if the maximum x value contained in the graph is greater than that xMax is set to.
Default: 'auto'
xMin
Unknown
Gets or sets the minimum x domain value to display on the graph.
Behavior depends on xMinMode.
xMinMode
String
Sets the behavior of xMin for the graph.
Possible values:
- 'auto': (default) xMin is always equal to the minimum domain value contained in the graphed data. Cannot be set.
- 'fixed': xMin can be set to an exact value and will not change based on graphed data.
- 'push': xMin can be set to a specific value, but will update if the minimum x value contained in the graph is less than what xMin is currently set to.
- 'push-tick': xMin can be set to a specific value, but will update to next "nice" tick if the minimum x value contained in the graph is less than that xMin is set to.
Default: 'auto'
xOrdinalOuterPadding
Number
The padding at the ends of the domain data when xScaleType is 'ordinal'
Default: 0.1
xOrdinalPadding
Number
The padding between value steps when xScaleType is 'ordinal'
Default: 0.1
xPowerExponent
Number
The exponent to use for xScaleType "pow" or "power".
Default: 3
xRange
Array
The x range of the graph in pixels. The min and max pixel values in an array form.
xScale
Function
Gets the current xScale used to draw the graph.
xScaleFactory
Unknown
Gets a function to create the xScale
xScaleType
String
The type of scale to use for x values.
Possible Values:
'linear'- a standard linear scale'log'- a logarithmic scale'power'- a power-based scale (exponent = 3)'ordinal'- an ordinal scale, used for ordinal data. required for bar graphs.
Default: 'linear'
xUniqueData
Array
yAxis
Unknown
the nf-y-axis component is registered here if there is one present
Default: null
yDataExtent
Array
Gets the highest and lowest y values of the graphed data in a two element array.
yDomain
Array
Gets the domain of y values.
yLogMin
Number
The min value to use for yScaleType "log" if yMin <= 0
Default: 0.1
yMax
Unknown
Gets or sets the maximum y domain value to display on the graph.
Behavior depends on yMaxMode.
yMaxMode
String
Sets the behavior of yMax for the graph.
Possible values:
- 'auto': (default) yMax is always equal to the maximum domain value contained in the graphed data. Cannot be set.
- 'fixed': yMax can be set to an exact value and will not change based on graphed data.
- 'push': yMax can be set to a specific value, but will update if the maximum y value contained in the graph is greater than what yMax is currently set to.
- 'push-tick': yMax can be set to a specific value, but will update to next "nice" tick if the maximum y value contained in the graph is greater than that yMax is set to.
Default: 'auto'
yMin
Unknown
Gets or sets the minimum y domain value to display on the graph.
Behavior depends on yMinMode.
yMinMode
String
Sets the behavior of yMin for the graph.
Possible values:
- 'auto': (default) yMin is always equal to the minimum domain value contained in the graphed data. Cannot be set.
- 'fixed': yMin can be set to an exact value and will not change based on graphed data.
- 'push': yMin can be set to a specific value, but will update if the minimum y value contained in the graph is less than what yMin is currently set to.
- 'push-tick': yMin can be set to a specific value, but will update to next "nice" tick if the minimum y value contained in the graph is less than that yMin is set to.
Default: 'auto'
yOrdinalOuterPadding
Number
The padding at the ends of the domain data when yScaleType is 'ordinal'
Default: 0.1
yOrdinalPadding
Number
The padding between value steps when xScaleType is 'ordinal'
Default: 0.1
yPowerExponent
Number
The exponent to use for yScaleType "pow" or "power".
Default: 3
yRange
Array
The y range of the graph in pixels. The min and max pixel values in an array form.
yScale
Function
Gets the current yScale used to draw the graph.
yScaleFactory
Unknown
Gets a function to create the yScale
yScaleType
String
The type of scale to use for y values.
Possible Values:
'linear'- a standard linear scale'log'- a logarithmic scale'power'- a power-based scale (exponent = 3)'ordinal'- an ordinal scale, used for ordinal data. required for bar graphs.
Default: 'linear'