ember-cli-chartist - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

app/components/chartist-chart.js

@@ -46,2 +46,3 @@ import Ember from 'ember';
   options: UNDEF,
+  responsiveOptions: UNDEF,
 
@@ -54,3 +55,4 @@ // This is where the business happens. This will only run if checkForReqs
       this.get('data'),
-      this.get('options')
+      this.get('options'),
+      this.get('responsiveOptions')
     );
@@ -57,0 +59,0 @@

Brocfile.js

@@ -7,2 +7,5 @@ /* jshint node: true */
 var app = new EmberAddon({
+  sassOptions: {
+    'outputFile': 'dummy.css'
+  },
   'ember-cli-chartist': {
@@ -9,0 +12,0 @@ 'useCustomCSS': true

package.json

 {
   "name": "ember-cli-chartist",
-  "version": "0.1.1",
-  "description": "Ember CLI Addon for Chartist.js",
+  "version": "0.2.0",
+  "description": "Ember Addon for Chartist.js",
   "directories": {
@@ -44,2 +44,3 @@ "doc": "doc",
     "ember-addon",
+    "ember-cli",
     "chartist",
@@ -46,0 +47,0 @@ "chartist-js"

README.md

@@ -50,2 +50,3 @@ # Chartist.js for Ember-CLI Projects
 
+*/app/templates/application.hbs*
 ```
@@ -59,2 +60,3 @@ {{chartist-chart type="bar" data=model.chartData}}
 
+*/app/templates/application.hbs*
 ```
@@ -70,2 +72,3 @@ {{chartist-chart ratio="ct-golden-section" data=model.chartData}}
 
+*/app/templates/application.hbs*
 ```
@@ -75,21 +78,13 @@ {{chartist-chart options=chartOptions data=model.chartData}}
 
-*/app/routes/application.js*
+*/app/controllers/application.js*
 ```javascript
 import Ember from 'ember';
 
-export default Ember.Route.extend({
-  model: function () {
-    return {
-      chartData: {
-        ...
-      },
+export default Ember.ObjectController.extend({
+  chartOptions: {
+    showArea: true,
+    lineSmooth: false,
 
-      chartOptions: {
-        showArea: true,
-        lineSmooth: false,
-
-        axisX: {
-          showGrid: false
-        }
-      }
+    axisX: {
+      showGrid: false
     }
@@ -102,2 +97,30 @@ }
 
+#### Responsive config
+
+You can also configure your charts for different media queries. All of the same
+configuration options are available, but you provide them via the `responsiveOptions`
+attribute.
+
+```
+{{chartist-chart responsiveOptions=resOpts data=model.chartData}}
+```
+
+*/app/controllers/application.js*
+```javascript
+import Ember from 'ember';
+
+export default Ember.ObjectController.extend({
+  chartResOptions: [
+    ['screen and (min-width: 640px)', {
+      showArea: true,
+      lineSmooth: false,
+
+      axisX: {
+        showLabel: false
+      }
+    }]
+  ]
+});
+```
+
 ### Custom CSS
@@ -104,0 +127,0 @@

tests/unit/components/chartist-chart-test.js

@@ -0,1 +1,3 @@
+/* global Ember */
+
 import {
@@ -6,17 +8,141 @@ moduleForComponent,
 
-moduleForComponent('chartist-chart', 'ChartistChartComponent', {
-  // specify the other units that are required for this test
-  // needs: ['component:foo', 'helper:bar']
-});
+moduleForComponent('chartist-chart', 'ChartistChartComponent', {});
 
+var chartData = {
+    labels: ['Week1', 'Week2', 'Week3', 'Week4', 'Week5', 'Week6'],
+    series: [
+      [5, 4, 3, 7, 5, 10],
+      [3, 2, 9, 5, 4, 6],
+      [2, 1, -3, -4, -2, 0]
+    ]
+  },
+  pieChartData = {
+    labels: ['Pizza', 'Fish', 'Puppies'],
+    series: [
+      [40, 25, 25]
+    ]
+  };
+
 test('it renders', function() {
   expect(2);
 
-  // creates the component instance
-  var component = this.subject();
+  var component = this.subject({
+    data: chartData
+  });
+
   equal(component._state, 'preRender');
 
-  // appends the component to the page
   this.append();
   equal(component._state, 'inDOM');
 });
+
+test('it can be a line chart', function() {
+  expect(1);
+
+  var component = this.subject({
+    data: chartData
+  });
+
+  component.set('type', 'line');
+  this.append();
+
+  var chart = component.get('chart');
+  equal(chart.options.classNames.chart, 'ct-chart-line');
+});
+
+test('it can be a bar chart', function() {
+  expect(1);
+
+  var component = this.subject({
+    data: chartData
+  });
+
+  component.set('type', 'bar');
+  this.append();
+
+  var chart = component.get('chart');
+  equal(chart.options.classNames.chart, 'ct-chart-bar');
+});
+
+test('it can be a pie chart', function() {
+  expect(1);
+
+  var component = this.subject({
+    data: pieChartData
+  });
+
+  component.set('type', 'pie');
+  this.append();
+
+  var chart = component.get('chart');
+  equal(chart.options.classNames.chart, 'ct-chart-pie');
+});
+
+test('it can have different ratios', function () {
+  expect(1);
+
+  var component = this.subject({
+    data: chartData
+  });
+
+  var ratio = 'ct-minor-second';
+  component.set('ratio', ratio);
+  ok(this.$().hasClass(ratio));
+});
+
+test('it can be configured with the options attribute', function () {
+  expect(4);
+
+  var component = this.subject({
+    data: chartData
+  });
+
+  component.set('options', {
+    showArea: false,
+    lineSmooth: false,
+    axisX: {
+      showGrid: false
+    },
+    axisY: {
+      showLabel: false
+    }
+  });
+
+  this.append();
+
+  var chart = component.get('chart');
+  var opts = chart.options;
+
+  equal(opts.showArea, false);
+  equal(opts.lineSmooth, false);
+  equal(opts.axisX.showGrid, false);
+  equal(opts.axisY.showLabel, false);
+});
+
+test('it can be configured with the responsiveOptions attribute', function () {
+  expect(3);
+
+  var component = this.subject({
+    data: chartData
+  });
+
+  component.set('responsiveOptions', [
+    ['screen and (min-width: 640px)', {
+      showArea: true,
+      lineSmooth: false,
+
+      axisX: {
+        showLabel: false
+      }
+    }]
+  ]);
+
+  this.append();
+
+  var chart = component.get('chart');
+  var resOpts = chart.responsiveOptions;
+
+  equal(resOpts[0][1].showArea, true);
+  equal(resOpts[0][1].lineSmooth, false);
+  equal(resOpts[0][1].axisX.showLabel, false);
+});

No alert changes

Improved metrics

Total package byte prevSize

146494

increased by2.31%

Number of package files

48

increased by2.13%

Lines of code

2852

increased by4.09%

Number of lines in readme file

170

increased by15.65%

No dependency changes