chartogram - npm Package Compare versions

Comparing version 0.1.20 to 0.1.21

package.json

 {
   "name": "chartogram",
-  "version": "0.1.20",
+  "version": "0.1.21",
   "description": "Charts in JS with no dependencies",
@@ -30,3 +30,3 @@ "main": "index.commonjs.js",
     "rimraf": "^2.5.0",
-    "rollup": "^1.2.3",
+    "rollup": "^1.9.0",
     "rollup-plugin-terser": "^4.0.4"
@@ -33,0 +33,0 @@ },

README.md

@@ -5,2 +5,4 @@ # chartogram
 
+Also includes a [React](#react) component for those who're using React.
+
 [DEMO](https://catamphetamine.github.io/chartogram)
@@ -43,2 +45,3 @@
     name: string,
+    color: string,
     points: Number[]
@@ -66,2 +69,3 @@ }[]
       name: 'Temperature',
+      color: '#cc0000',
       points: [
@@ -76,2 +80,3 @@ 60,
       name: 'CPU load',
+      color: '#00aa00',
       points: [
@@ -118,34 +123,13 @@ 95,
 import React from 'react'
-import PropTypes from 'prop-types'
-import chartogram from 'chartogram'
+import Chartogram from 'chartogram/react'
 import 'chartogram/style.css'
 
-class Chartogram extends React.Component {
-  static propTypes = {
-    data: PropTypes.shape({
-      x: PropTypes.shape({
-        points: PropTypes.arrayOf(PropTypes.number).isRequired
-      }).isRequired,
-      y: PropTypes.arrayOf(PropTypes.shape({
-        id: PropTypes.string.isRequired,
-        name: PropTypes.string.isRequired,
-        points: PropTypes.arrayOf(PropTypes.number).isRequired
-      })).isRequired
-    }).isRequired,
-    title: PropTypes.string.isRequired
-  }
-
-  node = React.createRef()
-
-  componentDidMount() {
-    const { data, title } = this.props
-    this.cleanUp = chartogram(this.node.current, data, title)
-  }
-
-  componentWillUnmount() {
-    this.cleanUp
-  }
-
+export default class Page extends React.Component {
   render() {
-    return <section ref={this.node}/>
+    return (
+      <Chartogram
+        data={data}
+        title={title}
+        options={options}/>
+    )
   }
@@ -215,2 +199,2 @@ }
 * [`Math.log10`](https://babeljs.io/docs/en/babel-polyfill)
-* [`classList`](https://github.com/eligrey/classList.js/)
+* [`classList`](https://github.com/eligrey/classList.js/)

New alerts

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

Improved metrics

Total package byte prevSize

1472925

19.95%

Number of package files

64

20.75%

Lines of code

6420

6.2%

Worsened metrics

Number of low quality alerts

3

50%

Number of lines in readme file

195

-7.14%

No dependency changes