recharts - npm Package Compare versions

Comparing version 0.3.0 to 0.3.1

demo/component/TreemapChart.js

 import React from 'react';
 import {TreemapChart, TreemapItem} from 'recharts';
+import DemoTreemapItem from './DemoTreemapItem';
 
-export default React.createClass({
+class DemoTreemapChart extends React.Component {
+  static displayName = 'DemoTreemapChart';
+
   render () {
     const data = [
-      {name:'呵呵', value:17061682925},
-      {name:'呵呵', value:12490887132},
-      {name:'呵呵', value:10772738863},
-      {name:'呵呵', value:8236223813},
-      {name:'呵呵', value:6583448127},
+      {rank:'1', name:'呵呵', value:17061682925},
+      {rank:'2', name:'呵呵', value:12490887132},
+      {rank:'3', name:'呵呵', value:10772738863},
+      {rank:'4', name:'呵呵', value:8236223813},
+      {rank:'5', name:'呵呵', value:6583448127},
 
-      {name:'呵呵', value:5834718183},
-      {name:'呵呵', value:5559852006},
-      {name:'呵呵', value:4651272674},
-      {name:'呵呵', value:4248844205},
-      {name:'呵呵', value:3862568602},
-      //
-      // {name:'呵呵', value:3803070009},
-      // {name:'呵呵', value:3480361169},
-      // {name:'呵呵', value:3476552989},
-      // {name:'呵呵', value:3147229713},
-      // {name:'呵呵', value:2907504853},
-      //
-      // {name:'呵呵', value:2555558916},
-      // {name:'呵呵', value:2149183029},
-      // {name:'呵呵', value:2107468912},
-      // {name:'呵呵', value:2088055427},
-      // {name:'呵呵', value:1885463047}
+      {rank:'6', name:'呵呵', value:5834718183},
+      {rank:'7', name:'呵呵', value:5559852006},
+      {rank:'8', name:'呵呵', value:4651272674},
+      {rank:'9', name:'呵呵', value:4248844205},
+      {rank:'10', name:'呵呵', value:3862568602},
+
+      {rank:'11', name:'呵呵', value:3803070009},
+      {rank:'12', name:'呵呵', value:3480361169},
+      {rank:'13', name:'呵呵', value:3476552989},
+      {rank:'14', name:'呵呵', value:3147229713},
+      {rank:'15', name:'呵呵', value:2907504853},
+
+      {rank:'16', name:'呵呵', value:2555558916},
+      {rank:'17', name:'呵呵', value:2149183029},
+      {rank:'18', name:'呵呵', value:2107468912},
+      {rank:'19', name:'呵呵', value:2088055427},
+      {rank:'20', name:'呵呵', value:1885463047}
     ].reverse();
@@ -35,10 +38,12 @@
     const allValue = data.reduce((a, b)=>(a + b.value),0);
-
+    let treemapItemColor = [];
     data.reduce((a, b, i)=>{
-      const index = (a / allValue) < ((i+1) / data.length) ? Math.floor((a / allValue) * ColorPlatte.length) : i
-      data[i].style = {
-        fill: ColorPlatte[index]
-      };
+      const index =
+        ((a + b.value) / allValue) - ((i + 1) / data.length) < 1E-10 ?
+        Math.ceil(((a + b.value) / allValue) * ColorPlatte.length) - 1
+        : i;
+      treemapItemColor.push(ColorPlatte[index])
       return a + b.value;
     }, 0);
+
     return (
@@ -48,12 +53,7 @@ <div className='treemap-charts'>
         <div className='treemap-chart-wrapper'>
-          <TreemapChart
-            width={1100}
-            height={320}
-            data={data}
-            ratio={0.5 * (1 + Math.sqrt(5))}
-            style={{
-                stroke:'#fff',
-                strokeWidth:3
-              }}
-            />
+          <TreemapChart width={1000} height={500} data={data} ratio={0.5 * (1 + Math.sqrt(5))}>
+            <TreemapItem element={
+              <DemoTreemapItem treemapItemColor={treemapItemColor}/>
+            }/>
+          </TreemapChart>
         </div>
@@ -63,2 +63,4 @@ </div>
   }
-});
+}
+
+export default DemoTreemapChart;

node_modules/history/package.json

@@ -5,5 +5,6 @@ {
       "history@1.17.0",
-      "/Users/ling/Documents/gitwork/recharts"
+      "/Users/evilucifero/eldata/ma/recharts"
     ]
   ],
