react-d3-core - npm Package Compare versions

Comparing version 0.1.7 to 0.2.0

docs/axis.md

@@ -8,5 +8,3 @@ # Axis
 ```js
-import {
-  Axis as Axis
-} from 'react-d3-core';
+var Axis = require('react-d3-core').Axis;
 ```
@@ -16,3 +14,3 @@
 
-You can customize `Axis` component using the following properties.
+You can customize `Axis` component using the following properties. Most of the time you will only use `Xaxis`, `Yaxis`.
 
@@ -19,0 +17,0 @@ ### Basics

docs/container.md

@@ -8,7 +8,38 @@ # Container
 ```js
-import {
-  Chart as Chart
-} from 'react-d3-core'
+var Chart = require('react-d3-core').Chart;
 ```
 
+## Example
+
+```js
+var React = require('react');
+var Chart = require('react-d3-core').Chart;
+
+// Example
+(function() {
+
+  var width = 960,
+    height = 500,
+    margins = {top: 20, right: 50, bottom: 20, left: 50},
+    id = "test-chart",
+    svgClassName = "test-chart-class",
+    titleClassName = "test-chart-title-class";
+
+  var title = "test chart lib"
+
+  React.render(
+    <Chart
+      title= {title}
+      width= {width}
+      height= {height}
+      margins= {margins}
+      id= {id}
+      svgClassName= {svgClassName}
+      titleClassName= {titleClassName}
+    />
+  , document.getElementById('blank-container'))
+
+})()
+```
+
 ## Components
@@ -15,0 +46,0 @@

docs/label.md

@@ -8,7 +8,34 @@ # Label
 ```js
-import {
-  Label as Label
-} from 'react-d3-core'
+var Label = require('react-d3-core').Label;
 ```
 
+## Example
+
+```js
+var React = require('react');
+var Label = require('react-d3-core').Label;
+
+(function() {
+
+  var width = 960,
+    height = 500,
+    margins = {top: 20, right: 50, bottom: 30, left: 50},
+    labelTitle = 'new label title'
+
+
+  React.render(
+    <svg width={width} height={height}>
+      <Label
+        width= {width}
+        height= {height}
+        margins= {margins}
+        labelTitle= {labelTitle}
+        labelPosition= {labelPosition}
+      />
+    </svg>
+  , document.getElementById('blank-label')
+  )
+})()
+```
+
 ## Settings props
@@ -15,0 +42,0 @@

docs/legend.md

@@ -8,7 +8,72 @@ # Legend
 ```js
-import {
-  Legend as Legend
-} from 'react-d3-core';
+var Legend = require('react-d3-core').Legend;
 ```
 
+```js
+
+(function() {
+  var width = 960,
+    height = 500,
+    margins = {top: 40, right: 50, bottom: 40, left: 50},
+    legendClassName = "test-legend-class",
+    legendPosition = 'left',
+    legendOffset = 90,
+    chartSeries = [
+      {
+        field: 'Under 5 Years',
+        name: 'Under 5 Years',
+        color: '#1f77b4'
+      },
+      {
+        field: '5 to 13 Years',
+        name: '5 to 13 Years',
+        color: '#ff7f0e'
+      },
+      {
+        field: '14 to 17 Years',
+        name: '14 to 17 Years',
+        color: '#2ca02c'
+      },
+      {
+        field: '18 to 24 Years',
+        name: '18 to 24 Years',
+        color: '#d62728'
+      },
+      {
+        field: '25 to 44 Years',
+        name: '25 to 44 Years',
+        color: '#9467bd'
+      },
+      {
+        field: '45 to 64 Years',
+        name: '45 to 64 Years',
+        color: '#8c564b'
+      },
+      {
+        field: '65 Years and Over',
+        name: '65 Years and Over',
+        color: '#e377c2'
+      },
+
+    ]
+
+  React.render(
+    <svg width= {width} height= {height}>
+      <rect height= {"100%"} width= {"100%"} fill= {"#CCC"} />
+      <Legend
+        width= {width}
+        height= {height}
+        margins= {margins}
+        legendClassName= {legendClassName}
+        legendPosition= {legendPosition}
+        legendOffset= {legendOffset}
+        chartSeries = {chartSeries}
+      />
+    </svg>
+  , document.getElementById('blank-legend')
+  )
+})()
+
+```
+
 ## Settings props
