forgot that this pr introduced accessors on parallel coords oto

docs/parallel-coordinates.md

@@ -13,15 +13,15 @@ Just like every other chart and series ParallelCoordinates expects an array of d
 ```javascript
 const PARALLEL_COORDINATES_PROPS = {
   data: [{
-    explosions: 7,
+    neatExplosions: 7,
     wow: 10,
     dog: 8,
     sickMoves: 9,
     nice: 7
   }],
   domains: [
     {name: 'nice', domain: [0, 100]},
-    {name: 'explosions', domain: [6.9, 7.1]},
+    {name: 'explosions', domain: [6.9, 7.1], getValue: d => d.neatExplosions},
     {name: 'wow', domain: [0, 11]},
     {name: 'sickMoves', domain: [0, 20]}
   ],
@@ -44,6 +44,7 @@ The domains allow the user to specify the nature of the variables being plotted.
 ```javascript
 PropTypes.shape({
   name: PropTypes.string.isRequired,
+  getValue: PropTypes.func,
   domain: PropTypes.arrayOf([PropTypes.number]).isRequired,
   tickFormat: PropTypes.func
 })
@@ -52,6 +53,7 @@ PropTypes.shape({
 Let's looks at each member of the object
 
 - name: generates a member of a labelSeries that shows at the end of the corresponding axis
+- getValue: an accessor function that grabs a value from the row being accessed, if this is not provided a default one that uses the name property is used.
 - domain: a pair of numbers that are interpolated between. Setting these values correctly is essential for making your graphic legible! Because it is often the case that there will only be one or two data rows in a parallel coordinates, react-vis requires the user to specify the exact domain for each variable. Without which we would be unable to plot the variables well.
 - tickFormat: allows the user to provide a formatting function for prettifiying the the way that axis interpolates between the domain values.
 

docs/radar-chart.md

@@ -13,15 +13,15 @@ Just like every other chart and series RadarChart expects an array of data, each
 ```javascript
 const RADAR_PROPS = {
   data: [{
-    explosions: 7,
+    neatExplosions: 7,
     wow: 10,
     dog: 8,
     sickMoves: 9,
     nice: 7
   }],
   domains: [
     {name: 'nice', domain: [0, 100]},
-    {name: 'explosions', domain: [6.9, 7.1]},
+    {name: 'explosions', domain: [6.9, 7.1], getValue: d => d.neatExplosions},
     {name: 'wow', domain: [0, 11]},
     {name: 'sickMoves', domain: [0, 20]}
   ],
@@ -46,6 +46,7 @@ The domains allow the user to specify the nature of the variables being plotted.
 ```javascript
 PropTypes.shape({
   name: PropTypes.string.isRequired,
+  getValue: PropTypes.func,
   domain: PropTypes.arrayOf([PropTypes.number]).isRequired,
   tickFormat: PropTypes.func
 })
@@ -54,6 +55,7 @@ PropTypes.shape({
 Let's looks at each member of the object
 
 - name: generates a member of a labelSeries that shows at the end of the corresponding axis
+- getValue: an accessor function that grabs a value from the row being accessed, if this is not provided a default one that uses the name property is used.
 - domain: a pair of numbers that are interpolated between. Setting these values correctly is essential for making your graphic legible! Because it is often the case that there will only be one or two data rows in a radar chart, react-vis requires the user to specify the exact domain for each variable. Without which we would be unable to plot the variables well.
 - tickFormat: allows the user to provide a formatting function for prettifiying the the way that axis interpolates between the domain values.
 

showcase/parallel-coordinates/basic-parallel-coordinates.js

@@ -43,11 +43,11 @@ export default class BasicParallelCoordinates extends Component {
         colorRange={['#172d47', '#911116', '#998965']}
         domains={[
           {name: 'mileage', domain: [0, 10]},
-          {name: 'price', domain: [2, 16], tickFormat: t => `$${basicFormat(t)}`, accessor: d => d.price},
-          {name: 'safety', domain: [5, 10], accessor: d => d.safety},
-          {name: 'performance', domain: [0, 10], accessor: d => d.performance},
-          {name: 'interior', domain: [0, 7], accessor: d => d.interior},
-          {name: 'warranty', domain: [10, 2], accessor: d => d.warranty}
+          {name: 'price', domain: [2, 16], tickFormat: t => `$${basicFormat(t)}`, getValue: d => d.price},
+          {name: 'safety', domain: [5, 10], getValue: d => d.safety},
+          {name: 'performance', domain: [0, 10], getValue: d => d.performance},
+          {name: 'interior', domain: [0, 7], getValue: d => d.interior},
+          {name: 'warranty', domain: [10, 2], getValue: d => d.warranty}
         ]}
         showMarks
         width={400}

showcase/radar-chart/basic-radar-chart.js

@@ -41,11 +41,11 @@ export default class BasicRadarChart extends Component {
         startingAngle={0}
         domains={[
           {name: 'mileage', domain: [0, 10]},
-          {name: 'price', domain: [2, 16], tickFormat: t => `$${basicFormat(t)}`, accessor: d => d.price},
-          {name: 'safety', domain: [5, 10], accessor: d => d.safety},
-          {name: 'performance', domain: [0, 10], accessor: d => d.performance},
-          {name: 'interior', domain: [0, 7], accessor: d => d.interior},
-          {name: 'warranty', domain: [10, 2], accessor: d => d.warranty}
+          {name: 'price', domain: [2, 16], tickFormat: t => `$${basicFormat(t)}`, getValue: d => d.price},
+          {name: 'safety', domain: [5, 10], getValue: d => d.safety},
+          {name: 'performance', domain: [0, 10], getValue: d => d.performance},
+          {name: 'interior', domain: [0, 7], getValue: d => d.interior},
+          {name: 'warranty', domain: [10, 2], getValue: d => d.warranty}
         ]}
         width={400}
         height={300} />

src/parallel-coordinates/index.js

@@ -117,10 +117,10 @@ function getLines(props) {
 
   return data.map((row, rowIndex) => {
     const mappedData = domains.map((domain, index) => {
-      const {accessor, name} = domain;
+      const {getValue, name} = domain;
       return {
         x: name,
-        y: scales[name](accessor ? accessor(row) : row[name])
+        y: scales[name](getValue ? getValue(row) : row[name])
       };
     });
     const lineProps = {

src/radar-chart/index.js

@@ -125,8 +125,8 @@ function getPolygons(props) {
   }, {});
 
   return data.map((row, rowIndex) => {
-    const mappedData = domains.map(({name, accessor}, index) => {
-      const dataPoint = accessor ? accessor(row) : row[name];
+    const mappedData = domains.map(({name, getValue}, index) => {
+      const dataPoint = getValue ? getValue(row) : row[name];
       // error handling if point doesn't exist
       const angle = index / domains.length * Math.PI * 2 + startingAngle;
       // dont let the radius become negative