+  "_cnpm_publish_time": 1450554142419,
   "_from": "history@1.17.0",
@@ -32,7 +33,7 @@ "_id": "history@1.17.0",
   ],
-  "_resolved": "http://registry.npmjs.org/history/-/history-1.17.0.tgz",
+  "_resolved": "http://registry.npm.alibaba-inc.com/history/download/history-1.17.0.tgz",
   "_shasum": "c5483caa5a1d1fea00a1a7d8d19b874016711d29",
   "_shrinkwrap": null,
   "_spec": "history@1.17.0",
-  "_where": "/Users/ling/Documents/gitwork/recharts",
+  "_where": "/Users/evilucifero/eldata/ma/recharts",
   "authors": [
@@ -81,4 +82,7 @@ "Michael Jackson"
   "dist": {
+    "key": "history/-/history-1.17.0.tgz",
+    "noattachment": false,
     "shasum": "c5483caa5a1d1fea00a1a7d8d19b874016711d29",
-    "tarball": "http://registry.npmjs.org/history/-/history-1.17.0.tgz"
+    "size": 48467,
+    "tarball": "http://registry.npm.alibaba-inc.com/history/download/history-1.17.0.tgz"
   },
@@ -109,2 +113,3 @@ "files": [
   "optionalDependencies": {},
+  "publish_time": 1450554142419,
   "readme": "ERROR: No README data found!",
@@ -111,0 +116,0 @@ "repository": {

package.json

 {
   "name": "recharts",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "React charts",
@@ -5,0 +5,0 @@ "main": "src/index.js",

src/chartWrapper/TreemapChart.js

 import React, {PropTypes} from 'react';
+
 import Surface from '../container/Surface';
 import Layer from '../container/Layer';
 
+import ReactUtils from '../util/ReactUtils';
+
+import TreemapItem from './TreemapItem';
+
 class TreemapChart extends React.Component {
@@ -142,4 +147,5 @@ static displayName = 'TreemapChart';
   renderAllNodes() {
-    const {width, height, data, style} = this.props;
-
+    const {width, height, data, children} = this.props;
+    const treemapItem = children.props.element;
+    
     const nodes = {
@@ -156,9 +162,10 @@ value: data.reduce((a, b)=>(a + b.value), 0),
 
-    return nodes.children.map((v, i) => (
+    return nodes.children.map(
+      (v, i) =>
       <Layer key={i}>
-        <rect x={v.x} y={v.y} width={v.dx} height={v.dy} style={Object.assign({}, style, v.style)}/>
-        <text x={v.x + 4} y={v.y + 22} fill={'#fff'} fontSize={18}>{'' + (nodes.children.length - i)}</text>
-        <text x={v.x + v.dx / 2 + 2 - v.name.length * 16 / 2} y={v.y + v.dy / 2 + 2 + 16 / 2} fill={'#fff'} fontSize={16}>{'' + v.name}</text>
+        {
+          React.cloneElement(treemapItem, {node: v, index: i})
+        }
       </Layer>
-    ));
+    );
   }
@@ -165,0 +172,0 @@

src/index.js

@@ -31,2 +31,3 @@ import Surface from './container/Surface';
 import TreemapChart from './chartWrapper/TreemapChart';
+import TreemapItem from './chartWrapper/TreemapItem';
 
@@ -67,5 +68,5 @@ import ScatterChart from './chartWrapper/ScatterChart';
   RadialBarChart, RadialBarItem,
-  TreemapChart,
+  TreemapChart, TreemapItem,
 
   XAxis, YAxis, ZAxis,
 };

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

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

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

Improved metrics

Total package byte prevSize

2336797

increased by0.07%

Number of package files

148

increased by1.37%

Lines of code

31299

increased by0.15%

Worsened metrics

Number of medium supply chain risk alerts

2

increased by100%

No dependency changes