fix(RadarChart): fix wrong display polarRadiusAxis and fix missing ce…

…nter
recharts · Jan 30, 2016 · 605e066 · 605e066
1 parent 9c82deb
commit 605e066
Show file tree

Hide file tree

Showing 9 changed files with 334 additions and 127 deletions.
diff --git a/demo/component/DemoRadarItem.js b/demo/component/DemoRadarItem.js
@@ -9,21 +9,21 @@ const DemoRadarItem = ({ radar }) => {
   const angleInterval = 360 / radius.length;
 
   const points = radar.radius.map((v, i) => (
-    [
-      cx + Math.cos(-(startAngle + i * sign * angleInterval) * RADIAN) * v,
-      cy + Math.sin(-(startAngle + i * sign * angleInterval) * RADIAN) * v,
-    ]
+    {
+      x: cx + Math.cos(-(startAngle + i * sign * angleInterval) * RADIAN) * v,
+      y: cy + Math.sin(-(startAngle + i * sign * angleInterval) * RADIAN) * v,
+    }
   ));
 
   return (
     <g>
       <Polygon
-        style={{ fill: '#9597E4', fillOpacity: 0.6, stroke: '#8889DD', strokeWidth: 3 }}
+        fill='#A5D297' fillOpacity={0.3} stroke='#8DC77B' strokeWidth={2}
         points={points}
       />
       {
         points.map((v, i) => {
-          return <Dot key={i} cx={v[0]} cy={v[1]} r={6} style={{ fill: '#F8C12D' }} />;
+          return <Dot key={i} cx={v.x} cy={v.y} r={6} fill='#8889DD'/>;
         })
       }
     </g>

diff --git a/demo/component/DemoTreemapItem.js b/demo/component/DemoTreemapItem.js
@@ -5,7 +5,7 @@ class DemoTreemapItem extends React.Component {
 
   static propTypes = {
     node: PropTypes.object,
-    index: PropTypes.number
+    index: PropTypes.number,
   };
 
   static defaultProps = {};
@@ -15,19 +15,20 @@ class DemoTreemapItem extends React.Component {
   }
 
   render() {
-    const {treemapItemColor, node, index} = this.props;
-    const {x, y, width, height} = node;
+    const { treemapItemColor, node, index } = this.props;
+    const { x, y, width, height } = node;
 
     return (
       <g>
         <rect x={x} y={y} width={width} height={height}
           style={{
-            fill:treemapItemColor[index],
-            stroke:'#fff',
-            strokeWidth:3
-          }}/>
-        <text x={x+width/2} y={y+height/2} textAnchor='middle'>{node.name}</text>
-        <text x={x+3} y={y+17}>{node.rank}</text>
+            fill: treemapItemColor[index],
+            stroke: '#fff',
+            strokeWidth: 3,
+          }}
+        />
+        <text x={x + width / 2} y={y + height / 2} textAnchor="middle">{node.name}</text>
+        <text x={x + 3} y={y + 17}>{node.rank}</text>
       </g>
     );
   }

diff --git a/demo/component/RadarChart.js b/demo/component/RadarChart.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import { Surface, Radar, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis } from 'recharts';
+import DemoRadarItem from './DemoRadarItem';
+
+class RadarDemo extends React.Component {
+  render() {
+    const data = [
+        { name: 'A', value: 420, half: 610 },
+        { name: 'B', value: 460, half: 230 },
+        { name: 'C', value: 999, half: 500 },
+        { name: 'D', value: 500, half: 750 },
+        { name: 'E', value: 864, half: 632 },
+        { name: 'F', value: 650, half: 405 },
+        { name: 'G', value: 765, half: 183 },
+        { name: 'H', value: 365, half: 583 },
+    ];
+
+    return (
+      <div>
+        <RadarChart cx={300} cy={250} outerRadius={150} width={600} height={500} data={data}>
+          <Radar />
+          <PolarGrid />
+          <PolarAngleAxis />
+          <PolarRadiusAxis />
+        </RadarChart>
+
+        <RadarChart cx={300} cy={250} startAngle={45} innerRadius={0} outerRadius={150}
+          width={600} height={500} data={data}
+        >
+          <Radar dataKey="value" fill="#9597E4" fillOpacity={0.6} stroke="#8889DD" strokeWidth={3} />
+          <PolarGrid />
+          <PolarAngleAxis />
+          <PolarRadiusAxis orient="middle" angle={67.5}/>
+        </RadarChart>
+
+        <RadarChart cx={300} cy={250} startAngle={0} innerRadius={0} outerRadius={150} clockWise
+          width={600} height={500} data={data} shape={<DemoRadarItem />}
+        >
+          <Radar dataKey="value" />
+          <Radar dataKey="half" />
+          <PolarGrid outerRadius={180} gridType="polygon" gridCount={4} />
+          <PolarAngleAxis dataKey="name" outerRadius={210} orient="inner" fill="#8889DD" fontSize={8} />
+          <PolarRadiusAxis orient="right" startAngle={0} fill="#666"/>
+        </RadarChart>
+      </div>
+    );
+  }
+}
+
+export default RadarDemo;
diff --git a/demo/component/TreemapChart.js b/demo/component/TreemapChart.js
@@ -1,59 +1,59 @@
 import React from 'react';
-import {TreemapChart} from 'recharts';
+import { TreemapChart } from 'recharts';
 import DemoTreemapItem from './DemoTreemapItem';
 
 class DemoTreemapChart extends React.Component {
   static displayName = 'DemoTreemapChart';
 
-  render () {
+  render() {
     const data = [
-      {rank:'1', name:'A', value:17061682925},
-      {rank:'2', name:'B', value:12490887132},
-      {rank:'3', name:'C', value:10772738863},
-      {rank:'4', name:'D', value:8236223813},
-      {rank:'5', name:'E', value:6583448127},
+      { rank: '1', name: 'A', value: 17061682925 },
+      { rank: '2', name: 'B', value: 12490887132 },
+      { rank: '3', name: 'C', value: 10772738863 },
+      { rank: '4', name: 'D', value: 8236223813 },
+      { rank: '5', name: 'E', value: 6583448127 },
 
-      {rank:'6', name:'F', value:5834718183},
-      {rank:'7', name:'G', value:5559852006},
-      {rank:'8', name:'H', value:4651272674},
-      {rank:'9', name:'I', value:4248844205},
-      {rank:'10', name:'J', value:3862568602},
+      { rank: '6', name: 'F', value: 5834718183 },
+      { rank: '7', name: 'G', value: 5559852006 },
+      { rank: '8', name: 'H', value: 4651272674 },
+      { rank: '9', name: 'I', value: 4248844205 },
+      { rank: '10', name: 'J', value: 3862568602 },
 
-      {rank:'11', name:'K', value:3803070009},
-      {rank:'12', name:'L', value:3480361169},
-      {rank:'13', name:'M', value:3476552989},
-      {rank:'14', name:'N', value:3147229713},
-      {rank:'15', name:'O', value:2907504853},
+      { rank: '11', name: 'K', value: 3803070009 },
+      { rank: '12', name: 'L', value: 3480361169 },
+      { rank: '13', name: 'M', value: 3476552989 },
+      { rank: '14', name: 'N', value: 3147229713 },
+      { rank: '15', name: 'O', value: 2907504853 },
 
-      {rank:'16', name:'P', value:2555558916},
-      {rank:'17', name:'Q', value:2149183029},
-      {rank:'18', name:'H', value:2107468912},
-      {rank:'19', name:'I', value:2088055427},
-      {rank:'20', name:'J', value:1885463047}
+      { rank: '16', name: 'P', value: 2555558916 },
+      { rank: '17', name: 'Q', value: 2149183029 },
+      { rank: '18', name: 'H', value: 2107468912 },
+      { rank: '19', name: 'I', value: 2088055427 },
+      { rank: '20', name: 'J', value: 1885463047 },
     ].reverse();
 
-    const ColorPlatte = ['#8889DD','#9597E4','#8DC77B','#A5D297','#E2CF45','#F8C12D'].reverse();
+    const ColorPlatte = ['#8889DD', '#9597E4', '#8DC77B', '#A5D297', '#E2CF45', '#F8C12D'].reverse();
 
-    const allValue = data.reduce((a, b)=>(a + b.value),0);
-    let treemapItemColor = [];
-    data.reduce((a, b, i)=>{
+    const allValue = data.reduce((a, b) => (a + b.value), 0);
+    const treemapItemColor = [];
+    data.reduce((a, b, i) => {
       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])
+      treemapItemColor.push(ColorPlatte[index]);
       return a + b.value;
     }, 0);
 
     return (
-      <div className='treemap-charts'>
+      <div className="treemap-charts">
         <p>Treemap</p>
-        <div className='treemap-chart-wrapper'>
+        <div className="treemap-chart-wrapper">
           <TreemapChart width={1000} height={500} data={data} ratio={0.5 * (1 + Math.sqrt(5))}/>
         </div>
         <br/>
         <br/>
-        <div className='treemap-chart-wrapper'>
+        <div className="treemap-chart-wrapper">
           <TreemapChart width={1000} height={500} data={data} ratio={0.5 * (1 + Math.sqrt(5))} content={<DemoTreemapItem treemapItemColor={treemapItemColor}/>} />
         </div>
       </div>

diff --git a/demo/component/index.js b/demo/component/index.js
@@ -1,5 +1,4 @@
 import Pie from './Pie';
-import Radar from './Radar';
 
 import CartesianAxis from './CartesianAxis';
 import CartesianGrid from './CartesianGrid';
@@ -20,30 +19,30 @@ import BarChart from './BarChart';
 import ComposedChart from './ComposedChart';
 import PieChart from './PieChart';
 import ScatterChart from './ScatterChart';
+import RadarChart from './RadarChart';
 import RadialBarChart from './RadialBarChart';
 import TreemapChart from './TreemapChart';
 
 export default {
   chart: {
     Pie,
-    Radar
   },
 
   component: {
     Brush,
     CartesianAxis,
     CartesianGrid,
     Legend,
-    PolarGrid,
     PolarRadiusAxis,
     PolarAngleAxis,
+    PolarGrid,
   },
 
   shape: {
     Curve,
     Rectangle,
     Sector,
-    Triangle
+    Triangle,
   },
 
   chartWrapper: {
@@ -53,7 +52,8 @@ export default {
     ComposedChart,
     ScatterChart,
     PieChart,
+    RadarChart,
     RadialBarChart,
-    TreemapChart
+    TreemapChart,
   },
 };