API Docs for:
Show:

File: app/components/nf-bars.js

  1. import Ember from 'ember';
  2. import HasGraphParent from 'ember-nf-graph/mixins/graph-has-graph-parent';
  3. import DataGraphic from 'ember-nf-graph/mixins/graph-data-graphic';
  4. import RegisteredGraphic from 'ember-nf-graph/mixins/graph-registered-graphic';
  5. import parsePropExpr from 'ember-nf-graph/utils/parse-property-expression';
  6. import RequireScaleSource from 'ember-nf-graph/mixins/graph-requires-scale-source';
  7. //import GraphicWithTrackingDot from 'ember-nf-graph/mixins/graph-graphic-with-tracking-dot';
  8. import { normalizeScale } from 'ember-nf-graph/utils/nf/scale-utils';
  9. import { getRectPath } from 'ember-nf-graph/utils/nf/svg-dom';
  10.  
  11. /**
  12. Adds a bar graph to an `nf-graph` component.
  13.  
  14. **Requires the graph has `xScaleType === 'ordinal'`***
  15.  
  16. ** `showTrackingDot` defaults to `false` in this component **
  17.  
  18. @namespace components
  19. @class nf-bars
  20. @extends Ember.Component
  21. @uses mixins.graph-has-graph-parent
  22. @uses mixins.graph-registered-graphic
  23. @uses mixins.graph-data-graphic
  24. @uses mixins.graph-requires-scale-source
  25. */
  26. export default Ember.Component.extend(HasGraphParent, RegisteredGraphic, DataGraphic, RequireScaleSource, {
  27. tagName: 'g',
  28.  
  29. classNames: ['nf-bars'],
  30.  
  31. _showTrackingDot: false,
  32.  
  33. /**
  34. The name of the property on each data item containing the className for the bar rectangle
  35. @property classprop
  36. @type String
  37. @default 'className'
  38. */
  39. classprop: 'className',
  40.  
  41. /**
  42. Gets the function to get the classname from each data item.
  43. @property getBarClass
  44. @readonly
  45. @private
  46. */
  47. getBarClass: Ember.computed('classprop', function() {
  48. var classprop = this.get('classprop');
  49. return classprop ? parsePropExpr(classprop) : null;
  50. }),
  51.  
  52. /**
  53. The nf-bars-group this belongs to, if any.
  54. @property group
  55. @type components.nf-bars-group
  56. @default null
  57. */
  58. group: null,
  59.  
  60. /**
  61. The index of this component within the group, if any.
  62. @property groupIndex
  63. @type Number
  64. @default null
  65. */
  66. groupIndex: null,
  67.  
  68. /**
  69. The graph content height
  70. @property graphHeight
  71. @type Number
  72. @readonly
  73. */
  74. graphHeight: Ember.computed.oneWay('graph.graphHeight'),
  75.  
  76. /**
  77. A scale provided by nf-bars-group to offset the bar rectangle output
  78. @property barScale
  79. @type d3.scale
  80. @readonly
  81. */
  82. barScale: Ember.computed.oneWay('group.barScale'),
  83.  
  84. /**
  85. The width of each bar.
  86. @property barWidth
  87. @type Number
  88. @readonly
  89. */
  90. barWidth: Ember.computed('xScale', 'barScale', function(){
  91. var barScale = this.get('barScale');
  92. if(barScale) {
  93. return barScale.rangeBand();
  94. }
  95. var xScale = this.get('xScale');
  96. return xScale && xScale.rangeBand ? xScale.rangeBand() : 0;
  97. }),
  98.  
  99. groupOffsetX: Ember.computed('barScale', 'groupIndex', function(){
  100. var barScale = this.get('barScale');
  101. var groupIndex = this.get('groupIndex');
  102. return normalizeScale(barScale, groupIndex);
  103. }),
  104.  
  105. /**
  106. The bar models used to render the bars.
  107. @property bars
  108. @readonly
  109. */
  110. bars: Ember.computed(
  111. 'xScale',
  112. 'yScale',
  113. 'renderedData.@each',
  114. 'graphHeight',
  115. 'getBarClass',
  116. 'barWidth',
  117. 'groupOffsetX',
  118. function(){
  119. var { renderedData, xScale, yScale, barWidth, graphHeight, getBarClass, groupOffsetX } =
  120. this.getProperties('renderedData', 'xScale', 'yScale', 'graphHeight', 'getBarClass', 'groupOffsetX', 'barWidth');
  121.  
  122. var getRectPath = this._getRectPath;
  123.  
  124. if(!xScale || !yScale || !Ember.isArray(renderedData)) {
  125. return null;
  126. }
  127.  
  128. var w = barWidth;
  129.  
  130. return Ember.A(renderedData.map(function(data) {
  131. var className = 'nf-bars-bar' + (getBarClass ? ' ' + getBarClass(data.data) : '');
  132. var x = normalizeScale(xScale, data[0]) + groupOffsetX;
  133. var y = normalizeScale(yScale, data[1]);
  134. var h = graphHeight - y;
  135. var path = getRectPath(x, y, w, h);
  136.  
  137. return { path, className, data };
  138. }));
  139. }
  140. ),
  141.  
  142. _getRectPath: getRectPath,
  143.  
  144. /**
  145. The name of the action to fire when a bar is clicked.
  146. @property barClick
  147. @type String
  148. @default null
  149. */
  150. barClick: null,
  151.  
  152. init() {
  153. this._super(...arguments);
  154. var group = this.nearestWithProperty('isBarsGroup');
  155. if(group && group.registerBars) {
  156. group.registerBars(this);
  157. }
  158. },
  159.  
  160. actions: {
  161. nfBarClickBar: function(dataPoint) {
  162. if(this.get('barClick')) {
  163. this.sendAction('barClick', {
  164. data: dataPoint.data,
  165. x: dataPoint[0],
  166. y: dataPoint[1],
  167. source: this,
  168. graph: this.get('graph'),
  169. });
  170. }
  171. }
  172. }
  173.  
  174. });