components.nf-y-axis Class
A component for adding a templated y axis to an nf-graph component.
All items contained within this component are used to template each tick mark on the
rendered graph. Tick values are supplied to the inner scope of this component on the
view template via tick.
Styling
The main container will have a nf-y-axis class.
A orient-left or orient-right container will be applied to the container
depending on the orient setting.
Ticks are positioned via a <g> tag, that will contain whatever is passed into it via
templating, along with the tick line. <text> tags within tick templates do have some
default styling applied to them to position them appropriately based off of orientation.
Example
{{#nf-graph width=500 height=300}}
{{#nf-y-axis width=40 as |tick|}}
<text>y is {{tick.value}}</text>
{{/nf-y-axis}}
{{/nf-graph}}Item Index
Methods
Methods
_trackedDataChanged
()
private
Observes changes to tracked data and sends the didTrack action.
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
axisLineX
Number
The x position of the axis line.
didTrack
String
The action to send on didTrack.
Default: null
height
Number
the height of the component
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
isOrientRight
Boolean
computed property. returns true if orient is equal to 'right'.
orient
String
The orientation of the y axis. Possible values are 'left' and 'right'
Default: 'left'
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
showTrackingDot
Boolean
Gets or sets whether the tracking dot should be shown at all.
Default: true
tickCount
Number
The number of ticks to display
Default: 5
tickFactory
Function
A method to call to override the default behavior of how ticks are created.
The function signature should match:
// - scale: d3.Scale
// - tickCount: number of ticks
// - uniqueData: unique data points for the axis
// - scaleType: string of "linear" or "ordinal"
// returns: an array of tick values.
function(scale, tickCount, uniqueData, scaleType) {
return [100,200,300];
}Default: null
tickFilter
Function
An optional filtering function to allow more control over what tick marks are displayed.
The function should have exactly the same signature as the function you'd use for an
Array.prototype.filter().
Default: null
Example:
{{#nf-y-axis tickFilter=myFilter as |tick|}}
<text>{{tick.value}}</text>
{{/nf-y-axis}}
And on your controller:
myFilter: function(tick, index, ticks) {
return tick.value < 1000;
},
The above example will filter down the set of ticks to only those that are less than 1000.
tickLength
Number
The length of the tick's accompanying line.
Default: 5
tickPadding
Number
The distance between the tick line and the origin tick's templated output
Default: 3
ticks
Array
The ticks to be displayed.
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'
transform
String
The SVG transform for positioning the component.
uniqueYData
Array
All y data from the graph, filtered to unique values.
width
Number
The total width of the y axis
Default: 40
x
Number
The x position of the component
xScale
d3.scale
The x scale used by this component
y
Number
The y position of the component
yScale
d3.scale
The y scale used by this component