fix minor issues

docs/build/index.html

@@ -31,5 +31,5 @@
     </div>
 
     <div class="container-fluid" id="container">Loading...</div>
-<script type="text/javascript" src="bundle.a1c15d9f438ce991ce06.js"></script></body>
+<script type="text/javascript" src="bundle.5a32ea5f840fdaca44b2.js"></script></body>
 </html>

docs/src/docs/AreaChart/examples/Area2Datasets.js.example

@@ -5,7 +5,7 @@ class Area2DatasetsExample extends React.Component {
 
     // we have two datasets, but AreaChart takes one combined dataset
     // so combine the two datasets into one using the combineDatasets utility function
-    // (import from 'Reactochart/lib/utils')
+    // (import from 'Reactochart/utils')
     // original datasets are of the shape [{x: ..., y: 20}]
     // combined is of the shape [{x: ..., y0: 20, y1: 30}]
     const combined = utils.Data.combineDatasets([

docs/src/docs/AreaChart/examples/AreaDifference.js.example

@@ -5,7 +5,7 @@ class AreaDifferenceExample extends React.Component {
 
     // we have two datasets, but AreaChart takes one combined dataset
     // so combine the two datasets into one using the combineDatasets utility function
-    // (from 'reactochart/lib/utils/Data')
+    // (from 'reactochart/utils/Data')
     const combined = utils.Data.combineDatasets([
       {data: data1, combineKey: 'x', dataKeys: {y: 'y0'}},
       {data: data2, combineKey: 'x', dataKeys: {y: 'y1'}}

docs/src/docs/BarChart/propDocs.json

@@ -1,5 +1,5 @@
 {
-  "description": "BarChart represents a basic \"Value/Value\" bar chart,\nwhere each bar represents a single independent variable value and a single dependent value,\nwith bars that are centered horizontally on x-value and extend from 0 to y-value,\n(or centered vertically on their y-value and extend from 0 to the x-value, in the case of horizontal chart variant)\neg. http://www.snapsurveys.com/wp-content/uploads/2012/10/bar_2d8.png\n\nFor other bar chart types, see RangeBarChart and AreaBarChart",
+  "description": "BarChart represents a basic \"Value/Value\" bar chart,\nwhere each bar represents a single independent variable value and a single dependent value,\nwith bars that are centered horizontally on x-value and extend from 0 to y-value,\n(or centered vertically on their y-value and extend from 0 to the x-value, in the case of horizontal chart variant)\neg. http://www.snapsu rveys.com/wp-content/uploads/2012/10/bar_2d8.png\n\nFor other bar chart types, see RangeBarChart and AreaBarChart",
   "methods": [
     {
       "name": "getDomain",

docs/src/docs/KernelDensityEstimation/examples/KernelDensityEstimation.js.example

@@ -6,7 +6,7 @@ const KernelDensityEstimationExample = (props) => {
       <XYPlot yDomain={[0,200]} marginLeft={40} marginRight={8} width={700} height={300}>
         <XAxis /><YAxis />
         <Histogram
-          data={randomNormalArr} value={null}
+          data={randomNormalArr} value={d => d}
         />
         <KernelDensityEstimation
           data={randomNormalArr} x={d => d} bandwidth={0.5}

docs/src/docs/ScatterPlot/examples/ScatterPlot.js.example

@@ -14,7 +14,7 @@ const ScatterPlotExample = () => {
   const randomEmoji = (d, i) => _.sample(emojis);
 
   return <div>
-    <XYPlot width={400} height={500}>
+    <XYPlot width={500} height={500}>
       <XAxis title="Phase" />
       <YAxis title="Intensity" />
 

docs/src/docs/XYPlot/examples/CustomSpacing.js.example

@@ -1,13 +1,14 @@
 const SpacingExample = (props) => {
-  const spacing = {left: 10, top: 53, right: 16, bottom: 9};
+  const spacing = {spacingLeft: 10, spacingTop: 53, spacingRight: 16, spacingBottom: 9};
 
   return <div>
-    <XYPlot scaleType="linear" {...{width: 400, height: 350, spacing}}>
+    <XYPlot {...{width: 400, height: 350}} {...spacing}>
       <XAxis />
       <YAxis />
       <LineChart
         data={_.range(100)}
-        getY={d => Math.sin(d*.1)}
+        x={d => d}
+        y={d => Math.sin(d*.1)}
       />
     </XYPlot>
   </div>

docs/src/docs/XYPlot/examples/XYPlot.js.example

@@ -1,61 +1,65 @@
 const MultipleXYExample = (props) => {
   return <div>
-    <XYPlot domain={{y: [-2, 2], x: [-2, 2]}} scaleType="linear" {...{width: 400, height: 400}}>
+    <XYPlot xDomain={[-2, 2]} yDomain={[-2, 2]} {...{width: 400, height: 400}}>
       <XAxis title="Phase" />
       <YAxis title="Intensity" />
 
       <RangeBarChart
         data={_.range(0, 2, .03)}
-        getX={null}
-        getY={d => (Math.sin(d*3) * .7) + 1.2}
-        getYEnd={d => (Math.sin(d*3) * Math.cos(d*3) * .7) + 1.2}
+        x={d => d}
+        y={d => (Math.sin(d*3) * .7) + 1.2}
+        yEnd={d => (Math.sin(d*3) * Math.cos(d*3) * .7) + 1.2}
         barThickness={2}
         barStyle={{fill: '#3690c0'}}
       />
 
       <LineChart
         data={_.range(-2, 0, .005)}
-        getY={d => Math.pow(Math.abs(Math.sin(d*5)), Math.abs(Math.sin(d*.25))) * 1.8}
+        x={d => d}
+        y={d => Math.pow(Math.abs(Math.sin(d*5)), Math.abs(Math.sin(d*.25))) * 1.8}
         lineStyle={{stroke: '#02818a', strokeWidth: 3}}
       />
 
       <ScatterPlot
         data={_.range(-2, 0, .05)}
-        getY={d => Math.pow(2, (d + 2) * 1.8) * 0.1}
+        x={d => d}
+        y={d => Math.pow(2, (d + 2) * 1.8) * 0.1}
         pointSymbol={<rect width={5} height={5} fill="#3690c0" />}
       />
 
       <BarChart
         data={_.range(0, 2, .03)}
-        getY={d => -Math.abs(Math.sin(d*4) * Math.cos(d*3))}
+        x={d => d}
+        y={d => -Math.abs(Math.sin(d*4) * Math.cos(d*3))}
         barThickness={3}
         barStyle={{fill: '#67a9cf'}}
       />
 
       <MarkerLineChart
         data={_.range(0, 1.5, .1)}
-        getY={d => Math.cos(d)}
+        x={d => d}
+        y={d => Math.cos(d)}
         lineStyle={{stroke: '#ec7014', strokeWidth: 3}}
       />
 
       <ColorHeatmap
         data={_.flatten(_.range(-2, 0, .1).map(i => _.range(-2, 0, .1).map(j => [i, j])))}
-        getValue={([i, j]) => Math.sin(i * j * 5)}
-        getX={([i, j]) => i}
-        getXEnd={([i, j]) => i + .1}
-        getY={([i, j]) => j}
-        getYEnd={([i, j]) => j + .1}
+        value={([i, j]) => Math.sin(i * j * 5)}
+        x={([i, j]) => i}
+        xEnd={([i, j]) => i + .1}
+        y={([i, j]) => j}
+        yEnd={([i, j]) => j + .1}
         colors={['#d0d1e6', '#016450']}
         interpolator={'lab'}
       />
 
       <AreaHeatmap
         data={_.flatten(_.range(0, 2, .1).map(i => _.range(-2, -1, .1).map(j => [i, j])))}
-        getArea={([i, j]) => -Math.sin(i * j * 5)}
-        getX={([i, j]) => i}
-        getXEnd={([i, j]) => i + .1}
-        getY={([i, j]) => j}
-        getYEnd={([i, j]) => j + .1}
+        area={([i, j]) => -Math.sin(i * j * 5)}
+        x={([i, j]) => i}
+        xEnd={([i, j]) => i + .1}
+        y={([i, j]) => j}
+        yEnd={([i, j]) => j + .1}
         rectStyle={{fill: '#016450'}}
       />
     </XYPlot>

docs/src/lessons/QuickStart/QuickStartLesson.js

@@ -25,27 +25,27 @@ export default class QuickStartLesson extends React.Component {
         Then you can <code>import</code> individual Reactochart components:
       </p>
       <pre>
-        import LineChart from 'reactochart/lib/LineChart'
+        import LineChart from 'reactochart/LineChart'
       </pre>
       <p>
         The examples in this documentation will omit these imports to save space,
         so make sure you remember to include them in your code to get things working.
         For example, the example below requires importing the following components:
       </p>
       <pre>
-        import XYPlot from 'reactochart/lib/XYPlot';<br/>
-        import XAxis from 'reactochart/lib/XAxis';<br/>
-        import YAxis from 'reactochart/lib/YAxis';<br/>
-        import LineChart from 'reactochart/lib/LineChart';
+        import XYPlot from 'reactochart/XYPlot';<br/>
+        import XAxis from 'reactochart/XAxis';<br/>
+        import YAxis from 'reactochart/YAxis';<br/>
+        import LineChart from 'reactochart/LineChart';
       </pre>
       <p>
         If you prefer, you can import all of Reactochart at once, though this may hinder some optimizations,
         such as <code>webpack</code> tree-shaking:
       </p>
       <pre>
-        import {'{'}XYPlot, XAxis, YAxis, LineChart{'}'} from 'reactochart/lib';<br/>
+        import {'{'}XYPlot, XAxis, YAxis, LineChart{'}'} from 'reactochart';<br/>
         // or <br/>
-        import * as Reactochart from 'reactochart/lib';
+        import * as Reactochart from 'reactochart';
       </pre>
       <p>
         And now, here's our first line chart showing the basic usage of these components. In this and all

package.json

@@ -1,23 +1,26 @@
 {
   "name": "reactochart",
-  "description": "Reactochart - React Charts, graphs and data visualization (UNSTABLE)",
+  "description": "Reactochart - React Charts, graphs and data visualization",
   "author": "Dan Delany <[email protected]>",
   "version": "0.3.1",
-  "main": "lib/index.js",
+  "main": "index.js",
   "files": [
-    "lib/",
-    "src/"
+    "src/",
+    "*.js",
+    "*.js.map"
   ],
   "engines": {
     "node": ">=4.0.0"
   },
   "scripts": {
+    "prepublish": "npm run build",
+    "build": "npm run build-lib && npm run docs",
     "dev": "webpack-dev-server --config webpack.config.base.js",
-    "clean": "node scripts/clean.js",
+    "docs": "npm run make-docs && npm run build-docs",
     "build-lib": "npm run clean && babel src --out-dir ./ --source-maps",
     "build-docs": "BABEL_ENV=production webpack --config webpack.config.build.js",
-    "build": "npm run build-lib && npm run make-docs && npm run build-docs",
     "make-docs": "node scripts/makeDocs.js",
+    "clean": "node scripts/clean.js",
     "serve": "python -m SimpleHTTPServer",
     "test": "npm run test-jsdom",
     "test-browser": "webpack-dev-server --config tests/browser/webpack.config.test.js",

src/AreaChart.js

@@ -72,11 +72,11 @@ export default class AreaChart extends React.Component {
     /**
      * Type of X scale - provided by XYPlot
      */
-    xScaleType: PropTypes.object,
+    xScaleType: PropTypes.string,
     /**
      * Type of Y scale - provided by XYPlot
      */
-    yScaleType: PropTypes.object,
+    yScaleType: PropTypes.string,
   };
   static defaultProps = {
     shouldShowGaps: true,

src/ColorHeatmap.js

@@ -23,7 +23,7 @@ function interpolatorFromType(type) {
 }
 
 function makeColorScale(domain, colors, interpolator) {
-  invariant(domain.length === colors.length, 'ColorHeatmap makeColorScale: domain.length should equal colors.length');
+  // invariant(domain.length === colors.length, 'ColorHeatmap makeColorScale: domain.length should equal colors.length');
 
   if(_.isString(interpolator))
     interpolator = interpolatorFromType(interpolator);

src/utils/resolveXYScales.js

@@ -185,7 +185,7 @@ export default function resolveXYScales(ComposedComponent) {
         }
       }
 
-      if(!isDone()) console.warn(`resolveXYScales was unable to resolve both scale types. xScaleType: ${xScaleType}, yScaleType: ${yScaleType}`);
+      // if(!isDone()) console.warn(`resolveXYScales was unable to resolve both scale types. xScaleType: ${xScaleType}, yScaleType: ${yScaleType}`);
 
       return {xScaleType, yScaleType};
     }
@@ -247,7 +247,7 @@ export default function resolveXYScales(ComposedComponent) {
         }
       }
 
-      if(!isDone()) console.warn(`resolveXYScales was unable to resolve both domains. xDomain: ${xDomain}, yDomain: ${yDomain}`);
+      // if(!isDone()) console.warn(`resolveXYScales was unable to resolve both domains. xDomain: ${xDomain}, yDomain: ${yDomain}`);
 
       return {xDomain, yDomain};
     }