react-matrix - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

examples/index.css

+.Matrix .Grid {
+  stroke: #bdc3c7; }
+.Matrix .Cell.available {
+  fill: #ecf0f1; }
+.Matrix .Cell.barrier {
+  fill: #e74c3c; }
+.Matrix .Cell.path {
+  fill: #3498db; }
+.Matrix .Cell.pipette {
+  fill: #34495e; }
+.Matrix .Cell.component {
+  fill: #1abc9c; }

examples/matrix.scss

+$colorGrid:#BDC3C7;
+$colorAvailable:#ECF0F1;
+$colorPath:#3498DB;
+$colorBarrier:#E74C3C;
+$colorPipette:#34495E;
+$colorComponent:#1ABC9C;
+
+$colorList: (
+  ("available", $colorAvailable),
+  ("barrier", $colorBarrier),
+  ("path", $colorPath),
+  ("pipette", $colorPipette),
+  ("component", $colorComponent)
+);
+
+.Matrix {
+  .Grid {
+    stroke: $colorGrid;
+  }
+
+  .Cell {
+    @each $colorMap in $colorList {
+      $state: nth($colorMap, 1);
+      $color: nth($colorMap, 2);
+
+      &.#{$state} {
+        fill: $color;
+      }
+    }
+  }
+}

test/test-utils.js

+/**
+ * @jsx React.DOM
+ */
+
+'use strict';
+
+jest.autoMockOff();
+
+describe('Matrix', () => {
+  var scale;
+
+  beforeEach(() => {
+    scale = require('../utils/scale');
+  });
+
+  it('should be requirable', function() {
+    expect(!!scale.linear).toBe(true);
+  });
+
+  describe('range', function() {
+    it('should equal d3', function() {
+      var rangeU = scale.linear([0, 10], [0, 20]);
+
+      expect(rangeU(1)).toEqual(2);
+    });
+
+    it('should equal d3', function() {
+      var domain = [10,20];
+      var range = [10,60];
+      var rangeU = scale.linear(domain, range);
+
+      expect(rangeU(10)).toEqual(10);
+    });
+
+    it('should equal d3', function() {
+      var domain = [50,39];
+      var range = [0,60];
+      var rangeU = scale.linear(domain, range);
+
+      expect(rangeU(10)|0).toEqual(218);
+    });
+  });
+
+});

dist/react-matrix.js

@@ -1,1 +0,1 @@
-!function(e,r){"object"==typeof exports&&"object"==typeof module?module.exports=r(require("react")):"function"==typeof define&&define.amd?define(["react"],r):"object"==typeof exports?exports.Matrix=r(require("react")):e.Matrix=r(e.React)}(this,function(e){return function(e){function r(s){if(t[s])return t[s].exports;var i=t[s]={exports:{},id:s,loaded:!1};return e[s].call(i.exports,i,i.exports,r),i.loaded=!0,i.exports}var t={};return r.m=e,r.c=t,r.p="",r(0)}([function(e,r,t){"use strict";t(3);var s=t(1),i=t(7),p=t(5),o=s.createClass({displayName:"Matrix",propTypes:{squareSize:s.PropTypes.number.isRequired,matrix:s.PropTypes.array.isRequired,onCellClick:s.PropTypes.func,cellStates:s.PropTypes.object},render:function(){var e=this.props.squareSize*this.props.matrix[0].length,r=this.props.squareSize*this.props.matrix.length;return i({width:e,height:r},p({className:"Grid",onCellClick:this.props.onCellClick,matrix:this.props.matrix,squareSize:this.props.squareSize,cellStates:this.props.cellStates}))}});e.exports=o},function(r){r.exports=e},function(e){e.exports={linear:function(e,r){return function(t){return r[0]+(r[1]-r[0])*((t-e[0])/(e[1]-e[0]))}}}},function(){},function(e,r,t){"use strict";var s=t(1),i=t(8),p=s.createClass({displayName:"Cell",propTypes:{x:s.PropTypes.number.isRequired,y:s.PropTypes.number.isRequired,size:s.PropTypes.number.isRequired,cellState:s.PropTypes.string,onClick:s.PropTypes.func},handleClick:function(){this.props.onClick&&this.props.onClick({x:this.props.x/this.props.size,y:this.props.y/this.props.size,cellState:this.props.cellState})},render:function(){var e={Cell:!0};return this.props.cellState&&(e[this.props.cellState]=!0),s.DOM.rect({className:i(e),x:this.props.x,y:this.props.y,width:this.props.size,height:this.props.size,onClick:this.handleClick})}});e.exports=p},function(e,r,t){"use strict";var s=t(1),i=t(6),p=s.createClass({displayName:"Grid",propTypes:{matrix:s.PropTypes.array.isRequired,squareSize:s.PropTypes.number.isRequired,onCellClick:s.PropTypes.func,cellStates:s.PropTypes.object},render:function(){var e=this.props.matrix.map(function(e,r){return i({onCellClick:this.props.onCellClick,key:r,dataRow:e,cellStates:this.props.cellStates,squareSize:this.props.squareSize})}.bind(this));return s.DOM.g(null,e)}});e.exports=p},function(e,r,t){"use strict";var s=t(1),i=t(2),p=t(4),o=s.createClass({displayName:"Row",propTypes:{dataRow:s.PropTypes.array.isRequired,squareSize:s.PropTypes.number.isRequired,key:s.PropTypes.number.isRequired,onCellClick:s.PropTypes.func,cellStates:s.PropTypes.object},render:function(){var e=i.linear([0,this.props.dataRow.length],[0,this.props.squareSize*this.props.dataRow.length]),r=this.props.dataRow.map(function(r,t){return p({x:e(t),y:e(this.props.key),cellState:this.props.cellStates&&this.props.cellStates[r],size:this.props.squareSize,onClick:this.props.onCellClick,key:this.props.key+1+t})}.bind(this));return s.DOM.g({className:"Row"},r)}});e.exports=o},function(e,r,t){"use strict";var s=t(1),i=(t(2),s.createClass({displayName:"Svg",propTypes:{width:s.PropTypes.number.isRequired,height:s.PropTypes.number.isRequired},render:function(){return s.DOM.svg({width:this.props.width,height:this.props.height,className:"Matrix"},this.props.children)}}));e.exports=i},function(e){"use strict";e.exports=function(e){return"object"!=typeof e?Array.prototype.join.call(arguments," "):Object.keys(e).filter(function(r){return e[r]}).join(" ")}}])});
+!function(e,r){"object"==typeof exports&&"object"==typeof module?module.exports=r(require("react")):"function"==typeof define&&define.amd?define(["react"],r):"object"==typeof exports?exports.Matrix=r(require("react")):e.Matrix=r(e.React)}(this,function(e){return function(e){function r(t){if(s[t])return s[t].exports;var i=s[t]={exports:{},id:t,loaded:!1};return e[t].call(i.exports,i,i.exports,r),i.loaded=!0,i.exports}var s={};return r.m=e,r.c=s,r.p="",r(0)}([function(e,r,s){var t=s(1),i=s(5),p=s(3),o=t.createClass({displayName:"Matrix",propTypes:{squareSize:t.PropTypes.number.isRequired,matrix:t.PropTypes.array.isRequired,onCellClick:t.PropTypes.func,cellStates:t.PropTypes.object,className:t.PropTypes.string},render:function(){var e=this.props.squareSize*this.props.matrix[0].length,r=this.props.squareSize*this.props.matrix.length;return t.createElement(i,{className:this.props.className,width:e,height:r},t.createElement(p,{className:"Grid",onCellClick:this.props.onCellClick,matrix:this.props.matrix,squareSize:this.props.squareSize,cellStates:this.props.cellStates}))}});e.exports=o},function(r){r.exports=e},function(e,r,s){var t=s(1),i=s(6),p=t.createClass({displayName:"Cell",propTypes:{x:t.PropTypes.number.isRequired,y:t.PropTypes.number.isRequired,size:t.PropTypes.number.isRequired,cellState:t.PropTypes.string,onClick:t.PropTypes.func},handleClick:function(){this.props.onClick&&this.props.onClick({x:this.props.x/this.props.size,y:this.props.y/this.props.size,cellState:this.props.cellState})},render:function(){var e={Cell:!0};return this.props.cellState&&(e[this.props.cellState]=!0),t.createElement("rect",{className:i(e),x:this.props.x,y:this.props.y,width:this.props.size,height:this.props.size,onClick:this.handleClick})}});e.exports=p},function(e,r,s){var t=s(1),i=s(4),p=t.createClass({displayName:"Grid",propTypes:{matrix:t.PropTypes.array.isRequired,squareSize:t.PropTypes.number.isRequired,onCellClick:t.PropTypes.func,cellStates:t.PropTypes.object},render:function(){var e=this.props.matrix.map(function(e,r){return t.createElement(i,{onCellClick:this.props.onCellClick,num:r,key:r,dataRow:e,cellStates:this.props.cellStates,squareSize:this.props.squareSize})}.bind(this));return t.createElement("g",null,e)}});e.exports=p},function(e,r,s){"use strict";var t=s(1),i=s(7),p=s(2),o=t.createClass({displayName:"Row",propTypes:{dataRow:t.PropTypes.array.isRequired,squareSize:t.PropTypes.number.isRequired,num:t.PropTypes.number.isRequired,onCellClick:t.PropTypes.func,cellStates:t.PropTypes.object},render:function(){var e=i.linear([0,this.props.dataRow.length],[0,this.props.squareSize*this.props.dataRow.length]),r=this.props.dataRow.map(function(r,s){return t.createElement(p,{x:e(s),y:e(this.props.num),cellState:this.props.cellStates&&this.props.cellStates[r],size:this.props.squareSize,onClick:this.props.onCellClick,key:this.props.num+1+s})}.bind(this));return t.createElement("g",{className:"Row"},r)}});e.exports=o},function(e,r,s){var t=s(1),i=t.createClass({displayName:"Svg",propTypes:{width:t.PropTypes.number.isRequired,height:t.PropTypes.number.isRequired,className:t.PropTypes.string},render:function(){return t.createElement("svg",{width:this.props.width,height:this.props.height,className:this.props.className?this.props.className:"Matrix"},this.props.children)}});e.exports=i},function(e){"use strict";e.exports=function(e){return"object"!=typeof e?Array.prototype.join.call(arguments," "):Object.keys(e).filter(function(r){return e[r]}).join(" ")}},function(e){e.exports={linear:function(e,r){return function(s){return r[0]+(r[1]-r[0])*((s-e[0])/(e[1]-e[0]))}}}}])});

examples/index.html

@@ -6,3 +6,3 @@ <!DOCTYPE html>
   <title>Document</title>
-  <link rel="stylesheet" href="../dist/react-matrix.css">
+  <link rel="stylesheet" href="index.css">
 </head>
@@ -15,7 +15,7 @@ <body>
 
-  <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.2/react-with-addons.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.12.0/react-with-addons.js"></script>
   <script src="../dist/react-matrix.js"></script>
-  <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.2/JSXTransformer.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.12.0/JSXTransformer.js"></script>
   <script type="text/jsx" src="index.jsx"></script>
 </body>
 </html>

examples/index.jsx

@@ -1,4 +0,1 @@
-/**
- * @jsx React.DOM
- */
 var SQUARE_SIZE = 20;
@@ -66,5 +63,7 @@ var update = React.addons.update;
 
-React.renderComponent(
+React.render(
   <App />,
   document.getElementById('matrix')
 );
+
+window.React = React;

package.json

 {
   "name": "react-matrix",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "React Component for representing Matrixes.",
@@ -38,11 +38,9 @@ "main": "dist/react-matrix.js",
     "jest-cli": "^0.1.18",
-    "jsx-loader": "^0.11.0",
-    "react-tools": "^0.11.2",
+    "jsx-loader": "^0.12.1",
+    "react": "^0.12.0",
+    "react-tools": "^0.12.0",
     "sass-loader": "^0.2.0",
     "style-loader": "^0.8.0",
     "webpack": "^1.4.2"
-  },
-  "dependencies": {
-    "react": "^0.11.2"
   }
 }

src/Cell.jsx

@@ -1,7 +0,1 @@
-/**
- * @jsx React.DOM
- */
-
-'use strict';
-
 var React = require('react');
@@ -8,0 +2,0 @@ var cx = require('./cx');

src/Grid.jsx

@@ -1,7 +0,1 @@
-/**
- * @jsx React.DOM
- */
-
-'use strict';
-
 var React = require('react');
@@ -21,2 +15,3 @@ var Row = require('./Row.jsx');
       <Row onCellClick={this.props.onCellClick}
+           num={i}
            key={i}
@@ -23,0 +18,0 @@ dataRow={row}

src/Matrix.jsx

@@ -1,10 +0,1 @@
-/**
- * @jsx React.DOM
- */
-
-'use strict';
-
-if (process.env.NODE_ENV !== 'test')
-  require('./Matrix.scss');
-
 var React = require('react');
@@ -20,3 +11,5 @@ var Svg = require('./Svg.jsx');
     onCellClick: React.PropTypes.func,
-    cellStates: React.PropTypes.object
+    cellStates: React.PropTypes.object,
+
+    className: React.PropTypes.string,
   },
@@ -29,3 +22,4 @@
     return (
-      <Svg width={width}
+      <Svg className={this.props.className}
+           width={width}
            height={height}>
@@ -32,0 +26,0 @@ <Grid className="Grid"

src/Row.jsx

@@ -1,5 +0,1 @@
-/**
- * @jsx React.DOM
- */
-
 'use strict';
@@ -16,3 +12,3 @@
     squareSize: React.PropTypes.number.isRequired,
-    key: React.PropTypes.number.isRequired,
+    num: React.PropTypes.number.isRequired,
     onCellClick: React.PropTypes.func,
@@ -29,7 +25,7 @@ cellStates: React.PropTypes.object
       return <Cell x={range(j)}
-                   y={range(this.props.key)}
+                   y={range(this.props.num)}
                    cellState={this.props.cellStates && this.props.cellStates[cel]}
                    size={this.props.squareSize}
                    onClick={this.props.onCellClick}
-                   key={this.props.key + 1 + j} />
+                   key={this.props.num + 1 + j} />
     });
@@ -36,0 +32,0 @@

src/Svg.jsx

@@ -1,13 +0,7 @@
-/**
- * @jsx React.DOM
- */
-
-'use strict';
-
 var React = require('react');
-var scale = require('../utils/scale');
 var Svg = React.createClass({
   propTypes: {
     width: React.PropTypes.number.isRequired,
-    height: React.PropTypes.number.isRequired
+    height: React.PropTypes.number.isRequired,
+    className: React.PropTypes.string
   },
@@ -19,3 +13,3 @@
            height={this.props.height}
-           className="Matrix">
+           className={this.props.className ? this.props.className : 'Matrix'}>
         {this.props.children}
@@ -22,0 +16,0 @@ </svg>

utils/scale.js

@@ -10,7 +10,5 @@ module.exports = {
 	 */
-	linear: function (d1, d2) {
-		return function (num) {
-      return d2[0] + (d2[1] - d2[0]) * ((num-d1[0])/(d1[1]-d1[0]));
-    };
+	linear: (d1, d2) => {
+		return (num) => d2[0] + (d2[1] - d2[0]) * ((num-d1[0])/(d1[1]-d1[0]));
 	}
 };

dist/react-matrix.css

-.Matrix .Grid{stroke:#BDC3C7}.Matrix .Cell.available{fill:#ECF0F1}.Matrix .Cell.barrier{fill:#E74C3C}.Matrix .Cell.path{fill:#3498DB}.Matrix .Cell.pipette{fill:#34495E}.Matrix .Cell.component{fill:#1ABC9C}

dist/react-matrix.css.map

-{"version":3,"sources":[],"names":[],"mappings":"","file":"react-matrix.css","sourceRoot":""}

dist/react-matrix.js.map

-{"version":3,"sources":["webpack:///webpack/universalModuleDefinition","webpack:///webpack/bootstrap a920d0458b381dc1e3ce","webpack:///./src/Matrix.jsx","webpack:///external {\"root\":\"React\",\"commonjs\":\"react\",\"commonjs2\":\"react\",\"amd\":\"react\"}","webpack:///./src/Svg.jsx","webpack:///./src/Grid.jsx","webpack:///./src/Row.jsx","webpack:///./utils/scale.js","webpack:///./src/Cell.jsx","webpack:///./src/Matrix.scss","webpack:///./src/cx.js"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD,O;ACVA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,uBAAe;AACf;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA,wC;;;;;;;;;;ACtCA;AACA;AACA;;AAEA;;AAEA;;AAEA;AACA;AACA;;AAEA,iCAAgC;AAChC;AACA;AACA;AACA;AACA;AACA,IAAG;;AAEH;AACA;AACA;;AAEA;AACA,YAAW;AACX,2BAA0B;AAC1B,eAAc;AACd;AACA;AACA;AACA,iDAAgD;AAChD;AACA;AACA;AACA,EAAC;;AAED;;;;;;;;;;ACrCA,gD;;;;;;;;;ACAA;AACA;AACA;;AAEA;;AAEA;AACA;AACA,8BAA6B;AAC7B;AACA;AACA;AACA,IAAG;;AAEH;AACA;AACA,sBAAqB;AACrB;AACA,gCAA+B;AAC/B;AACA;AACA;AACA;AACA,EAAC;;AAED;;;;;;;;;;ACzBA;AACA;AACA;;AAEA;;AAEA;AACA;;AAEA,+BAA8B;AAC9B;AACA;AACA;AACA;AACA;AACA,IAAG;;AAEH;AACA;AACA,QAAO,YAAY;AACnB;AACA;AACA;AACA,8CAA6C,GAAG;AAChD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,EAAC;;AAED;;;;;;;;;;AClCA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;;AAGA,8BAA6B;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA,IAAG;;AAEH;AACA;AACA;AACA;;AAEA;AACA,oBAAmB;AACnB;AACA;AACA;AACA;AACA,gDAA+C;AAC/C,MAAK;;AAEL;AACA,oBAAmB,iBAAiB;AACpC;AACA;AACA;AACA;AACA,EAAC;;AAED;;;;;;;;;;AC1CA;;AAEA;AACA;AACA;AACA,cAAa,MAAM;AACnB,cAAa,MAAM;AACnB,cAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;ACdA;AACA;AACA;;AAEA;;AAEA;AACA;;AAEA,+BAA8B;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA,IAAG;;AAEH;AACA;AACA;AACA;AACA;AACA,MAAK;AACL,IAAG;;AAEH;AACA,oBAAmB;;AAEnB;;AAEA;AACA,uBAAsB;AACtB;AACA;AACA;AACA;AACA,uCAAsC;AACtC;AACA;AACA,EAAC;;AAED;;;;;;;;;;AC1CA,0C;;;;;;;;;ACAA;;AAEA;AACA;AACA;AACA,WAAU;AACV;AACA;AACA;AACA;AACA,uDAAsD,2BAA2B;AACjF","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"react\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"react\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"Matrix\"] = factory(require(\"react\"));\n\telse\n\t\troot[\"Matrix\"] = factory(root[\"React\"]);\n})(this, function(__WEBPACK_EXTERNAL_MODULE_1__) {\nreturn \n\n\n/** WEBPACK FOOTER **\n ** webpack/universalModuleDefinition\n **/"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(0);\n\n\n/** WEBPACK FOOTER **\n ** webpack/bootstrap a920d0458b381dc1e3ce\n **/","/**\n * @jsx React.DOM\n */\n\n'use strict';\n\nrequire('./Matrix.scss');\n\nvar React = require('react');\nvar Svg = require('./Svg.jsx');\nvar Grid = require('./Grid.jsx');\n\nvar Matrix = React.createClass({displayName: 'Matrix',\n  propTypes: {\n    squareSize: React.PropTypes.number.isRequired,\n    matrix: React.PropTypes.array.isRequired,\n    onCellClick: React.PropTypes.func,\n    cellStates: React.PropTypes.object\n  },\n\n  render:function () {\n    var width = this.props.squareSize * this.props.matrix[0].length;\n    var height = this.props.squareSize * this.props.matrix.length;\n\n    return (\n      Svg({width: width, \n           height: height}, \n        Grid({className: \"Grid\", \n              onCellClick: this.props.onCellClick, \n              matrix: this.props.matrix, \n              squareSize: this.props.squareSize, \n              cellStates: this.props.cellStates})\n      )\n    );\n  }\n});\n\nmodule.exports = Matrix;\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./src/Matrix.jsx\n ** module id = 0\n ** module chunks = 0\n **/","module.exports = __WEBPACK_EXTERNAL_MODULE_1__;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** external {\"root\":\"React\",\"commonjs\":\"react\",\"commonjs2\":\"react\",\"amd\":\"react\"}\n ** module id = 1\n ** module chunks = 0\n **/","/**\n * @jsx React.DOM\n */\n\n'use strict';\n\nvar React = require('react');\nvar scale = require('../utils/scale');\nvar Svg = React.createClass({displayName: 'Svg',\n  propTypes: {\n    width: React.PropTypes.number.isRequired,\n    height: React.PropTypes.number.isRequired\n  },\n\n  render:function () {\n    return (\n      React.DOM.svg({width: this.props.width, \n           height: this.props.height, \n           className: \"Matrix\"}, \n        this.props.children\n      )\n    );\n  }\n});\n\nmodule.exports = Svg;\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./src/Svg.jsx\n ** module id = 2\n ** module chunks = 0\n **/","/**\n * @jsx React.DOM\n */\n\n'use strict';\n\nvar React = require('react');\nvar Row = require('./Row.jsx');\n\nvar Grid = React.createClass({displayName: 'Grid',\n  propTypes: {\n    matrix: React.PropTypes.array.isRequired,\n    squareSize: React.PropTypes.number.isRequired,\n    onCellClick: React.PropTypes.func,\n    cellStates: React.PropTypes.object\n  },\n\n  render:function () {\n    var rows = this.props.matrix.map(function(row, i) \n      {return Row({onCellClick: this.props.onCellClick, \n           key: i, \n           dataRow: row, \n           cellStates: this.props.cellStates, \n           squareSize: this.props.squareSize});}.bind(this)\n    );\n\n    return (\n      React.DOM.g(null, \n        rows\n      )\n    );\n  }\n});\n\nmodule.exports = Grid;\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./src/Grid.jsx\n ** module id = 3\n ** module chunks = 0\n **/","/**\n * @jsx React.DOM\n */\n\n'use strict';\n\nvar React = require('react');\nvar scale = require('../utils/scale');\nvar Cell = require('./Cell.jsx');\n\n\nvar Row = React.createClass({displayName: 'Row',\n  propTypes: {\n    dataRow: React.PropTypes.array.isRequired,\n    squareSize: React.PropTypes.number.isRequired,\n    key: React.PropTypes.number.isRequired,\n    onCellClick: React.PropTypes.func,\n    cellStates: React.PropTypes.object\n  },\n\n  render:function () {\n    var range = scale\n      .linear([0, this.props.dataRow.length],\n              [0, this.props.squareSize * this.props.dataRow.length]);\n\n    var cells = this.props.dataRow.map(function(cel, j)  {\n      return Cell({x: range(j), \n                   y: range(this.props.key), \n                   cellState: this.props.cellStates && this.props.cellStates[cel], \n                   size: this.props.squareSize, \n                   onClick: this.props.onCellClick, \n                   key: this.props.key + 1 + j})\n    }.bind(this));\n\n    return (\n      React.DOM.g({className: \"Row\"}, \n        cells\n      )\n    );\n  }\n});\n\nmodule.exports = Row;\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./src/Row.jsx\n ** module id = 4\n ** module chunks = 0\n **/","module.exports = {\n\n\t/**\n\t * Creates a linear scale given a domain array\n\t * and a range array\n\t * @param  {array} d1\n\t * @param  {array} d2\n\t * @return {Function}\n\t */\n\tlinear: function (d1, d2) {\n\t\treturn function (num) {\n      return d2[0] + (d2[1] - d2[0]) * ((num-d1[0])/(d1[1]-d1[0]));\n    };\n\t}\n};\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./utils/scale.js\n ** module id = 5\n ** module chunks = 0\n **/","/**\n * @jsx React.DOM\n */\n\n'use strict';\n\nvar React = require('react');\nvar cx = require('./cx');\n\nvar Cell = React.createClass({displayName: 'Cell',\n  propTypes: {\n    x: React.PropTypes.number.isRequired,\n    y: React.PropTypes.number.isRequired,\n    size: React.PropTypes.number.isRequired,\n    cellState: React.PropTypes.string,\n    onClick: React.PropTypes.func\n  },\n\n  handleClick:function () {\n    this.props.onClick && this.props.onClick({\n      x: this.props.x/this.props.size,\n      y: this.props.y/this.props.size,\n      cellState: this.props.cellState\n    });\n  },\n\n  render:function () {\n    var classes = {'Cell': true};\n\n    this.props.cellState && (classes[this.props.cellState] = true);\n\n    return (\n      React.DOM.rect({className: cx(classes), \n            x: this.props.x, \n            y: this.props.y, \n            width: this.props.size, \n            height: this.props.size, \n            onClick: this.handleClick})\n    );\n  }\n});\n\nmodule.exports = Cell;\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./src/Cell.jsx\n ** module id = 6\n ** module chunks = 0\n **/","// removed by extract-text-webpack-plugin\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./src/Matrix.scss\n ** module id = 7\n ** module chunks = 0\n **/","'use strict';\n\n/**\n * Creates a string representing css classes\n * given an object literal.\n * @type {string}\n */\nmodule.exports = function(classes)  {\n  return typeof classes !== 'object' ?\n    Array.prototype.join.call(arguments, ' ') :\n    Object.keys(classes).filter(function(className)  {return classes[className];}).join(' ');\n};\n\n\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./src/cx.js\n ** module id = 8\n ** module chunks = 0\n **/"],"sourceRoot":"","file":"react-matrix.js"}

src/base.scss

-$colorGrid:#BDC3C7;
-$colorAvailable:#ECF0F1;
-$colorPath:#3498DB;
-$colorBarrier:#E74C3C;
-$colorPipette:#34495E;
-$colorComponent:#1ABC9C;

src/Matrix.scss

-@import 'base';
-
-$colorList: (
-  ("available", $colorAvailable),
-  ("barrier", $colorBarrier),
-  ("path", $colorPath),
-  ("pipette", $colorPipette),
-  ("component", $colorComponent)
-);
-
-.Matrix {
-  .Grid {
-    stroke: $colorGrid;
-  }
-
-  .Cell {
-    @each $colorMap in $colorList {
-      $state: nth($colorMap, 1);
-      $color: nth($colorMap, 2);
-
-      &.#{$state} {
-        fill: $color;
-      }
-    }
-  }
-}

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Improved metrics

Dependency count

0

-100%

Lines of code

387

6.03%

Number of low supply chain risk alerts

2

-33.33%

Worsened metrics

Total package byte prevSize

24167

-10.42%

Dev dependency count

9

12.5%

Number of package files

24

-4%

Dependency changes

• - Removed

  react@^0.11.2

• - Removed

  amdefine@1.0.1
  (transitive)

• - Removed

  base62@0.1.1
  (transitive)

• - Removed

  envify@2.0.1
  (transitive)

• - Removed

  esprima-fb@3001.1.0-dev-harmony-fb
  (transitive)

• - Removed

  jstransform@3.0.0
  (transitive)

• - Removed

  object-keys@0.4.0
  (transitive)

• - Removed

  react@0.11.2
  (transitive)

• - Removed

  source-map@0.1.31
  (transitive)

• - Removed

  through@2.3.8
  (transitive)

• - Removed

  xtend@2.1.2
  (transitive)