converted axes to classes

finnfiddle · Jul 11, 2017 · fb8f27f · fb8f27f
1 parent 132f481
commit fb8f27f
Show file tree

Hide file tree

Showing 14 changed files with 443 additions and 56 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -26,6 +26,7 @@
     "radix": 0,
     "react/jsx-no-bind": 1,
     "react/no-did-mount-set-state": 1,
+    "react/prefer-stateless-function": 0,
     "spaced-comment": 0,
     "strict": 0,
   },

diff --git a/README.md b/README.md
@@ -458,10 +458,10 @@ import { Pack } from 'number-picture';
     })
     .sum(datum => datum.value)
   }
-  size={[400, 400]}
+  size={[200, 200]}
   includeRoot={false}
 >
-  <Group x={-200} y={-200}>
+  <Group x={-100} y={-100}>
     <Circle
       cx={ownProps => ownProps.datum.x}
       cy={ownProps => ownProps.datum.y}
@@ -728,18 +728,20 @@ The TransitionGroup will wrap the rendered children in an svg `g` element.
 
 ```javascript
 import { Circle, TransitionGroup } from 'number-picture';
+```
 
+```javascript
 <TransitionGroup>
   <Circle
-    cx={ownProps => ownProps.datum.value * 100}
+    cx={ownProps => ownProps.datum.value}
     cy={100}
     r={20}
     fill='black'
     datum={{ value: 100 }}
     enterDatum={{ value: -100 }}
+    exitDatum={{ value: 800 }}
     enterDuration={5000}
     updateDuration={5000}
-    exitDatum={{ value: 800 }}
     exitDuration={5000}
   />
 </TransitionGroup>
@@ -795,21 +797,19 @@ Available values are:
 
 ```javascript
 import { Circle, TransitionGroup } from 'number-picture';
+```
 
+```javascript
 <TransitionGroup>
   <Circle
-    cx={ownProps => ownProps.datum.value * 100}
-    cy={100}
+    cx={ownProps => ownProps.datum.value}
+    cy={0}
     r={20}
     fill='black'
+    datum={{ value: 100 }}
     enterDatum={{ value: -100 }}
-    enterDuration={5000}
     enterEase='easeBounce'
