- 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'),
- });
- }
- }
- }
-
- });
-