@@ -15,0 +80,0 @@

docs/svg.md

@@ -8,7 +8,29 @@ # Svg
 ```js
-import {
-  Svg as Svg
-} from 'react-d3-core';
+var Svg = require('react-d3-core').Svg;
 ```
 
+## Usage
+
+```js
+var width = 960,
+  height = 500,
+  margins = {top: 20, right: 50, bottom: 20, left: 50},
+  id = "test-chart",
+  svgClassName = "test-chart-class";
+
+(function() {
+  React.render(
+    <Svg
+      width= {width}
+      height= {height}
+      margins= {margins}
+      id= {id}
+      svgClassName= {svgClassName}
+      >
+    </Svg>
+  , document.getElementById('new-svg')
+  )
+})()
+```
+
 ## Setting props
@@ -15,0 +37,0 @@

docs/title.md

@@ -8,7 +8,22 @@ # Title
 ```js
-import {
-  Title as Title
-} from 'react-d3-core'
+var Title = require('react-d3-core').Title;
 ```
 
+## Example
+
+```js
+var title = "test-chart",
+  titleClassName = "test-chart-class";
+
+(function() {
+  React.render(
+    <Title
+      title= {title}
+      titleClassName= {titleClassName}
+      />
+  , document.getElementById('title')
+  )
+})()
+```
+
 ## Setting props
@@ -15,0 +30,0 @@

docs/xaxis.md

@@ -8,7 +8,54 @@ # Xaxis
 ```js
-import {
-  Xaxis as Xaxis
-} from 'react-d3-core';
+var Xaxis = require('react-d3-core').Xaxis;
 ```
 
+## Example
+
+```js
+var React = require('react');
+var Xaxis = require('react-d3-core').Xaxis;
+
+(function() {
+  // load your general data, for building xDomain.
+  var chartData = require("dsv?delimiter=,!../../data/garbage.csv");
+  // your date format, use for parsing
+  var parseDate = d3.time.format("%YM%m").parse;
+
+  // setting you svg width
+  var width = 500,
+    // setting your svg height
+    height = 100,
+    // setting your margins of your svg
+    margins = {top: 20, right: 50, bottom: 20, left: 50},
+    // your x Axis accessor
+    x = function(d) {
+      return parseDate(d.month);
+    },
+    // set your x domain
+    xDomain = d3.extent(chartData, function(d){ return x(d) }),
+    // set your x range
+    xRange = [0, width - margins.left - margins.right],
+    // your scale type 'linear', 'ordinal', 'time'... etc.
+    xScale = 'time',
+    // set your label name
+    xLabel = "Month";
+
+  React.render(
+    <svg width={width} height={height}>
+      <Xaxis
+        width= {width}
+        height= {height}
+        margins= {margins}
+        x= {x}
+        xDomain= {xDomain}
+        xRange = {xRange}
+        xScale= {xScale}
+        xLabel= {xLabel}
+      />
+    </svg>
+  , document.getElementById('garbage-xaxis')
+  )
+})()
+```
+
 ## Settings props
@@ -15,0 +62,0 @@

docs/xgrid.md

@@ -8,7 +8,43 @@ # xGrid
 ```js
-import {
-  Grid as Grid
-} from 'react-d3-core';
+var Grid = require('react-d3-core').Grid;
 ```
 
+## Example
+
+```js
+(function() {
+
+  var generalChartData = require('json!./user_sample.json');
+
+  var width = 960,
+    height = 500,
+    margins = {top: 20, right: 50, bottom: 30, left: 50},
+    gridAxisClassName = "test-grid-class",
+    x = function(d) {
+      return d.index;
+    },
+    xDomain = d3.extent(generalChartData, x),
+    xRange = [0, width - margins.left - margins.right],
+    xScale = 'linear';
+
+  React.render(
+    <svg width={width} height={height}>
+      <Grid
+        width= {width}
+        height= {height}
+        margins= {margins}
+        type= {'x'}
+        gridAxisClassName= {gridAxisClassName}
+        x= {x}
+        xDomain= {xDomain}
+        xRange= {xRange}
+        xScale= {xScale}
+      />
+    </svg>
+  , document.getElementById('blank-grid')
+  )
+})()
+
+```
+
 ## Components