-    updateDuration={5000}
-    enterEase='easeBack'
-    exitDatum={{ value: 800 }}
-    exitDuration={5000}
-    enterEase='easeElastic'
+    enterDuration={5000}
   />
 </TransitionGroup>
 ```

diff --git a/cjs/AxisBottom.js b/cjs/AxisBottom.js
@@ -41,7 +41,72 @@
     return target;
   };
 
-  exports.default = function (props) {
-    return _react2.default.createElement(_Axis2.default, _extends({}, props, { placement: 'bottom' }));
-  };
+  function _classCallCheck(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError("Cannot call a class as a function");
+    }
+  }
+
+  var _createClass = function () {
+    function defineProperties(target, props) {
+      for (var i = 0; i < props.length; i++) {
+        var descriptor = props[i];
+        descriptor.enumerable = descriptor.enumerable || false;
+        descriptor.configurable = true;
+        if ("value" in descriptor) descriptor.writable = true;
+        Object.defineProperty(target, descriptor.key, descriptor);
+      }
+    }
+
+    return function (Constructor, protoProps, staticProps) {
+      if (protoProps) defineProperties(Constructor.prototype, protoProps);
+      if (staticProps) defineProperties(Constructor, staticProps);
+      return Constructor;
+    };
+  }();
+
+  function _possibleConstructorReturn(self, call) {
+    if (!self) {
+      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    }
+
+    return call && (typeof call === "object" || typeof call === "function") ? call : self;
+  }
+
+  function _inherits(subClass, superClass) {
+    if (typeof superClass !== "function" && superClass !== null) {
+      throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
+    }
+
+    subClass.prototype = Object.create(superClass && superClass.prototype, {
+      constructor: {
+        value: subClass,
+        enumerable: false,
+        writable: true,
+        configurable: true
+      }
+    });
+    if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+  }
+
+  var AxisBottom = function (_Component) {
+    _inherits(AxisBottom, _Component);
+
+    function AxisBottom() {
+      _classCallCheck(this, AxisBottom);
+
+      return _possibleConstructorReturn(this, (AxisBottom.__proto__ || Object.getPrototypeOf(AxisBottom)).apply(this, arguments));
+    }
+
+    _createClass(AxisBottom, [{
+      key: 'render',
+      value: function render() {
+        return _react2.default.createElement(_Axis2.default, _extends({}, this.props, { placement: 'bottom' }));
+      }
+    }]);
+
+    return AxisBottom;
+  }(_react.Component);
+
+  exports.default = AxisBottom;
 });
diff --git a/cjs/AxisLeft.js b/cjs/AxisLeft.js
@@ -41,7 +41,72 @@
     return target;
   };
 
-  exports.default = function (props) {
-    return _react2.default.createElement(_Axis2.default, _extends({}, props, { placement: 'left' }));
-  };
+  function _classCallCheck(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError("Cannot call a class as a function");
+    }
+  }
+
+  var _createClass = function () {
+    function defineProperties(target, props) {
+      for (var i = 0; i < props.length; i++) {
+        var descriptor = props[i];
+        descriptor.enumerable = descriptor.enumerable || false;
+        descriptor.configurable = true;
+        if ("value" in descriptor) descriptor.writable = true;
+        Object.defineProperty(target, descriptor.key, descriptor);
+      }
+    }
+
+    return function (Constructor, protoProps, staticProps) {
+      if (protoProps) defineProperties(Constructor.prototype, protoProps);
+      if (staticProps) defineProperties(Constructor, staticProps);
+      return Constructor;
+    };
+  }();
+
+  function _possibleConstructorReturn(self, call) {
+    if (!self) {
+      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    }
+
+    return call && (typeof call === "object" || typeof call === "function") ? call : self;
+  }
+
+  function _inherits(subClass, superClass) {
+    if (typeof superClass !== "function" && superClass !== null) {
+      throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
+    }
+
+    subClass.prototype = Object.create(superClass && superClass.prototype, {
+      constructor: {
+        value: subClass,
+        enumerable: false,
+        writable: true,
+        configurable: true
+      }
+    });
+    if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+  }
+
+  var AxisBottom = function (_Component) {
+    _inherits(AxisBottom, _Component);
+
+    function AxisBottom() {
+      _classCallCheck(this, AxisBottom);
+
+      return _possibleConstructorReturn(this, (AxisBottom.__proto__ || Object.getPrototypeOf(AxisBottom)).apply(this, arguments));
+    }
+
+    _createClass(AxisBottom, [{
+      key: 'render',
+      value: function render() {
+        return _react2.default.createElement(_Axis2.default, _extends({}, this.props, { placement: 'left' }));
+      }
+    }]);
+
+    return AxisBottom;
+  }(_react.Component);
+
+  exports.default = AxisBottom;
 });
diff --git a/cjs/AxisRight.js b/cjs/AxisRight.js
@@ -41,7 +41,72 @@
     return target;
   };
 
-  exports.default = function (props) {
-    return _react2.default.createElement(_Axis2.default, _extends({}, props, { placement: 'right' }));
-  };
+  function _classCallCheck(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError("Cannot call a class as a function");
+    }
+  }
+
+  var _createClass = function () {
+    function defineProperties(target, props) {
+      for (var i = 0; i < props.length; i++) {
+        var descriptor = props[i];
+        descriptor.enumerable = descriptor.enumerable || false;
+        descriptor.configurable = true;
+        if ("value" in descriptor) descriptor.writable = true;
+        Object.defineProperty(target, descriptor.key, descriptor);
+      }
+    }
+
+    return function (Constructor, protoProps, staticProps) {
+      if (protoProps) defineProperties(Constructor.prototype, protoProps);
+      if (staticProps) defineProperties(Constructor, staticProps);
+      return Constructor;
+    };
+  }();
+
+  function _possibleConstructorReturn(self, call) {
+    if (!self) {
+      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    }
+
+    return call && (typeof call === "object" || typeof call === "function") ? call : self;
+  }
+
+  function _inherits(subClass, superClass) {
+    if (typeof superClass !== "function" && superClass !== null) {
+      throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
+    }
+
+    subClass.prototype = Object.create(superClass && superClass.prototype, {
+      constructor: {
+        value: subClass,
+        enumerable: false,
+        writable: true,
+        configurable: true
+      }
+    });
+    if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+  }
+
+  var AxisBottom = function (_Component) {
+    _inherits(AxisBottom, _Component);
+
+    function AxisBottom() {
+      _classCallCheck(this, AxisBottom);
+
+      return _possibleConstructorReturn(this, (AxisBottom.__proto__ || Object.getPrototypeOf(AxisBottom)).apply(this, arguments));
+    }
+
+    _createClass(AxisBottom, [{
+      key: 'render',
+      value: function render() {
+        return _react2.default.createElement(_Axis2.default, _extends({}, this.props, { placement: 'right' }));
+      }
+    }]);
+
+    return AxisBottom;
+  }(_react.Component);
+
+  exports.default = AxisBottom;
 });
diff --git a/cjs/AxisTop.js b/cjs/AxisTop.js
@@ -41,7 +41,72 @@
     return target;
   };
 
-  exports.default = function (props) {
-    return _react2.default.createElement(_Axis2.default, _extends({}, props, { placement: 'top' }));
-  };
+  function _classCallCheck(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError("Cannot call a class as a function");
+    }
+  }
+
+  var _createClass = function () {
+    function defineProperties(target, props) {
+      for (var i = 0; i < props.length; i++) {
+        var descriptor = props[i];
+        descriptor.enumerable = descriptor.enumerable || false;
+        descriptor.configurable = true;
+        if ("value" in descriptor) descriptor.writable = true;
+        Object.defineProperty(target, descriptor.key, descriptor);
+      }
+    }
+
+    return function (Constructor, protoProps, staticProps) {
+      if (protoProps) defineProperties(Constructor.prototype, protoProps);
+      if (staticProps) defineProperties(Constructor, staticProps);
+      return Constructor;
+    };
+  }();
+
+  function _possibleConstructorReturn(self, call) {
+    if (!self) {
+      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    }
+
+    return call && (typeof call === "object" || typeof call === "function") ? call : self;
+  }
+
+  function _inherits(subClass, superClass) {
+    if (typeof superClass !== "function" && superClass !== null) {
+      throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
+    }
+
+    subClass.prototype = Object.create(superClass && superClass.prototype, {
+      constructor: {
+        value: subClass,
+        enumerable: false,
+        writable: true,
+        configurable: true
+      }
+    });
+    if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+  }
+
+  var AxisBottom = function (_Component) {
+    _inherits(AxisBottom, _Component);
+
+    function AxisBottom() {
+      _classCallCheck(this, AxisBottom);
+
+      return _possibleConstructorReturn(this, (AxisBottom.__proto__ || Object.getPrototypeOf(AxisBottom)).apply(this, arguments));
+    }
+
+    _createClass(AxisBottom, [{
+      key: 'render',
+      value: function render() {
+        return _react2.default.createElement(_Axis2.default, _extends({}, this.props, { placement: 'top' }));
+      }
+    }]);
+
+    return AxisBottom;
+  }(_react.Component);
+
+  exports.default = AxisBottom;
 });
diff --git a/index.html b/index.html
@@ -80,12 +80,14 @@
           }
           const chart = document.createElement('DIV');
           $(block).parent().after(chart);
-          const renderCode = `
-            const component = ${Babel.transform(innerText, {
+          let renderCode = `${Babel.transform(innerText, {
               presets: [['es2015', { "modules": false }], 'stage-0', 'react'],
             }).code}
             ReactDOM.render(component, chart);
           `;
+          const componentStart = renderCode.indexOf('React.createElement');
+          renderCode = `${renderCode.slice(0, componentStart)} 
+            const component = ${renderCode.slice(componentStart)}`;
           eval(renderCode);
           $(block).parent().after(
             $('<a />')