components.nf-x-axis Class
A component for adding a templated x 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-x-axis
class.
A orient-top
or orient-bottom
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-x-axis height=40 as |tick|}}
<text>x is {{tick.value}}</text>
{{/nf-x-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
axisLineY
Number
The y position, in pixels, of the axis line
didTrack
String
The action to send on didTrack
.
Default: null
height
Number
The height of the x axis in pixels.
Default: 20
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
orient
String
The orientation of the x axis. Value can be 'top'
or 'bottom'
.
Default: 'bottom'
orientClass
String
The class applied due to orientation (e.g. 'orient-top'
)
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: 12
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-x-axis tickFilter=myFilter as |tick|}}
<text>{{tick.value}}</text>
{{/nf-x-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 line (the small vertical line indicating the tick)
Default: 0
tickPadding
Number
The spacing between the end of the tick line and the origin of the templated tick content
Default: 5
ticks
Array
The models for the ticks to display on the axis.
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 applied to this component's container.
uniqueXData
Array
A unique set of all x data on the graph
width
Number
The width of the component
x
Number
This x position of this component's container
xScale
d3.scale
The x scale used by this component
y
Number
The y position of this component's container.
yScale
d3.scale
The y scale used by this component