@@ -15,0 +51,0 @@

docs/yaxis.md

@@ -8,5 +8,3 @@ # Yaxis
 ```js
-import {
-  Yaxis as Yaxis
-} from 'react-d3-core';
+var Yaxis = require('react-d3-core').Yaxis;
 ```
@@ -13,0 +11,0 @@

docs/ygrid.md

@@ -8,7 +8,43 @@ # yGrid
 ```js
-import {
-  Grid as Grid
-} from 'react-d3-core';
+var Grid = require('react-d3-core').Grid;
 ```
 
+## Example
+
+```js
+(function() {
+
+  var generalChartData = require('json!./user_sample.json');
+
+  var width = 960,
+    height = 500,
+    margins = {top: 20, right: 50, bottom: 30, left: 50},
+    gridAxisClassName = "test-grid-class",
+    y = function(d) {
+      return d.age;
+    },
+    yDomain = d3.extent(generalChartData, y),
+    yRange = [height - margins.top - margins.bottom, 0],
+    yScale = 'linear';
+
+
+  React.render(
+    <svg width={width} height={height}>
+      <Grid
+        width= {width}
+        height= {height}
+        margins= {margins}
+        type= {'y'}
+        gridAxisClassName= {gridAxisClassName}
+        y= {y}
+        yDomain= {yDomain}
+        yRange= {yRange}
+        yScale= {yScale}
+      />
+    </svg>
+  , document.getElementById('blank-grid')
+  )
+})()
+```
+
 `grid` component contains:
@@ -15,0 +51,0 @@

lib/axis/axis.js

@@ -23,4 +23,2 @@ "use strict";
 
