Merge pull request #53 from twjohnston/stacked-bar

Add stacked-bar chart type

.travis.yml

@@ -3,7 +3,7 @@ dist: trusty
 language: node_js
 
 node_js:
-- '8.1.2'
+- '8.6.0'
 - 'stable'
 
 addons:
@@ -63,7 +63,7 @@ deploy:
   on:
     all_branches: true
     condition: "$EMBER_TRY_SCENARIO = 'ember-default'"
-    node: '8.1.2'
+    node: '8.6.0'
     tags: true
 
 after_deploy:

.travis/maybe-bump-version.sh

@@ -1,6 +1,6 @@
 #!/bin/bash
 
-if [[ ! "${PUBLISH_NODE_VERSION:-8.1.2}" =~ ^$TRAVIS_NODE_VERSION ]]
+if [[ ! "${PUBLISH_NODE_VERSION:-8.6.0}" =~ ^$TRAVIS_NODE_VERSION ]]
 then
   echo "Skipping pr-bumper bump step for TRAVIS_NODE_VERSION [${TRAVIS_NODE_VERSION}]"
   exit 0

.travis/maybe-publish-coverage.sh

@@ -8,7 +8,7 @@ then
   exit 0
 fi
 
-if [[ ! "${PUBLISH_NODE_VERSION:-8.1.2}" =~ ^$TRAVIS_NODE_VERSION ]]
+if [[ ! "${PUBLISH_NODE_VERSION:-8.6.0}" =~ ^$TRAVIS_NODE_VERSION ]]
 then
   echo "Skipping pr-bumper coverage publish step for TRAVIS_NODE_VERSION [${TRAVIS_NODE_VERSION}]"
   exit 0

addon/components/frost-chart-axis-tick.js

