Shapes with Base Type - Vue Diagram

<template> <DxDiagram id="diagram" ref="diagram" > <DxCustomShape v-for="employee in employees" :category="'employees'" :type="'employee' + employee.ID" :base-type="'rectangle'" :default-text="employee.Full_Name" :allow-edit-text="false" :key="employee.ID" /> <DxToolbox :visible="true"> <DxGroup :category="'employees'" :title="'Employees'" :display-mode="'texts'" /> </DxToolbox> </DxDiagram> </template> <script setup lang="ts"> import { watch, ref } from 'vue'; import { DxDiagram, DxGroup, DxToolbox, DxCustomShape, } from 'devextreme-vue/diagram'; import service from './data.ts'; import 'whatwg-fetch'; const employees = service.getEmployees(); const diagram = ref(); watch(diagram, ({ instance }) => { fetch('../../../../data/diagram-employees.json') .then((response) => response.json()) .then((json) => { instance.import(JSON.stringify(json)); }) .catch(() => { throw new Error('Data Loading Error'); }); }); </script> <style scoped> #diagram { height: 725px; } </style>

import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.1.3/css/dx-diagram.min.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.1.3/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" /> <script src="https://cdn.jsdelivr.net/npm/typescript@5.4.5/lib/typescript.js"></script> <script type="module"> import * as vueCompilerSFC from "https://cdn.jsdelivr.net/npm/@vue/compiler-sfc@3.4.27/dist/compiler-sfc.esm-browser.js"; window.vueCompilerSFC = vueCompilerSFC; </script> <script src="https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.ts"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </body> </html>

{ "page": { "width": 8391, "height": 11907, "pageWidth": 8391, "pageHeight": 11906, "pageLandscape": false, "gridSize": 180, "snapToGrid": true }, "connectors": [ { "key": "4", "locked": false, "zIndex": 0, "points": [ { "x": 4140, "y": 1800 }, { "x": 4140, "y": 2880 } ], "beginItemKey": "0", "beginConnectionPointIndex": 2, "endItemKey": "1", "endConnectionPointIndex": 0 }, { "key": "5", "locked": false, "zIndex": 0, "points": [ { "x": 4140, "y": 1800 }, { "x": 1620, "y": 2880 } ], "beginItemKey": "0", "beginConnectionPointIndex": 2, "endItemKey": "2", "endConnectionPointIndex": 0 }, { "key": "6", "locked": false, "zIndex": 0, "points": [ { "x": 4140, "y": 1800 }, { "x": 6660, "y": 2880 } ], "beginItemKey": "0", "beginConnectionPointIndex": 2, "endItemKey": "3", "endConnectionPointIndex": 0 } ], "shapes": [ { "key": "0", "locked": false, "zIndex": 0, "type": "employee1", "x": 3420, "y": 720, "width": 1440, "height": 1080 }, { "key": "1", "locked": false, "zIndex": 0, "type": "employee2", "x": 3420, "y": 2880, "width": 1440, "height": 1080 }, { "key": "2", "locked": false, "zIndex": 0, "type": "employee3", "x": 900, "y": 2880, "width": 1440, "height": 1080 }, { "key": "3", "locked": false, "zIndex": 0, "type": "employee4", "x": 5940, "y": 2880, "width": 1440, "height": 1080 } ] }

