Dev

package.json

@@ -1,8 +1,11 @@
 {
-  "name": "@latticehr/react-org-chart",
-  "version": "0.1.1",
+  "name": "@elsouza1985/react-org-chart",
+  "version": "1.0.1",
   "description": "Simple, high-performance react component for d3 org chart",
-  "repository": "https://github.com/latticehr/react-org-chart.git",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/elsouza1985/react-org-chart.git"
+  },
   "main": "dist/index.js",
   "directories": {
     "example": "src/examples"
@@ -32,8 +35,8 @@
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "rimraf": "^2.6.2",
-    "webpack": "^4.0.1",
-    "webpack-cli": "^2.0.10",
+    "webpack": "^4.41.2",
+    "webpack-cli": "^3.1.1",
     "webpack-dev-server": "^3.1.0"
   },
   "peerDependencies": {
@@ -46,5 +49,9 @@
       "env",
       "stage-2"
     ]
-  }
+  },
+  "bugs": {
+    "url": "https://github.com/elsouza1985/react-org-chart/issues"
+  },
+  "homepage": "https://github.com/elsouza1985/react-org-chart#readme"
 }

src/chart/config.js

@@ -2,12 +2,12 @@ const animationDuration = 350
 const shouldResize = true
 
 // Nodes
-const nodeWidth = 240
-const nodeHeight = 120
+const nodeWidth = 300
+const nodeHeight = 80
 const nodeSpacing = 12
-const nodePaddingX = 16
+const nodePaddingX = 4
 const nodePaddingY = 16
-const avatarWidth = 40
+const avatarWidth = 80
 const nodeBorderRadius = 4
 const margin = {
   top: 20,
@@ -21,7 +21,7 @@ const lineType = 'angle'
 const lineDepthY = 120 /* Height of the line for child nodes */
 
 // Colors
-const backgroundColor = '#fff'
+const backgroundColor = 'rgb(243,244,246)'
 const borderColor = '#e6e8e9'
 const nameColor = '#222d38'
 const titleColor = '#617080'
@@ -47,4 +47,4 @@ const config = {
   shouldResize
 }
 
-module.exports = config
+module.exports = config

src/chart/render.js

@@ -117,56 +117,56 @@ function render(config) {
   const heightForTitle = 45 // getHeightForText(d.person.title)
 
   // Person's Reports
-  nodeEnter
-    .append('text')
-    .attr('class', PERSON_REPORTS_CLASS)
-    .attr('x', namePos.x)
-    .attr('y', namePos.y + nodePaddingY + heightForTitle)
-    .attr('dy', '.9em')
-    .style('font-size', 14)
-    .style('font-weight', 500)
-    .style('cursor', 'pointer')
-    .style('fill', reportsColor)
-    .text(helpers.getTextForTitle)
+  // nodeEnter
+  //   .append('text')
+  //   .attr('class', PERSON_REPORTS_CLASS)
+  //   .attr('x', namePos.x)
+  //   .attr('y', namePos.y + nodePaddingY + heightForTitle)
+  //   .attr('dy', '.9em')
+  //   .style('font-size', 14)
+  //   .style('font-weight', 500)
+  //   .style('cursor', 'pointer')
+  //   .style('fill', reportsColor)
+  //   .text(helpers.getTextForTitle)
 
   // Person's Avatar
   nodeEnter
     .append('image')
-    .attr('width', avatarWidth)
-    .attr('height', avatarWidth)
-    .attr('x', nodePaddingX)
-    .attr('y', nodePaddingY)
+    .attr('width', 80)
+    .attr('height', 80)
+    .attr('x', 0)
+    .attr('y', 1)
     .attr('stroke', borderColor)
     .attr('src', d => d.person.avatar)
     .attr('xlink:href', d => d.person.avatar)
     .attr('clip-path', 'url(#avatarClip)')
 
   // Person's Department
-  nodeEnter
-    .append('text')
-    .attr('class', getDepartmentClass)
-    .attr('x', 34)
-    .attr('y', avatarWidth + nodePaddingY * 1.2)
-    .attr('dy', '.9em')
-    .style('cursor', 'pointer')
-    .style('fill', titleColor)
-    .style('font-weight', 600)
-    .style('font-size', 8)
-    .attr('text-anchor', 'middle')
-    .text(helpers.getTextForDepartment)
+  // nodeEnter
+  //   .append('text')
+  //   .attr('class', getDepartmentClass)
+  //   .attr('x', 34)
+  //   .attr('y', avatarWidth + nodePaddingY * 1.2)
+  //   .attr('dy', '.9em')
+  //   .style('cursor', 'pointer')
+  //   .style('fill', titleColor)
+  //   .style('font-weight', 600)
+  //   .style('font-size', 8)
+  //   .attr('text-anchor', 'middle')
+  //   .text(helpers.getTextForDepartment)
 
   // Person's Link
   const nodeLink = nodeEnter
-    .append('a')
+    .append('p')
     .attr('class', PERSON_LINK_CLASS)
-    .attr('xlink:href', d => d.person.link || 'https://lattice.com')
-    .on('click', datum => {
-      d3.event.stopPropagation()
-      // TODO: fire link click handler
-      if (onPersonLinkClick) {
-        onPersonLinkClick(datum, d3.event)
-      }
-    })
+    // .attr('xlink:href', d => d.person.link || 'https://lattice.com')
+    // .on('click', datum => {
+    //   d3.event.stopPropagation()
+    //   // TODO: fire link click handler
+    //   if (onPersonLinkClick) {
+    //     onPersonLinkClick(datum, d3.event)
+    //   }
+    // })
 
   iconLink({
     svg: nodeLink,

src/defs/avatar-clip.js

@@ -14,7 +14,7 @@ module.exports = function defineAvatarClip(svg, id, config = {}) {
     .append('clipPath')
     .attr('id', id)
     .append('circle')
-    .attr('cx', 34)
-    .attr('cy', 34)
-    .attr('r', 18)
-}
+    .attr('cx', 35)
+    .attr('cy', 45)
+    .attr('r', 30)
+}

src/examples/react.js

@@ -24,7 +24,7 @@ const props = {
     // this could also just be `return tree.children`
     return Promise.resolve(tree.children)
   },
-  lineType: 'curve'
+  lineType: 'angle'
 }
 
 ReactDOM.render(React.createElement(OrgChart, props, null), root)

webpack.config.js

@@ -2,38 +2,41 @@ const webpack = require('webpack')
 const { resolve } = require('path')
 
 module.exports = {
-  name: '@latticehr/react-org-chart',
+  name: '@elsouza1985/react-org-chart',
+  devtool: 'source-map',
   entry: './src/index.js',
   output: {
     filename: 'index.js',
+    sourceMapFilename: './index.js.map',
+    pathinfo: true,
     path: resolve(__dirname, 'dist'),
-    library: '@latticehr/react-org-chart',
-    libraryTarget: 'commonjs2'
+    library: '@elsouza1985/react-org-chart',
+    libraryTarget: 'commonjs2',
   },
   module: {
     rules: [
       {
         test: /\.(js|jsx)$/,
         exclude: /node_modules/,
-        use: ['babel-loader']
-      }
-    ]
+        use: ['babel-loader'],
+      },
+    ],
   },
   resolve: {
-    extensions: ['*', '.js', '.jsx']
+    extensions: ['*', '.js', '.jsx'],
   },
   externals: {
     d3: {
       commonjs: 'd3',
       commonjs2: 'd3',
       amd: 'd3',
-      root: '_'
+      root: '_',
     },
     react: {
       commonjs: 'react',
       commonjs2: 'react',
       amd: 'react',
-      root: '_'
-    }
-  }
-}
+      root: '_',
+    },
+  },
+}

