diff --git a/package.json b/package.json index 40d4999..64cad30 100644 --- a/package.json +++ b/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" } diff --git a/src/chart/config.js b/src/chart/config.js index f6ed81e..a35f0a0 100644 --- a/src/chart/config.js +++ b/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 \ No newline at end of file diff --git a/src/chart/render.js b/src/chart/render.js index fc9ab55..6aa95c5 100644 --- a/src/chart/render.js +++ b/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, diff --git a/src/defs/avatar-clip.js b/src/defs/avatar-clip.js index 33444ea..364393d 100644 --- a/src/defs/avatar-clip.js +++ b/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) +} \ No newline at end of file diff --git a/src/examples/react.js b/src/examples/react.js index 207e91a..9d51011 100644 --- a/src/examples/react.js +++ b/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) diff --git a/webpack.config.js b/webpack.config.js index 1377b9f..4f53f4c 100644 --- a/webpack.config.js +++ b/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: '_', + }, + }, +} \ No newline at end of file diff --git a/webpack.dev.config.js b/webpack.dev.config.js index 01ec1f6..6f67fa3 100644 --- a/webpack.dev.config.js +++ b/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: '_', + }, + }, +} \ No newline at end of file