[ { "id": 1, "firstName": "John", "lastName": "Heart", "fullName": "John Heart", "prefix": "Mr.", "title": "CEO", "address": "351 S Hill St.", "city": "Los Angeles", "stateID": 5, "zipcode": 90013, "email": "jheart@dx-email.com", "skype": "jheart_DX_skype", "mobilePhone": "2135559392", "homePhone": "2135559208", "birthDate": "1964-03-16T00:00:00", "hireDate": "1995-01-15T00:00:00", "departmentID": 6, "department": "Management", "status": "Salaried", "personalProfile": "John has been in the Audio/Video industry since 1990. He has led DevAv as its CEO since 2003.\r\n\r\nWhen not working hard as the CEO, John loves to golf and bowl. He once bowled a perfect game of 300.", "pictureName": "01.png", "picture": "images/employees/01.png" }, { "id": 2, "firstName": "Samantha", "lastName": "Bright", "fullName": "Samantha Bright", "prefix": "Dr.", "title": "COO", "address": "5801 Wilshire Blvd.", "city": "Los Angeles", "stateID": 5, "zipcode": 90036, "email": "samanthab@dx-email.com", "skype": "samanthab_DX_skype", "mobilePhone": "2135552858", "homePhone": "2135550288", "birthDate": "1966-05-02T00:00:00", "hireDate": "2004-05-24T00:00:00", "departmentID": 6, "department": "Management", "status": "Salaried", "personalProfile": "Samantha has been DevAV's COO since 2009. She is a proud mom of 3 boys and 1 girl. \r\n\r\nWhen not working hard as our Operations Manager, she volunteers her time with the American Red Cross.", "pictureName": "30.png", "picture": "images/employees/30.png" }, { "id": 3, "firstName": "Arthur", "lastName": "Miller", "fullName": "Arthur Miller", "prefix": "Mr.", "title": "CTO", "address": "3800 Homer St.", "city": "Los Angeles", "stateID": 5, "zipcode": 90031, "email": "arthurm@dx-email.com", "skype": "arthurm_DX_skype", "mobilePhone": "3105558583", "homePhone": "3105556542", "birthDate": "1972-07-11T00:00:00", "hireDate": "2007-12-18T00:00:00", "departmentID": 6, "department": "Management", "status": "Salaried", "personalProfile": "Arthur has been a prominent figure in the AV industry for decades. His love for technology is unmatched.\r\n\r\nIn his free time, Arthur races cars and jumps out of airplanes (with a parachute).", "pictureName": "10.png", "picture": "images/employees/10.png" }, { "id": 4, "firstName": "Robert", "lastName": "Reagan", "fullName": "Robert Reagan", "prefix": "Mr.", "title": "CMO", "address": "4 Westmoreland Pl.", "city": "Pasadena", "stateID": 5, "zipcode": 91103, "email": "robertr@dx-email.com", "skype": "robertr_DX_skype", "mobilePhone": "8185552387", "homePhone": "8185552438", "birthDate": "1974-09-07T00:00:00", "hireDate": "2002-11-08T00:00:00", "departmentID": 6, "department": "Management", "status": "Salaried", "personalProfile": "Robert was recently voted the CMO of the year by CMO Magazine. He is a proud member of the DevAV Management Team.\r\n\r\nRobert is a championship BBQ chef, so when you get the chance ask him for his secret recipe.", "pictureName": "03.png", "picture": "images/employees/03.png" }, { "id": 5, "firstName": "Greta", "lastName": "Sims", "fullName": "Greta Sims", "prefix": "Ms.", "title": "HR Manager", "address": "1700 S Grandview Dr.", "city": "Alhambra", "stateID": 5, "zipcode": 91803, "email": "gretas@dx-email.com", "skype": "gretas_DX_skype", "mobilePhone": "8185556546", "homePhone": "8185550976", "birthDate": "1977-11-22T00:00:00", "hireDate": "1998-04-23T00:00:00", "departmentID": 5, "department": "Human Resources", "status": "Salaried", "personalProfile": "Greta has been DevAV's HR Manager since 2003. She joined DevAV from Sonee Corp.\r\n\r\nGreta is currently training for the NYC marathon. Her best marathon time is 4 hours. Go Greta.", "pictureName": "04.png", "picture": "images/employees/04.png" }, { "id": 6, "firstName": "Brett", "lastName": "Wade", "fullName": "Brett Wade", "prefix": "Mr.", "title": "IT Manager", "address": "1120 Old Mill Rd.", "city": "San Marino", "stateID": 5, "zipcode": 91108, "email": "brettw@dx-email.com", "skype": "brettw_DX_skype", "mobilePhone": "6265550358", "homePhone": "6265555985", "birthDate": "1968-12-01T00:00:00", "hireDate": "2009-03-06T00:00:00", "departmentID": 7, "department": "IT", "status": "Salaried", "personalProfile": "Brett came to DevAv from Microsoft and has led our IT department since 2012.\r\n\r\nWhen he is not working hard for DevAV, he coaches Little League (he was a high school pitcher).", "pictureName": "05.png", "picture": "images/employees/05.png" }, { "id": 7, "firstName": "Sandra", "lastName": "Johnson", "fullName": "Sandra Johnson", "prefix": "Mrs.", "title": "Controller", "address": "4600 N Virginia Rd.", "city": "Long Beach", "stateID": 5, "zipcode": 90807, "email": "sandraj@dx-email.com", "skype": "sandraj_DX_skype", "mobilePhone": "5625552082", "homePhone": "5625558272", "birthDate": "1974-11-15T00:00:00", "hireDate": "2005-05-11T00:00:00", "departmentID": 5, "department": "Human Resources", "status": "Salaried", "personalProfile": "Sandra is a CPA and has been our controller since 2008. She loves to interact with staff so if you've not met her, be certain to say hi.\r\n\r\nSandra has 2 daughters both of whom are accomplished gymnasts.", "pictureName": "06.png", "picture": "images/employees/06.png" }, { "id": 8, "firstName": "Edward", "lastName": "Holmes", "fullName": "Ed Holmes", "prefix": "Dr.", "title": "Sales Manager", "address": "23200 Pacific Coast Hwy", "city": "Malibu", "stateID": 5, "zipcode": 90265, "email": "edwardh@dx-email.com", "skype": "edwardh_DX_skype", "mobilePhone": "3105551288", "homePhone": "3105556098", "birthDate": "1973-07-14T00:00:00", "hireDate": "2005-06-19T00:00:00", "departmentID": 1, "department": "Sales", "status": "Salaried", "personalProfile": "As Ed likes to say, he can sell ice to eskimos. He has been selling AV products his entire life. He was promoted to Sales Manager in 2011.\r\n\r\nEd's 2 boys are on the high school football team (Go Malibu High!)", "pictureName": "11.png", "picture": "images/employees/11.png" }, { "id": 9, "firstName": "Barbara", "lastName": "Banks", "fullName": "Barb Banks", "prefix": "Mrs.", "title": "Support Manager", "address": "17985 Pacific Coast Hwy", "city": "Pacific Palisades", "stateID": 5, "zipcode": 90272, "email": "barbarab@dx-email.com", "skype": "barbarab_DX_skype", "mobilePhone": "3105553355", "homePhone": "3105559792", "birthDate": "1979-04-14T00:00:00", "hireDate": "2002-08-07T00:00:00", "departmentID": 2, "department": "Support", "status": "Salaried", "personalProfile": "Barb has been DevAV's support manager for nearly 3 years. You can usually find her behind her desk working hard to solve customer problems.\r\n\r\nIn her spare time, Barb loves to play chess and checkers.", "pictureName": "20.png", "picture": "images/employees/20.png" }, { "id": 10, "firstName": "Kevin", "lastName": "Carter", "fullName": "Kevin Carter", "prefix": "Mr.", "title": "Shipping Manager", "address": "424 N Main St.", "city": "Los Angeles", "stateID": 5, "zipcode": 90012, "email": "kevinc@dx-email.com", "skype": "kevinc_DX_skype", "mobilePhone": "2135552840", "homePhone": "2135558038", "birthDate": "1978-01-09T00:00:00", "hireDate": "2009-08-11T00:00:00", "departmentID": 3, "department": "Shipping", "status": "Salaried", "personalProfile": "Kevin is our hard-working shipping manager and has been helping that department work like clockwork for 18 months.\r\n\r\nWhen not in the office, he is usually on the basketball court playing pick-up games.", "pictureName": "07.png", "picture": "images/employees/07.png" }, { "id": 11, "firstName": "Cynthia", "lastName": "Stanwick", "fullName": "Cindy Stanwick", "prefix": "Ms.", "title": "HR Assistant", "address": "2211 Bonita Dr.", "city": "Glendale", "stateID": 5, "zipcode": 91208, "email": "cindys@dx-email.com", "skype": "cindys_DX_skype", "mobilePhone": "8185556655", "homePhone": "8185550828", "birthDate": "1985-06-05T00:00:00", "hireDate": "2008-03-24T00:00:00", "departmentID": 5, "department": "Human Resources", "status": "Salaried", "personalProfile": "Cindy joined us in 2008 and has been in the HR department for 2 years. \r\n\r\nShe was recently awarded employee of the month. Way to go Cindy!", "pictureName": "08.png", "picture": "images/employees/08.png" }, { "id": 12, "firstName": "Sam", "lastName": "Hill", "fullName": "Sammy Hill", "prefix": "Mr.", "title": "Sales Assistant", "address": "645 Prospect Crescent", "city": "Pasadena", "stateID": 5, "zipcode": 91103, "email": "sammyh@dx-email.com", "skype": "sammyh_DX_skype", "mobilePhone": "6265557292", "homePhone": "6265543168", "birthDate": "1984-02-17T00:00:00", "hireDate": "2012-02-01T00:00:00", "departmentID": 1, "department": "Sales", "status": "Salaried", "personalProfile": "Sammy is proud to be a member of the DevAV team. He joined the team in 2012 and has been in the sales department from the beginning.\r\n\r\nHe has just picked up golf so you can find him on the links every weekend.", "pictureName": "12.png", "picture": "images/employees/12.png" }, { "id": 13, "firstName": "David", "lastName": "Jones", "fullName": "Davey Jones", "prefix": "Mr.", "title": "Shipping Assistant", "address": "391 S Orange Grove Blvd.", "city": "Pasadena", "stateID": 5, "zipcode": 91184, "email": "davidj@dx-email.com", "skype": "davidj_DX_skype", "mobilePhone": "6265550281", "homePhone": "6265554422", "birthDate": "1983-03-06T00:00:00", "hireDate": "2011-04-24T00:00:00", "departmentID": 3, "department": "Shipping", "status": "Salaried", "personalProfile": "Davey Jones - yes, he was named after the singer. Though he does not sing, he does do a great job in the shipping department.\r\n\r\nHe is a DJ in his spare time, so if you are having a party, make sure to inquire about his services.", "pictureName": "13.png", "picture": "images/employees/13.png" }, { "id": 14, "firstName": "Victor", "lastName": "Norris", "fullName": "Victor Norris", "prefix": "Mr.", "title": "Shipping Assistant", "address": "811 West 7th St.", "city": "Los Angeles", "stateID": 5, "zipcode": 90017, "email": "victorn@dx-email.com", "skype": "victorn_DX_skype", "mobilePhone": "2135559278", "homePhone": "2135552827", "birthDate": "1986-07-23T00:00:00", "hireDate": "2012-07-23T00:00:00", "departmentID": 3, "department": "Shipping", "status": "Salaried", "personalProfile": "Victor Norris came to us directly from College where he was a sum cum laude.\r\n\r\nHe loves chemistry and is working on converting lead into gold. Good luck Victor.", "pictureName": "14.png", "picture": "images/employees/14.png" }, { "id": 15, "firstName": "Mary", "lastName": "Stern", "fullName": "Mary Stern", "prefix": "Ms.", "title": "Shipping Assistant", "address": "113 N Cedar St.", "city": "Glendale", "stateID": 5, "zipcode": 91206, "email": "marys@dx-email.com", "skype": "marys_DX_skype", "mobilePhone": "8185557857", "homePhone": "8185558375", "birthDate": "1982-04-08T00:00:00", "hireDate": "2012-08-12T00:00:00", "departmentID": 3, "department": "Shipping", "status": "Salaried", "personalProfile": "Mary works with DevAV on a part-time basis. The rest of her day is spent raising her newborn. \r\n\r\nMary was a champion swimmer in high school and qualified for the Olympics.", "pictureName": "15.png", "picture": "images/employees/15.png" }, { "id": 16, "firstName": "Robin", "lastName": "Cosworth", "fullName": "Robin Cosworth", "prefix": "Mrs.", "title": "Shipping Assistant", "address": "501 N Main St.", "city": "Los Angeles", "stateID": 5, "zipcode": 90012, "email": "robinc@dx-email.com", "skype": "robinc_DX_skype", "mobilePhone": "8185550942", "homePhone": "8185559266", "birthDate": "1981-06-12T00:00:00", "hireDate": "2012-09-01T00:00:00", "departmentID": 3, "department": "Shipping", "status": "Salaried", "personalProfile": "Robin Cosworth is another new hire for DevAV's shipping department.\r\n\r\nRobin was voted most likely to succeed in high school. If you meet her, you'll know why…one of the smartest people around.", "pictureName": "16.png", "picture": "images/employees/16.png" }, { "id": 17, "firstName": "Kelly", "lastName": "Rodriguez", "fullName": "Kelly Rodriguez", "prefix": "Ms.", "title": "Support Assistant", "address": "1601 W Mountain St.", "city": "Glendale", "stateID": 5, "zipcode": 91201, "email": "kellyr@dx-email.com", "skype": "kellyr_DX_skype", "mobilePhone": "8185559248", "homePhone": "8185559792", "birthDate": "1988-05-11T00:00:00", "hireDate": "2012-10-13T00:00:00", "departmentID": 2, "department": "Support", "status": "Salaried", "personalProfile": "Kelly loves people and that's why she joined DevAV's support department. One of the funniest people in the company, she does stand-up on the weekends at the Laugh Factory.", "pictureName": "17.png", "picture": "images/employees/17.png" }, { "id": 18, "firstName": "James", "lastName": "Anderson", "fullName": "James Anderson", "prefix": "Mr.", "title": "Support Assistant", "address": "4800 Hollywood Blvd", "city": "Los Angeles", "stateID": 5, "zipcode": 90027, "email": "jamesa@dx-email.com", "skype": "jamesa_DX_skype", "mobilePhone": "3235554702", "homePhone": "3235552087", "birthDate": "1987-01-29T00:00:00", "hireDate": "2012-10-18T00:00:00", "departmentID": 2, "department": "Support", "status": "Salaried", "personalProfile": "James joined DevAV in 2012 and has been helping our customers ever since.\r\n\r\nIn his free time, he loves to build websites and watch college basketball games.", "pictureName": "18.png", "picture": "images/employees/18.png" }, { "id": 19, "firstName": "Anthony", "lastName": "Remmen", "fullName": "Antony Remmen", "prefix": "Mr.", "title": "Support Assistant", "address": "1542 S Beacon St", "city": "San Pedro", "stateID": 5, "zipcode": 90731, "email": "anthonyr@dx-email.com", "skype": "anthonyr_DX_skype", "mobilePhone": "3105556625", "homePhone": "3105550009", "birthDate": "1986-02-19T00:00:00", "hireDate": "2013-01-19T00:00:00", "departmentID": 2, "department": "Support", "status": "Salaried", "personalProfile": "Anthony is shy and did not want to share any personal information for his profile. \r\n\r\nHe is a proud member of our support team so do talk to him when you get the chance. Let's get him to open up.", "pictureName": "19.png", "picture": "images/employees/19.png" }, { "id": 20, "firstName": "Olivia", "lastName": "Peyton", "fullName": "Olivia Peyton", "prefix": "Mrs.", "title": "Sales Assistant", "address": "807 W Paseo Del Mar", "city": "San Pedro", "stateID": 5, "zipcode": 90731, "email": "oliviap@dx-email.com", "skype": "oliviap_DX_skype", "mobilePhone": "3105552728", "homePhone": "3105558247", "birthDate": "1981-06-03T00:00:00", "hireDate": "2012-05-14T00:00:00", "departmentID": 1, "department": "Sales", "status": "Salaried", "personalProfile": "Olivia loves to sell. She has been selling DevAV products since 2012. \r\n\r\nOlivia was homecoming queen in high school. She is expecting her first child in 6 months. Good Luck Olivia.", "pictureName": "09.png", "picture": "images/employees/09.png" }, { "id": 21, "firstName": "Taylor", "lastName": "Riley", "fullName": "Taylor Riley", "prefix": "Mr.", "title": "Network Admin", "address": "7776 Torreyson Dr", "city": "West Hollywood", "stateID": 5, "zipcode": 90046, "email": "taylorr@dx-email.com", "skype": "taylorr_DX_skype", "mobilePhone": "3105557276", "homePhone": "3105552134", "birthDate": "1982-08-14T00:00:00", "hireDate": "2012-04-14T00:00:00", "departmentID": 7, "department": "IT", "status": "Salaried", "personalProfile": "If you are like the rest of us at DevAV, then you've probably reached out for help from Taylor. He does a great job as a member of our IT department.", "pictureName": "21.png", "picture": "images/employees/21.png" }, { "id": 22, "firstName": "Amelia", "lastName": "Harper", "fullName": "Amelia Harper", "prefix": "Mrs.", "title": "Network Admin", "address": "527 W 7th St", "city": "Los Angeles", "stateID": 5, "zipcode": 90014, "email": "ameliah@dx-email.com", "skype": "ameliah_DX_skype", "mobilePhone": "2135554276", "homePhone": "2135553792", "birthDate": "1983-11-19T00:00:00", "hireDate": "2011-02-10T00:00:00", "departmentID": 7, "department": "IT", "status": "Salaried", "personalProfile": "Amelia (like Taylor) is a member of our hard-working network admin team. She loves to help so don’t hesistate to ask her for assistance.\r\n\r\nIn her spare time, Amelia coaches young tennis players at the park.", "pictureName": "22.png", "picture": "images/employees/22.png" }, { "id": 23, "firstName": "Walter", "lastName": "Hobbs", "fullName": "Wally Hobbs", "prefix": "Mr.", "title": "Programmer", "address": "10385 Shadow Oak Dr", "city": "Chatsworth", "stateID": 5, "zipcode": 91311, "email": "wallyh@dx-email.com", "skype": "wallyh_DX_skype", "mobilePhone": "8185558872", "homePhone": "8185552478", "birthDate": "1984-12-24T00:00:00", "hireDate": "2011-02-17T00:00:00", "departmentID": 7, "department": "IT", "status": "Salaried", "personalProfile": "Walter has been developing apps and websites for DevAV since 2011. His passion is software and if you ever walk by his desk, you'll know why.\r\n\r\nWally once worked 72 hours straight - writing code and fixing bugs.", "pictureName": "23.png", "picture": "images/employees/23.png" }, { "id": 24, "firstName": "Bradley", "lastName": "Jameson", "fullName": "Brad Jameson", "prefix": "Mr.", "title": "Programmer", "address": "1100 Pico St", "city": "San Fernando", "stateID": 5, "zipcode": 91340, "email": "bradleyj@dx-email.com", "skype": "bradleyj_DX_skype", "mobilePhone": "8185554646", "homePhone": "8185559098", "birthDate": "1988-10-12T00:00:00", "hireDate": "2011-03-02T00:00:00", "departmentID": 7, "department": "IT", "status": "Salaried", "personalProfile": "Brad works with Walter and together, they are a 1-2 punch unlike any other. \r\n\r\nHe once ran a marathon and then realized that running is not something he should ever do again.", "pictureName": "24.png", "picture": "images/employees/24.png" }, { "id": 25, "firstName": "Karen", "lastName": "Goodson", "fullName": "Karen Goodson", "prefix": "Miss", "title": "Programmer", "address": "309 Monterey Rd", "city": "South Pasadena", "stateID": 5, "zipcode": 91030, "email": "kareng@dx-email.com", "skype": "kareng_DX_skype", "mobilePhone": "6265550908", "homePhone": "6265550822", "birthDate": "1987-04-26T00:00:00", "hireDate": "2011-03-14T00:00:00", "departmentID": 7, "department": "IT", "status": "Salaried", "personalProfile": "Karen likes to remind everyone that she is not grumpy…she just has a lot of work to do.\r\n\r\nA part of DevAV's programmer team, she likes to surf during the weekends.", "pictureName": "25.png", "picture": "images/employees/25.png" }, { "id": 26, "firstName": "Marcus", "lastName": "Orbison", "fullName": "Marcus Orbison", "prefix": "Mr.", "title": "Travel Coordinator", "address": "501 N Main St", "city": "Los Angeles", "stateID": 5, "zipcode": 90012, "email": "marcuso@dx-email.com", "skype": "marcuso_DX_skype", "mobilePhone": "2135557098", "homePhone": "2135552608", "birthDate": "1982-03-02T00:00:00", "hireDate": "2005-05-19T00:00:00", "departmentID": 5, "department": "Human Resources", "status": "Salaried", "personalProfile": "Marcus is our travel coordinator and spends most of his work day trying to save DevAV money on travel costs.\r\n\r\nHe recommends that everyone sign up for a frequent flier account and rack up those miles.", "pictureName": "26.png", "picture": "images/employees/26.png" }, { "id": 27, "firstName": "Sandra", "lastName": "Bright", "fullName": "Sandy Bright", "prefix": "Ms.", "title": "Benefits Coordinator", "address": "7570 McGroarty Ter", "city": "Tujunga", "stateID": 5, "zipcode": 91042, "email": "sandrab@dx-email.com", "skype": "sandrab_DX_skype", "mobilePhone": "8185550524", "homePhone": "8185555072", "birthDate": "1983-09-11T00:00:00", "hireDate": "2005-06-04T00:00:00", "departmentID": 5, "department": "Human Resources", "status": "Salaried", "personalProfile": "Sandy is here to answer any of your benefits related questions. She works directly with DevAV's HR manager so let her know what you need.\r\n\r\nSandy's daughter recently won a spelling bee. Congrats to you and your daughter Sandy.", "pictureName": "27.png", "picture": "images/employees/27.png" }, { "id": 28, "firstName": "Morgan", "lastName": "Kennedy", "fullName": "Morgan Kennedy", "prefix": "Mrs.", "title": "Graphic Designer", "address": "11222 Dilling St", "city": "San Fernando Valley", "stateID": 5, "zipcode": 91604, "email": "morgank@dx-email.com", "skype": "morgank_DX_skype", "mobilePhone": "8185558238", "homePhone": "8185553973", "birthDate": "1984-07-17T00:00:00", "hireDate": "2012-01-11T00:00:00", "departmentID": 7, "department": "IT", "status": "Salaried", "personalProfile": "Morgan is our graphic designer and we are so lucky to have such a dedicated person on our team.\r\n\r\nMorgan designs wedding invitations on her spare time. Her portfolio is amazing.", "pictureName": "28.png", "picture": "images/employees/28.png" }, { "id": 29, "firstName": "Violet", "lastName": "Bailey", "fullName": "Violet Bailey", "prefix": "Ms.", "title": "Jr Graphic Designer", "address": "1418 Descanso Dr", "city": "La Canada", "stateID": 5, "zipcode": 91011, "email": "violetb@dx-email.com", "skype": "violetb_DX_skype", "mobilePhone": "8185552478", "homePhone": "8185553085", "birthDate": "1985-06-10T00:00:00", "hireDate": "2012-01-19T00:00:00", "departmentID": 7, "department": "IT", "status": "Salaried", "personalProfile": "Violet joined us after graduating from the Art Institute as a jr designer.\r\n\r\nViolet's favorte painter is Picasso. Ask her to tell you why she loves Picasso.", "pictureName": "29.png", "picture": "images/employees/29.png" }, { "id": 30, "firstName": "Kent", "lastName": "Samuelson", "fullName": "Ken Samuelson", "prefix": "Dr.", "title": "Ombudsman", "address": "12100 Mora Dr", "city": "Santa Fe Springs", "stateID": 5, "zipcode": 90670, "email": "kents@dx-email.com", "skype": "kents_DX_skype", "mobilePhone": "5625559282", "homePhone": "5625559248", "birthDate": "1972-09-11T00:00:00", "hireDate": "2009-04-22T00:00:00", "departmentID": 5, "department": "Human Resources", "status": "Salaried", "personalProfile": "As our ombudsman, Kent is on the front-lines solving customer problems and helping our partners address issues out in the field.\r\n\r\nHe is a classically trained musician and is a member of the Chamber Orchestra.", "pictureName": "02.png", "picture": "images/employees/02.png" }, { "id": 31, "firstName": "Natalie", "lastName": "Maguirre", "fullName": "Nat Maguiree", "prefix": "Mrs.", "title": "Trainer", "address": "6400 E Bixby Hill Rd", "city": "Long Beach", "stateID": 5, "zipcode": 90815, "email": "nataliem@dx-email.com", "skype": "nataliem_DX_skype", "mobilePhone": "5625558377", "homePhone": "5625552829", "birthDate": "1977-10-07T00:00:00", "hireDate": "2008-06-19T00:00:00", "departmentID": 2, "department": "Support", "status": "Salaried", "personalProfile": "Natalie travels the US and teaches our partners how to explain the benefits of our products to customers.\r\n\r\nShe is a proud wife and mom and volunteers her time at the elementary school.", "pictureName": "31.png", "picture": "images/employees/31.png" }, { "id": 32, "firstName": "Bart", "lastName": "Arnaz", "fullName": "Bart Arnaz", "prefix": "Mr.", "title": "Director of Engineering", "address": "13109 Old Myford Rd", "city": "Irvine", "stateID": 5, "zipcode": 92602, "email": "barta@dx-email.com", "skype": "barta_DX_skype", "mobilePhone": "7145552000", "homePhone": "7145556629", "birthDate": "1979-11-01T00:00:00", "hireDate": "2008-06-29T00:00:00", "departmentID": 4, "department": "Engineering", "status": "Salaried", "personalProfile": "Without Bart, we'd have no products to sell. As Director of Engineering, he is responsible for so much of what we do.\r\n\r\nBart is a father of 2 little girls and hopes one day that they'll play professional ice hockey.", "pictureName": "32.png", "picture": "images/employees/32.png" }, { "id": 33, "firstName": "Leah", "lastName": "Simpson", "fullName": "Leah Simpson", "prefix": "Mrs.", "title": "Test Coordinator", "address": "6755 Newlin Ave", "city": "Whittier", "stateID": 5, "zipcode": 90601, "email": "leahs@dx-email.com", "skype": "leahs_DX_skype", "mobilePhone": "5625595830", "homePhone": "5625557372", "birthDate": "1983-04-19T00:00:00", "hireDate": "2009-02-14T00:00:00", "departmentID": 4, "department": "Engineering", "status": "Salaried", "personalProfile": "Leah is DevAV's test coordinator and is focused on helping our company deliver rock-solid AV products.\r\n\r\nLeah set a record in high school for the fastest 100m sprint for 11th graders. Amazing!", "pictureName": "33.png", "picture": "images/employees/33.png" }, { "id": 34, "firstName": "Arnold", "lastName": "Schwartz", "fullName": "Arnie Schwartz", "prefix": "Mr.", "title": "Engineer", "address": "125 W Elm St", "city": "Brea", "stateID": 5, "zipcode": 92821, "email": "arnolds@dx-email.com", "skype": "arnolds_DX_skype", "mobilePhone": "7145558882", "homePhone": "7145551834", "birthDate": "1985-02-28T00:00:00", "hireDate": "2009-02-19T00:00:00", "departmentID": 4, "department": "Engineering", "status": "Salaried", "personalProfile": "Arnold works with Bart and is responsible for some of our best selling AV products.\r\n\r\nArnold's oldest son has hopes of joining DevAV when he grows up. We'd love to have him on-board someday!", "pictureName": "34.png", "picture": "images/employees/34.png" }, { "id": 35, "firstName": "William", "lastName": "Zimmer", "fullName": "Billy Zimmer", "prefix": "Mr.", "title": "Engineer", "address": "1325 Prospect Dr", "city": "Redlands", "stateID": 5, "zipcode": 92373, "email": "williamz@dx-email.com", "skype": "william_DX_skype", "mobilePhone": "9095556939", "homePhone": "9095558268", "birthDate": "1986-06-16T00:00:00", "hireDate": "2009-01-15T00:00:00", "departmentID": 4, "department": "Engineering", "status": "Salaried", "personalProfile": "Billy graduated from CalTech and so he is a smart cookie. If you ever talk to him, ask him about his GPA.\r\n\r\nBilly says his only hobby is reading engineering books. Come'on Billy have some fun!", "pictureName": "51.png", "picture": "images/employees/51.png" }, { "id": 36, "firstName": "Samantha", "lastName": "Piper", "fullName": "Samantha Piper", "prefix": "Ms.", "title": "Engineer", "address": "200 E Ave 43", "city": "Los Angeles", "stateID": 5, "zipcode": 90031, "email": "samanthap@dx-email.com", "skype": "samanthap_DX_skype", "mobilePhone": "3235554512", "homePhone": "3235558338", "birthDate": "1984-12-01T00:00:00", "hireDate": "2008-01-22T00:00:00", "departmentID": 4, "department": "Engineering", "status": "Salaried", "personalProfile": "Samantha Piper has been selected Employee of the Year 7 times. The reasons are many, but perhaps most important, she works on some of the best products on the planet.", "pictureName": "35.png", "picture": "images/employees/35.png" }, { "id": 37, "firstName": "Margaret", "lastName": "Boxter", "fullName": "Maggie Boxter", "prefix": "Mrs.", "title": "Engineer", "address": "3101 W Harvard St", "city": "Santa Ana", "stateID": 5, "zipcode": 92704, "email": "margaretb@dx-email.com", "skype": "margaretb_DX_skype", "mobilePhone": "7145557239", "homePhone": "7145550827", "birthDate": "1987-11-22T00:00:00", "hireDate": "2009-03-01T00:00:00", "departmentID": 4, "department": "Engineering", "status": "Salaried", "personalProfile": "Maggie is an MIT graduate and has been with DevAV since 2009. \r\n\r\nIn her spare time, Maggie loves to experiment for home automation systems.", "pictureName": "36.png", "picture": "images/employees/36.png" }, { "id": 38, "firstName": "Terry", "lastName": "Bradley", "fullName": "Terry Bradley", "prefix": "Mr.", "title": "QA Engineer", "address": "4595 Cochran St", "city": "Simi Valley", "stateID": 5, "zipcode": 93063, "email": "terryb@dx-email.com", "skype": "terryb_DX_skype", "mobilePhone": "8055552788", "homePhone": "8055551882", "birthDate": "1984-01-09T00:00:00", "hireDate": "2007-10-18T00:00:00", "departmentID": 4, "department": "Engineering", "status": "Salaried", "personalProfile": "Quality is everything and we are lucky to have Terry in our QA team. He is an extremely hard working individual and loves work almost as much as he loves eating.", "pictureName": "37.png", "picture": "images/employees/37.png" }, { "id": 39, "firstName": "Gabriel", "lastName": "Jones", "fullName": "Gabe Jones", "prefix": "Mr.", "title": "Retail Coordinator", "address": "1008 Elden Way", "city": "Beverly Hills", "stateID": 5, "zipcode": 90210, "email": "gabrielj@dx-email.com", "skype": "gabrielj_DX_skype", "mobilePhone": "3105555395", "homePhone": "3105558372", "birthDate": "1987-12-29T00:00:00", "hireDate": "2005-08-14T00:00:00", "departmentID": 2, "department": "Support", "status": "Salaried", "personalProfile": "Gabriel has been in retail sales for a very long time and can give you lots of ideas on how to save money when buying products at retail stores.\r\n\r\nGabe is a proud father and a dedicated husband.", "pictureName": "38.png", "picture": "images/employees/38.png" }, { "id": 40, "firstName": "Lucy", "lastName": "Ball", "fullName": "Lucy Ball", "prefix": "Ms.", "title": "Sales Assistant", "address": "203 Chautauqua Blvd", "city": "Pacific Palisades", "stateID": 5, "zipcode": 90272, "email": "lucyb@dx-email.com", "skype": "lucyb_DX_skype", "mobilePhone": "3105553357", "homePhone": "3105552426", "birthDate": "1986-08-09T00:00:00", "hireDate": "2006-07-19T00:00:00", "departmentID": 1, "department": "Sales", "status": "Salaried", "personalProfile": "Lucy Ball is not just a sales assistant…She IS the ultimate sales assistant.\r\n\r\nIn her spare time, Lucy loves to act and has hopes of having her own sitcom someday.", "pictureName": "39.png", "picture": "images/employees/39.png" }, { "id": 41, "firstName": "James", "lastName": "Packard", "fullName": "Jim Packard", "prefix": "Mr.", "title": "Retail Sales Manager", "address": "3801 Chester Ave", "city": "Bakersfield", "stateID": 5, "zipcode": 93301, "email": "jamesp@dx-email.com", "skype": "jamesp_DX_skype", "mobilePhone": "6615558224", "homePhone": "6615557577", "birthDate": "1985-06-22T00:00:00", "hireDate": "2010-11-11T00:00:00", "departmentID": 1, "department": "Sales", "status": "Commission", "personalProfile": "What would we do without Jim. As the point-person for all retail sales, he has generated more money for DevAV than any other team-member.\r\n\r\nJim used to be a shot-putter in College and almost set the national record in his senior year.", "pictureName": "40.png", "picture": "images/employees/40.png" }, { "id": 42, "firstName": "Hannah", "lastName": "Brooklyn", "fullName": "Hannah Brookly", "prefix": "Mrs.", "title": "Online Sales Manager", "address": "536 Marsh Street", "city": "San Luis Obispo", "stateID": 5, "zipcode": 93401, "email": "hannahb@dx-email.com", "skype": "hannahb_DX_skype", "mobilePhone": "8055553627", "homePhone": "8055557247", "birthDate": "1984-07-02T00:00:00", "hireDate": "2011-01-08T00:00:00", "departmentID": 1, "department": "Sales", "status": "Commission", "personalProfile": "Hannah loves selling products online and if you take a look at our website, you can see how much energy she devotes to our company.\r\n\r\nWe are lucky to have you on our team. Stop working so hard!", "pictureName": "41.png", "picture": "images/employees/41.png" }, { "id": 43, "firstName": "Harvey", "lastName": "Mudd", "fullName": "Harv Mudd", "prefix": "Mr.", "title": "Retail Sales Manager", "address": "351 Pacific St", "city": "Monterey", "stateID": 5, "zipcode": 93940, "email": "harveym@dx-email.com", "skype": "harveym_DX_skype", "mobilePhone": "8315553895", "homePhone": "8315555379", "birthDate": "1989-05-11T00:00:00", "hireDate": "2012-03-18T00:00:00", "departmentID": 1, "department": "Sales", "status": "Commission", "personalProfile": "Harv went to college to become a dentist but decided to switch to sales when he went to buy his first car. \r\n\r\nHarv is an avid surfer and can be seen at the beach whenver the weather allows.", "pictureName": "42.png", "picture": "images/employees/42.png" }, { "id": 44, "firstName": "Clark", "lastName": "Morgan", "fullName": "Clark Morgan", "prefix": "Mr.", "title": "Retail Sales Manager", "address": "4202 Alhambra Ave", "city": "Martinez", "stateID": 5, "zipcode": 94553, "email": "clarkm@dx-email.com", "skype": "clarkm_DX_skype", "mobilePhone": "9255552525", "homePhone": "9255553752", "birthDate": "1988-04-07T00:00:00", "hireDate": "2012-04-11T00:00:00", "departmentID": 1, "department": "Sales", "status": "Commission", "personalProfile": "Clark says he joined DevAV because we are the best in the industry. He is excited to see what the future holds for our company. \r\n\r\nClark once ran a mile in under 4 minutes (he says he can do it in 5 minutes now).", "pictureName": "43.png", "picture": "images/employees/43.png" }, { "id": 45, "firstName": "Todd", "lastName": "Hoffman", "fullName": "Todd Hoffman", "prefix": "Mr.", "title": "Retail Sales Manager", "address": "2647 Arroyo Rd", "city": "Livermore", "stateID": 5, "zipcode": 94550, "email": "toddh@dx-email.com", "skype": "toddh_DX_skype", "mobilePhone": "9255553579", "homePhone": "9255554728", "birthDate": "1987-03-25T00:00:00", "hireDate": "2012-04-19T00:00:00", "departmentID": 1, "department": "Sales", "status": "Commission", "personalProfile": "Todd Hoffman loves to make money and has always held commission only positions.\r\n\r\nIf you ever see Todd, ask him to tell you his fishing trip story…It's very funny.", "pictureName": "44.png", "picture": "images/employees/44.png" }, { "id": 46, "firstName": "Jack", "lastName": "Garmin", "fullName": "Jackie Garmin", "prefix": "Mr.", "title": "Support Assistant", "address": "807 West Paseo Del Mar", "city": "Los Angeles", "stateID": 5, "zipcode": 90731, "email": "jackg@dx-email.com", "skype": "jackg_DX_skype", "mobilePhone": "2135551824", "homePhone": "2135552828", "birthDate": "1988-09-11T00:00:00", "hireDate": "2009-03-17T00:00:00", "departmentID": 2, "department": "Support", "status": "Salaried", "personalProfile": "Jack is on probation due to sloppy work. We hope to see him back at his desk shortly.\r\n\r\nPlease remember, sloppy work is not something we tolerate.", "pictureName": "45.png", "picture": "images/employees/45.png" }, { "id": 47, "firstName": "Lincoln", "lastName": "Bartlett", "fullName": "Lincoln Bartlett", "prefix": "Mr.", "title": "Sales Assistant", "address": "800 N Alameda St", "city": "Los Angeles", "stateID": 5, "zipcode": 90012, "email": "lincolnb@dx-email.com", "skype": "lincoln_DX_skype", "mobilePhone": "2135558272", "homePhone": "2135552587", "birthDate": "1990-08-02T00:00:00", "hireDate": "2012-05-11T00:00:00", "departmentID": 1, "department": "Sales", "status": "Salaried", "personalProfile": "Lincoln is on probation due to poor performance. We hope to see him back at his desk shortly.\r\n\r\nPlease remember, poor performance Is not something we tolerate.", "pictureName": "46.png", "picture": "images/employees/46.png" }, { "id": 48, "firstName": "Brad", "lastName": "Farkus", "fullName": "Brad Farkus", "prefix": "Mr.", "title": "Engineer", "address": "1635 Woods Drive", "city": "Los Angeles", "stateID": 5, "zipcode": 90069, "email": "bradf@dx-email.com", "skype": "brad_DX_skype", "mobilePhone": "2135553626", "homePhone": "2135552747", "birthDate": "1991-03-17T00:00:00", "hireDate": "2010-04-15T00:00:00", "departmentID": 4, "department": "Engineering", "status": "Terminated", "personalProfile": null, "pictureName": "47.png", "picture": "images/employees/47.png" }, { "id": 49, "firstName": "Jennifer", "lastName": "Hobbs", "fullName": "Jenny Hobbs", "prefix": "Ms.", "title": "Shipping Assistant", "address": "205 Chautauqua Boulevard", "city": "Los Angeles", "stateID": 5, "zipcode": 90069, "email": "jennyh@dx-email.com", "skype": "jenny_DX_skype", "mobilePhone": "3105552668", "homePhone": "3105550850", "birthDate": "1992-07-14T00:00:00", "hireDate": "2011-12-11T00:00:00", "departmentID": 3, "department": "Shipping", "status": "Terminated", "personalProfile": null, "pictureName": "48.png", "picture": "images/employees/48.png" }, { "id": 50, "firstName": "Dallas", "lastName": "Lou", "fullName": "Dallas Lou", "prefix": "Mr.", "title": "Shipping Assistant", "address": "1 Bunker Hill", "city": "Los Angeles", "stateID": 5, "zipcode": 90013, "email": "dallas@dx-email.com", "skype": "dallas_DX_skype", "mobilePhone": "2135558357", "homePhone": "2135550835", "birthDate": "1994-08-19T00:00:00", "hireDate": "2012-06-18T00:00:00", "departmentID": 3, "department": "Shipping", "status": "Terminated", "personalProfile": null, "pictureName": "49.png", "picture": "images/employees/49.png" }, { "id": 51, "firstName": "Stu", "lastName": "Pizaro", "fullName": "Stu Pizaro", "prefix": "Mr.", "title": "Engineer", "address": "200 N. Spring St", "city": "Los Angeles", "stateID": 5, "zipcode": 90012, "email": "stu@dx-email.com", "skype": "stu_DX_skype", "mobilePhone": "2135552552", "homePhone": "2135550988", "birthDate": "1985-09-11T00:00:00", "hireDate": "2011-07-19T00:00:00", "departmentID": 4, "department": "Engineering", "status": "Terminated", "personalProfile": null, "pictureName": "50.png", "picture": "images/employees/50.png" } ]

Vue Diagram - Shapes with Base Type