@reactchartjs/react-chart.js - npm Package Compare versions

Comparing version 1.0.0-rc.3 to 1.0.0-rc.4

package.json

 {
   "name": "@reactchartjs/react-chart.js",
-  "version": "1.0.0-rc.3",
-  "description": "React components for Chart.js",
-  "source": "src/index.tsx",
-  "main": "dist/index.js",
-  "module": "dist/index.modern.js",
-  "author": "Jeremy Ayerst",
-  "homepage": "https://github.com/reactchartjs/react-chart.js",
+  "version": "1.0.0-rc.4",
+  "description": "react-chartjs-2",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "jsnext:main": "es/index.js",
+  "author": "reactchartjs",
+  "homepage": "https://github.com/reactchartjs/react-chartjs-2",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/reactchartjs/react-chart.js.git"
+    "url": "https://github.com/reactchartjs/react-chartjs-2.git"
   },
   "bugs": {
-    "url": "https://github.com/reactchartjs/react-chart.js/issues"
+    "url": "https://github.com/reactchartjs/react-chartjs-2/issues"
   },
+  "dependencies": {
+    "lodash": "^4.17.19",
+    "prop-types": "^15.7.2"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.10.5",
+    "@babel/core": "^7.10.5",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/plugin-transform-runtime": "^7.10.5",
+    "@babel/preset-env": "^7.10.4",
+    "@babel/preset-react": "^7.10.4",
+    "@babel/register": "^7.10.5",
+    "@babel/runtime": "^7.10.5",
+    "@kadira/storybook": "^2.35.3",
+    "@rollup/plugin-alias": "^3.1.1",
+    "@rollup/plugin-babel": "^5.1.0",
+    "@rollup/plugin-commonjs": "^14.0.0",
+    "@rollup/plugin-node-resolve": "^8.4.0",
+    "@rollup/plugin-replace": "^2.3.3",
+    "@storybook/react": "^5.3.19",
+    "babelify": "^10.0.0",
+    "brfs": "^2.0.2",
+    "canvas": "^2.6.1",
+    "chai": "^4.2.0",
+    "chart.js": "2.6.0",
+    "cross-env": "^7.0.2",
+    "css-loader": "^3.6.0",
+    "debug": "^4.1.1",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-15": "^1.4.1",
+    "eslint": "^7.5.0",
+    "eslint-plugin-react": "^7.20.3",
+    "gh-pages": "^3.1.0",
+    "gulp": "^4.0.2",
+    "jsdom": "^16.3.0",
+    "mocha": "^8.0.1",
+    "rcolor": "^2.0.2",
+    "react": "^0.14 || ^15.0.0-rc || ^15.0",
+    "react-addons-test-utils": "^15.6.2",
+    "react-dom": "^0.14 || ^15.0.0-rc || ^15.0",
+    "react-test-renderer": "15",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.22.1",
+    "rollup-plugin-generate-html-template": "^1.7.0",
+    "rollup-plugin-uglify": "^6.0.4",
+    "serve": "^11.3.2",
+    "sinon": "^9.0.2",
+    "webpack": "^4.43.0",
+    "webpack-dev-server": "^3.11.0"
+  },
+  "peerDependencies": {
+    "chart.js": "^2.3",
+    "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0",
+    "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+  },
+  "browserify-shim": {
+    "react": "global:React",
+    "react-dom": "global:ReactDOM",
+    "chart.js": "global:Chart"
+  },
+  "scripts": {
+    "clean": "rimraf lib es dist",
+    "build:cjs": "babel src --out-dir lib",
+    "build:es": "cross-env BABEL_ENV=jsnext babel src --out-dir es",
+    "build:umd": "cross-env BABEL_ENV=rollup NODE_ENV=development rollup -c -o dist/react-chartjs-2.js",
+    "build:umd:min": "cross-env BABEL_ENV=rollup NODE_ENV=production rollup -c -o dist/react-chartjs-2.min.js",
+    "build": "npm run clean && npm run build:cjs && npm run build:es && npm run build:umd && npm run build:umd:min",
+    "examples": "rollup -c example/rollup.config.js",
+    "examples:clean": "rimraf example/dist",
+    "examples:deploy": "npm run examples:clean && npm run examples && gh-pages -d example/dist",
+    "start": "npm run examples",
+    "lint": "eslint ./; true",
+    "test": "mocha test/config/setup.js test/__tests__/**/*",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
+  },
   "keywords": [
@@ -23,60 +99,5 @@ "chart",
     "react-chartjs-2",
-    "react chart.js",
-    "react-chart.js"
+    "react chart.js"
   ],
-  "scripts": {
-    "build": "microbundle-crl --no-compress --format modern,cjs",
-    "start": "microbundle-crl watch --no-compress --format modern,cjs",
-    "prepublish": "run-s build",
-    "test": "run-s test:unit test:lint test:build",
-    "test:build": "run-s build",
-    "test:lint": "eslint src/**/*.{ts,tsx}",
-    "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
-    "test:watch": "react-scripts test --env=jsdom",
-    "format": "prettier --write src",
-    "predeploy": "cd example && npm install && npm run build",
-    "deploy": "gh-pages -d example/build"
-  },
-  "dependencies": {
-    "lodash": "^4.17.19"
-  },
-  "peerDependencies": {
-    "chart.js": "^2.3.0",
-    "react": "^16.8.0 || ^17.0.0"
-  },
-  "devDependencies": {
-    "@testing-library/jest-dom": "^5.5.0",
-    "@testing-library/react": "^10.0.3",
-    "@types/chart.js": "^2.9.19",
-    "@types/jest": "^25.1.4",
-    "@types/lodash": "^4.14.150",
-    "@types/react": "^16.9.27",
-    "@typescript-eslint/eslint-plugin": "^2.26.0",
-    "@typescript-eslint/parser": "^2.26.0",
-    "babel-eslint": "^10.0.3",
-    "chart.js": "^2.3.0",
-    "cross-env": "^7.0.2",
-    "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.7.0",
-    "eslint-config-standard": "^14.1.0",
-    "eslint-config-standard-react": "^9.2.0",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-node": "^11.0.0",
-    "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-react": "^7.17.0",
-    "eslint-plugin-standard": "^4.0.1",
-    "gh-pages": "^2.2.0",
-    "jest-canvas-mock": "^2.2.0",
-    "microbundle-crl": "^0.13.11",
-    "npm-run-all": "^4.1.5",
-    "prettier": "^2.0.4",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-scripts": "^3.4.3",
-    "react-test-renderer": "^17.0.1"
-  },
-  "files": [
-    "dist"
-  ]
+  "types": "./index.d.ts"
 }

