New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

ember-cli-chartist

Package Overview
Dependencies
Maintainers
2
Versions
35
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ember-cli-chartist - npm Package Compare versions

Comparing version

1.2.2
to
1.2.3

125

addon/components/chartist-chart.js
/* global Chartist */
import Ember from 'ember';
import Component from '@ember/component';
const {
computed,
deprecate,
observer,
Component,
String: {
capitalize
}
} = Ember;
import { assert } from '@ember/debug';
import { observer, computed } from '@ember/object';
import { capitalize } from '@ember/string';
export default Component.extend({
chart: null,
classNameBindings: Object.freeze(['ratio']),
// This is the structure that chartist is expecting, it can be overidden in
// your components which extend this one.
defaultDataStructure: {
labels: [],
series: []
},
classNames: Object.freeze(['ct-chart']),
classNameBindings: ['ratio'],
classNames: ['ct-chart'],
// The ratio of the chart as it scales up/down in size.

@@ -51,15 +39,14 @@ //

type: 'line',
chartType: computed('type', function() {
return capitalize(this.get('type'));
}),
chart: null,
data: null,
options: null,
responsiveOptions: null,
type: null,
updateOnData: true,
// Don't use this! It's a testing hook
_createdEventHook() {},
// Before trying to do anything else, let's check to see if any necessary

@@ -73,65 +60,63 @@ // attributes are missing or if anything else is fishy about attributes

init() {
let data = this.get('data');
let type = this.get('type');
let { data } = this;
if (typeof data === 'string') {
deprecate(
'Chartist-chart: The value of the "data" attribute on should be an object, it\'s a string. Setting default data structure instead.',
false,
{
id: 'chartist.data-type',
until: '2.0.0',
}
);
assert(
'The value of the "data" attribute must be an object',
typeof data === 'object' &&
data !== null
);
let defaultDataStructure = this.get('defaultDataStructure');
this._super(...arguments);
},
this.set('data', defaultDataStructure);
}
chartType: computed('type', function() {
let { type } = this;
if (!type || !Chartist[this.get('chartType')]) {
deprecate(
'Chartist-chart: Invalid or missing "type" attribute, defaulting to "line".',
false,
{
id: 'chartist.chart-type',
until: '2.0.0',
}
);
assert(
'Invalid or missing "type" attribute',
typeof type !== 'undefined' && type !== null
);
this.set('type', 'line');
}
return capitalize(type);
}),
this._super(...arguments);
},
// This is where the business happens. This will only run if checkForReqs
// doesn't find any problems.
didInsertElement() {
let data = this.get('data') || this.get('defaultDataStructure');
this._super(...arguments);
let chart = new Chartist[this.get('chartType')](
this.get('element'),
let {
chartType,
data,
this.get('options'),
this.get('responsiveOptions')
element,
options,
responsiveOptions,
} = this;
let chart = new (Chartist[chartType])(
element,
data,
options,
responsiveOptions
);
chart.on('created', this._createdEventHook);
this.set('chart', chart);
this._super(...arguments);
},
/* eslint-disable ember/no-observers */
onData: observer('data', function() {
if (this.get('updateOnData')) {
let opts = this.get('options') || {};
let {
chart,
data,
options,
updateOnData,
} = this;
this.get('chart').update(
this.get('data'),
opts
);
if (updateOnData) {
let opts = options || {};
chart.update(data, opts);
}
}),
/* eslint-enable ember/no-observers */
});

1

config/environment.js

@@ -1,2 +0,1 @@

/* eslint-env node */
'use strict';

@@ -3,0 +2,0 @@

14

index.js

@@ -1,6 +0,4 @@

/* eslint-env node */
'use strict';
const path = require('path');
const chalk = require('chalk');
const Funnel = require('broccoli-funnel');

@@ -10,3 +8,3 @@ const mergeTrees = require('broccoli-merge-trees');

module.exports = {
name: 'ember-cli-chartist',
name: require('./package').name,

@@ -20,2 +18,3 @@ included(app) {

app.import('vendor/chartist.js');
if (!this.appOptions.useCustomCSS) {

@@ -39,12 +38,5 @@ app.import('vendor/chartist.css');

if (this.appOptions.useCustomCSS) {
this.ui.writeLine(chalk.yellow(
"[ember-cli-chartist] DEPRECATION: In the next major release (v2.0.0) of " +
"ember-cli-chartist, the import paths for chartist.scss and chartist-settings.scss will" +
" be changing. They will become 'chartist/chartist.scss' and " +
"'chartist/settings/chartist-settings.scss', respectively.\n"
));
const chartistTree = new Funnel(this.chartistPath, {
srcDir: 'scss',
// destDir: 'chartist',
destDir: 'chartist',
});

@@ -51,0 +43,0 @@

2

LICENSE.md
The MIT License (MIT)
Copyright (c) 2016
Copyright (c) 2019

@@ -5,0 +5,0 @@ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

72

package.json
{
"name": "ember-cli-chartist",
"version": "1.2.2",
"version": "1.2.3",
"description": "Ember Addon for Chartist.js",

@@ -11,7 +11,8 @@ "keywords": [

],
"repository": {
"type": "git",
"url": "https://github.com/jherdman/ember-cli-chartist.git"
},
"license": "MIT",
"author": "James Herdman <james.herdman@gmail.com>",
"contributors": [
"Tyler Gaw <me@tylergaw.com>"
],
"directories": {

@@ -21,6 +22,5 @@ "doc": "doc",

},
"repository": {
"type": "git",
"url": "https://github.com/jherdman/ember-cli-chartist.git"
},
"contributors": [
"Tyler Gaw <me@tylergaw.com>"
],
"bugs": {

@@ -31,4 +31,7 @@ "url": "https://github.com/jherdman/ember-cli-chartist/issues"

"build": "ember build",
"start": "ember server",
"test": "ember try:each"
"lint:hbs": "ember-template-lint .",
"lint:js": "eslint .",
"start": "ember serve",
"test": "ember test",
"test:all": "ember try:each"
},

@@ -38,29 +41,34 @@ "dependencies": {

"broccoli-merge-trees": "^1.2.1",
"chartist": "^0.10.1",
"ember-cli-babel": "^6.3.0",
"ember-cli-htmlbars": "^2.0.1"
"chartist": "^0.11.0",
"ember-cli-babel": "^7.7.3",
"ember-cli-htmlbars": "^3.0.1"
},
"devDependencies": {
"broccoli-asset-rev": "^2.4.5",
"ember-ajax": "^3.0.0",
"ember-cli": "~2.14.2",
"ember-cli-dependency-checker": "^1.3.0",
"ember-cli-eslint": "^3.0.0",
"ember-cli-htmlbars-inline-precompile": "^0.4.3",
"ember-cli-inject-live-reload": "^1.4.1",
"ember-cli-qunit": "^4.0.0",
"ember-cli-sass": "^7.0.0",
"ember-cli-shims": "^1.1.0",
"ember-cli-sri": "^2.1.0",
"ember-cli-uglify": "^1.2.0",
"ember-disable-prototype-extensions": "^1.1.2",
"@ember/optional-features": "^0.7.0",
"broccoli-asset-rev": "^3.0.0",
"ember-cli": "~3.11.0",
"ember-cli-dependency-checker": "^3.1.0",
"ember-cli-eslint": "^5.1.0",
"ember-cli-htmlbars-inline-precompile": "^2.1.0",
"ember-cli-inject-live-reload": "^1.8.2",
"ember-cli-sass": "^7.1.7",
"ember-cli-sri": "^2.1.1",
"ember-cli-template-lint": "^1.0.0-beta.1",
"ember-cli-uglify": "^2.1.0",
"ember-disable-prototype-extensions": "^1.1.3",
"ember-export-application-global": "^2.0.0",
"ember-load-initializers": "^1.0.0",
"ember-resolver": "^4.0.0",
"ember-source": "~2.14.1",
"ember-welcome-page": "^3.0.0",
"loader.js": "^4.2.3"
"ember-load-initializers": "^2.0.0",
"ember-maybe-import-regenerator": "^0.1.6",
"ember-qunit": "^4.4.1",
"ember-resolver": "^5.0.1",
"ember-source": "~3.11.1",
"ember-source-channel-url": "^1.1.0",
"ember-try": "^1.0.0",
"eslint-plugin-ember": "^6.2.0",
"eslint-plugin-node": "^9.0.1",
"loader.js": "^4.7.0",
"qunit-dom": "^0.8.4"
},
"engines": {
"node": "^4.5 || 6.* || >= 7.*"
"node": "8.* || >= 10.*"
},

@@ -67,0 +75,0 @@ "ember-addon": {

86

README.md
# Chartist.js for Ember-CLI Projects
[![Build Status](https://travis-ci.org/jherdman/ember-cli-chartist.svg)](https://travis-ci.org/jherdman/ember-cli-chartist)
[![Ember Observer Score](https://emberobserver.com/badges/ember-cli-chartist.svg)](https://emberobserver.com/addons/ember-cli-chartist)
[![Ember Observer Score](https://emberobserver.com/badges/ember-cli-chartist.svg)](https://emberobserver.com/addons/ember-cli-chartist)

@@ -9,3 +9,3 @@ This is an ember-cli wrapper for [Chartist](https://github.com/gionkunz/chartist-js).

You can see which version of Chartist is used [by examining `blueprints/ember-cli-chartist/index.js`](https://github.com/jherdman/ember-cli-chartist/blob/master/blueprints/ember-cli-chartist/index.js).
You can see which version of Chartist is used [by examining `package.json`](https://github.com/jherdman/ember-cli-chartist/blob/master/package.json).

@@ -17,3 +17,3 @@ ## Setup

```
npm install ember-cli-chartist --save-dev
ember install ember-cli-chartist
```

@@ -24,6 +24,9 @@

```
{{chartist-chart data=model.chartData}}
<ChartistChart @type="line" @data={{model.chartData}} />
```
The `data` attribute is the only required attribute. Its value should be an object. Check the [Chartist docs](http://gionkunz.github.io/chartist-js/getting-started.html#as-simple-as-it-can-get) for expected data structure.
* `data` is a required attribute. Its value should be an object. Check the
[Chartist docs](http://gionkunz.github.io/chartist-js/getting-started.html#as-simple-as-it-can-get)
for expected data structure.
* `type` is a required attribute. It can be any of the recognized chat types.

@@ -34,8 +37,9 @@ ### Where does the data come from?

<<<<<<< HEAD
*/app/routes/application.js*
```javascript
import Ember from 'ember';
import Route from '@ember/routing/route';
export default Ember.Route.extend({
model: function () {
export default Route.extend({
model() {
return {

@@ -61,3 +65,3 @@ chartData: {

```
{{chartist-chart type="bar" data=model.chartData}}
<ChartistChart @type="bar" @data={{model.chartData}} />
```

@@ -71,14 +75,18 @@

```
{{chartist-chart ratio="ct-golden-section" data=model.chartData}}
<ChartistChart @ratio="ct-golden-section" @data={{model.chartData}} />
```
See [Chartist docs](http://gionkunz.github.io/chartist-js/getting-started.html#creating-a-chart-using-aspect-ratios) for the full list of ratios and info on how to create your own.
See [Chartist docs](http://gionkunz.github.io/chartist-js/getting-started.html#creating-a-chart-using-aspect-ratios)
for the full list of ratios and info on how to create your own.
### Chart configuration
Chartist charts have a whole bunch of cool configuration options. You can pass those to the `chartist-chart` components with the `options` attribute. You'll need to create the options object in a similar way as you do for the `data` attribute object.
Chartist charts have a whole bunch of cool configuration options. You can pass
those to the `chartist-chart` components with the `options` attribute. You'll
need to create the options object in a similar way as you do for the `data`
attribute object.
*/app/templates/application.hbs*
```
{{chartist-chart options=chartOptions data=model.chartData}}
<ChartistChart @options={{chartOptions}} @data={{model.chartData}} />
```

@@ -88,5 +96,5 @@

```javascript
import Ember from 'ember';
import Controller from '@ember/controller';
export default Ember.ObjectController.extend({
export default Controller.extend({
chartOptions: {

@@ -103,3 +111,4 @@ showArea: true,

See the [Chartist docs](http://gionkunz.github.io/chartist-js/api-documentation.html) for all available config options. There's bunch of good-uns!
See the [Chartist docs](http://gionkunz.github.io/chartist-js/api-documentation.html)
for all available config options. There's bunch of good-uns!

@@ -113,3 +122,3 @@ #### Responsive config

```
{{chartist-chart responsiveOptions=chartResOptions data=model.chartData}}
<ChartistChart @responsiveOptions={{chartResOptions}} @data={{model.chartData}} />
```

@@ -119,5 +128,5 @@

```javascript
import Ember from 'ember';
import Controller from '@ember/controller';
export default Ember.ObjectController.extend({
export default Controller.extend({
chartResOptions: [

@@ -138,8 +147,12 @@ ['screen and (min-width: 640px)', {

There are other ways to configure chartist-chart components that are specific to the addon.
There are other ways to configure chartist-chart components that are specific to
the addon.
**updateOnData**: By default, when the data associated with a chartist-chart is changed, the chart will be updated to reflect the data. That can be turned off by setting updateOnData to false. Note: If you use this option, you will have to manually draw and redraw the chart using Chartist methods.
`updateOnData`: By default, when the data associated with a chartist-chart is
changed, the chart will be updated to reflect the data. That can be turned off
by setting updateOnData to false. Note: If you use this option, you will have
to manually draw and redraw the chart using Chartist methods.
```
{{chartist-chart updateOnData=false}}
<ChartistChart @updateOnData={{false}} />
```

@@ -149,8 +162,8 @@

By default, the compiled `chartist.css` will be included in your app's `vendor.css`. If you want to use custom CSS you can tell the addon to not include the compiled version
If you want to use custom CSS you can tell the addon to not include the compiled version.
In your app's `Brocfile.js`:
In your app's `ember-cli-build.js`:
```javascript
var app = new EmberApp({
let app = new EmberApp({
'ember-cli-chartist': {

@@ -162,8 +175,9 @@ 'useCustomCSS': true

If you use custom CSS, you'll likely want to import the Chartist Scss into your app's scss, you will need to install
[ember-cli-sass](https://www.npmjs.com/package/ember-cli-sass). You can then import the Chartist scss with:
If you use custom CSS, you'll likely want to import the Chartist Scss into your
app's scss, you will need to install [ember-cli-sass](https://www.npmjs.com/package/ember-cli-sass).
You can then import the Chartist scss with:
In `app.scss`
```scss
@import "chartist";
@import "chartist/chartist.scss";
```

@@ -174,3 +188,3 @@

```scss
@import "chartist-settings";
@import "chartist/chartist-settings.scss";
```

@@ -193,3 +207,3 @@

export default ChartistChart.extend({
init: function () {
init() {
getAsyncDataThatReturnsPromise().then(function (data) {

@@ -203,2 +217,3 @@ this.set('data', data);

ratio: 'ct-minor-seventh',
options: {

@@ -231,3 +246,3 @@ showPoint: false,

```
{{chart-fish-over-time}}
<ChartFishOverTime />
```

@@ -256,4 +271,3 @@

* `git clone` this repository
* `npm install`
* `bower install`
* `yarn install`

@@ -265,2 +279,8 @@ ### Running

### Linting
* `yarn lint:js`
* `yarn lint:js -- --fix`
* `yarn lint:hbs`
### Running Tests

@@ -267,0 +287,0 @@ 

.npmignore