improves axis helper (#52)

adds more D3 axis methods, allows for more intuitive axis configuration. Needed new version of `ember-d3-helpers`, which required upgrade to Ember v2.9. Allows `ember-try` failures in Glimmer2 (#53)

.editorconfig

@@ -13,22 +13,8 @@ insert_final_newline = true
 indent_style = space
 indent_size = 2
 
-[*.js]
-indent_style = space
-indent_size = 2
-
 [*.hbs]
 insert_final_newline = false
-indent_style = space
-indent_size = 2
-
-[*.css]
-indent_style = space
-indent_size = 2
-
-[*.html]
-indent_style = space
-indent_size = 2
 
 [*.{diff,md}]
 trim_trailing_whitespace = false

.travis.yml

@@ -1,10 +1,14 @@
 ---
 language: node_js
 node_js:
-  - "4.2"
+  - "4"
 
-sudo: required
 dist: trusty
+sudo: required
+
+cache:
+  directories:
+    - node_modules
 
 addons:
   apt:
@@ -13,33 +17,32 @@ addons:
     packages:
     - google-chrome-stable
 
-cache:
-  directories:
-    - node_modules
-
 env:
+  # we recommend testing LTS's and latest stable release (bonus points to beta/canary)
   - EMBER_TRY_SCENARIO=default
   - EMBER_TRY_SCENARIO=ember-release
-  # - EMBER_TRY_SCENARIO=ember-beta
-  - EMBER_TRY_SCENARIO=ember-canary
+
 
 matrix:
   fast_finish: true
   allow_failures:
-    - env: EMBER_TRY_SCENARIO=ember-canary
+    - env: 
+      - EMBER_TRY_SCENARIO=ember-beta
+      - EMBER_TRY_SCENARIO=ember-canary
 
 before_install:
+  - if [[ `npm -v` != 3* ]]; then npm i -g npm@3; fi
   - export DISPLAY=:99.0
   - sh -e /etc/init.d/xvfb start
   - npm config set spin false
-  - npm install -g npm@^2
+  - npm install -g bower
+  - bower --version
 
 install:
-  - npm install -g bower
   - npm install
   - bower install
 
 script:
   # Usually, it's ok to finish the test scenario without reverting
   #  to the addon's original dependency state, skipping "cleanup".
-  - ember try:one $EMBER_TRY_SCENARIO test --skip-cleanup
+  - ember try:one $EMBER_TRY_SCENARIO test --skip-cleanup

README.md

@@ -90,22 +90,29 @@ To render an axis, add `{{chart.y-axis}}` or `{{chart.x-axis}}` to the `{{#ember
 ```hbs
 {{#ember-sparkles as |chart|}}
   {{chart.x-axis
-    tick-format='%Y-%m-%d'
+    tick-format=(d3-time-format '%Y-%m-%d')
     label='date'
     dy=100
     dx=-100
   }}
 
   {{chart.y-axis
     label='kWh'
+    position='right'
     ticks=5
-    yGrid=true
+    tick-format=(d3-format '.2s')
+    gridlines=true
     dx=100
     dy=-30
   }}
 {{/ember-sparkles}}
 ```
 
+Similar to the `y-axis` example, the `x-axis` contextual component can take a `position` property, set to `top` (by default these are set to `left` and `bottom`), respectively).
+
+For more information on configuring tick formats using the `d3-time-format` and `d3-format` helpers, please see 
+[d3-format](https://github.com/d3/d3-format) and [d3-time-format](https://github.com/d3/d3-time-format), respectively.
+
 ### Legend
 
 To show a legend, add `{{chart.legend}}` to the `{{#ember-sparkles}}` block.

addon/helpers/e-s/axis-helper.js

@@ -1,39 +1,20 @@
 import Ember from 'ember';
 import axis from 'd3-axis';
-import { timeFormat } from 'd3-time-format';
-
-const tickFilter = (tickFormat, skipIdx) => {
-  let formatter = timeFormat(tickFormat);
-  return (d, idx) => {
-    if (idx % skipIdx === 0) {
-      return formatter(d);
-    }
-  };
-};
 
 const { String: { capitalize } } = Ember;
 
-export function emberSparklesAxis([ scale ], { position, tickFormat, ticks, width, height, skipIdx=1, xGrid, yGrid }) {
-  let axisType = `axis${capitalize(position)}`;
-  let axisFn = axis[axisType];
-
-  let result = axisFn().scale(scale);
-
-  if (tickFormat) {
-    result.tickFormat(tickFilter(tickFormat, skipIdx));
-  }
-
-  if (ticks) {
-    result.ticks(ticks);
-  }
+export function emberSparklesAxis([ scale ], { position, ticks, tickFormat, tickValues, tickSizeInner=6, tickSizeOuter=6, tickPadding=3, gridlines=false, gridLength }) {
+  let axisFn = axis[`axis${capitalize(position)}`];
+  let result = axisFn().scale(scale);  
 
-  if (yGrid) {
-    result.tickSizeInner((-1)*width);
-  }
+  result.ticks(ticks);
+  result.tickFormat(tickFormat);
+  result.tickValues(tickValues);
 
-  if (xGrid) {
-    result.tickSizeInner((-1)*height);
-  }
+  let innerSize = gridlines ? (-1) * gridLength : tickSizeInner;
+  result.tickSizeInner(innerSize);
+  result.tickSizeOuter(tickSizeOuter);
+  result.tickPadding(tickPadding);
 
   return result;
 }

addon/helpers/e-s/axis-options.js

@@ -0,0 +1,18 @@
+import Ember from 'ember';
+
+export function axisOptions([ position, width, height, x=0, y=0 ]) {
+  let w = position === 'right' ? width : 0;
+  let h = position === 'bottom' ? height : 0;
+  let translate = `translate(${w + x},${h + y})`;
+
+  let gridLength;
+  if (position === 'left' || position === 'right') {
+    gridLength = width;
+  } else {
+    gridLength = height;
+  }
+
+  return { gridLength, translate };
+}
+
+export default Ember.Helper.helper(axisOptions);

addon/page-objects/grouped-bar-chart.js

@@ -1,5 +1,3 @@
-/* global $ */
-
 export default class GroupedBarChart {
   constructor(env) {
     this.env = env;
@@ -11,11 +9,11 @@ export default class GroupedBarChart {
   }
 
   rect(method, property) {
-    let rects = this.groups().map((idx, g) => $(g).children()).toArray();
+    let rects = this.groups().map((idx, g) => this.$(g).children()).toArray();
     if (!arguments.length) {
       return rects;
     } else {
-      return rects.map(g => g.map((idx, r) => $(r)[method](property)).toArray());
+      return rects.map(g => g.map((idx, r) => this.$(r)[method](property)).toArray());
     }
   }
 

addon/templates/components/e-s/axis.hbs

@@ -1,12 +1,11 @@
-{{#with (e-s/axis-helper scale
+{{#let (e-s/axis-options position width height x-translate y-translate) as |options|}}
+{{#let (e-s/axis-helper scale
   position=position
   ticks=ticks
-  width=width
-  height=height
   tickFormat=tick-format
-  skipIdx=responsiveSkipIdx
-  xGrid=xGrid
-  yGrid=yGrid
+  tickValues=tick-values
+  gridlines=gridlines
+  gridLength=(get options 'gridLength')
   ) as |axis|}}
 
   {{#d3-graph classNames="ember-sparkles--axis" as |d3|}}
@@ -19,7 +18,7 @@
     {{d3.graph (pipe
       (d3-select-all '.axis')
       (if with-transition (d3-transition transition) (d3-noop))
-      (d3-attr 'transform' (i 'translate(${w},${h})' w=(or x-translate 0) h=(or height 0)))
+      (d3-attr 'transform' (get options 'translate'))
       (d3-call axis)
     )}}
 
@@ -33,7 +32,7 @@
         (d3-select-all '.label')
         (d3-attr 'dy' (or dy 0))
         (d3-attr 'dx' (or dx 0))
-        (d3-call (or labelAttrs (d3-noop)))
+        (d3-call (or label-attrs (d3-noop)))
         (d3-call (or label-transform (d3-noop)))
         (d3-style 'text-anchor' 'end')
         (d3-text label)
@@ -42,4 +41,6 @@
 
   {{/d3-graph}}
 
-{{/with}}
+{{/let}}
+{{/let}}
+

addon/templates/components/ember-sparkles.hbs

@@ -20,20 +20,21 @@
     {{yield (hash
       x-scale=(compute options.x-scale)
       y-scale=(compute options.y-scale)
+
       x-axis=(component 'e-s/axis'
         scale=(compute options.x-scale)
         position='bottom'
         height=innerHeight
         transition=options.transition
-        labelAttrs=(pipe (d3-attr 'x' width))
+        label-attrs=(pipe (d3-attr 'x' width))
       )
 
       y-axis=(component 'e-s/axis'
         scale=(compute options.y-scale)
         position='left'
         width=innerWidth
         transition=options.transition
-        labelAttrs=(pipe (d3-attr 'transform' 'rotate(-90)'))
+        label-attrs=(pipe (d3-attr 'transform' 'rotate(-90)'))
       )
 
       bar-chart=(component 'e-s/bar-chart'

app/helpers/e-s/axis-options.js

@@ -0,0 +1 @@
+export { default, axisOptions } from 'ember-sparkles/helpers/e-s/axis-options';

bower.json

@@ -1,8 +1,8 @@
 {
   "name": "ember-sparkles",
   "dependencies": {
-    "ember": "~2.8.0",
-    "ember-cli-shims": "0.1.1",
+    "ember": "~2.9.0",
+    "ember-cli-shims": "0.1.3",
     "moment-range": "^2.2.0"
   }
 }

config/ember-try.js

@@ -7,17 +7,6 @@ module.exports = {
         dependencies: { }
       }
     },
-    {
-      name: 'ember-1.13',
-      bower: {
-        dependencies: {
-          'ember': '~1.13.0'
-        },
-        resolutions: {
-          'ember': '~1.13.0'
-        }
-      }
-    },
     {
       name: 'ember-release',
       bower: {

package.json

@@ -20,33 +20,33 @@
   "license": "MIT",
   "devDependencies": {
     "babel-eslint": "^6.1.2",
-    "broccoli-asset-rev": "^2.4.2",
-    "ember-ajax": "2.0.1",
-    "ember-cli": "2.8.0",
-    "ember-cli-app-version": "^1.0.0",
-    "ember-cli-dependency-checker": "^1.2.0",
+    "broccoli-asset-rev": "^2.4.5",
+    "ember-ajax": "2.4.1",
+    "ember-cli": "2.9.1",
+    "ember-cli-app-version": "^2.0.0",
+    "ember-cli-dependency-checker": "^1.3.0",
     "ember-cli-deploy": "0.5.1",
     "ember-cli-eslint": "3.0.0",
     "ember-cli-github-pages": "0.1.0",
     "ember-cli-htmlbars": "^1.0.3",
-    "ember-cli-htmlbars-inline-precompile": "^0.3.1",
-    "ember-cli-inject-live-reload": "^1.4.0",
-    "ember-cli-qunit": "^2.1.0",
+    "ember-cli-htmlbars-inline-precompile": "^0.3.3",
+    "ember-cli-inject-live-reload": "^1.4.1",
+    "ember-cli-qunit": "^3.0.1",
     "ember-cli-release": "1.0.0-beta.2",
-    "ember-cli-sass": "5.3.1",
+    "ember-cli-sass": "5.6.0",
     "ember-cli-sri": "^2.1.0",
     "ember-cli-test-loader": "^1.1.0",
     "ember-cli-uglify": "^1.2.0",
     "ember-code-snippet": "1.4.0",
     "ember-computed-decorators": "0.2.2",
     "ember-concurrency": "0.7.8",
-    "ember-data": "^2.8.0",
+    "ember-data": "^2.9.0",
     "ember-disable-prototype-extensions": "^1.1.0",
     "ember-export-application-global": "^1.0.5",
-    "ember-let": "0.5.0",
+    "ember-let": "0.5.3",
     "ember-load-initializers": "^0.5.1",
     "ember-resolver": "^2.0.3",
-    "loader.js": "^4.0.1"
+    "loader.js": "^4.0.10"
   },
   "keywords": [
     "ember-addon",
@@ -55,12 +55,12 @@
     "htmlbars"
   ],
   "dependencies": {
-    "ember-cli-babel": "^5.1.6",
-    "ember-cli-d3-shape": "0.9.4-4.1.1.0",
-    "ember-cli-htmlbars": "^1.0.3",
+    "ember-cli-babel": "^5.1.7",
+    "ember-cli-htmlbars": "^1.0.10",
     "ember-composable-helpers": "1.0.0",
-    "ember-d3-helpers": "0.5.8",
-    "ember-interpolate-helper": "0.1.1",
+    "ember-d3": "^0.3.0",
+    "ember-d3-helpers": "0.5.11",
+    "ember-interpolate-helper": "1.0.0",
     "ember-lodash": "0.0.7",
     "ember-math-helpers": "1.2.2",
     "ember-reactive-helpers": "0.3.7",

testem.js

@@ -7,6 +7,6 @@ module.exports = {
     "Chrome"
   ],
   "launch_in_dev": [
-    "PhantomJS",
+    "Chrome"
   ]
-};
+};

tests/dummy/app/controllers/grouped-bar-chart.js

@@ -15,14 +15,13 @@ let generateData = function() {
   let dateRange = moment.range(start, end);
   let series = ['series 1', 'series 2', 'series 3', 'series 4', 'series 5', 'series 6', 'series 7'];
   let valueType = 'W';
-
   let seriesSample = _.sample(series, _.random(2, _.size(series)));
 
   return dateRange.toArray('days').map(d => {
     let seriesData = seriesSample.map(s => {
       return {
         name: s,
-        value: _.random(10, 1050)
+        value: _.random(1000, 10000)
       };
     });
     return {