README.md

@@ -1,201 +0,138 @@
-[![build status](https://img.shields.io/travis/jerairrest/react-chart.js.svg?branch=master&style=flat-square)](https://travis-ci.org/reactchartjs/react-chart.js)
-[![version](https://img.shields.io/npm/v/@reactchartjs/react-chart.js?style=flat-square)](https://www.npmjs.com/package/@reactchartjs/react-chart.js)
-[![downloads](https://img.shields.io/npm/dm/@reactchartjs/react-chart.js.svg?style=flat-square)](https://npm-stat.com/charts.html?package=@reactchartjs/react-chart.js&from=2016-01-01)
+[![build status](	https://img.shields.io/travis/jerairrest/react-chartjs-2.svg?branch=master&style=flat-square)](https://travis-ci.org/jerairrest/react-chartjs-2)
+[![version](https://img.shields.io/npm/v/react-chartjs-2.svg?style=flat-square)](https://www.npmjs.com/package/react-chartjs-2)
+[![downloads](https://img.shields.io/npm/dm/react-chartjs-2.svg?style=flat-square)](https://npm-stat.com/charts.html?package=react-chartjs-2&from=2016-01-01)
 [![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square)](http://opensource.org/licenses/MIT)
 
-# @reactchartjs/react-chart.js
+### Looking for maintainers!!
 
-React wrapper for [Chart.js](http://www.chartjs.org/docs/#getting-started)
+# react-chartjs-2
 
-## Getting started
+React wrapper for [Chart.js 2](http://www.chartjs.org/docs/#getting-started)
+Open for PRs and contributions!
 
-### Install library with peer dependencies
+# UPDATE to 2.x
+As of 2.x we have made chart.js a peer dependency for greater flexibility. Please add chart.js as a dependency on your project to use 2.x. Currently, 2.5.x is the recommended version of chart.js to use.
 
-```bash
-npm install --save @reactchartjs/react-chart.js chart.js
+## Demo & Examples
 
-# or
+Live demo: [reactchartjs.github.io/react-chartjs-2](https://reactchartjs.github.io/react-chartjs-2/)
 
-yarn add @reactchartjs/react-chart.js chart.js
+To build the examples locally, run:
+
+```bash
+npm install
+npm start
 ```
 
-###### We recommend using `chart.js ^2.5.0`
+Then open [`localhost:8000`](http://localhost:8000) in a browser.
 
-### Usage
+## Demo & Examples via React Storybook
 
-```jsx
-import { Doughnut } from '@reactchartjs/react-chart.js';
+We have to build the package, then you can run storybook.
 
-<Doughnut data={...} />
+```bash
+npm run build
+npm run storybook
 ```
 
-## Examples
+Then open [`localhost:6006`](http://localhost:6006) in a browser.
 
-Live: [reactchartjs.github.io/react-chartjs-2](https://reactchartjs.github.io/react-chartjs-2/#/)
 
-See [these examples](example) for more information
+## Installation via NPM
 
-## Configure
+```bash
+npm install --save react-chartjs-2 chart.js
+```
 
-### Chart props
+## Installation via YARN
 
-```js
-  id?: string;
-  height?: number;
-  width?: number;
-  redraw?: boolean;
-  type: Chart.ChartType
-  data: Chart.ChartData | (canvas: HTMLCanvasElement | null) => Chart.ChartData;
-  options?: Chart.ChartOptions;
-  plugins?: Chart.PluginServiceRegistrationOptions[];
-  getDatasetAtEvent?: (dataset: Array<{}>, event: React.MouseEvent<HTMLCanvasElement>) => void;
-  getElementAtEvent?: (element: [{}], event: React.MouseEvent<HTMLCanvasElement>) => void;
-  getElementsAtEvent?: (elements: Array<{}>, event: React.MouseEvent<HTMLCanvasElement>) => void;
+```bash
+yarn add react-chartjs-2 chart.js
 ```
 
-#### id
 
-Type `string`
-Default: `undefined`
+## Usage
 
-ID attribute applied to the rendered canvas
+Check example/src/components/* for usage.
 
-#### height
+```js
+import { Doughnut } from 'react-chartjs-2';
 
-Type: `number`
-Default: `150`
-
-Height attribute applied to the rendered canvas
-
-#### width
-
-Type: `number`
-Default: `300`
-
-Width attribute applied to the rendered canvas
-
-#### redraw
-
-Type: `boolean`
-Default: `false`
-
-If true, will tear down and redraw chart on all updates
-
-#### type
-
-Type: `'line' | 'bar' | 'horizontalBar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'`
-
-Chart.js chart type (required only on ChartComponent)
-
-#### data (required)
-
-Type: `Chart.ChartData | (canvas: HTMLCanvasElement | null) => Chart.ChartData`
-
-The data object that is passed into the Chart.js chart ([more info](https://www.chartjs.org/docs/latest/getting-started/)).
-
-This can also be a function, that receives a canvas element and returns the data object.
-
-```tsx
-const data = canvas => {
-    const ctx = canvas.getContext('2d');
-    const g = ctx.createLinearGradient(...);
-
-    return {
-        datasets: [{
-            backgroundColor: g,
-            // ...the rest
-        }],
-    };
-}
+<Doughnut data={...} />
 ```
 
-#### options
+### Properties
 
-Type: `Chart.ChartOptions`
+* data: (PropTypes.object | PropTypes.func).isRequired,
+* width: PropTypes.number,
+* height: PropTypes.number,
+* id: PropTypes.string,
+* legend: PropTypes.object,
+* options: PropTypes.object,
+* redraw: PropTypes.bool,
+* getDatasetAtEvent: PropTypes.func,
+* getElementAtEvent: PropTypes.func,
+* getElementsAtEvent: PropTypes.func
+* onElementsClick: PropTypes.func, // alias for getElementsAtEvent (backward compatibility)
 
-The options object that is passed into the Chart.js chart ([more info](https://www.chartjs.org/docs/latest/general/options.html))
+### Custom size
+In order for Chart.js to obey the custom size you need to set `maintainAspectRatio` to false, example:
 
-#### plugins
-
-Type: `Chart.PluginServiceRegistrationOptions[]`
-
-The plugins array that is passed into the Chart.js chart ([more info](https://www.chartjs.org/docs/latest/developers/plugins.html))
-
-#### getDatasetAtEvent
-
-Type: `(dataset: Array<{}>, event: React.MouseEvent<HTMLCanvasElement>) => void`
-Default: `undefined`
-
-Proxy for Chart.js `getDatasetAtEvent`. Calls with dataset and triggering event
-
-#### getElementAtEvent
-
-Type: `(element: [{}], event: React.MouseEvent<HTMLCanvasElement>) => void`
-Default: `undefined`
-
-Proxy for Chart.js `getElementAtEvent`. Calls with single element array and triggering event
-
-#### getElementsAtEvent
-
-Type: `(elements: Array<{}>, event: React.MouseEvent<HTMLCanvasElement>) => void`
-Default: `undefined`
-
-Proxy for Chart.js `getElementsAtEvent`. Calls with element array and triggering event
-
-## FAQ
-
-### Why doesn't my chart maintain it's width/height?
-
-In order for Chart.js to obey the custom size you need to set `maintainAspectRatio` to false
-
-```tsx
+```js
 <Bar
-	data={data}
-	width={100}
-	height={50}
-	options={{ maintainAspectRatio: false }}
+  data={data}
+  width={100}
+  height={50}
+  options={{ maintainAspectRatio: false }}
 />
 ```
 
-### How do I access my chart's instance?
+### Chart.js instance
+Chart.js instance can be accessed by placing a ref to the element as:
 
-The Chart.js instance can be accessed by placing a ref to the element as:
+```js
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.chartReference = React.createRef();
+  }
 
-```tsx
-const App => {
-  const ref = useRef();
+  componentDidMount() {
+    console.log(this.chartReference); // returns a Chart.js instance reference
+  }
 
-  return <Doughnut ref={ref} data={data} options={options} />;
-};
+  render() {
+    return (<Doughnut ref={this.chartReference} data={data} options={options} />)
+  }
+}
 ```
 
-### How do I acess the canvas context?
+### Getting context for data generation
+Canvas node and hence context, that can be used to create CanvasGradient background,
+is passed as argument to data if given as function:
 
-The canvas node and hence context can be accessed within the data function.
 This approach is useful when you want to keep your components pure.
 
-```tsx
+```js
 render() {
   const data = (canvas) => {
-    const ctx = canvas.getContext('2d')
+    const ctx = canvas.getContext("2d")
     const gradient = ctx.createLinearGradient(0,0,100,0);
-
+    ...
     return {
+      ...
       backgroundColor: gradient
-      // ...the rest
+      ...
     }
   }
 
-  return <Line data={data} />;
+  return (<Line data={data} />)
 }
 ```
 
-## Additional Information
-
-### Defaults
-
+### Chart.js Defaults
 Chart.js defaults can be set by importing the `defaults` object:
 
-```tsx
-import { defaults } from '@reactchartjs/react-chart.js';
+```javascript
+import { defaults } from 'react-chartjs-2';
 
@@ -208,13 +145,15 @@ // Disable animating charts by default.
 
-```tsx
-import { defaults } from '@reactchartjs/react-chart.js';
+```js
+import { defaults } from 'react-chartjs-2';
 import merge from 'lodash.merge';
+// or
+// import { merge } from 'lodash';
 
 merge(defaults, {
-	global: {
-		animation: false,
-		line: {
-			borderColor: '#F85F73',
-		},
-	},
+  global: {
+    animation: false,
+    line: {
+      borderColor: '#F85F73',
+     },
+  },
 });
@@ -228,3 +167,3 @@ ```
 ```JavaScript
-import { Chart } from '@reactchartjs/react-chart.js';
+import { Chart } from 'react-chartjs-2';
 
@@ -240,2 +179,42 @@ componentWillMount() {
 
+### Scatter Charts
+
+If you're using Chart.js 2.6 and below, add the `showLines: false` property to your chart options. This was later [added](https://github.com/chartjs/Chart.js/commit/7fa60523599a56255cde78a49e848166bd233c6e) in the default config, so users of later versions would not need to do this extra step.
+
+### Events
+
+#### onElementsClick || getElementsAtEvent (function)
+
+A function to be called when mouse clicked on chart elememts, will return all element at that point as an array. [Check](https://github.com/chartjs/Chart.js/blob/master/docs/docs/developers/api.md#getelementsatevente)
+
+```js
+{
+  onElementsClick: (elems) => {},
+  getElementsAtEvent: (elems) => {},
+  // `elems` is an array of chartElements
+}
+
+```
+#### getElementAtEvent (function)
+
+Calling getElementAtEvent(event) on your Chart instance passing an argument of an event, or jQuery event, will return the single element at the event position. If there are multiple items within range, only the first is returned [Check](https://github.com/chartjs/Chart.js/blob/master/docs/docs/developers/api.md#getelementatevente)
+
+```js
+{
+  getElementAtEvent: (elems) => {},
+  // => returns the first element at the event point.
+}
+```
+
+#### getDatasetAtEvent (function)
+
+Looks for the element under the event point, then returns all elements from that dataset. This is used internally for 'dataset' mode highlighting [Check](https://github.com/chartjs/Chart.js/blob/master/docs/docs/developers/api.md#getdatasetatevente)
+
+```js
+{
+  getDatasetAtEvent: (dataset) => {}
+  // `dataset` is an array of chartElements
+}
+```
+
 ### Working with Multiple Datasets
@@ -248,9 +227,13 @@
 
-## Development
+## Development (`src`, `lib` and the build process)
 
-**NOTE:** The source code for the component is in `src`. A transpiled CommonJS version (generated with Babel) is available in `dist` for use with node.js, browserify and webpack. A UMD bundle is also built to `dist`, which can be included without the need for any build system.
+**NOTE:** The source code for the component is in `src`. A transpiled CommonJS version (generated with Babel) is available in `lib` for use with node.js, browserify and webpack. A UMD bundle is also built to `dist`, which can be included without the need for any build system.
 
+To build, watch and serve the examples (which will also watch the component source), run `npm start`. If you just want to watch changes to `src` and rebuild `lib`, run `npm run watch` (this is useful if you are working with `npm link`).
+
+
 ## License
 
-[MIT Licensed](LICENSE)
-Copyright (c) 2020 Jeremy Ayerst
+[MIT Licensed](/LICENSE.md)
+Copyright (c) 2017 Jeremy Ayerst
+

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package 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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package 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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Minified code

Quality

This 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

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

262314

increased by462.97%

Number of package files

16

increased by33.33%

Lines of code

6241

increased by1358.18%

Number of low maintenance alerts

0

decreased by-100%

Worsened metrics

Dependency count

5

increased by66.67%

Dev dependency count

44

increased by46.67%

Number of lines in readme file

236

decreased by-6.72%

Number of low supply chain risk alerts

18

increased byInfinity%

Number of medium supply chain risk alerts

4

increased byInfinity%

Dependency changes

• + Addedprop-types@^15.7.2

• + Addedprop-types@15.8.1(transitive)

• + Addedreact-dom@17.0.2(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedscheduler@0.20.2(transitive)