API Docs for:
Show:

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}}

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

graph

components.nf-graph

The parent graph for a component.

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