-require('../../css/axis.css');
-
 var Axis = (function (_Component) {
@@ -27,0 +25,0 @@ _inherits(Axis, _Component);

lib/container/svg.js

@@ -51,15 +51,19 @@ "use strict";
 
-      if (xScale === 'ordinal') {
-        xScaleSet = (0, _utilsScale.scale)({
-          scale: 'linear',
-          domain: [0, width - margins.left - margins.right],
-          range: [0, width - margins.left - margins.right]
+      // implement zoom if xscale and y scale is set!
+      if (xScaleSet && yScaleSet) {
+        if (xScale === 'ordinal') {
+          // if ordinal tramsform to linear
+          xScaleSet = (0, _utilsScale.scale)({
+            scale: 'linear',
+            domain: [0, width - margins.left - margins.right],
+            range: [0, width - margins.left - margins.right]
+          });
+        }
+
+        var zoom = d3.behavior.zoom().x(xScaleSet).y(yScaleSet).scaleExtent([1, 10]).on("zoom", function () {
+          onZoom.call(_this, xScaleSet, yScaleSet);
         });
+
+        d3.select(_react2['default'].findDOMNode(this.refs.svgContainer)).call(zoom);
       }
-
-      var zoom = d3.behavior.zoom().x(xScaleSet).y(yScaleSet).scaleExtent([1, 10]).on("zoom", function () {
-        onZoom.call(_this, xScaleSet, yScaleSet);
-      });
-
-      d3.select(_react2['default'].findDOMNode(this.refs.svgContainer)).call(zoom);
     }
@@ -77,3 +81,3 @@ }, {
 
-      var t = "translate(" + margins.left + "," + margins.top + ")";
+      var t = 'translate(' + margins.left + ', ' + margins.top + ')';
 
@@ -80,0 +84,0 @@ return _react2['default'].createElement(

lib/grid.js

@@ -134,9 +134,9 @@ "use strict";
       x: _react.PropTypes.func.isRequired,
-      xDomain: _react.PropTypes.array.isRequired,
-      xRange: _react.PropTypes.array.isRequired,
+      xDomain: _react.PropTypes.array,
+      xRange: _react.PropTypes.array,
       xScale: _react.PropTypes.oneOf(['linear', 'identity', 'sqrt', 'pow', 'log', 'quantize', 'quantile', 'ordinal', 'time']).isRequired,
       xRangeRoundBands: _react.PropTypes.object,
       y: _react.PropTypes.func.isRequired,
-      yDomain: _react.PropTypes.array.isRequired,
-      yRange: _react.PropTypes.array.isRequired,
+      yDomain: _react.PropTypes.array,
+      yRange: _react.PropTypes.array,
       yScale: _react.PropTypes.oneOf(['linear', 'identity', 'sqrt', 'pow', 'log', 'quantize', 'quantile', 'ordinal', 'time']).isRequired,
@@ -143,0 +143,0 @@ yRangeRoundBands: _react.PropTypes.object

lib/index.js

@@ -47,2 +47,4 @@ 'use strict';
 
+require('../css/axis.css');
+
 exports.Svg = _containerSvg2['default'];
@@ -49,0 +51,0 @@ exports.Title = _containerTitle2['default'];

package.json

 {
   "name": "react-d3-core",
-  "version": "0.1.7",
-  "description": "react chart core component",
+  "version": "0.2.0",
+  "description": "react-d3 chart core component",
   "main": "./lib/index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "es5": "rm -rf ./lib && babel -w --stage 0 src --out-dir lib"
+    "test": "BABEL_JEST_STAGE=0 jest",
+    "build": "rm -rf ./lib && babel -w --stage 0 src --out-dir lib"
   },
@@ -14,5 +14,7 @@ "author": "ElixirDoc team",
     "babel-core": "^5.8.24",
+    "babel-jest": "^5.3.0",
     "babel-loader": "^5.3.2",
     "css-loader": "^0.18.0",
     "dsv-loader": "^1.0.0",
+    "jest-cli": "^0.5.8",
     "json-loader": "^0.5.3",
@@ -28,3 +30,7 @@ "jsx-loader": "^0.13.2",
     "react": "^0.13.3"
+  },
+  "jest": {
+    "scriptPreprocessor": "./node_modules/babel-jest",
+    "unmockedModulePathPatterns": ["./node_modules/react"]
   }
 }

README.md

@@ -19,29 +19,2 @@ # react-d3-core
 
-```js
-
-import {
-  Chart as Chart,
-  Xaxis as Xaxis,
-  Yaxis as Yaxis,
-  Grid as Grid,
-} from 'react-d3-core';
-
-export default class NewChart extends Component {
-  constructor(props){
-    super(props);
-  }
-
-  render() {
-    return (
-      <Chart {...this.props} >
-        <Xaxis {...this.props} />
-        <Yaxis {...this.props} />
-        <Grid {...this.props} />
-      </Chart>
-      )
-  }
-}
-
-```
-
 ## Supported Components
@@ -48,0 +21,0 @@

src/axis/axis.jsx

@@ -13,4 +13,2 @@ "use strict";
 
-require('../../css/axis.css');
-
 export default class Axis extends Component {
@@ -17,0 +15,0 @@ constructor (props) {

src/container/svg.jsx

@@ -48,18 +48,22 @@ "use strict";
 
-    if(xScale === 'ordinal') {
-      xScaleSet = scale({
-        scale: 'linear',
-        domain: [0, width - margins.left - margins.right],
-        range: [0, width - margins.left - margins.right]
-      })
-    }
+    // implement zoom if xscale and y scale is set!
+    if(xScaleSet && yScaleSet) {
+      if(xScale === 'ordinal') {
+        // if ordinal tramsform to linear
+        xScaleSet = scale({
+          scale: 'linear',
+          domain: [0, width - margins.left - margins.right],
+          range: [0, width - margins.left - margins.right]
+        })
+      }
 
-    var zoom = d3.behavior.zoom()
-      .x(xScaleSet)
-      .y(yScaleSet)
-      .scaleExtent([1, 10])
-      .on("zoom", () => { onZoom.call(this, xScaleSet, yScaleSet) });
+      var zoom = d3.behavior.zoom()
+        .x(xScaleSet)
+        .y(yScaleSet)
+        .scaleExtent([1, 10])
+        .on("zoom", () => { onZoom.call(this, xScaleSet, yScaleSet) });
 
-    d3.select(React.findDOMNode(this.refs.svgContainer))
-      .call(zoom);
+      d3.select(React.findDOMNode(this.refs.svgContainer))
+        .call(zoom);
+    }
   }
@@ -77,3 +81,3 @@
 
-    var t = "translate(" + margins.left + "," + margins.top + ")"
+    var t = `translate(${margins.left}, ${margins.top})`;
 
@@ -80,0 +84,0 @@ return (

src/grid.jsx

@@ -35,9 +35,9 @@ "use strict";
     x: PropTypes.func.isRequired,
-    xDomain: PropTypes.array.isRequired,
-    xRange: PropTypes.array.isRequired,
+    xDomain: PropTypes.array,
+    xRange: PropTypes.array,
     xScale: PropTypes.oneOf(['linear', 'identity', 'sqrt', 'pow', 'log', 'quantize', 'quantile', 'ordinal', 'time']).isRequired,
     xRangeRoundBands: PropTypes.object,
     y: PropTypes.func.isRequired,
-    yDomain: PropTypes.array.isRequired,
-    yRange: PropTypes.array.isRequired,
+    yDomain: PropTypes.array,
+    yRange: PropTypes.array,
     yScale: PropTypes.oneOf(['linear', 'identity', 'sqrt', 'pow', 'log', 'quantize', 'quantile', 'ordinal', 'time']).isRequired,
@@ -44,0 +44,0 @@ yRangeRoundBands: PropTypes.object,

src/index.jsx

@@ -41,2 +41,4 @@ import {
 
+require('../css/axis.css')
+
 export {Svg as Svg};
@@ -43,0 +45,0 @@ export {Title as Title};

webpack.config.js

@@ -15,12 +15,12 @@
 module.exports = [{
-  name: 'react-d3-core-example',
+  name: 'react-d3-core-example-es5',
   devtool: ENV ? "source-map": '',
   entry: {
+    xaxis: './example/src/xaxis.jsx',
+    xaxis_click: './example/src/xaxis_click.jsx',
     blank_chart: './example/src/components.jsx',
     legend: './example/src/legend.jsx',
     container: './example/src/container.jsx',
-    container_update: './example/src/container_update.jsx',
     grid: './example/src/grid.jsx',
-    label: './example/src/label.jsx',
-    xaxis: './example/src/xaxis.jsx'
+    label: './example/src/label.jsx'
   },
@@ -38,44 +38,2 @@
         exclude: /node_modules/,
-        loaders: ["react-hot", "babel-loader?stage=0"],
-      },
-      {
-        test: /\.css$/,
-        loader: 'style-loader!css-loader'
-      }
-    ],
-  },
-
-  resolve: {
-    extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx']
-  },
-
-  plugins: ENV ? [
-    new webpack.optimize.UglifyJsPlugin({minimize: true}),
-    new webpack.ProvidePlugin({
-      'd3': 'd3'
-    })
-  ]: [
-    new webpack.ProvidePlugin({
-      'd3': 'd3'
-    })
-  ]
-},{
-  name: 'react-d3-core-example-es5',
-  devtool: ENV ? "source-map": '',
-  entry: {
-    xaxis: './example/src_es5/xaxis.jsx',
-    xaxis_click: './example/src_es5/xaxis_click.jsx',
-    legend_click: './example/src_es5/legend_click.jsx'
-  },
-
-  output: {
-    path: path.join(__dirname, './example/dist_es5'),
-    filename: ENV ? '[name].min.js': '[name].js'
-  },
-
-  module: {
-    loaders: [
-      {
-        test: [/\.jsx$/, /\.js$/],
-        exclude: /node_modules/,
         loaders: ["jsx-loader"],
@@ -82,0 +40,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4361115

increased by0.31%

Number of package files

52

increased by15.56%

Lines of code

32311

increased by0.79%

Number of low quality alerts

2

decreased by-33.33%

Worsened metrics

Dev dependency count

12

increased by20%

Number of lines in readme file

51

decreased by-34.62%

No dependency changes