@@ -21,7 +21,9 @@ export default Component.extend({
   propTypes: {
     // options
     axis: PropTypes.string.isRequired,
-    coordinate: PropTypes.number
+    coordinate: PropTypes.number,
+    width: PropTypes.number,
+    height: PropTypes.number
 
     // state
   },
@@ -38,8 +40,8 @@ export default Component.extend({
   // == Computed Properties ===================================================
 
   @readOnly
-  @computed('coordinate')
-  style (coordinate) {
+  @computed('coordinate', 'width', 'height')
+  style (coordinate, width, height) {
     if (isNone(coordinate)) {
       return EmberString.htmlSafe('')
     }
@@ -48,25 +50,33 @@ export default Component.extend({
     if (this.get('axis') === 'x') {
       return EmberString.htmlSafe(`
         position: absolute;
-        left: calc(${coordinate}px - ${this.$().outerWidth()}px / 2);
+        left: calc(${coordinate}px - ${width}px / 2);
       `)
     } else {
       return EmberString.htmlSafe(`
         position: absolute;
-        top: calc(${coordinate}px - ${this.$().outerHeight()}px / 2);
+        top: calc(${coordinate}px - ${height}px / 2);
       `)
     }
   },
 
   // == Functions =============================================================
 
   _dispatchRenderedTick () {
+    const width = this.$().outerWidth()
+    const height = this.$().outerHeight()
+
+    this.setProperties({
+      width,
+      height
+    })
+
     this.dispatch({
       type: 'RENDERED_TICK',
       axis: this.get('axis'),
       tick: {
-        height: this.$().outerHeight(true),
-        width: this.$().outerWidth(true)
+        height,
+        width
       }
     })
   },

addon/components/frost-chart-svg-plot-stacked-bar.js

@@ -0,0 +1,87 @@
+import {stack as d3Stack} from 'd3-shape'
+import computed, {readOnly} from 'ember-computed-decorators'
+import {Component} from 'ember-frost-core'
+import {PropTypes} from 'ember-prop-types'
+import layout from '../templates/components/frost-chart-svg-plot-stacked-bar'
+
+export default Component.extend({
+
+  // == Dependencies ==========================================================
+
+  // == Keyword Properties ====================================================
+
+  layout,
+  tagName: 'g',
+
+  // == PropTypes =============================================================
+
+  propTypes: {
+    // options
+    chartState: PropTypes.EmberObject.isRequired,
+    data: PropTypes.array.isRequired,
+    x: PropTypes.string.isRequired,
+    y: PropTypes.string.isRequired,
+    seriesKeys: PropTypes.arrayOf(PropTypes.string).isRequired,
+    seriesColors: PropTypes.array
+
+    // state
+  },
+
+  getDefaultProps () {
+    return {
+      // options
+      seriesColors: [
+        '#009eef',
+        '#a183db',
+        '#009999',
+        '#a1e7ff',
+        '#e8dffb',
+        '#9aefea'
+      ]
+
+      // state
+    }
+  },
+
+  // == Computed Properties ===================================================
+
+  @readOnly
+  @computed('data.[]', 'x', 'chartState.range.x', 'chartState.range.y',
+    'chartState.domain.x', 'chartState.domain.y', 'seriesKeys', 'seriesColors')
+  _bars (data, xProp, xRange, yRange, xDomain, yDomain, seriesKeys, seriesColors) {
+    if (!xRange || !yRange || !xDomain || !yDomain) {
+      return []
+    }
+
+    const stackLayout = d3Stack().keys(seriesKeys)
+    const stackedData = stackLayout(data)
+
+    const xScale = this.get('chartState.scale.x')
+    const xTransform = xScale({domain: xDomain, range: xRange})
+
+    const yScale = this.get('chartState.scale.y')
+    const yTransform = yScale({domain: yDomain, range: yRange})
+
+    return stackedData.reduce((arr, layer, index) => {
+      return arr.concat(layer.map(entry => {
+        return {
+          x: xTransform(entry.data[xProp]),
+          y: yTransform(entry[1]),
+          width: xTransform.bandwidth(),
+          height: yTransform(entry[0]) - yTransform(entry[1]),
+          color: seriesColors[index % seriesColors.length], // Repeat colors if too few are provided
+          seriesIndex: index
+        }
+      }))
+    }, [])
+  }
+
+  // == Functions =============================================================
+
+  // == DOM Events ============================================================
+
+  // == Lifecycle Hooks =======================================================
+
+  // == Actions ===============================================================
+
+})

addon/components/frost-chart-x-axis.js

@@ -3,14 +3,14 @@
  */
 
 import Ember from 'ember'
-const {String: EmberString, assign, get} = Ember
 import computed, {readOnly} from 'ember-computed-decorators'
 import {Component} from 'ember-frost-core'
 import {PropTypes} from 'ember-prop-types'
 import {linearTicks} from '../helpers/linear-ticks'
-
 import layout from '../templates/components/frost-chart-x-axis'
 
+const {String: EmberString, assign, get, isPresent} = Ember
+
 export default Component.extend({
 
   // == Dependencies ==========================================================
@@ -61,8 +61,8 @@ export default Component.extend({
   },
 
   @readOnly
-  @computed('_ticks', 'chartState.range.x', 'chartState.domain.x')
-  _positionedTicks (ticks, range, domain) {
+  @computed('_ticks', 'chartState.range.x', 'chartState.domain.x', '_tickOffset')
+  _positionedTicks (ticks, range, domain, tickOffset) {
     if (!range || !domain) {
       return ticks
     }
@@ -72,7 +72,7 @@ export default Component.extend({
 
     return ticks.map(tick => {
       return assign({}, tick, {
-        coordinate: transform(get(tick, 'value'))
+        coordinate: transform(get(tick, 'value')) + tickOffset
       })
     })
   },
@@ -106,6 +106,16 @@ export default Component.extend({
     return EmberString.htmlSafe(`height: ${tickHeight}px;`)
   },
 
+  @readOnly
+  @computed('chartState.scale.x', 'chartState.domain.x', 'chartState.range.x')
+  _tickOffset (scale, domain, range) {
+    if (!isPresent(scale) || !isPresent(domain) || !isPresent(range)) {
+      return 0
+    }
+    const transform = scale({domain, range})
+    return isPresent(transform.bandwidth) ? transform.bandwidth() / 2 : 0
+  },
+
   // == Functions =============================================================
 
   _dispatchRenderedAxis () {

addon/components/frost-chart-y-axis.js

@@ -8,7 +8,6 @@ import computed, {readOnly} from 'ember-computed-decorators'
 import {Component} from 'ember-frost-core'
 import {linearTicks} from '../helpers/linear-ticks'
 import {PropTypes} from 'ember-prop-types'
-
 import layout from '../templates/components/frost-chart-y-axis'
 
 export default Component.extend({

addon/components/frost-chart.js

@@ -23,7 +23,10 @@ export default Component.extend({
 
   propTypes: {
     // options
-    xDomain: PropTypes.arrayOf(PropTypes.number).isRequired,
+    xDomain: PropTypes.oneOfType([
+      PropTypes.arrayOf(PropTypes.number),
+      PropTypes.arrayOf(PropTypes.string)
+    ]).isRequired,
     xRange: PropTypes.arrayOf(PropTypes.number),
     xScale: PropTypes.func,
     yDomain: PropTypes.arrayOf(PropTypes.number).isRequired,

addon/helpers/d3-band-scale.js

@@ -0,0 +1,14 @@
+/**
+ * Helper definition for the d3-band-scale helper
+ */
+import {scaleBand} from 'd3-scale'
+import Ember from 'ember'
+const {Helper} = Ember
+
+export function bandScale () {
+  return function ({domain, range}) {
+    return scaleBand().domain(domain).rangeRound(range).paddingInner(0.2)
+  }
+}
+
+export default Helper.helper(bandScale)

addon/helpers/ordinal-ticks.js

@@ -0,0 +1,20 @@
+import Ember from 'ember'
+const {A, Helper, Object: EmberObject} = Ember
+
+export function ordinalTicks () {
+  return function (domain) {
+    const _ticks = A()
+    const numTicks = domain.length
+    _ticks.addObjects(Array.from({length: numTicks}, (entry, index) => {
+      const tick = domain[index]
+      return EmberObject.create({
+        index: index + 1,
+        value: tick
+      })
+    }))
+
+    return _ticks
+  }
+}
+
+export default Helper.helper(ordinalTicks)

addon/styles/_frost-chart-svg-plot-stacked-bar.scss

@@ -0,0 +1,5 @@
+.frost-chart-svg-plot-stacked-bar {
+  rect {
+    fill-opacity: .6;
+  }
+}

addon/styles/_frost-chart.scss

@@ -1,3 +1,7 @@
 .frost-chart {
   position: relative;
+
+  .frost-chart-svg {
+    overflow: visible;
+  }
 }

addon/styles/addon.scss

@@ -7,4 +7,5 @@
 @import './frost-chart-svg-plot-line';
 @import './frost-chart-svg-plot-scatter';
 @import './frost-chart-svg-plot-grid';
+@import './frost-chart-svg-plot-stacked-bar';
 @import './frost-gauge';

addon/templates/components/frost-chart-svg-plot-stacked-bar.hbs

@@ -0,0 +1,3 @@
+{{#each _bars as |bar|}}
+  {{yield bar}}
+{{/each}}

addon/templates/components/frost-chart-svg.hbs

@@ -15,6 +15,12 @@
         hook=(concat hookPrefix '-bar')
       )
 
+      stacked-bar=(component 'frost-chart-svg-plot-stacked-bar'
+        bar=(vertical-bar)
+        chartState=chartState
+        hook=(concat hookPrefix '-stacked-bar')
+      )
+
       x-grid=(component 'frost-chart-svg-plot-x-grid'
         chartState=chartState
         hook=(concat hookPrefix '-xGrid')

app/components/frost-chart-svg-plot-stacked-bar.js

@@ -0,0 +1,4 @@
+/**
+ * Simple re-export of frost-chart-svg-plot-stacked-bar in the app namespace
+ */
+export {default} from 'ember-frost-chart/components/frost-chart-svg-plot-stacked-bar'

app/helpers/d3-band-scale.js

@@ -0,0 +1,4 @@
+/**
+ * Re-export the d3-band-scale helper into the app namespace
+ */
+export {default} from 'ember-frost-chart/helpers/d3-band-scale'

app/helpers/ordinal-ticks.js

@@ -0,0 +1,4 @@
+/**
+ * Re-export the ordinal-ticks helper into the app namespace
+ */
+export {default} from 'ember-frost-chart/helpers/ordinal-ticks'