├── .editorconfig ├── .eslintrc.js ├── .eslintrc1.json ├── .github └── workflows │ └── codeql-analysis.yml ├── .gitignore ├── .prettierrc ├── .vscode └── settings.json ├── Examples ├── .ipynb_checkpoints │ ├── Random Orgstructure-checkpoint.ipynb │ └── Untitled-checkpoint.ipynb ├── Random Orgstructure.ipynb └── data.js ├── LICENSE ├── README.md ├── assets ├── README.md ├── css │ ├── fonts │ │ ├── roboto-condensed-v16-latin-700.woff │ │ ├── roboto-condensed-v16-latin-700.woff2 │ │ ├── roboto-condensed-v16-latin-regular.woff │ │ └── roboto-condensed-v16-latin-regular.woff2 │ └── main.css ├── data │ └── OrgStructure.json └── img │ ├── Screenshot1.PNG │ ├── Screenshot11.PNG │ ├── down.svg │ ├── gh.svg │ └── profile.png ├── components ├── DepartmentDetails.vue ├── DeptBox copy.vue ├── DeptBox.vue ├── DrawLines.vue ├── EditConfig.vue ├── EditMenu.vue ├── EmployeeList.vue ├── FileMenu.vue ├── OptionsMenu.vue ├── OrgChart.vue ├── PageHeader.vue ├── PersonPicker.vue ├── README.md ├── SearchBox.vue ├── ShowDept.vue ├── ShowPerson.vue ├── SideScreen.vue └── ViewMenu.vue ├── deploy_linux.bat ├── docs ├── .nojekyll ├── 1b3c704.js ├── 200.html ├── 3b77a50.js ├── 8e0b1c0.js ├── 9dfe856.js ├── LICENSES ├── README.md ├── a865292.js ├── config.js ├── data.js ├── e8cd43a.js ├── favicon.ico ├── fonts │ ├── MaterialIcons-Regular.4674f8d.eot │ ├── MaterialIcons-Regular.5e7382c.ttf │ ├── MaterialIcons-Regular.83bebaf.woff │ ├── MaterialIcons-Regular.cff684e.woff2 │ ├── roboto-condensed-v16-latin-700.38d343e.woff2 │ ├── roboto-condensed-v16-latin-700.3f5e8f8.woff │ ├── roboto-condensed-v16-latin-regular.9c571b9.woff2 │ └── roboto-condensed-v16-latin-regular.af8dac2.woff ├── index.html ├── photos │ ├── B01.png │ ├── B02.png │ ├── B03.png │ ├── B04.png │ └── B05.png ├── testfiles │ ├── config v1.js │ ├── config_default.js │ └── data v1.js └── translate.js ├── layouts ├── README.md └── default.vue ├── middleware └── README.md ├── nuxt 2.4 update if problems.txt ├── nuxt.config.generate.js ├── nuxt.config.js ├── orgchart.zip ├── package-lock.json ├── package.json ├── pages ├── README.md └── index.vue ├── plugins ├── AsyncComputed.js ├── HelpFunctions.js ├── README.md └── vueMatertialIcons.js ├── static ├── README.md ├── config.js ├── data.js ├── favicon.ico ├── photos │ ├── B01.png │ ├── B02.png │ ├── B03.png │ ├── B04.png │ └── B05.png ├── testfiles │ ├── config v1.js │ ├── config_default.js │ └── data v1.js └── translate.js ├── store ├── README.md └── index.js └── vendor.yml /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | browser: true, 5 | node: true 6 | }, 7 | parserOptions: { 8 | parser: 'babel-eslint' 9 | }, 10 | extends: ['plugin:vue/recommended', 'plugin:prettier/recommended'], 11 | plugins: ['vue', 'prettier'], 12 | // add your custom rules here 13 | rules: {} 14 | } 15 | -------------------------------------------------------------------------------- /.eslintrc1.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true 4 | }, 5 | "extends": "eslint:recommended", 6 | "parserOptions": { 7 | "ecmaVersion": 5 8 | }, 9 | "rules": { 10 | "indent": [ 11 | "error", 12 | "tab" 13 | ], 14 | "linebreak-style": [ 15 | "error", 16 | "windows" 17 | ], 18 | "quotes": [ 19 | "error", 20 | "double" 21 | ], 22 | "semi": [ 23 | "error", 24 | "never" 25 | ] 26 | } 27 | } -------------------------------------------------------------------------------- /.github/workflows/codeql-analysis.yml: -------------------------------------------------------------------------------- 1 | # For most projects, this workflow file will not need changing; you simply need 2 | # to commit it to your repository. 3 | # 4 | # You may wish to alter this file to override the set of languages analyzed, 5 | # or to provide custom queries or build logic. 6 | # 7 | # ******** NOTE ******** 8 | # We have attempted to detect the languages in your repository. Please check 9 | # the `language` matrix defined below to confirm you have the correct set of 10 | # supported CodeQL languages. 11 | # 12 | name: "CodeQL" 13 | 14 | on: 15 | push: 16 | branches: [ master ] 17 | pull_request: 18 | # The branches below must be a subset of the branches above 19 | branches: [ master ] 20 | schedule: 21 | - cron: '31 15 * * 1' 22 | 23 | jobs: 24 | analyze: 25 | name: Analyze 26 | runs-on: ubuntu-latest 27 | 28 | strategy: 29 | fail-fast: false 30 | matrix: 31 | language: [ 'javascript' ] 32 | # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ] 33 | # Learn more: 34 | # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed 35 | 36 | steps: 37 | - name: Checkout repository 38 | uses: actions/checkout@v2 39 | 40 | # Initializes the CodeQL tools for scanning. 41 | - name: Initialize CodeQL 42 | uses: github/codeql-action/init@v1 43 | with: 44 | languages: ${{ matrix.language }} 45 | # If you wish to specify custom queries, you can do so here or in a config file. 46 | # By default, queries listed here will override any specified in a config file. 47 | # Prefix the list here with "+" to use these queries and those in the config file. 48 | # queries: ./path/to/local/query, your-org/your-repo/queries@main 49 | 50 | # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). 51 | # If this step fails, then you should remove it and run the build manually (see below) 52 | - name: Autobuild 53 | uses: github/codeql-action/autobuild@v1 54 | 55 | # ℹ️ Command-line programs to run using the OS shell. 56 | # 📚 https://git.io/JvXDl 57 | 58 | # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines 59 | # and modify them (or add more) to build your code if your project 60 | # uses a compiled language 61 | 62 | #- run: | 63 | # make bootstrap 64 | # make release 65 | 66 | - name: Perform CodeQL Analysis 67 | uses: github/codeql-action/analyze@v1 68 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | # Nuxt generate 72 | dist 73 | 74 | # vuepress build output 75 | .vuepress/dist 76 | 77 | # Serverless directories 78 | .serverless 79 | 80 | # IDE 81 | .idea 82 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true, 4 | "printWidth": 70, 5 | "endOfLine": "auto" 6 | } 7 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "eslint.alwaysShowStatus": true, 3 | "eslint.autoFixOnSave": true, 4 | "eslint.validate": [ 5 | "javascript", { 6 | "language": "vue", 7 | "autoFix": true 8 | } 9 | ], 10 | "files.exclude": { 11 | "**/.git": false 12 | }, 13 | "editor.codeActionsOnSave": { 14 | "source.fixAll.eslint": true 15 | }, 16 | "editor.formatOnSave": true 17 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Michael Hoogkamer 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vueOrgChart 2 | 3 | > Organization chart: 4 | > A complete solution to generate and publish an orgchart without the need of a webserver and database 5 | > (c) Michael Hoogkamer 6 | 7 | Here is the online [Demo](https://hoogkamer.github.io/vue-org-chart/) 8 | 9 | For more information see the [Website](https://freeorgchart.netlify.app/) 10 | 11 | **Do you want to show your (Agile) teams instead of an orgchart? Try: [Teamviewer](https://github.com/Hoogkamer/TeamViewer) open source.** 12 | 13 | ## Build Setup 14 | 15 | This is only needed if you want to build/change your own version. If you want to use it without modification, open \doc\index.html. See also \doc\config.js. For more info see the [Website](https://freeorgchart.netlify.app/) 16 | 17 | _The config.js, data.js and photos folder used for development are in the \static folder_ 18 | 19 | ```bash 20 | # install dependencies 21 | $ npm install 22 | 23 | # serve with hot reload at localhost:3000 24 | $ npm run dev 25 | 26 | 27 | # build for production and launch server 28 | $ npm run build 29 | $ npm start 30 | 31 | # generate static project 32 | $ npm run generate 33 | static output will be place in \dist folder, copy this to any location 34 | ``` 35 | 36 | Use Node 16 37 | -------------------------------------------------------------------------------- /assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked). 8 | -------------------------------------------------------------------------------- /assets/css/fonts/roboto-condensed-v16-latin-700.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hoogkamer/vue-org-chart/1c1130429f10683479d4b13e669237fa43f1cdfd/assets/css/fonts/roboto-condensed-v16-latin-700.woff -------------------------------------------------------------------------------- /assets/css/fonts/roboto-condensed-v16-latin-700.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hoogkamer/vue-org-chart/1c1130429f10683479d4b13e669237fa43f1cdfd/assets/css/fonts/roboto-condensed-v16-latin-700.woff2 -------------------------------------------------------------------------------- /assets/css/fonts/roboto-condensed-v16-latin-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hoogkamer/vue-org-chart/1c1130429f10683479d4b13e669237fa43f1cdfd/assets/css/fonts/roboto-condensed-v16-latin-regular.woff -------------------------------------------------------------------------------- /assets/css/fonts/roboto-condensed-v16-latin-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hoogkamer/vue-org-chart/1c1130429f10683479d4b13e669237fa43f1cdfd/assets/css/fonts/roboto-condensed-v16-latin-regular.woff2 -------------------------------------------------------------------------------- /assets/css/main.css: -------------------------------------------------------------------------------- 1 | /* roboto-condensed-regular - latin */ 2 | @font-face { 3 | font-family: 'Roboto Condensed'; 4 | font-style: normal; 5 | font-weight: 400; 6 | src: local('Roboto Condensed'), local('RobotoCondensed-Regular'), 7 | url('fonts/roboto-condensed-v16-latin-regular.woff2') 8 | format('woff2'), 9 | /* Chrome 26+, Opera 23+, Firefox 39+ */ 10 | url('fonts/roboto-condensed-v16-latin-regular.woff') 11 | format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ 12 | } 13 | /* roboto-condensed-700 - latin */ 14 | @font-face { 15 | font-family: 'Roboto Condensed'; 16 | font-style: normal; 17 | font-weight: 700; 18 | src: local('Roboto Condensed Bold'), local('RobotoCondensed-Bold'), 19 | url('fonts/roboto-condensed-v16-latin-700.woff2') format('woff2'), 20 | /* Chrome 26+, Opera 23+, Firefox 39+ */ 21 | url('fonts/roboto-condensed-v16-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ 22 | } 23 | 24 | * { 25 | font-family: 'Roboto Condensed', sans-serif; 26 | box-sizing: border-box; 27 | padding: 0px; 28 | } 29 | -------------------------------------------------------------------------------- /assets/data/OrgStructure.json: -------------------------------------------------------------------------------- 1 | [ 2 | {"id":"1","name":"Software BV","parentId":""}, 3 | {"id":"2","name":"Office","parentId":"1", "isStaff":true}, 4 | {"id":"3","name":"Communication","parentId":"1", "isStaff":true}, 5 | {"id":"4","name":"Strategy & Sustainability","parentId":"1", "isStaff": true}, 6 | {"id":"5","name":"Desktop Development","parentId":"1"}, 7 | {"id":"6","name":"Mobile Development","parentId":"1"}, 8 | {"id":"7","name":"Web Development","parentId":"1"}, 9 | {"id":"9","name":"Finance","parentId":"1"}, 10 | {"id":"10","name":"Risk Management","parentId":"1"}, 11 | {"id":"11","name":"Innovation & Technology","parentId":"1"}, 12 | {"id":"12","name":"Human Resources","parentId":"1"}, 13 | {"id": "5_1", "name":"Business customers", "parentId":"5"}, 14 | {"id": "5_1_0", "name":"Business Office", "parentId":"5_1", "isStaff": true}, 15 | {"id": "5_1_1", "name":"Front end team", "parentId":"5_1", "isStaff": false}, 16 | {"id": "5_1_2", "name":"Back end team", "parentId":"5_1"}, 17 | {"id": "5_1_3", "name":"Api team", "parentId":"5_1"}, 18 | {"id": "5_2", "name":"Private Customer", "parentId":"5"}, 19 | {"id": "6_1", "name":"Android", "parentId":"6"}, 20 | {"id": "6_2", "name":"IOS", "parentId":"6"}, 21 | {"id": "6_3", "name":"Other", "parentId":"6"}, 22 | {"id": "7_1", "name":"IE troubleshooters", "parentId":"7"}, 23 | {"id": "7_2", "name":"Javascript kiddies", "parentId":"7"}, 24 | {"id": "7_3", "name":"Java masters", "parentId":"7"}, 25 | {"id": "7_4", "name":"PHP people", "parentId":"7"}, 26 | {"id": "9_1", "name":"Payments", "parentId":"9"}, 27 | {"id": "9_2", "name":"Invoices", "parentId":"9"}, 28 | {"id": "9_3", "name":"Incasso", "parentId":"9"}, 29 | {"id": "10_1", "name":"Central Risk Management", "parentId":"10"}, 30 | {"id": "10_6", "name":"Operational Risk Management & Control", "parentId":"10"}, 31 | {"id": "11_1", "name":"Innovation", "parentId":"11"}, 32 | {"id": "11_2", "name":"Technology", "parentId":"11"}, 33 | {"id": "12_1", "name":"Transformation Team", "parentId":"12"}, 34 | {"id": "12_2", "name":"Branding & Communications", "parentId":"12"} 35 | ] -------------------------------------------------------------------------------- /assets/img/Screenshot1.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hoogkamer/vue-org-chart/1c1130429f10683479d4b13e669237fa43f1cdfd/assets/img/Screenshot1.PNG -------------------------------------------------------------------------------- /assets/img/Screenshot11.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hoogkamer/vue-org-chart/1c1130429f10683479d4b13e669237fa43f1cdfd/assets/img/Screenshot11.PNG -------------------------------------------------------------------------------- /assets/img/down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 43 | 45 | 46 | 48 | image/svg+xml 49 | 51 | 52 | 53 | 54 | 55 | 60 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /assets/img/gh.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/img/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hoogkamer/vue-org-chart/1c1130429f10683479d4b13e669237fa43f1cdfd/assets/img/profile.png -------------------------------------------------------------------------------- /components/DepartmentDetails.vue: -------------------------------------------------------------------------------- 1 | 59 | 60 | 137 | 138 | 210 | -------------------------------------------------------------------------------- /components/DeptBox copy.vue: -------------------------------------------------------------------------------- 1 | 46 | 47 | 161 | 321 | -------------------------------------------------------------------------------- /components/DeptBox.vue: -------------------------------------------------------------------------------- 1 | 39 | 40 | 154 | 325 | -------------------------------------------------------------------------------- /components/DrawLines.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 16 | 26 | -------------------------------------------------------------------------------- /components/EditConfig.vue: -------------------------------------------------------------------------------- 1 | 179 | 180 | 512 | 695 | -------------------------------------------------------------------------------- /components/EditMenu.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 83 | 125 | -------------------------------------------------------------------------------- /components/EmployeeList.vue: -------------------------------------------------------------------------------- 1 | 37 | 38 | 99 | 100 | 175 | -------------------------------------------------------------------------------- /components/FileMenu.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 329 | 330 | 381 | -------------------------------------------------------------------------------- /components/OptionsMenu.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 126 | 127 | 174 | -------------------------------------------------------------------------------- /components/OrgChart.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 71 | 106 | -------------------------------------------------------------------------------- /components/PageHeader.vue: -------------------------------------------------------------------------------- 1 | 46 | 47 | 120 | 121 | 233 | -------------------------------------------------------------------------------- /components/PersonPicker.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 90 | 174 | -------------------------------------------------------------------------------- /components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | The components directory contains your Vue.js Components. 6 | 7 | _Nuxt.js doesn't supercharge these components._ 8 | -------------------------------------------------------------------------------- /components/SearchBox.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 87 | 141 | -------------------------------------------------------------------------------- /components/ShowDept.vue: -------------------------------------------------------------------------------- 1 | 45 | 46 | 102 | 166 | -------------------------------------------------------------------------------- /components/ShowPerson.vue: -------------------------------------------------------------------------------- 1 | 65 | 66 | 199 | 336 | -------------------------------------------------------------------------------- /components/SideScreen.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 47 | 48 | 129 | -------------------------------------------------------------------------------- /components/ViewMenu.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 53 | 82 | -------------------------------------------------------------------------------- /deploy_linux.bat: -------------------------------------------------------------------------------- 1 | npm run generate 2 | rm -r docs 3 | cp -r dist docs 4 | 5 | # bug in nuxt https://github.com/nuxt/nuxt.js/issues/8906 6 | # replace absolute paths by relative paths 7 | 8 | sed -i 's/e.p+"fonts/".\/fonts/g' docs/*.js 9 | sed -i 's/n.p+"fonts/".\/fonts/g' docs/*.js 10 | sed -i 's/src="\//src=".\//g' docs/index.html 11 | 12 | rm orgchart.zip 13 | zip -r orgchart.zip docs 14 | git add * 15 | git commit -am "update" 16 | git push -------------------------------------------------------------------------------- /docs/.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hoogkamer/vue-org-chart/1c1130429f10683479d4b13e669237fa43f1cdfd/docs/.nojekyll -------------------------------------------------------------------------------- /docs/200.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Organization chart 5 | 6 | 7 |
8 | 9 | 10 | -------------------------------------------------------------------------------- /docs/LICENSES: -------------------------------------------------------------------------------- 1 | /*! 2 | * The buffer module from node.js, for the browser. 3 | * 4 | * @author Feross Aboukhadijeh 5 | * @license MIT 6 | */ 7 | 8 | /*! 9 | * html2canvas 1.4.1 10 | * Copyright (c) 2022 Niklas von Hertzen 11 | * Released under MIT License 12 | */ 13 | 14 | /*! ***************************************************************************** 15 | Copyright (c) Microsoft Corporation. 16 | 17 | Permission to use, copy, modify, and/or distribute this software for any 18 | purpose with or without fee is hereby granted. 19 | 20 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH 21 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY 22 | AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, 23 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM 24 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR 25 | OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR 26 | PERFORMANCE OF THIS SOFTWARE. 27 | ***************************************************************************** */ 28 | 29 | /*! cpexcel.js (C) 2013-present SheetJS -- http://sheetjs.com */ 30 | 31 | /*! cputils.js (C) 2013-present SheetJS -- http://sheetjs.com */ 32 | 33 | /*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh */ 34 | 35 | /*! xlsx.js (C) 2013-present SheetJS -- http://sheetjs.com */ 36 | 37 | 38 | /*! 39 | * vue-client-only v0.0.0-semantic-release 40 | * (c) 2021-present egoist <0x142857@gmail.com> 41 | * Released under the MIT License. 42 | */ 43 | 44 | /*! 45 | * vue-no-ssr v1.1.1 46 | * (c) 2018-present egoist <0x142857@gmail.com> 47 | * Released under the MIT License. 48 | */ 49 | 50 | /** 51 | * @license 52 | * Lodash 53 | * Copyright OpenJS Foundation and other contributors 54 | * Released under MIT license 55 | * Based on Underscore.js 1.8.3 56 | * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors 57 | */ 58 | 59 | 60 | /*! 61 | * Vue.js v2.7.14 62 | * (c) 2014-2022 Evan You 63 | * Released under the MIT License. 64 | */ 65 | 66 | /*! 67 | * vuex v3.6.2 68 | * (c) 2021 Evan You 69 | * @license MIT 70 | */ 71 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your static files. 6 | Each file inside this directory is mapped to `/`. 7 | 8 | Example: `/static/robots.txt` is mapped as `/robots.txt`. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static). 11 | -------------------------------------------------------------------------------- /docs/config.js: -------------------------------------------------------------------------------- 1 | var CONFIG = {"enableUserSettings":true,"showUserManual":true,"title":{"color":"#05668d","text":"Interactive organization chart"},"information":"Do you see something wrong? Please drop a mail to someone@example.com","photoUrl":{"prefix":"photos/","suffix":".png"},"startView":{"photos":true,"names":true,"columnview":true,"staffColumnview":false,"showNrDepartments":true,"showNrPeople":true},"enableScreenCapture":true,"levelColors":["#0c058d","#05668d","#8d6e05","#8d2305","#cfb303"],"editCommand":"_edit","dataFields":[{"name":"Location","type":"text"}],"personProperties":[{"name":"Phone","type":"text","order":0},{"name":"Email","type":"email","order":1},{"name":"Homepage","type":"url","order":2},{"name":"Country","type":"text","order":3},{"name":"City","type":"text","order":4},{"name":"Street","type":"text","order":5}]} -------------------------------------------------------------------------------- /docs/data.js: -------------------------------------------------------------------------------- 1 | var INPUT_DATA={"api_version":"2.0","chart":{"id":"1","name":"Software BV","description":"","parent_id":"","staff_department":"N","manager_id":"B01","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"2","name":"Office","description":"","parent_id":"1","staff_department":"Y","manager_id":"B01","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":true},{"id":"3","name":"Communication","description":"","parent_id":"1","staff_department":"Y","manager_id":"B02","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"2b5f3900-b816-b42a-f272-b9ae0ca0ab83","name":"comteam1","description":"","parent_id":"3","staff_department":"N","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false}],"showChildren":false},{"id":"4","name":"Strategy & Sustainability","description":"","parent_id":"1","staff_department":"Y","manager_id":"B01","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"5","name":"Desktop Development","description":"","parent_id":"1","staff_department":"N","manager_id":"B01","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"5_1","name":"Business customers","description":"","parent_id":"5","staff_department":"N","manager_id":"B02","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"5_1_0","name":"Business Office","description":"","parent_id":"5_1","staff_department":"Y","manager_id":"B05","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"5_1_1","name":"Front end team","description":"","parent_id":"5_1","staff_department":"N","manager_id":"B02","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"5_1_2","name":"Back end team","description":"","parent_id":"5_1","staff_department":"N","manager_id":"B05","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"5_1_3","name":"Api team","description":"","parent_id":"5_1","staff_department":"N","manager_id":"B02","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false}],"showChildren":false},{"id":"5_2","name":"Private Customer","description":"","parent_id":"5","staff_department":"N","manager_id":"B02","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false}],"showChildren":false},{"id":"6","name":"Mobile Development","description":"","parent_id":"1","staff_department":"N","manager_id":"B05","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"6_1","name":"Android","description":"","parent_id":"6","staff_department":"N","manager_id":"B04","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"6_2","name":"IOS","description":"The IOS department creates and maintains applications for Apple phones and tablets","parent_id":"6","staff_department":"N","manager_id":"B02","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false}],"showChildren":false},{"id":"7","name":"Web Development","description":"","parent_id":"1","staff_department":"N","manager_id":"B05","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"7_1","name":"IE troubleshooters","description":"","parent_id":"7","staff_department":"N","manager_id":"B05","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"7_2","name":"Javascript kiddies","description":"","parent_id":"7","staff_department":"N","manager_id":"B04","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"7_3","name":"Java masters","description":"","parent_id":"7","staff_department":"N","manager_id":"B05","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"7_4","name":"PHP people","description":"","parent_id":"7","staff_department":"N","manager_id":"B04","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false}],"showChildren":false},{"id":"9","name":"Finance","description":"","parent_id":"1","staff_department":"N","manager_id":"B03","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"9_1","name":"Payments","description":"","parent_id":"9","staff_department":"N","manager_id":"B04","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"9_2","name":"Invoices","description":"","parent_id":"9","staff_department":"N","manager_id":"B04","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"9_3","name":"Incasso","description":"","parent_id":"9","staff_department":"N","manager_id":"B03","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"6_3","name":"Other","description":"","parent_id":"9","staff_department":"N","manager_id":"B02","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"e6d71ac8-39c2-c334-4323-0688c96311f1","name":"new department type","description":"","parent_id":"6_3","staff_department":"N","manager_id":"B02","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"09a54438-5ef2-2295-b019-b18b922ed741","name":"subsub","description":"","parent_id":"e6d71ac8-39c2-c334-4323-0688c96311f1","staff_department":"N","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"50a97250-a02f-20de-4749-89103c1e40e6","name":"safsf","description":"","parent_id":"e6d71ac8-39c2-c334-4323-0688c96311f1","staff_department":"N","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false}],"showChildren":false}],"showChildren":false}],"showChildren":false},{"id":"10","name":"Risk Management","description":"","parent_id":"1","staff_department":"N","manager_id":"B05","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"10_1","name":"Central Risk Management","description":"","parent_id":"10","staff_department":"N","manager_id":"B04","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"10_6","name":"Operational Risk Management & Control","description":"","parent_id":"10","staff_department":"N","manager_id":"B05","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false}],"showChildren":false},{"id":"11","name":"Innovation & Technology","description":"","parent_id":"1","staff_department":"N","manager_id":"B04","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"11_1","name":"Innovation","description":"","parent_id":"11","staff_department":"N","manager_id":"B03","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"11_2","name":"Technology","description":"","parent_id":"11","staff_department":"N","manager_id":"B03","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false}],"showChildren":false},{"id":"12","name":"Human Resources","description":"","parent_id":"1","staff_department":"N","manager_id":"B05","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"12_1","name":"Transformation Team","description":"","parent_id":"12","staff_department":"N","manager_id":"B03","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"12_2","name":"Branding & Communications","description":"","parent_id":"12","staff_department":"N","manager_id":"B03","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false}],"showChildren":false}],"showChildren":true},"people":[{"id":"B01","name":"Big Boss","photo":"B01","functionName":"chief executive officer","fields":{"Email":"bigbos@someaddress.nl","Phone":"0345-394930203","Homepage":"nu.nl","Country":"Netherlands","City":"Amsterdam","Street":"Kalverstraat 1"}},{"id":"B03","name":"Mo Ney","photo":"B03","functionName":"CFO","fields":{"Email":"","Phone":"0345-394930204","Homepage":"linkedin.com","Country":"Netherlands","City":"Amsterdam","Street":"Vijzelstraat 143a"}},{"id":"B02","name":"S. Talker","photo":"B02","functionName":"HR","fields":{"Email":"","Phone":"0345-394930205","Homepage":"https://www.linkedin.com/company/philips/","Country":"Netherlands","City":"Amsterdam","Street":"Molenstraat 6"}},{"id":"df","name":"Big Boss1","photo":"","functionName":"","fields":{"Email":"","Phone":"0345-394930206","Homepage":"https://www.linkedin.com/company/philips/","Country":"Netherlands","City":"Amsterdam","Street":"Kerkwerg 15"}},{"id":"B05","name":"Mr x","photo":"B05","functionName":"","fields":{"Email":"MRX@somecomplany.mail","Phone":"0345-394930207","Homepage":"https://www.linkedin.com/company/philips/","Country":"Netherlands","City":"Utrecht","Street":"Dorpstraat 9"}},{"id":"B04","name":"Mr y","photo":"B04","functionName":"CIO","fields":{"Email":"","Phone":"0345-394930208","Homepage":"https://www.linkedin.com/company/philips/","Country":"Netherlands","City":"Utrecht","Street":"Stationslaan 88"}},{"id":"44","name":"michael","photo":"","functionName":"","fields":{"Email":"","Phone":"0345-394930209","Homepage":"https://www.linkedin.com/company/philips/","Country":"Netherlands","City":"Utrecht","Street":"Het verdun 5"}},{"name":"asdfasdf","id":"asdfasdf","manager":true,"photo":"","functionName":"","fields":{"Email":"","Phone":"","Homepage":"","Country":"","City":"","Street":""}},{"name":"asdfasdfasd","id":"fasddfasdf","manager":true,"photo":"","functionName":"","fields":{"Email":"","Phone":"","Homepage":"","Country":"","City":"","Street":""}},{"name":"jantje","id":"al;skdj;lasdjf","manager":false,"photo":"","functionName":"","fields":{"Email":"","Phone":"","Homepage":"","Country":"","City":"","Street":""}},{"name":"mrnew","id":"mrnew","photo":"","functionName":"","fields":{"Email":"","Phone":"","Homepage":"","Country":"","City":"","Street":""}}],"assignments":[{"department_id":"6_2","id":0,"person_id":"B01","role":"strategy consultanting"},{"department_id":"6_2","id":1,"person_id":"B03","role":"scrum master"},{"department_id":"6_2","id":4,"person_id":"B05","role":"ux/ui designer"},{"department_id":"6_2","id":5,"person_id":"B04","role":"new tester"},{"department_id":"6_2","id":6,"person_id":"44","role":"tester"},{"department_id":"5","id":9,"person_id":"al;skdj;lasdjf","role":""},{"department_id":"6_2","id":10,"person_id":"mrnew","role":"new job"}]};var UPDATED_ON="13-09-2020" -------------------------------------------------------------------------------- /docs/e8cd43a.js: -------------------------------------------------------------------------------- 1 | !function(e){function r(data){for(var r,n,l=data[0],f=data[1],d=data[2],i=0,h=[];i 2 | 3 | 4 | Organization chart 5 | 6 | 7 |
8 | 9 | 10 | -------------------------------------------------------------------------------- /docs/photos/B01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hoogkamer/vue-org-chart/1c1130429f10683479d4b13e669237fa43f1cdfd/docs/photos/B01.png -------------------------------------------------------------------------------- /docs/photos/B02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hoogkamer/vue-org-chart/1c1130429f10683479d4b13e669237fa43f1cdfd/docs/photos/B02.png -------------------------------------------------------------------------------- /docs/photos/B03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hoogkamer/vue-org-chart/1c1130429f10683479d4b13e669237fa43f1cdfd/docs/photos/B03.png -------------------------------------------------------------------------------- /docs/photos/B04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hoogkamer/vue-org-chart/1c1130429f10683479d4b13e669237fa43f1cdfd/docs/photos/B04.png -------------------------------------------------------------------------------- /docs/photos/B05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hoogkamer/vue-org-chart/1c1130429f10683479d4b13e669237fa43f1cdfd/docs/photos/B05.png -------------------------------------------------------------------------------- /docs/testfiles/config v1.js: -------------------------------------------------------------------------------- 1 | var CONFIG = {"title":{"color":"#05668d","text":"Interactive organization chart"},"information":"Do you see something wrong? Please drop a mail to someone@example.com","photoUrl":{"prefix":"photos/","suffix":".png"},"startView":{"photos":true,"names":true,"columnview":true,"staffColumnview":false,"showNrDepartments":true,"showNrPeople":true},"enableScreenCapture":true,"levelColors":["#0c058d","#05668d","#8d6e05","#8d2305","#cfb303"],"editCommand":"_edit","dataFields":[{"name":"Location","type":"text"}]} -------------------------------------------------------------------------------- /docs/testfiles/config_default.js: -------------------------------------------------------------------------------- 1 | var CONFIG = { 2 | // You can set the header color and title, 3 | title: { 4 | color: '#05668d', 5 | text: 'Interactive organization chart' 6 | }, 7 | 8 | // provide text to display when clicked on the (i) button (you can use HTML). Leave empty if not needed 9 | information: 10 | 'Do you see something wrong? Please drop a mail to someone@example.com', 11 | 12 | // The position where to get the photo's 13 | // For these locations it is fetched from "prefix" + photo + "suffix". 14 | // So if you have photo P0001, it will be fetched from "photos/P0001.png". 15 | // If you have an api or other locations which delivers photo's based on the photo field you can change that here. 16 | photoUrl: { 17 | prefix: 'photos/', 18 | suffix: '.png' 19 | }, 20 | 21 | // It will open a new tab to navigate to that page when clicked in the sidescreen on a person. 22 | // If you have an api which shows a user profile page you can enter the location here. 23 | // Don't specify this object if you want to see the profile information from this application (default) 24 | //linkUrl: { 25 | // prefix: 'photos/', 26 | // suffix: '.png' 27 | //}, 28 | 29 | // Sets the inital options (the user can change them in the menu bar) 30 | startView: { 31 | photos: true, 32 | names: true, 33 | columnview: true, 34 | staffColumnview: false, 35 | showNrDepartments: true, 36 | showNrPeople: true 37 | }, 38 | 39 | //This shows the icon to make an image of the graph to save. 40 | //This does not work when you are on a local folder, so disable this option then 41 | enableScreenCapture: true, 42 | 43 | //The colors of each level in the orgchart 44 | levelColors: [ 45 | '#0c058d', 46 | '#05668d', 47 | '#8d6e05', 48 | '#8d2305', 49 | '#cfb303' 50 | ], 51 | 52 | // the command to type in the searchbar to switch to edit mode 53 | editCommand: '_edit', 54 | dataFields: [{ name: 'Location', type: 'text' }] 55 | } 56 | -------------------------------------------------------------------------------- /docs/testfiles/data v1.js: -------------------------------------------------------------------------------- 1 | var INPUT_DATA={"api_version":"1.0","chart":{"id":"1","name":"Software BV","description":"","parent_id":"","staff_department":"N","manager_id":"B01","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"2","name":"Office","description":"","parent_id":"1","staff_department":"Y","manager_id":"B01","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"01268004-f249-5d93-41e4-c23947f11a62","name":"team 0","description":"","parent_id":"2","staff_department":"N","manager_id":"B04","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"a798e6cf-0b58-067e-44ef-237f3b3b253a","name":"team 1","description":"","parent_id":"2","staff_department":"N","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false}],"showChildren":false},{"id":"3","name":"Communication","description":"","parent_id":"1","staff_department":"Y","manager_id":"B02","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"2b5f3900-b816-b42a-f272-b9ae0ca0ab83","name":"comteam1","description":"","parent_id":"3","staff_department":"N","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false}],"showChildren":false},{"id":"4","name":"Strategy & Sustainability","description":"","parent_id":"1","staff_department":"Y","manager_id":"B01","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"5","name":"Desktop Development","description":"","parent_id":"1","staff_department":"N","manager_id":"B01","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"5_1","name":"Business customers","description":"","parent_id":"5","staff_department":"N","manager_id":"B02","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"5_1_0","name":"Business Office","description":"","parent_id":"5_1","staff_department":"Y","manager_id":"B05","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"5_1_1","name":"Front end team","description":"","parent_id":"5_1","staff_department":"N","manager_id":"B02","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"5_1_2","name":"Back end team","description":"","parent_id":"5_1","staff_department":"N","manager_id":"B05","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"5_1_3","name":"Api team","description":"","parent_id":"5_1","staff_department":"N","manager_id":"B02","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false}],"showChildren":false},{"id":"5_2","name":"Private Customer","description":"","parent_id":"5","staff_department":"N","manager_id":"B02","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false}],"showChildren":false},{"id":"6","name":"Mobile Development","description":"","parent_id":"1","staff_department":"N","manager_id":"B05","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"6_1","name":"Android","description":"","parent_id":"6","staff_department":"N","manager_id":"B04","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"6_2","name":"IOS","description":"The IOS department creates and maintains applications for Apple phones and tablets","parent_id":"6","staff_department":"N","manager_id":"B02","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false}],"showChildren":true},{"id":"7","name":"Web Development","description":"","parent_id":"1","staff_department":"N","manager_id":"B05","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"7_1","name":"IE troubleshooters","description":"","parent_id":"7","staff_department":"N","manager_id":"B05","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"7_2","name":"Javascript kiddies","description":"","parent_id":"7","staff_department":"N","manager_id":"B04","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"7_3","name":"Java masters","description":"","parent_id":"7","staff_department":"N","manager_id":"B05","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"7_4","name":"PHP people","description":"","parent_id":"7","staff_department":"N","manager_id":"B04","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false}],"showChildren":false},{"id":"9","name":"Finance","description":"","parent_id":"1","staff_department":"N","manager_id":"B03","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"9_1","name":"Payments","description":"","parent_id":"9","staff_department":"N","manager_id":"B04","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"9_2","name":"Invoices","description":"","parent_id":"9","staff_department":"N","manager_id":"B04","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"9_3","name":"Incasso","description":"","parent_id":"9","staff_department":"N","manager_id":"B03","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"6_3","name":"Other","description":"","parent_id":"9","staff_department":"N","manager_id":"B02","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"e6d71ac8-39c2-c334-4323-0688c96311f1","name":"new department type","description":"","parent_id":"6_3","staff_department":"N","manager_id":"B02","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"09a54438-5ef2-2295-b019-b18b922ed741","name":"subsub","description":"","parent_id":"e6d71ac8-39c2-c334-4323-0688c96311f1","staff_department":"N","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"50a97250-a02f-20de-4749-89103c1e40e6","name":"safsf","description":"","parent_id":"e6d71ac8-39c2-c334-4323-0688c96311f1","staff_department":"N","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false}],"showChildren":false}],"showChildren":false}],"showChildren":false},{"id":"10","name":"Risk Management","description":"","parent_id":"1","staff_department":"N","manager_id":"B05","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"10_1","name":"Central Risk Management","description":"","parent_id":"10","staff_department":"N","manager_id":"B04","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"10_6","name":"Operational Risk Management & Control","description":"","parent_id":"10","staff_department":"N","manager_id":"B05","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false}],"showChildren":false},{"id":"11","name":"Innovation & Technology","description":"","parent_id":"1","staff_department":"N","manager_id":"B04","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"11_1","name":"Innovation","description":"","parent_id":"11","staff_department":"N","manager_id":"B03","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"11_2","name":"Technology","description":"","parent_id":"11","staff_department":"N","manager_id":"B03","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false}],"showChildren":false},{"id":"12","name":"Human Resources","description":"","parent_id":"1","staff_department":"N","manager_id":"B05","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"12_1","name":"Transformation Team","description":"","parent_id":"12","staff_department":"N","manager_id":"B03","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"12_2","name":"Branding & Communications","description":"","parent_id":"12","staff_department":"N","manager_id":"B03","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false}],"showChildren":false}],"showChildren":true},"people":[{"id":"B01","name":"Big Boss","photo":"B01","main_role":"","function":"a","homepage":"nu.nl","street":"Kalverstraat 1","email":"bigbos@someaddress.nl","phone":"0345-394930203","country":"Netherlands","city":"Amsterdam","functionName":"chief executive officer"},{"id":"B03","name":"Mo Ney","photo":"B03","main_role":"","function":"","homepage":"linkedin.com","street":"Vijzelstraat 143a","email":"","phone":"0345-394930204","country":"Netherlands","city":"Amsterdam","functionName":"CFO"},{"id":"B02","name":"S. Talker","photo":"B02","main_role":"","function":"","homepage":"https://www.linkedin.com/company/philips/","street":"Molenstraat 6","email":"","phone":"0345-394930205","country":"Netherlands","city":"Amsterdam","functionName":"HR"},{"id":"df","name":"Big Boss1","photo":"","main_role":"","function":"","homepage":"https://www.linkedin.com/company/philips/","street":"Kerkwerg 15","email":"","phone":"0345-394930206","country":"Netherlands","city":"Amsterdam","functionName":""},{"id":"B05","name":"Mr x","photo":"B05","main_role":"","function":"","homepage":"https://www.linkedin.com/company/philips/","street":"Dorpstraat 9","email":"MRX@somecomplany.mail","phone":"0345-394930207","country":"Netherlands","city":"Utrecht","functionName":""},{"id":"B04","name":"Mr y","photo":"B04","main_role":"","function":"","homepage":"https://www.linkedin.com/company/philips/","street":"Stationslaan 88","email":"","phone":"0345-394930208","country":"Netherlands","city":"Utrecht","functionName":"CIO"},{"id":"44","name":"michael","photo":"","main_role":"","function":"web","homepage":"https://www.linkedin.com/company/philips/","street":"Het verdun 5","email":"","phone":"0345-394930209","country":"Netherlands","city":"Utrecht","functionName":""},{"name":"asdfasdf","id":"asdfasdf","manager":true,"photo":"","email":"","phone":"","country":"","city":"","street":"","functionName":"","homepage":""},{"name":"asdfasdfasd","id":"fasddfasdf","manager":true,"photo":"","email":"","phone":"","country":"","city":"","street":"","functionName":"","homepage":""},{"name":"jantje","id":"al;skdj;lasdjf","manager":false,"photo":"","email":"","phone":"","country":"","city":"","street":"","functionName":"","homepage":""},{"name":"mrnew","id":"mrnew","photo":"","email":"","phone":"","country":"","city":"","street":"","functionName":"","homepage":""}],"assignments":[{"department_id":"6_2","id":0,"person_id":"B01","role":"strategy consultanting"},{"department_id":"6_2","id":1,"person_id":"B03","role":"scrum master"},{"department_id":"6_2","id":4,"person_id":"B05","role":"ux/ui designer"},{"department_id":"6_2","id":5,"person_id":"B04","role":"new tester"},{"department_id":"6_2","id":6,"person_id":"44","role":"tester"},{"department_id":"5","id":9,"person_id":"al;skdj;lasdjf","role":""},{"department_id":"6_2","id":10,"person_id":"mrnew","role":"new job"}]};var UPDATED_ON="28-07-2020" -------------------------------------------------------------------------------- /docs/translate.js: -------------------------------------------------------------------------------- 1 | var UINAMES = { 2 | person: { 3 | name: 'Name', 4 | function: 'Function', 5 | id: 'Employee ID', 6 | departments: 'Departments' 7 | }, 8 | sidebar: { 9 | detailTabName: 'Details', 10 | peopleTabName: 'People', 11 | departmentName: 'Name', 12 | departmentManager: 'Manager', 13 | departmentDescription: 'Description', 14 | departmentType: 'Department type', 15 | departmentHierarchy: 'Hierarchy', 16 | departmentTypeStaff: 'Staff department', 17 | departmentTypeNormal: 'Normal department', 18 | managerOfDepartment: 'Manager of department' 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Application Layouts. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts). 8 | -------------------------------------------------------------------------------- /layouts/default.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 56 | -------------------------------------------------------------------------------- /middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your application middleware. 6 | The middleware lets you define custom function to be ran before rendering a page or a group of pages (layouts). 7 | 8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware). 9 | -------------------------------------------------------------------------------- /nuxt 2.4 update if problems.txt: -------------------------------------------------------------------------------- 1 | rm -rf node_modules package-lock.json 2 | # you may or may not need to do a full npm cache clean - I did in my case 3 | npm cache clean --force 4 | npm install webpack@4.28.4 --save-dev --save-exact 5 | npm install acorn-dynamic-import@4.0.0 --save-dev 6 | npm install acorn@6.0.5 --save-dev 7 | npm i 8 | npm update acorn --depth 20 9 | npm dedupe -------------------------------------------------------------------------------- /nuxt.config.generate.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | ...require('./nuxt.config'), 3 | ...{ 4 | build: { 5 | publicPath: '.' 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /nuxt.config.js: -------------------------------------------------------------------------------- 1 | const pkg = require('./package') 2 | 3 | module.exports = { 4 | target: 'static', 5 | ssr: false, 6 | // change router for github pages 7 | router: { mode: 'hash' }, 8 | /* 9 | ** Headers of the page 10 | */ 11 | 12 | head: { 13 | title: 'Organization chart', 14 | meta: [ 15 | { charset: 'utf-8' }, 16 | { 17 | name: 'viewport', 18 | content: 'width=device-width, initial-scale=1' 19 | }, 20 | { 21 | hid: 'description', 22 | name: 'description', 23 | content: 'Free Organization Chart generator and viewer' 24 | }, 25 | { 26 | hid: 'keywords', 27 | name: 'keywords', 28 | content: 29 | 'vuejs, nuxt, javascript, orgchart, organization, open-source' 30 | }, 31 | { 32 | name: 'google-site-verification', 33 | content: 'faMBWsCcw7RZQp1wVNh-Hgy7aQ8D2KMMNpwg0LKtsu4' 34 | } 35 | ], 36 | script: [ 37 | { 38 | src: 'data.js' 39 | }, 40 | { src: 'config.js' }, 41 | { src: 'translate.js' } 42 | ], 43 | link: [ 44 | { rel: 'icon', type: 'image/x-icon', href: './favicon.ico' } 45 | ] 46 | }, 47 | 48 | /* 49 | ** Customize the progress-bar color 50 | */ 51 | loading: { color: '#fff' }, 52 | 53 | loadingIndicator: { 54 | name: 'circle', 55 | color: '#05668d', 56 | background: 'white' 57 | }, 58 | /* 59 | ** Global CSS 60 | */ 61 | css: ['~/assets/css/main.css'], 62 | 63 | /* 64 | ** Plugins to load before mounting the App 65 | */ 66 | plugins: ['~/plugins/AsyncComputed'], 67 | 68 | /* 69 | ** Nuxt.js modules 70 | */ 71 | 72 | modules: ['nuxt-material-design-icons'], 73 | 74 | /* 75 | ** Build configuration 76 | */ 77 | build: {}, 78 | builder: { 79 | /* 80 | ** You can extend webpack config here 81 | */ 82 | 83 | plugins: [], 84 | extend(config, ctx) { 85 | // Run ESLint on save 86 | if (ctx.isDev && ctx.isClient) { 87 | config.module.rules.push({ 88 | enforce: 'pre', 89 | test: /\.(js|vue)$/, 90 | loader: 'eslint-loader', 91 | exclude: /(node_modules)/ 92 | }) 93 | } 94 | } 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /orgchart.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hoogkamer/vue-org-chart/1c1130429f10683479d4b13e669237fa43f1cdfd/orgchart.zip -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vueOrgChart", 3 | "version": "1.0.0", 4 | "description": "Organization chart", 5 | "author": "Michael Hoogkamer", 6 | "private": true, 7 | "scripts": { 8 | "dev": "nuxt", 9 | "build": "nuxt build", 10 | "start": "nuxt start", 11 | "generate": "nuxt generate -c nuxt.config.generate.js", 12 | "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", 13 | "precommit": "npm run lint", 14 | "build:gh-pages": "cross-env DEPLOY_ENV=GH_PAGES nuxt build", 15 | "generate:gh-pages": "cross-env DEPLOY_ENV=GH_PAGES nuxt generate" 16 | }, 17 | "dependencies": { 18 | "array-from-polyfill": "^1.0.1", 19 | "eventsource": "^1.1.2", 20 | "file-saver": "^2.0.0", 21 | "html2canvas": "^1.0.0-alpha.12", 22 | "lodash": "^4.17.19", 23 | "nodemon": "^2.0.4", 24 | "nuxt": "^2.15.7", 25 | "nuxt-material-design-icons": "^1.0.4", 26 | "panzoom": "^7.1.2", 27 | "pug": "^3.0.1", 28 | "pug-plain-loader": "^1.0.0", 29 | "vue-async-computed": "^3.5.2", 30 | "xlsx": "^0.17.0" 31 | }, 32 | "devDependencies": { 33 | "acorn": "^6.4.1", 34 | "acorn-dynamic-import": "^4.0.0", 35 | "babel-eslint": "^8.2.1", 36 | "cross-env": "^5.2.0", 37 | "eslint": "^5.16.0", 38 | "eslint-config-prettier": "^3.6.0", 39 | "eslint-loader": "^2.1.2", 40 | "eslint-plugin-prettier": "2.6.2", 41 | "eslint-plugin-vue": "^6.2.2", 42 | "prettier": "1.14.3", 43 | "webpack": "^4.42.1" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the `*.vue` files inside this directory and create the router of your application. 5 | 6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing). 7 | -------------------------------------------------------------------------------- /pages/index.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 123 | 124 | 157 | -------------------------------------------------------------------------------- /plugins/AsyncComputed.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import AsyncComputed from 'vue-async-computed' 3 | import 'array-from-polyfill' 4 | 5 | Vue.use(AsyncComputed) 6 | -------------------------------------------------------------------------------- /plugins/HelpFunctions.js: -------------------------------------------------------------------------------- 1 | export function createTree(array, parent, nextparent, tree) { 2 | tree = typeof tree !== 'undefined' ? tree : [] 3 | parent = typeof parent !== 'undefined' ? parent : { id: '' } 4 | var children = array.filter(child => child.parentId === parent.id) 5 | if (!parent.id) { 6 | tree = children 7 | } else { 8 | parent['children'] = children 9 | parent['parent'] = nextparent.id ? nextparent : null 10 | parent['showChildren'] = false 11 | } 12 | if (children.length) { 13 | children.forEach(function(child) { 14 | createTree(array, child, parent) 15 | }) 16 | } 17 | return tree 18 | } 19 | -------------------------------------------------------------------------------- /plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Javascript plugins that you want to run before mounting the root Vue.js application. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins). 8 | -------------------------------------------------------------------------------- /plugins/vueMatertialIcons.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hoogkamer/vue-org-chart/1c1130429f10683479d4b13e669237fa43f1cdfd/plugins/vueMatertialIcons.js -------------------------------------------------------------------------------- /static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your static files. 6 | Each file inside this directory is mapped to `/`. 7 | 8 | Example: `/static/robots.txt` is mapped as `/robots.txt`. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static). 11 | -------------------------------------------------------------------------------- /static/config.js: -------------------------------------------------------------------------------- 1 | var CONFIG = {"enableUserSettings":true,"showUserManual":true,"title":{"color":"#05668d","text":"Interactive organization chart"},"information":"Do you see something wrong? Please drop a mail to someone@example.com","photoUrl":{"prefix":"photos/","suffix":".png"},"startView":{"photos":true,"names":true,"columnview":true,"staffColumnview":false,"showNrDepartments":true,"showNrPeople":true},"enableScreenCapture":true,"levelColors":["#0c058d","#05668d","#8d6e05","#8d2305","#cfb303"],"editCommand":"_edit","dataFields":[{"name":"Location","type":"text"}],"personProperties":[{"name":"Phone","type":"text","order":0},{"name":"Email","type":"email","order":1},{"name":"Homepage","type":"url","order":2},{"name":"Country","type":"text","order":3},{"name":"City","type":"text","order":4},{"name":"Street","type":"text","order":5}]} -------------------------------------------------------------------------------- /static/data.js: -------------------------------------------------------------------------------- 1 | var INPUT_DATA={"api_version":"2.0","chart":{"id":"1","name":"Software BV","description":"","parent_id":"","staff_department":"N","manager_id":"B01","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"2","name":"Office","description":"","parent_id":"1","staff_department":"Y","manager_id":"B01","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":true},{"id":"3","name":"Communication","description":"","parent_id":"1","staff_department":"Y","manager_id":"B02","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"2b5f3900-b816-b42a-f272-b9ae0ca0ab83","name":"comteam1","description":"","parent_id":"3","staff_department":"N","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false}],"showChildren":false},{"id":"4","name":"Strategy & Sustainability","description":"","parent_id":"1","staff_department":"Y","manager_id":"B01","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"5","name":"Desktop Development","description":"","parent_id":"1","staff_department":"N","manager_id":"B01","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"5_1","name":"Business customers","description":"","parent_id":"5","staff_department":"N","manager_id":"B02","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"5_1_0","name":"Business Office","description":"","parent_id":"5_1","staff_department":"Y","manager_id":"B05","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"5_1_1","name":"Front end team","description":"","parent_id":"5_1","staff_department":"N","manager_id":"B02","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"5_1_2","name":"Back end team","description":"","parent_id":"5_1","staff_department":"N","manager_id":"B05","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"5_1_3","name":"Api team","description":"","parent_id":"5_1","staff_department":"N","manager_id":"B02","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false}],"showChildren":false},{"id":"5_2","name":"Private Customer","description":"","parent_id":"5","staff_department":"N","manager_id":"B02","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false}],"showChildren":false},{"id":"6","name":"Mobile Development","description":"","parent_id":"1","staff_department":"N","manager_id":"B05","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"6_1","name":"Android","description":"","parent_id":"6","staff_department":"N","manager_id":"B04","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"6_2","name":"IOS","description":"The IOS department creates and maintains applications for Apple phones and tablets","parent_id":"6","staff_department":"N","manager_id":"B02","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false}],"showChildren":false},{"id":"7","name":"Web Development","description":"","parent_id":"1","staff_department":"N","manager_id":"B05","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"7_1","name":"IE troubleshooters","description":"","parent_id":"7","staff_department":"N","manager_id":"B05","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"7_2","name":"Javascript kiddies","description":"","parent_id":"7","staff_department":"N","manager_id":"B04","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"7_3","name":"Java masters","description":"","parent_id":"7","staff_department":"N","manager_id":"B05","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"7_4","name":"PHP people","description":"","parent_id":"7","staff_department":"N","manager_id":"B04","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false}],"showChildren":false},{"id":"9","name":"Finance","description":"","parent_id":"1","staff_department":"N","manager_id":"B03","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"9_1","name":"Payments","description":"","parent_id":"9","staff_department":"N","manager_id":"B04","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"9_2","name":"Invoices","description":"","parent_id":"9","staff_department":"N","manager_id":"B04","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"9_3","name":"Incasso","description":"","parent_id":"9","staff_department":"N","manager_id":"B03","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"6_3","name":"Other","description":"","parent_id":"9","staff_department":"N","manager_id":"B02","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"e6d71ac8-39c2-c334-4323-0688c96311f1","name":"new department type","description":"","parent_id":"6_3","staff_department":"N","manager_id":"B02","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"09a54438-5ef2-2295-b019-b18b922ed741","name":"subsub","description":"","parent_id":"e6d71ac8-39c2-c334-4323-0688c96311f1","staff_department":"N","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"50a97250-a02f-20de-4749-89103c1e40e6","name":"safsf","description":"","parent_id":"e6d71ac8-39c2-c334-4323-0688c96311f1","staff_department":"N","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false}],"showChildren":false}],"showChildren":false}],"showChildren":false},{"id":"10","name":"Risk Management","description":"","parent_id":"1","staff_department":"N","manager_id":"B05","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"10_1","name":"Central Risk Management","description":"","parent_id":"10","staff_department":"N","manager_id":"B04","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"10_6","name":"Operational Risk Management & Control","description":"","parent_id":"10","staff_department":"N","manager_id":"B05","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false}],"showChildren":false},{"id":"11","name":"Innovation & Technology","description":"","parent_id":"1","staff_department":"N","manager_id":"B04","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"11_1","name":"Innovation","description":"","parent_id":"11","staff_department":"N","manager_id":"B03","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"11_2","name":"Technology","description":"","parent_id":"11","staff_department":"N","manager_id":"B03","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false}],"showChildren":false},{"id":"12","name":"Human Resources","description":"","parent_id":"1","staff_department":"N","manager_id":"B05","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"12_1","name":"Transformation Team","description":"","parent_id":"12","staff_department":"N","manager_id":"B03","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"12_2","name":"Branding & Communications","description":"","parent_id":"12","staff_department":"N","manager_id":"B03","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false}],"showChildren":false}],"showChildren":true},"people":[{"id":"B01","name":"Big Boss","photo":"B01","functionName":"chief executive officer","fields":{"Email":"bigbos@someaddress.nl","Phone":"0345-394930203","Homepage":"nu.nl","Country":"Netherlands","City":"Amsterdam","Street":"Kalverstraat 1"}},{"id":"B03","name":"Mo Ney","photo":"B03","functionName":"CFO","fields":{"Email":"","Phone":"0345-394930204","Homepage":"linkedin.com","Country":"Netherlands","City":"Amsterdam","Street":"Vijzelstraat 143a"}},{"id":"B02","name":"S. Talker","photo":"B02","functionName":"HR","fields":{"Email":"","Phone":"0345-394930205","Homepage":"https://www.linkedin.com/company/philips/","Country":"Netherlands","City":"Amsterdam","Street":"Molenstraat 6"}},{"id":"df","name":"Big Boss1","photo":"","functionName":"","fields":{"Email":"","Phone":"0345-394930206","Homepage":"https://www.linkedin.com/company/philips/","Country":"Netherlands","City":"Amsterdam","Street":"Kerkwerg 15"}},{"id":"B05","name":"Mr x","photo":"B05","functionName":"","fields":{"Email":"MRX@somecomplany.mail","Phone":"0345-394930207","Homepage":"https://www.linkedin.com/company/philips/","Country":"Netherlands","City":"Utrecht","Street":"Dorpstraat 9"}},{"id":"B04","name":"Mr y","photo":"B04","functionName":"CIO","fields":{"Email":"","Phone":"0345-394930208","Homepage":"https://www.linkedin.com/company/philips/","Country":"Netherlands","City":"Utrecht","Street":"Stationslaan 88"}},{"id":"44","name":"michael","photo":"","functionName":"","fields":{"Email":"","Phone":"0345-394930209","Homepage":"https://www.linkedin.com/company/philips/","Country":"Netherlands","City":"Utrecht","Street":"Het verdun 5"}},{"name":"asdfasdf","id":"asdfasdf","manager":true,"photo":"","functionName":"","fields":{"Email":"","Phone":"","Homepage":"","Country":"","City":"","Street":""}},{"name":"asdfasdfasd","id":"fasddfasdf","manager":true,"photo":"","functionName":"","fields":{"Email":"","Phone":"","Homepage":"","Country":"","City":"","Street":""}},{"name":"jantje","id":"al;skdj;lasdjf","manager":false,"photo":"","functionName":"","fields":{"Email":"","Phone":"","Homepage":"","Country":"","City":"","Street":""}},{"name":"mrnew","id":"mrnew","photo":"","functionName":"","fields":{"Email":"","Phone":"","Homepage":"","Country":"","City":"","Street":""}}],"assignments":[{"department_id":"6_2","id":0,"person_id":"B01","role":"strategy consultanting"},{"department_id":"6_2","id":1,"person_id":"B03","role":"scrum master"},{"department_id":"6_2","id":4,"person_id":"B05","role":"ux/ui designer"},{"department_id":"6_2","id":5,"person_id":"B04","role":"new tester"},{"department_id":"6_2","id":6,"person_id":"44","role":"tester"},{"department_id":"5","id":9,"person_id":"al;skdj;lasdjf","role":""},{"department_id":"6_2","id":10,"person_id":"mrnew","role":"new job"}]};var UPDATED_ON="13-09-2020" -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hoogkamer/vue-org-chart/1c1130429f10683479d4b13e669237fa43f1cdfd/static/favicon.ico -------------------------------------------------------------------------------- /static/photos/B01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hoogkamer/vue-org-chart/1c1130429f10683479d4b13e669237fa43f1cdfd/static/photos/B01.png -------------------------------------------------------------------------------- /static/photos/B02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hoogkamer/vue-org-chart/1c1130429f10683479d4b13e669237fa43f1cdfd/static/photos/B02.png -------------------------------------------------------------------------------- /static/photos/B03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hoogkamer/vue-org-chart/1c1130429f10683479d4b13e669237fa43f1cdfd/static/photos/B03.png -------------------------------------------------------------------------------- /static/photos/B04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hoogkamer/vue-org-chart/1c1130429f10683479d4b13e669237fa43f1cdfd/static/photos/B04.png -------------------------------------------------------------------------------- /static/photos/B05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hoogkamer/vue-org-chart/1c1130429f10683479d4b13e669237fa43f1cdfd/static/photos/B05.png -------------------------------------------------------------------------------- /static/testfiles/config v1.js: -------------------------------------------------------------------------------- 1 | var CONFIG = {"title":{"color":"#05668d","text":"Interactive organization chart"},"information":"Do you see something wrong? Please drop a mail to someone@example.com","photoUrl":{"prefix":"photos/","suffix":".png"},"startView":{"photos":true,"names":true,"columnview":true,"staffColumnview":false,"showNrDepartments":true,"showNrPeople":true},"enableScreenCapture":true,"levelColors":["#0c058d","#05668d","#8d6e05","#8d2305","#cfb303"],"editCommand":"_edit","dataFields":[{"name":"Location","type":"text"}]} -------------------------------------------------------------------------------- /static/testfiles/config_default.js: -------------------------------------------------------------------------------- 1 | var CONFIG = { 2 | // You can set the header color and title, 3 | title: { 4 | color: '#05668d', 5 | text: 'Interactive organization chart' 6 | }, 7 | 8 | // provide text to display when clicked on the (i) button (you can use HTML). Leave empty if not needed 9 | information: 10 | 'Do you see something wrong? Please drop a mail to someone@example.com', 11 | 12 | // The position where to get the photo's 13 | // For these locations it is fetched from "prefix" + photo + "suffix". 14 | // So if you have photo P0001, it will be fetched from "photos/P0001.png". 15 | // If you have an api or other locations which delivers photo's based on the photo field you can change that here. 16 | photoUrl: { 17 | prefix: 'photos/', 18 | suffix: '.png' 19 | }, 20 | 21 | // It will open a new tab to navigate to that page when clicked in the sidescreen on a person. 22 | // If you have an api which shows a user profile page you can enter the location here. 23 | // Don't specify this object if you want to see the profile information from this application (default) 24 | //linkUrl: { 25 | // prefix: 'photos/', 26 | // suffix: '.png' 27 | //}, 28 | 29 | // Sets the inital options (the user can change them in the menu bar) 30 | startView: { 31 | photos: true, 32 | names: true, 33 | columnview: true, 34 | staffColumnview: false, 35 | showNrDepartments: true, 36 | showNrPeople: true 37 | }, 38 | 39 | //This shows the icon to make an image of the graph to save. 40 | //This does not work when you are on a local folder, so disable this option then 41 | enableScreenCapture: true, 42 | 43 | //The colors of each level in the orgchart 44 | levelColors: [ 45 | '#0c058d', 46 | '#05668d', 47 | '#8d6e05', 48 | '#8d2305', 49 | '#cfb303' 50 | ], 51 | 52 | // the command to type in the searchbar to switch to edit mode 53 | editCommand: '_edit', 54 | dataFields: [{ name: 'Location', type: 'text' }] 55 | } 56 | -------------------------------------------------------------------------------- /static/testfiles/data v1.js: -------------------------------------------------------------------------------- 1 | var INPUT_DATA={"api_version":"1.0","chart":{"id":"1","name":"Software BV","description":"","parent_id":"","staff_department":"N","manager_id":"B01","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"2","name":"Office","description":"","parent_id":"1","staff_department":"Y","manager_id":"B01","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"01268004-f249-5d93-41e4-c23947f11a62","name":"team 0","description":"","parent_id":"2","staff_department":"N","manager_id":"B04","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"a798e6cf-0b58-067e-44ef-237f3b3b253a","name":"team 1","description":"","parent_id":"2","staff_department":"N","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false}],"showChildren":false},{"id":"3","name":"Communication","description":"","parent_id":"1","staff_department":"Y","manager_id":"B02","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"2b5f3900-b816-b42a-f272-b9ae0ca0ab83","name":"comteam1","description":"","parent_id":"3","staff_department":"N","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false}],"showChildren":false},{"id":"4","name":"Strategy & Sustainability","description":"","parent_id":"1","staff_department":"Y","manager_id":"B01","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"5","name":"Desktop Development","description":"","parent_id":"1","staff_department":"N","manager_id":"B01","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"5_1","name":"Business customers","description":"","parent_id":"5","staff_department":"N","manager_id":"B02","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"5_1_0","name":"Business Office","description":"","parent_id":"5_1","staff_department":"Y","manager_id":"B05","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"5_1_1","name":"Front end team","description":"","parent_id":"5_1","staff_department":"N","manager_id":"B02","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"5_1_2","name":"Back end team","description":"","parent_id":"5_1","staff_department":"N","manager_id":"B05","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"5_1_3","name":"Api team","description":"","parent_id":"5_1","staff_department":"N","manager_id":"B02","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false}],"showChildren":false},{"id":"5_2","name":"Private Customer","description":"","parent_id":"5","staff_department":"N","manager_id":"B02","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false}],"showChildren":false},{"id":"6","name":"Mobile Development","description":"","parent_id":"1","staff_department":"N","manager_id":"B05","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"6_1","name":"Android","description":"","parent_id":"6","staff_department":"N","manager_id":"B04","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"6_2","name":"IOS","description":"The IOS department creates and maintains applications for Apple phones and tablets","parent_id":"6","staff_department":"N","manager_id":"B02","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false}],"showChildren":true},{"id":"7","name":"Web Development","description":"","parent_id":"1","staff_department":"N","manager_id":"B05","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"7_1","name":"IE troubleshooters","description":"","parent_id":"7","staff_department":"N","manager_id":"B05","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"7_2","name":"Javascript kiddies","description":"","parent_id":"7","staff_department":"N","manager_id":"B04","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"7_3","name":"Java masters","description":"","parent_id":"7","staff_department":"N","manager_id":"B05","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"7_4","name":"PHP people","description":"","parent_id":"7","staff_department":"N","manager_id":"B04","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false}],"showChildren":false},{"id":"9","name":"Finance","description":"","parent_id":"1","staff_department":"N","manager_id":"B03","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"9_1","name":"Payments","description":"","parent_id":"9","staff_department":"N","manager_id":"B04","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"9_2","name":"Invoices","description":"","parent_id":"9","staff_department":"N","manager_id":"B04","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"9_3","name":"Incasso","description":"","parent_id":"9","staff_department":"N","manager_id":"B03","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"6_3","name":"Other","description":"","parent_id":"9","staff_department":"N","manager_id":"B02","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"e6d71ac8-39c2-c334-4323-0688c96311f1","name":"new department type","description":"","parent_id":"6_3","staff_department":"N","manager_id":"B02","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"09a54438-5ef2-2295-b019-b18b922ed741","name":"subsub","description":"","parent_id":"e6d71ac8-39c2-c334-4323-0688c96311f1","staff_department":"N","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"50a97250-a02f-20de-4749-89103c1e40e6","name":"safsf","description":"","parent_id":"e6d71ac8-39c2-c334-4323-0688c96311f1","staff_department":"N","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false}],"showChildren":false}],"showChildren":false}],"showChildren":false},{"id":"10","name":"Risk Management","description":"","parent_id":"1","staff_department":"N","manager_id":"B05","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"10_1","name":"Central Risk Management","description":"","parent_id":"10","staff_department":"N","manager_id":"B04","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"10_6","name":"Operational Risk Management & Control","description":"","parent_id":"10","staff_department":"N","manager_id":"B05","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false}],"showChildren":false},{"id":"11","name":"Innovation & Technology","description":"","parent_id":"1","staff_department":"N","manager_id":"B04","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"11_1","name":"Innovation","description":"","parent_id":"11","staff_department":"N","manager_id":"B03","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"11_2","name":"Technology","description":"","parent_id":"11","staff_department":"N","manager_id":"B03","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false}],"showChildren":false},{"id":"12","name":"Human Resources","description":"","parent_id":"1","staff_department":"N","manager_id":"B05","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[{"id":"12_1","name":"Transformation Team","description":"","parent_id":"12","staff_department":"N","manager_id":"B03","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false},{"id":"12_2","name":"Branding & Communications","description":"","parent_id":"12","staff_department":"N","manager_id":"B03","dataFields":[{"name":"Location","value":"","type":"text"}],"children":[],"showChildren":false}],"showChildren":false}],"showChildren":true},"people":[{"id":"B01","name":"Big Boss","photo":"B01","main_role":"","function":"a","homepage":"nu.nl","street":"Kalverstraat 1","email":"bigbos@someaddress.nl","phone":"0345-394930203","country":"Netherlands","city":"Amsterdam","functionName":"chief executive officer"},{"id":"B03","name":"Mo Ney","photo":"B03","main_role":"","function":"","homepage":"linkedin.com","street":"Vijzelstraat 143a","email":"","phone":"0345-394930204","country":"Netherlands","city":"Amsterdam","functionName":"CFO"},{"id":"B02","name":"S. Talker","photo":"B02","main_role":"","function":"","homepage":"https://www.linkedin.com/company/philips/","street":"Molenstraat 6","email":"","phone":"0345-394930205","country":"Netherlands","city":"Amsterdam","functionName":"HR"},{"id":"df","name":"Big Boss1","photo":"","main_role":"","function":"","homepage":"https://www.linkedin.com/company/philips/","street":"Kerkwerg 15","email":"","phone":"0345-394930206","country":"Netherlands","city":"Amsterdam","functionName":""},{"id":"B05","name":"Mr x","photo":"B05","main_role":"","function":"","homepage":"https://www.linkedin.com/company/philips/","street":"Dorpstraat 9","email":"MRX@somecomplany.mail","phone":"0345-394930207","country":"Netherlands","city":"Utrecht","functionName":""},{"id":"B04","name":"Mr y","photo":"B04","main_role":"","function":"","homepage":"https://www.linkedin.com/company/philips/","street":"Stationslaan 88","email":"","phone":"0345-394930208","country":"Netherlands","city":"Utrecht","functionName":"CIO"},{"id":"44","name":"michael","photo":"","main_role":"","function":"web","homepage":"https://www.linkedin.com/company/philips/","street":"Het verdun 5","email":"","phone":"0345-394930209","country":"Netherlands","city":"Utrecht","functionName":""},{"name":"asdfasdf","id":"asdfasdf","manager":true,"photo":"","email":"","phone":"","country":"","city":"","street":"","functionName":"","homepage":""},{"name":"asdfasdfasd","id":"fasddfasdf","manager":true,"photo":"","email":"","phone":"","country":"","city":"","street":"","functionName":"","homepage":""},{"name":"jantje","id":"al;skdj;lasdjf","manager":false,"photo":"","email":"","phone":"","country":"","city":"","street":"","functionName":"","homepage":""},{"name":"mrnew","id":"mrnew","photo":"","email":"","phone":"","country":"","city":"","street":"","functionName":"","homepage":""}],"assignments":[{"department_id":"6_2","id":0,"person_id":"B01","role":"strategy consultanting"},{"department_id":"6_2","id":1,"person_id":"B03","role":"scrum master"},{"department_id":"6_2","id":4,"person_id":"B05","role":"ux/ui designer"},{"department_id":"6_2","id":5,"person_id":"B04","role":"new tester"},{"department_id":"6_2","id":6,"person_id":"44","role":"tester"},{"department_id":"5","id":9,"person_id":"al;skdj;lasdjf","role":""},{"department_id":"6_2","id":10,"person_id":"mrnew","role":"new job"}]};var UPDATED_ON="28-07-2020" -------------------------------------------------------------------------------- /static/translate.js: -------------------------------------------------------------------------------- 1 | var UINAMES = { 2 | person: { 3 | name: 'Name', 4 | function: 'Function', 5 | id: 'Employee ID', 6 | departments: 'Departments' 7 | }, 8 | sidebar: { 9 | detailTabName: 'Details', 10 | peopleTabName: 'People', 11 | departmentName: 'Name', 12 | departmentManager: 'Manager', 13 | departmentDescription: 'Description', 14 | departmentType: 'Department type', 15 | departmentHierarchy: 'Hierarchy', 16 | departmentTypeStaff: 'Staff department', 17 | departmentTypeNormal: 'Normal department', 18 | managerOfDepartment: 'Manager of department' 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Vuex Store files. 6 | Vuex Store option is implemented in the Nuxt.js framework. 7 | 8 | Creating a file in this directory activate the option in the framework automatically. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store). 11 | -------------------------------------------------------------------------------- /vendor.yml: -------------------------------------------------------------------------------- 1 | devtools/* linguist-vendored 2 | --------------------------------------------------------------------------------