webpack.dev.config.js

@@ -1,60 +1,43 @@
-const glob = require('glob')
 const webpack = require('webpack')
 const { resolve } = require('path')
 
-const getFilename = path =>
-  path
-    .split('\\')
-    .pop()
-    .split('/')
-    .pop()
-    .replace('.js', '')
-
-const getExamples = () => {
-  return glob
-    .sync('./src/examples/*.js', {
-      matchBase: true
-    })
-    .map(getFilename)
-    .map(filename => ({
-      name: `example-${filename}`,
-      value: `./src/examples/${filename}.js`
-    }))
-    .reduce((acc, o) => {
-      acc[o.name] = o.value
-      return acc
-    }, {})
-}
-
 module.exports = {
-  name: 'react-org-chart',
-  cache: true,
-  devtool: 'cheap-module-eval-source-map',
-  entry: {
-    index: './src/index',
-    ...getExamples()
-  },
+  name: '@elsouza1985/react-org-chart',
+  devtool: 'source-map',
+  entry: './src/index.js',
   output: {
-    filename: '[name].bundle.js',
+    filename: 'index.js',
+    devtoolLineToLine: true,
+    sourceMapFilename: './index.js.map',
+    pathinfo: true,
     path: resolve(__dirname, 'dist'),
-    publicPath: '/dist/'
+    library: '@elsouza1985/react-org-chart',
+    libraryTarget: 'commonjs2',
   },
-  plugins: [
-    new webpack.DllReferencePlugin({
-      context: resolve(__dirname, 'src'),
-      manifest: resolve(__dirname, 'dist/manifest.json')
-    })
-  ],
   module: {
     rules: [
       {
         test: /\.(js|jsx)$/,
         exclude: /node_modules/,
-        use: ['babel-loader']
-      }
-    ]
+        use: ['babel-loader'],
+      },
+    ],
   },
   resolve: {
-    extensions: ['*', '.js', '.jsx']
-  }
-}
+    extensions: ['*', '.js', '.jsx'],
+  },
+  externals: {
+    d3: {
+      commonjs: 'd3',
+      commonjs2: 'd3',
+      amd: 'd3',
+      root: '_',
+    },
+    react: {
+      commonjs: 'react',
+      commonjs2: 'react',
+      amd: 'react',
+      root: '_',
+    },
+  },
+}