import Ember from 'ember';
import HasGraphParent from 'ember-nf-graph/mixins/graph-has-graph-parent';
import DataGraphic from 'ember-nf-graph/mixins/graph-data-graphic';
import RegisteredGraphic from 'ember-nf-graph/mixins/graph-registered-graphic';
import parsePropExpr from 'ember-nf-graph/utils/parse-property-expression';
import RequireScaleSource from 'ember-nf-graph/mixins/graph-requires-scale-source';
//import GraphicWithTrackingDot from 'ember-nf-graph/mixins/graph-graphic-with-tracking-dot';
import { normalizeScale } from 'ember-nf-graph/utils/nf/scale-utils';
import { getRectPath } from 'ember-nf-graph/utils/nf/svg-dom';
/**
Adds a bar graph to an `nf-graph` component.
**Requires the graph has `xScaleType === 'ordinal'`***
** `showTrackingDot` defaults to `false` in this component **
@namespace components
@class nf-bars
@extends Ember.Component
@uses mixins.graph-has-graph-parent
@uses mixins.graph-registered-graphic
@uses mixins.graph-data-graphic
@uses mixins.graph-requires-scale-source
*/
export default Ember.Component.extend(HasGraphParent, RegisteredGraphic, DataGraphic, RequireScaleSource, {
tagName: 'g',
classNames: ['nf-bars'],
_showTrackingDot: false,
/**
The name of the property on each data item containing the className for the bar rectangle
@property classprop
@type String
@default 'className'
*/
classprop: 'className',
/**
Gets the function to get the classname from each data item.
@property getBarClass
@readonly
@private
*/
getBarClass: Ember.computed('classprop', function() {
var classprop = this.get('classprop');
return classprop ? parsePropExpr(classprop) : null;
}),
/**
The nf-bars-group this belongs to, if any.
@property group
@type components.nf-bars-group
@default null
*/
group: null,
/**
The index of this component within the group, if any.
@property groupIndex
@type Number
@default null
*/
groupIndex: null,
/**
The graph content height
@property graphHeight
@type Number
@readonly
*/
graphHeight: Ember.computed.oneWay('graph.graphHeight'),
/**
A scale provided by nf-bars-group to offset the bar rectangle output
@property barScale
@type d3.scale
@readonly
*/
barScale: Ember.computed.oneWay('group.barScale'),
/**
The width of each bar.
@property barWidth
@type Number
@readonly
*/
barWidth: Ember.computed('xScale', 'barScale', function(){
var barScale = this.get('barScale');
if(barScale) {
return barScale.rangeBand();
}
var xScale = this.get('xScale');
return xScale && xScale.rangeBand ? xScale.rangeBand() : 0;
}),
groupOffsetX: Ember.computed('barScale', 'groupIndex', function(){
var barScale = this.get('barScale');
var groupIndex = this.get('groupIndex');
return normalizeScale(barScale, groupIndex);
}),
/**
The bar models used to render the bars.
@property bars
@readonly
*/
bars: Ember.computed(
'xScale',
'yScale',
'renderedData.@each',
'graphHeight',
'getBarClass',
'barWidth',
'groupOffsetX',
function(){
var { renderedData, xScale, yScale, barWidth, graphHeight, getBarClass, groupOffsetX } =
this.getProperties('renderedData', 'xScale', 'yScale', 'graphHeight', 'getBarClass', 'groupOffsetX', 'barWidth');
var getRectPath = this._getRectPath;
if(!xScale || !yScale || !Ember.isArray(renderedData)) {
return null;
}
var w = barWidth;
return Ember.A(renderedData.map(function(data) {
var className = 'nf-bars-bar' + (getBarClass ? ' ' + getBarClass(data.data) : '');
var x = normalizeScale(xScale, data[0]) + groupOffsetX;
var y = normalizeScale(yScale, data[1]);
var h = graphHeight - y;
var path = getRectPath(x, y, w, h);
return { path, className, data };
}));
}
),
_getRectPath: getRectPath,
/**
The name of the action to fire when a bar is clicked.
@property barClick
@type String
@default null
*/
barClick: null,
init() {
this._super(...arguments);
var group = this.nearestWithProperty('isBarsGroup');
if(group && group.registerBars) {
group.registerBars(this);
}
},
actions: {
nfBarClickBar: function(dataPoint) {
if(this.get('barClick')) {
this.sendAction('barClick', {
data: dataPoint.data,
x: dataPoint[0],
y: dataPoint[1],
source: this,
graph: this.get('graph'),
});
}
}
}
});