react-chartjs-2
Advanced tools
Comparing version
@@ -15,3 +15,2 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; | ||
import isEqual from 'lodash/isEqual'; | ||
import find from 'lodash/find'; | ||
import keyBy from 'lodash/keyBy'; | ||
@@ -226,3 +225,2 @@ | ||
type = _props2.type, | ||
redraw = _props2.redraw, | ||
plugins = _props2.plugins; | ||
@@ -249,3 +247,2 @@ | ||
width = _props3.width, | ||
onElementsClick = _props3.onElementsClick, | ||
id = _props3.id; | ||
@@ -252,0 +249,0 @@ |
@@ -24,6 +24,2 @@ 'use strict'; | ||
var _find = require('lodash/find'); | ||
var _find2 = _interopRequireDefault(_find); | ||
var _keyBy = require('lodash/keyBy'); | ||
@@ -250,3 +246,2 @@ | ||
type = _props2.type, | ||
redraw = _props2.redraw, | ||
plugins = _props2.plugins; | ||
@@ -273,3 +268,2 @@ | ||
width = _props3.width, | ||
onElementsClick = _props3.onElementsClick, | ||
id = _props3.id; | ||
@@ -276,0 +270,0 @@ |
{ | ||
"name": "react-chartjs-2", | ||
"version": "2.7.4", | ||
"version": "2.7.5", | ||
"description": "react-chartjs-2", | ||
@@ -5,0 +5,0 @@ "main": "lib/index.js", |
@@ -6,2 +6,4 @@ [](https://travis-ci.org/jerairrest/react-chartjs-2) | ||
### Looking for maintainers!! | ||
# react-chartjs-2 | ||
@@ -43,3 +45,3 @@ | ||
```bash | ||
npm install react-chartjs-2 chart.js --save | ||
npm install --save react-chartjs-2 chart.js | ||
``` | ||
@@ -53,3 +55,3 @@ | ||
```js | ||
import {Doughnut} from 'react-chartjs-2'; | ||
import { Doughnut } from 'react-chartjs-2'; | ||
@@ -78,8 +80,6 @@ <Doughnut data={...} /> | ||
<Bar | ||
data={data} | ||
width={100} | ||
height={50} | ||
options={{ | ||
maintainAspectRatio: false | ||
}} | ||
data={data} | ||
width={100} | ||
height={50} | ||
options={{ maintainAspectRatio: false }} | ||
/> | ||
@@ -92,9 +92,10 @@ ``` | ||
```js | ||
chartReference = {}; | ||
componentDidMount() { | ||
console.log(this.chartReference); // returns a Chart.js instance reference | ||
} | ||
render() { | ||
componentDidMount() { | ||
console.log(this.refs.chart.chart_instance); // returns a Chart.js instance reference | ||
} | ||
return ( | ||
<Doughnut ref='chart' data={data} /> | ||
) | ||
return (<Doughnut ref={(reference) => this.chartReference = reference } data={data} />) | ||
} | ||
@@ -111,16 +112,14 @@ ``` | ||
render() { | ||
const data = (canvas) => { | ||
const ctx = canvas.getContext("2d") | ||
const gradient = ctx.createLinearGradient(0,0,100,0); | ||
... | ||
return { | ||
... | ||
backgroundColor: gradient | ||
... | ||
} | ||
} | ||
const data = (canvas) => { | ||
const ctx = canvas.getContext("2d") | ||
const gradient = ctx.createLinearGradient(0,0,100,0); | ||
... | ||
return { | ||
... | ||
backgroundColor: gradient | ||
... | ||
} | ||
} | ||
return ( | ||
<Line data={data} /> | ||
) | ||
return (<Line data={data} />) | ||
} | ||
@@ -148,8 +147,8 @@ ``` | ||
merge(defaults, { | ||
global: { | ||
animation: false, | ||
line: { | ||
borderColor: '#F85F73', | ||
}, | ||
}, | ||
global: { | ||
animation: false, | ||
line: { | ||
borderColor: '#F85F73', | ||
}, | ||
}, | ||
}); | ||
@@ -166,7 +165,7 @@ ``` | ||
componentWillMount() { | ||
Chart.pluginService.register({ | ||
afterDraw: function (chart, easing) { | ||
// Plugin code. | ||
} | ||
}); | ||
Chart.pluginService.register({ | ||
afterDraw: function (chart, easing) { | ||
// Plugin code. | ||
} | ||
}); | ||
} | ||
@@ -187,5 +186,5 @@ ``` | ||
{ | ||
onElementsClick: (elems) => {}, | ||
getElementsAtEvent: (elems) => {}, | ||
// `elems` is an array of chartElements | ||
onElementsClick: (elems) => {}, | ||
getElementsAtEvent: (elems) => {}, | ||
// `elems` is an array of chartElements | ||
} | ||
@@ -200,3 +199,3 @@ | ||
{ | ||
getElementAtEvent: (elems) => {}, | ||
getElementAtEvent: (elems) => {}, | ||
// => returns the first element at the event point. | ||
@@ -212,4 +211,4 @@ } | ||
{ | ||
getDatasetAtEvent: (dataset) => {} | ||
// `dataset` is an array of chartElements | ||
getDatasetAtEvent: (dataset) => {} | ||
// `dataset` is an array of chartElements | ||
} | ||
@@ -234,4 +233,4 @@ ``` | ||
MIT Licensed | ||
[MIT Licensed](/LICENSE.md) | ||
Copyright (c) 2017 Jeremy Ayerst | ||
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
URL strings
Supply chain riskPackage contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.
Found 1 instance in 1 package
Uses eval
Supply chain riskPackage uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
URL strings
Supply chain riskPackage contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.
Found 1 instance in 1 package
0
-100%5
-70.59%1
-50%347298
-31.36%15
-11.76%1552
-73.07%225
-0.44%