This repository was archived by the owner on Jul 30, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathoverview-plnkr.json
More file actions
1 lines (1 loc) · 50.7 KB
/
overview-plnkr.json
File metadata and controls
1 lines (1 loc) · 50.7 KB
1
{"index.css":"","systemjs.config.js":"System.config({\r\n transpiler: \"ts\",\r\n typescriptOptions: {\r\n target: \"es5\",\r\n module: \"commonjs\",\r\n moduleResolution: \"node\",\r\n emitDecoratorMetadata: true,\r\n experimentalDecorators: true,\r\n \"jsx\": \"react\"\r\n },\r\n meta: {\r\n 'typescript': {\r\n \"exports\": \"ts\"\r\n },\r\n '*.json': { loader: 'plugin-json' }\r\n },\r\n paths: {\r\n \"syncfusion:\": \"http://cdn.syncfusion.com/ej2/\"},\r\n map: {\r\n app: 'app',\r\n ts: \"https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js\",\r\n typescript: \"https://unpkg.com/typescript@2.2.2/lib/typescript.js\",\r\n \"plugin-json\":\"https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js\",\r\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\r\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\r\n \"@syncfusion/ej2-splitbuttons\": \"syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js\",\r\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\r\n \"@syncfusion/ej2-maps\": \"syncfusion:ej2-maps/dist/ej2-maps.umd.min.js\",\r\n \"@syncfusion/ej2-treemap\": \"syncfusion:ej2-treemap/dist/ej2-treemap.umd.min.js\",\r\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\r\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\r\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\r\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\r\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\r\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",\r\n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\r\n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",\r\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",\r\n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\r\n \"@syncfusion/ej2-schedule\": \"syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js\",\r\n \"@syncfusion/ej2-pdf-export\": \"syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js\", \r\n \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\r\n \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\", \r\n \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\",\r\n \"@syncfusion/ej2-documenteditor\": \"syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js\",\r\n \"@syncfusion/ej2-notifications\": \"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js\",\r\n \"@syncfusion/ej2-richtexteditor\": \"syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js\",\r\n\t\t\"@syncfusion/ej2-svg-base\": \"syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js\",\r\n \"@syncfusion/ej2-pivotview\": \"syncfusion:ej2-pivotview/dist/ej2-pivotview.umd.min.js\",\r\n \"@syncfusion/ej2-heatmap\": \"syncfusion:ej2-heatmap/dist/ej2-heatmap.umd.min.js\",\r\n \"@syncfusion/ej2-react-base\": \"syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js\",\r\n \"@syncfusion/ej2-react-buttons\": \"syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js\",\r\n \"@syncfusion/ej2-react-splitbuttons\": \"syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js\",\r\n \"@syncfusion/ej2-react-charts\": \"syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js\",\r\n \"@syncfusion/ej2-react-maps\": \"syncfusion:ej2-react-maps/dist/ej2-react-maps.umd.min.js\",\r\n \"@syncfusion/ej2-react-treemap\": \"syncfusion:ej2-react-treemap/dist/ej2-react-treemap.umd.min.js\",\r\n \"@syncfusion/ej2-react-circulargauge\": \"syncfusion:ej2-react-circulargauge/dist/ej2-react-circulargauge.umd.min.js\",\r\n \"@syncfusion/ej2-react-lineargauge\": \"syncfusion:ej2-react-lineargauge/dist/ej2-react-lineargauge.umd.min.js\",\r\n \"@syncfusion/ej2-react-calendars\": \"syncfusion:ej2-react-calendars/dist/ej2-react-calendars.umd.min.js\",\r\n \"@syncfusion/ej2-react-dropdowns\": \"syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.umd.min.js\",\r\n \"@syncfusion/ej2-react-grids\": \"syncfusion:ej2-react-grids/dist/ej2-react-grids.umd.min.js\",\r\n \"@syncfusion/ej2-react-inputs\": \"syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js\",\r\n \"@syncfusion/ej2-react-lists\": \"syncfusion:ej2-react-lists/dist/ej2-react-lists.umd.min.js\",\r\n \"@syncfusion/ej2-react-navigations\": \"syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js\",\r\n \"@syncfusion/ej2-react-popups\": \"syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js\",\r\n \"@syncfusion/ej2-react-schedule\": \"syncfusion:ej2-react-schedule/dist/ej2-react-schedule.umd.min.js\",\r\n \"@syncfusion/ej2-react-documenteditor\": \"syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js\",\r\n \"@syncfusion/ej2-react-notifications\": \"syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.min.js\",\r\n \"@syncfusion/ej2-react-richtexteditor\": \"syncfusion:ej2-react-richtexteditor/dist/ej2-react-richtexteditor.umd.min.js\",\r\n \"@syncfusion/ej2-react-pivotview\": \"syncfusion:ej2-react-pivotview/dist/ej2-react-pivotview.umd.min.js\",\r\n \"@syncfusion/ej2-react-heatmap\": \"syncfusion:ej2-react-heatmap/dist/ej2-react-heatmap.umd.min.js\",\r\n \"react-dom\":\"https://unpkg.com/react-dom@15.5.4/dist/react-dom.min.js\",\r\n \"react\":\"https://unpkg.com/react@15.5.4/dist/react.min.js\",\r\n },\r\n packages: {\r\n 'app': { main: 'index', defaultExtension: 'tsx' },\r\n }\r\n});\r\n\r\nSystem.import('app');","index.html":"<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <title>Diagram · Overview · Essential JS 2 for React · Syncfusion</title>\r\n <meta charset=\"utf-8\" />\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\" />\r\n <meta http-equiv=\"x-ua-compatible\" content=\"ie=edge\">\r\n <!-- {{:meta}} -->\r\n <meta name=\"author\" content=\"Syncfusion\" />\r\n <script type=\"text/javascript\">\r\n var themeName = location.hash || 'material';\r\n themeName = themeName.replace('#','');\r\n window.ripple = (themeName === \"material\")\r\n document.write('<link href=\"http://cdn.syncfusion.com/ej2/' + themeName + '.css\" rel=\"stylesheet\">');\r\n </script>\r\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\" />\r\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\r\n <script src=\"systemjs.config.js\"></script>\r\n <link href=\"index.css\" rel=\"stylesheet\" />\r\n <style>\r\n #loader {\r\n color: #008cff;\r\n height: 40px;\r\n left: 45%;\r\n position: absolute;\r\n top: 45%;\r\n width: 30%;\r\n }\r\n body {\r\n touch-action:none;\r\n }\r\n .body {\r\n font-family: \"Roboto\", \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\", \"sans-serif\";\r\n }\r\n\r\n .e-view {\r\n bottom: 0;\r\n left: 0;\r\n overflow: hidden;\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n }\r\n\r\n .sb-left {\r\n float: left;\r\n }\r\n\r\n .sb-right {\r\n float: right;\r\n }\r\n\r\n .sb-block {\r\n display: block;\r\n }\r\n\r\n .sb-table {\r\n display: table;\r\n }\r\n\r\n .sb-table-cell {\r\n display: table-cell;\r\n vertical-align: middle;\r\n }\r\n\r\n /*sample header*/\r\n\r\n\r\n .sb-header {\r\n height: 48px;\r\n background: #FFFFFF;\r\n box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12);\r\n z-index: 1001;\r\n opacity: 100;\r\n }\r\n\r\n\r\n .sb-header-left, .sb-header-right {\r\n height: 100%;\r\n }\r\n\r\n #sb-header-text {\r\n padding-left: 22px;\r\n opacity: 0.87;\r\n font-family: Roboto;\r\n font-weight: 500;\r\n font-size: 15px;\r\n color: #000000;\r\n text-align: left;\r\n }\r\n\r\n .header-logo {\r\n float: left;\r\n padding-left: 8px;\r\n padding-right: 22px;\r\n }\r\n\r\n .footer-logo {\r\n background: url(https://ej2.syncfusion.com/home/images/footer-logo.svg) no-repeat right;\r\n height: 40px;\r\n width: 140px;\r\n }\r\n\r\n .sb-header-splitter {\r\n float: left;\r\n border-left: 1px solid rgb(196, 196, 196);\r\n height: 32px;\r\n margin-top: 8px;\r\n padding-left: 22 px;\r\n }\r\n\r\n .sb-header-settings {\r\n display: none;\r\n }\r\n\r\n .product-style a{\r\n padding-right: 15px;\r\n font-family:Roboto;\r\n font-weight: 500;\r\n font-size: 13px;\r\n color: #363636;\r\n text-align: center;\r\n text-decoration: none;\r\n }\r\n .product-style a:hover {\r\n color:#3C78EF;\r\n }\r\n\r\n .sb-download-btn a {\r\n text-decoration: none;\r\n }\r\n\r\n .sb-download-text {\r\n color: #FFFFFF;\r\n }\r\n\r\n .sb-download-wrapper {\r\n padding-right: 27px;\r\n }\r\n\r\n .sb-download-btn:hover .sb-download-btn:focus .sb-download-btn.active {\r\n border-radius: 2px;\r\n font-family: \"Roboto\";\r\n font-weight: bold;\r\n color: #FFFFFF;\r\n }\r\n\r\n .sb-download-btn:hover {\r\n background: #006CE6;\r\n }\r\n\r\n .sb-download-btn:focus {\r\n background: #0051CB;\r\n }\r\n\r\n .sb-download-btn.active {\r\n background: #0036B1;\r\n }\r\n\r\n .sb-download-btn {\r\n background-color: #3C78EF;\r\n opacity: 100;\r\n border-radius: 2px;\r\n font-family: \"Roboto\", \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\", \"sans-serif\";\r\n font-weight: 500;\r\n line-height: 18px;\r\n height: 32px;\r\n border-color: transparent;\r\n }\r\n\r\n .sb-bread-crumb {\r\n padding-left: 20px;\r\n padding-top: 24px;\r\n padding-bottom: 10px;\r\n }\r\n\r\n .category-allcontrols a, .category-text a, .crumb-sample {\r\n display: table;\r\n opacity: 0.87;\r\n font-family: Roboto;\r\n font-weight: 500;\r\n font-size: 15px;\r\n color: #3C78EF;\r\n text-align: left;\r\n text-decoration: none;\r\n }\r\n\r\n .sb-bread-crumb .sb-bread-crumb-text>div {\r\n font-size: 15px;\r\n font-weight: 500;\r\n padding-right: 8px;\r\n cursor: default;\r\n display: table-cell;\r\n }\r\n\r\n .sb-bread-crumb-text>div.seperator {\r\n font-weight: 700;\r\n font-size: 15px;\r\n vertical-align: bottom;\r\n } \r\n\r\n .content {\r\n overflow: auto;\r\n height: calc(100% - 50px);\r\n top: 50px;\r\n }\r\n\r\n\r\n .sample-content {\r\n top: 48px;\r\n background: #FFFFFF;\r\n }\r\n\r\n .div {\r\n display: block;\r\n }\r\n\r\n .control-section {\r\n padding-left: 4px;\r\n }\r\n\r\n .crumb-sample {\r\n color: #000000;\r\n line-height: 18px;\r\n }\r\n\r\n #description {\r\n padding-bottom: 16px;\r\n padding-left: 20px;\r\n opacity: 0.75;\r\n font-family: Roboto;\r\n font-size: 13px;\r\n color: #000000;\r\n text-align: left;\r\n padding-top: 14px;\r\n }\r\n\r\n #action-description {\r\n padding-left: 20px;\r\n padding-bottom: 15px;\r\n opacity: 0.75;\r\n font-family: Roboto;\r\n font-size: 13px;\r\n color: #000000;\r\n text-align: left;\r\n }\r\n\r\n #description-section {\r\n padding-left: 20px;\r\n padding-top: 30px;\r\n opacity: 0.87;\r\n font-family:Roboto;\r\n font-weight: 700;\r\n font-size: 15px;\r\n color: #000000;\r\n text-align: left;\r\n }\r\n\r\n\r\n\r\n </style>\r\n</head>\r\n\r\n<body class='e-view ej2-new' aria-busy=\"true\">\r\n <div class=\"sample-browser\">\r\n <div id='sample-header' class=\"sb-header\" role=\"banner\">\r\n <div class='sb-header-left sb-left sb-table'>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div class=\"header-logo\">\r\n <a href=\"https://ej2.syncfusion.com/home/react.html\" target=\"\" rel=\"noopener noreferrer\">\r\n <div class=\"footer-logo\"> </div>\r\n </a>\r\n </div>\r\n \r\n </div>\r\n <div class=\"sb-header-splitter sb-download-splitter\"></div>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div id='sb-header-text' class='e-sb-header-text'>\r\n \r\n <span class='sb-header-text-left'>Essential JS 2 for React</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class='sb-header-right sb-right sb-table'>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div class='product-style'>\r\n <div><a href=\"https://www.syncfusion.com/products/react/diagram\">PRODUCT DETAILS</a></div>\r\n </div>\r\n </div>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div class=\"sb-header-item sb-table-cell sb-download-wrapper\">\r\n <a href=\"https://www.syncfusion.com/downloads/essential-js2\" target=\"_blank\">\r\n <button id=\"download-now\" class=\"sb-download-btn\">\r\n <span class=\"sb-download-text\">DOWNLOAD</span>\r\n </button>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n <div class ='content e-view'>\r\n <div class='sample-content'>\r\n <div id=\"sample-bread-crumb\" class=\"sb-bread-crumb\">\r\n <div class=\"sb-bread-crumb-text\">\r\n <div class=\"category-allcontrols\"><a href=\"https://ej2.syncfusion.com/react/demos\"><span>All Controls</span></a></div>\r\n <div class=\"category-seperator sb-icons\"> / </div>\r\n <div class=\"category-text bread-ctext\"><a href=\"https://ej2.syncfusion.com/react/demos/#/material/diagram/default.html\"><span>Diagram</span></a></div>\r\n <div class=\"category-seperator sb-icons\"> / </div>\r\n <div class=\"crumb-sample\">Overview</div>\r\n </div>\r\n </div>\r\n <div class=\"control-content\">\r\n <div id=\"action-description\">\r\n <p>\r\n \n <p>\n This sample visualizes an organizational structure along with an\n overview for easily navigating the large organizational structure\n using Overview control.\n </p>\n \r\n </p>\r\n </div>\r\n <div class=\"container-fluid\">\r\n <div class=\"control-section\">\r\n <div id='sample'>\r\n <div id='loader'>Loading....</div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div id=\"description-section\">Description</div> \r\n <div id=\"description\">\r\n <p>\r\n \n <p>\n This example shows how to render the overview control and how to\n display a preview (overall view) of the entire content of a diagram.\n This helps you look at the overall picture of a large diagram and\n also to navigate (pan or zoom) to a particular position of the page.\n The <code>sourceID</code> property can be used to map the diagram\n control with overview.\n </p>\n <br>\n \r\n </p> \r\n </div> \r\n </div> \r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n</body>\r\n</html>\r\n","app/index.tsx":"import * as ReactDOM from \"react-dom\";\r\nimport * as React from \"react\";\r\nimport {\r\n HierarchicalTree,\r\n Container,\r\n StackPanel,\r\n ImageElement,\r\n TextElement,\r\n TreeInfo,\r\n SnapConstraints,\r\n DiagramComponent,\r\n ConnectorModel,\r\n Node,\r\n Connector,\r\n Diagram,\r\n Inject,\r\n DataBinding,\r\n OverviewComponent,\r\n DiagramTools\r\n} from \"@syncfusion/ej2-react-diagrams\";\r\nimport { SampleBase } from './sample-base';\r\nimport { DataManager } from \"@syncfusion/ej2-data\";\r\n\r\nexport let data: object[] = [\r\n {\r\n Id: \"parent\",\r\n Name: \"Maria Anders\",\r\n Designation: \"Managing Director\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image30.png\",\r\n IsExpand: \"true\",\r\n RatingColor: \"#C34444\"\r\n },\r\n {\r\n Id: 1,\r\n Name: \"Ana Trujillo\",\r\n Designation: \"Project Manager\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image2.png\",\r\n IsExpand: \"false\",\r\n RatingColor: \"#68C2DE\",\r\n ReportingPerson: \"parent\"\r\n },\r\n {\r\n Id: 2,\r\n Name: \"Anto Moreno\",\r\n Designation: \"Project Lead\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image1.png\",\r\n IsExpand: \"false\",\r\n RatingColor: \"#93B85A\",\r\n ReportingPerson: 1\r\n },\r\n {\r\n Id: 3,\r\n Name: \"Thomas Hardy\",\r\n Designation: \"Senior S/w Engg\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image3.png\",\r\n IsExpand: \"false\",\r\n RatingColor: \"#68C2DE\",\r\n ReportingPerson: 2\r\n },\r\n {\r\n Id: 4,\r\n Name: \"Christina kaff\",\r\n Designation: \"S/w Engg\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image4.png\",\r\n IsExpand: \"false\",\r\n RatingColor: \"#93B85A\",\r\n ReportingPerson: 3\r\n },\r\n {\r\n Id: 5,\r\n Name: \"Hanna Moos\",\r\n Designation: \"Project Trainee\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image6.png\",\r\n IsExpand: \"true\",\r\n RatingColor: \"#D46E89\",\r\n ReportingPerson: 4\r\n },\r\n {\r\n Id: 6,\r\n Name: \"Peter Citeaux\",\r\n Designation: \"S/w Engg\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image5.png\",\r\n IsExpand: \"true\",\r\n RatingColor: \"#68C2DE\",\r\n ReportingPerson: 5\r\n },\r\n {\r\n Id: 7,\r\n Name: \"Martín Kloss\",\r\n Designation: \"Project Trainee\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image18.png\",\r\n IsExpand: \"false\",\r\n RatingColor: \"#93B85A\",\r\n ReportingPerson: 6\r\n },\r\n {\r\n Id: 8,\r\n Name: \"Elizabeth Mary\",\r\n Designation: \"Project Trainee\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image7.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#93B85A\",\r\n ReportingPerson: 6\r\n },\r\n {\r\n Id: 9,\r\n Name: \"Victoria Ash\",\r\n Designation: \"Senior S/w Engg\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image8.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#D46E89\",\r\n ReportingPerson: 5\r\n },\r\n {\r\n Id: 10,\r\n Name: \"Francisco Yang\",\r\n Designation: \"Senior S/w Engg\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image19.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#93B85A\",\r\n ReportingPerson: 3\r\n },\r\n {\r\n Id: 11,\r\n Name: \"Yang Wang\",\r\n Designation: \"Project Manager\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image21.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#EBB92E\",\r\n ReportingPerson: \"parent\"\r\n },\r\n {\r\n Id: 12,\r\n Name: \"Lino Rodri\",\r\n Designation: \"Project Manager\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image9.png\",\r\n IsExpand: \"true\",\r\n RatingColor: \"#68C2DE\",\r\n ReportingPerson: 11\r\n },\r\n {\r\n Id: 13,\r\n Name: \"Philip Cramer\",\r\n Designation: \"Senior S/w Engg\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image23.png\",\r\n IsExpand: \"true\",\r\n RatingColor: \"#68C2DE\",\r\n ReportingPerson: 24\r\n },\r\n {\r\n Id: 14,\r\n Name: \"Pedro Afonso\",\r\n Designation: \"Project Trainee\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image10.png\",\r\n IsExpand: \"true\",\r\n RatingColor: \"#68C2DE\",\r\n ReportingPerson: 15\r\n },\r\n {\r\n Id: 15,\r\n Name: \"Elizabeth Roel\",\r\n Designation: \"S/w Engg\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image11.png\",\r\n IsExpand: \"false\",\r\n RatingColor: \"#93B85A\",\r\n ReportingPerson: 13\r\n },\r\n {\r\n Id: 16,\r\n Name: \"Janine Labrune\",\r\n Designation: \"Project Lead\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image12.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#D46E89\",\r\n ReportingPerson: 12\r\n },\r\n {\r\n Id: 17,\r\n Name: \"Ann Devon\",\r\n Designation: \"Project Manager\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image13.png\",\r\n IsExpand: \"false\",\r\n RatingColor: \"#68C2DE\",\r\n ReportingPerson: 25\r\n },\r\n {\r\n Id: 18,\r\n Name: \"Roland Mendel\",\r\n Designation: \"Project Lead\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image24.png\",\r\n IsExpand: \"true\",\r\n RatingColor: \"#68C2DE\",\r\n ReportingPerson: 17\r\n },\r\n {\r\n Id: 19,\r\n Name: \"Aria Cruz\",\r\n Designation: \"Senior S/w Engg\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image14.png\",\r\n IsExpand: \"false\",\r\n RatingColor: \"#93B85A\",\r\n ReportingPerson: 18\r\n },\r\n {\r\n Id: 20,\r\n Name: \"Martine Rancé\",\r\n Designation: \"S/w Engg\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image26.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#93B85A\",\r\n ReportingPerson: 18\r\n },\r\n {\r\n Id: 21,\r\n Name: \"Maria Larsson\",\r\n Designation: \"Project Trainee\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image15.png\",\r\n IsExpand: \"false\",\r\n RatingColor: \"#EBB92E\",\r\n ReportingPerson: 19\r\n },\r\n {\r\n Id: 22,\r\n Name: \"Diego Roel\",\r\n Designation: \"Project Trainee\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image17.png\",\r\n IsExpand: \"false\",\r\n RatingColor: \"#D46E89\",\r\n ReportingPerson: 21\r\n },\r\n {\r\n Id: 23,\r\n Name: \"Peter Franken\",\r\n Designation: \"Project Trainee\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image27.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#D46E89\",\r\n ReportingPerson: 21\r\n },\r\n {\r\n Id: 24,\r\n Name: \"Howard Snyder\",\r\n Designation: \"Project Lead\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image20.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#D46E89\",\r\n ReportingPerson: 16\r\n },\r\n {\r\n Id: 25,\r\n Name: \"Carine Schmitt\",\r\n Designation: \"Project Manager\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image22.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#EBB92E\",\r\n ReportingPerson: \"parent\"\r\n },\r\n {\r\n Id: 26,\r\n Name: \"Paolo Accorti\",\r\n Designation: \"Project Lead\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image28.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#D46E89\",\r\n ReportingPerson: 36\r\n },\r\n {\r\n Id: 27,\r\n Name: \"Eduardo Roel\",\r\n Designation: \"Senior S/w Engg\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image31.png\",\r\n IsExpand: \"true\",\r\n RatingColor: \"#93B85A\",\r\n ReportingPerson: 26\r\n },\r\n {\r\n Id: 28,\r\n Name: \"José Pedro \",\r\n Designation: \"Senior S/w Engg\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image25.png\",\r\n IsExpand: \"true\",\r\n RatingColor: \"#D46E89\",\r\n ReportingPerson: 27\r\n },\r\n {\r\n Id: 29,\r\n Name: \"André Fonseca\",\r\n Designation: \"Senior S/w Engg\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image32.png\",\r\n IsExpand: \"true\",\r\n RatingColor: \"#EBB92E\",\r\n ReportingPerson: 28\r\n },\r\n {\r\n Id: 30,\r\n Name: \"Howard Snyd\",\r\n Designation: \"S/w Engg\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image33.png\",\r\n IsExpand: \"false\",\r\n RatingColor: \"#68C2DE\",\r\n ReportingPerson: 29\r\n },\r\n {\r\n Id: 31,\r\n Name: \"Manu Pereira\",\r\n Designation: \"Project Trainee\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image34.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#D46E89\",\r\n ReportingPerson: 29\r\n },\r\n {\r\n Id: 32,\r\n Name: \"Mario Pontes\",\r\n Designation: \"S/w Engg\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image29.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#D46E89\",\r\n ReportingPerson: 29\r\n },\r\n {\r\n Id: 33,\r\n Name: \"Carlos Schmitt\",\r\n Designation: \"Project Trainee\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image30.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#D46E89\",\r\n ReportingPerson: 29\r\n },\r\n {\r\n Id: 34,\r\n Name: \"Yoshi Latimer\",\r\n Designation: \"Project Trainee\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image4.png\",\r\n IsExpand: \"true\",\r\n RatingColor: \"#D46E89\",\r\n ReportingPerson: 29\r\n },\r\n {\r\n Id: 35,\r\n Name: \"Patricia Kenna\",\r\n Designation: \"Project Trainee\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image6.png\",\r\n IsExpand: \"true\",\r\n RatingColor: \"#EBB92E\",\r\n ReportingPerson: 29\r\n },\r\n {\r\n Id: 36,\r\n Name: \"Helen Bennett\",\r\n Designation: \"Project Lead\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image7.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#D46E89\",\r\n ReportingPerson: 25\r\n },\r\n {\r\n Id: 37,\r\n Name: \"Daniel Tonini\",\r\n Designation: \"Project Manager\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image1.png\",\r\n IsExpand: \"true\",\r\n RatingColor: \"#93B85A\",\r\n ReportingPerson: \"parent\"\r\n },\r\n {\r\n Id: 38,\r\n Name: \"Annette Roel\",\r\n Designation: \"Project Lead\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image2.png\",\r\n IsExpand: \"false\",\r\n RatingColor: \"#93B85A\",\r\n ReportingPerson: 37\r\n },\r\n {\r\n Id: 39,\r\n Name: \"Yoshi Wilson\",\r\n Designation: \"Senior S/w Engg\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image8.png\",\r\n IsExpand: \"false\",\r\n RatingColor: \"#EBB92E\",\r\n ReportingPerson: 38\r\n },\r\n {\r\n Id: 40,\r\n Name: \"John Steel\",\r\n Designation: \"Project Lead\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image3.png\",\r\n IsExpand: \"false\",\r\n RatingColor: \"#93B85A\",\r\n ReportingPerson: 38\r\n },\r\n {\r\n Id: 41,\r\n Name: \"Renate Jose\",\r\n Designation: \"Senior S/w Engg\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image9.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#D46E89\",\r\n ReportingPerson: 40\r\n },\r\n {\r\n Id: 42,\r\n Name: \"Jaime Yorres\",\r\n Designation: \"SR\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image10.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#93B85A\",\r\n ReportingPerson: 41\r\n },\r\n {\r\n Id: 43,\r\n Name: \"Carlos Nagy\",\r\n Designation: \"SR\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image5.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#93B85A\",\r\n ReportingPerson: 42\r\n },\r\n {\r\n Id: 44,\r\n Name: \"Felipe Kloss\",\r\n Designation: \"S/w Engg\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image16.png\",\r\n IsExpand: \"false\",\r\n RatingColor: \"#EBB92E\",\r\n ReportingPerson: 43\r\n },\r\n {\r\n Id: 45,\r\n Name: \"Fran Wilson\",\r\n Designation: \"SR\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image18.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#93B85A\",\r\n ReportingPerson: 43\r\n },\r\n {\r\n Id: 46,\r\n Name: \"John Rovelli\",\r\n Designation: \"S/w Engg\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image19.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#93B85A\",\r\n ReportingPerson: 43\r\n },\r\n {\r\n Id: 47,\r\n Name: \"Catherine Kaff\",\r\n Designation: \"SR\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image11.png\",\r\n IsExpand: \"false\",\r\n RatingColor: \"#93B85A\",\r\n ReportingPerson: 43\r\n },\r\n {\r\n Id: 48,\r\n Name: \"Jean Fresnière\",\r\n Designation: \"Project Trainee\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image21.png\",\r\n IsExpand: \"false\",\r\n RatingColor: \"#D46E89\",\r\n ReportingPerson: 43\r\n },\r\n {\r\n Id: 49,\r\n Name: \"Alex Feuer\",\r\n Designation: \"Project Trainee\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image23.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#93B85A\",\r\n ReportingPerson: 43\r\n },\r\n {\r\n Id: 50,\r\n Name: \"Simon Roel\",\r\n Designation: \"Project Trainee\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image24.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#EBB92E\",\r\n ReportingPerson: 42\r\n },\r\n {\r\n Id: 51,\r\n Name: \"Yvonne Wong\",\r\n Designation: \"Project Trainee\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image12.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#93B85A\",\r\n ReportingPerson: 52\r\n },\r\n {\r\n Id: 52,\r\n Name: \"Rene Phillips\",\r\n Designation: \"S/w Engg\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image25.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#D46E89\",\r\n ReportingPerson: 39\r\n },\r\n {\r\n Id: 53,\r\n Name: \"Yoshi Kenna\",\r\n Designation: \"Project Trainee\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image14.png\",\r\n IsExpand: \"false\",\r\n RatingColor: \"#EBB92E\",\r\n ReportingPerson: 52\r\n },\r\n {\r\n Id: 54,\r\n Name: \"Helen Marie\",\r\n Designation: \"Project Trainee\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image15.png\",\r\n IsExpand: \"true\",\r\n RatingColor: \"#EBB92E\",\r\n ReportingPerson: 52\r\n },\r\n {\r\n Id: 55,\r\n Name: \"Joseph Kaff\",\r\n Designation: \"Project Trainee\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image26.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#EBB92E\",\r\n ReportingPerson: 52\r\n },\r\n {\r\n Id: 56,\r\n Name: \"Georg Pipps\",\r\n Designation: \"Senior S/w Engg\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image27.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#EBB92E\",\r\n ReportingPerson: 57\r\n },\r\n {\r\n Id: 57,\r\n Name: \"Nardo Batista\",\r\n Designation: \"Project Lead\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image17.png\",\r\n IsExpand: \"true\",\r\n RatingColor: \"#68C2DE\",\r\n ReportingPerson: 12\r\n },\r\n {\r\n Id: 58,\r\n Name: \"Lúcia Carvalho\",\r\n Designation: \"Senior S/w Engg\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image20.png\",\r\n IsExpand: \"false\",\r\n RatingColor: \"#93B85A\",\r\n ReportingPerson: 57\r\n },\r\n {\r\n Id: 59,\r\n Name: \"Horst Kloss\",\r\n Designation: \"Project Trainee\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image28.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#68C2DE\",\r\n ReportingPerson: 57\r\n },\r\n {\r\n Id: 60,\r\n Name: \"Sergio roel\",\r\n Designation: \"CSR\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image22.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#EBB92E\",\r\n ReportingPerson: 57\r\n },\r\n {\r\n Id: 61,\r\n Name: \"Paula Wilson\",\r\n Designation: \"CSR\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image31.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#68C2DE\",\r\n ReportingPerson: 57\r\n },\r\n {\r\n Id: 62,\r\n Name: \"Mauri Moroni\",\r\n Designation: \"Senior S/w Engg\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image25.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#93B85A\",\r\n ReportingPerson: 57\r\n },\r\n {\r\n Id: 63,\r\n Name: \"Janete Limeira\",\r\n Designation: \"Project Trainee\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image29.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#93B85A\",\r\n ReportingPerson: 57\r\n },\r\n {\r\n Id: 64,\r\n Name: \"Michael Holz\",\r\n Designation: \"S/w Engg\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image32.png\",\r\n IsExpand: \"true\",\r\n RatingColor: \"#68C2DE\",\r\n ReportingPerson: 57\r\n },\r\n {\r\n Id: 65,\r\n Name: \"Alej Camino\",\r\n Designation: \"Project Manager\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image33.png\",\r\n IsExpand: \"false\",\r\n RatingColor: \"#93B85A\",\r\n ReportingPerson: \"parent\"\r\n },\r\n {\r\n Id: 66,\r\n Name: \"Jonas Bergsen\",\r\n Designation: \"Project Lead\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image34.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#68C2DE\",\r\n ReportingPerson: 65\r\n },\r\n {\r\n Id: 67,\r\n Name: \"Jose Pavarotti\",\r\n Designation: \"Project Trainee\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image30.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#D46E89\",\r\n ReportingPerson: 68\r\n },\r\n {\r\n Id: 68,\r\n Name: \"Miguel Angel\",\r\n Designation: \"Senior S/w Engg\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image4.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#D46E89\",\r\n ReportingPerson: 66\r\n },\r\n {\r\n Id: 69,\r\n Name: \"Jytte Petersen\",\r\n Designation: \"Senior S/w Engg\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image1.png\",\r\n IsExpand: \"true\",\r\n RatingColor: \"#68C2DE\",\r\n ReportingPerson: 68\r\n },\r\n {\r\n Id: 70,\r\n Name: \"Kloss Perrier\",\r\n Designation: \"Project Lead\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image2.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#93B85A\",\r\n ReportingPerson: 72\r\n },\r\n {\r\n Id: 71,\r\n Name: \"Art Nancy\",\r\n Designation: \"Senior S/w Engg\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image6.png\",\r\n IsExpand: \"true\",\r\n RatingColor: \"#D46E89\",\r\n ReportingPerson: 27\r\n },\r\n {\r\n Id: 72,\r\n Name: \"Pascal Cartrain\",\r\n Designation: \"Project Lead\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image3.png\",\r\n IsExpand: \"true\",\r\n RatingColor: \"#EBB92E\",\r\n ReportingPerson: 65\r\n },\r\n {\r\n Id: 73,\r\n Name: \"Liz Nixon\",\r\n Designation: \"Senior S/w Engg\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image7.png\",\r\n IsExpand: \"false\",\r\n RatingColor: \"#68C2DE\",\r\n ReportingPerson: 68\r\n },\r\n {\r\n Id: 74,\r\n Name: \"Liu Wong\",\r\n Designation: \"Project Manager\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image8.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#D46E89\",\r\n ReportingPerson: \"parent\"\r\n },\r\n {\r\n Id: 75,\r\n Name: \"Karin Josephs\",\r\n Designation: \"Project Lead\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image9.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#D46E89\",\r\n ReportingPerson: 74\r\n },\r\n {\r\n Id: 76,\r\n Name: \"Ruby Anabela \",\r\n Designation: \"Senior S/w Engg\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image10.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#D46E89\",\r\n ReportingPerson: 75\r\n },\r\n {\r\n Id: 77,\r\n Name: \"Helvetis Nagy\",\r\n Designation: \"Project Trainee\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image11.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#D46E89\",\r\n ReportingPerson: 82\r\n },\r\n {\r\n Id: 78,\r\n Name: \"Palle Ibsen\",\r\n Designation: \"Senior S/w Engg\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image5.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#D46E89\",\r\n ReportingPerson: 76\r\n },\r\n {\r\n Id: 79,\r\n Name: \"Mary Saveley\",\r\n Designation: \"SR\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image12.png\",\r\n IsExpand: \"false\",\r\n RatingColor: \"#93B85A\",\r\n ReportingPerson: 82\r\n },\r\n {\r\n Id: 80,\r\n Name: \"Paul Henriot\",\r\n Designation: \"SR\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image16.png\",\r\n IsExpand: \"false\",\r\n RatingColor: \"#D46E89\",\r\n ReportingPerson: 79\r\n },\r\n {\r\n Id: 81,\r\n Name: \"Rita Müller\",\r\n Designation: \"SR\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image13.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#68C2DE\",\r\n ReportingPerson: 79\r\n },\r\n {\r\n Id: 82,\r\n Name: \"Pirkko King\",\r\n Designation: \"Senior S/w Engg\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image18.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#D46E89\",\r\n ReportingPerson: 78\r\n },\r\n {\r\n Id: 83,\r\n Name: \"Paula Parente\",\r\n Designation: \"Senior S/w Engg\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image19.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#EBB92E\",\r\n ReportingPerson: 75\r\n },\r\n {\r\n Id: 84,\r\n Name: \"Karl Jablonski\",\r\n Designation: \"S/w Engg\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image14.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#D46E89\",\r\n ReportingPerson: 83\r\n },\r\n {\r\n Id: 34,\r\n Name: \"Matti Kenna\",\r\n Designation: \"Project Trainee\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image15.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#93B85A\",\r\n ReportingPerson: 84\r\n },\r\n {\r\n Id: 35,\r\n Name: \"Zbyszek Yang\",\r\n Designation: \"Project Trainee\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image21.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#93B85A\",\r\n ReportingPerson: 84\r\n },\r\n {\r\n Id: 85,\r\n Name: \"Nancy\",\r\n Designation: \"Project Lead\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image17.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#93B85A\",\r\n ReportingPerson: 74\r\n },\r\n {\r\n Id: 86,\r\n Name: \"Robert King\",\r\n Designation: \"Senior S/w Engg\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image23.png\",\r\n IsExpand: \"true\",\r\n RatingColor: \"#D46E89\",\r\n ReportingPerson: 85\r\n },\r\n {\r\n Id: 87,\r\n Name: \"Laura Callahan\",\r\n Designation: \"CSR\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image20.png\",\r\n IsExpand: \"false\",\r\n RatingColor: \"#D46E89\",\r\n ReportingPerson: 88\r\n },\r\n {\r\n Id: 88,\r\n Name: \"Anne\",\r\n Designation: \"CSR\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image24.png\",\r\n IsExpand: \"false\",\r\n RatingColor: \"#68C2DE\",\r\n ReportingPerson: 86\r\n },\r\n {\r\n Id: 89,\r\n Name: \"Georg Pipps\",\r\n Designation: \"Senior S/w Engg\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image26.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#EBB92E\",\r\n ReportingPerson: \"parent\"\r\n },\r\n {\r\n Id: 30,\r\n Name: \"Isabel Castro\",\r\n Designation: \"Project Trainee\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image27.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#D46E89\",\r\n ReportingPerson: 89\r\n },\r\n {\r\n Id: 34,\r\n Name: \"Nardo Batista\",\r\n Designation: \"Project Trainee\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image28.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#EBB92E\",\r\n ReportingPerson: 88\r\n },\r\n {\r\n Id: 90,\r\n Name: \"Rene Phillips\",\r\n Designation: \"Project Trainee\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image22.png\",\r\n IsExpand: \"false\",\r\n RatingColor: \"#68C2DE\",\r\n ReportingPerson: 89\r\n },\r\n {\r\n Id: 91,\r\n Name: \"Lúcia Carvalho\",\r\n Designation: \"Project Trainee\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image25.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#93B85A\",\r\n ReportingPerson: 89\r\n },\r\n {\r\n Id: 92,\r\n Name: \"Horst Kloss\",\r\n Designation: \"Project Trainee\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image29.png\",\r\n IsExpand: \"None\",\r\n RatingColor: \"#D46E89\",\r\n ReportingPerson: 89\r\n },\r\n {\r\n Id: 93,\r\n Name: \"Simon Roel\",\r\n Designation: \"Project Lead\",\r\n ImageUrl: \"http://ej2.syncfusion.com/react/demos/src/diagram/employees/image28.png\",\r\n IsExpand: \"true\",\r\n RatingColor: \"#93B85A\",\r\n ReportingPerson: 98\r\n }\r\n];\r\n\r\nlet diagramInstance: DiagramComponent;\r\n\r\nexport class Overview extends SampleBase<{}, {}> {\r\n render() {\r\n return (\r\n <div className=\"control-pane\">\r\n <div className=\"col-lg-12 control-section\">\r\n <div className=\"content-wrapper\">\r\n <DiagramComponent\r\n id=\"diagram\"\r\n ref={diagram => (diagramInstance = diagram)}\r\n width={\"100%\"}\r\n height={\"590px\"}\r\n tool={DiagramTools.ZoomPan}\r\n scrollSettings={{ scrollLimit: \"Infinity\" }} //Sets the constraints of the SnapSettings\r\n snapSettings={{ constraints: SnapConstraints.None }} //Configrues organizational chart layout\r\n layout={{\r\n type: \"OrganizationalChart\",\r\n margin: { top: 20 },\r\n getLayoutInfo: (node: Node, tree: TreeInfo) => {\r\n if (!tree.hasSubTree) {\r\n tree.orientation = \"Vertical\";\r\n tree.type = \"Right\";\r\n }\r\n }\r\n }} //Sets the parent and child relationship of DataSource.\r\n dataSourceSettings={{\r\n id: \"Id\",\r\n parentId: \"ReportingPerson\",\r\n dataManager: new DataManager(data)\r\n }} //Sets the default values of Node\r\n getNodeDefaults={(obj: Node, diagram: Diagram) => {\r\n obj.height = 50;\r\n obj.style = { fill: \"transparent\", strokeWidth: 2 };\r\n return obj;\r\n }} //Sets the default values of connector\r\n getConnectorDefaults={(\r\n connector: ConnectorModel,\r\n diagram: Diagram\r\n ) => {\r\n connector.targetDecorator.shape = \"None\";\r\n connector.type = \"Orthogonal\";\r\n return connector;\r\n }}\r\n //customization of the node.\r\n setNodeTemplate={(obj: Node, diagram: Diagram): Container => {\r\n return setNodeTemplate(obj, diagram);\r\n }}\r\n >\r\n <Inject services={[DataBinding, HierarchicalTree]} />\r\n </DiagramComponent>\r\n </div>\r\n </div>\r\n <div\r\n className=\"col-lg-4\"\r\n style={{\r\n width: \"50%\",\r\n padding: \"0px\",\r\n right: \"30px\",\r\n bottom: \"20px\",\r\n border: \"#eeeeee\",\r\n borderStyle: \"solid\",\r\n boxShadow: \"0px 2px 2px rgba(0,0,0,0.3)\",\r\n background: \"#f7f7f7\",\r\n position: \"absolute\"\r\n }}\r\n >\r\n <OverviewComponent\r\n id=\"overview\"\r\n style={{ top: \"30px\" }}\r\n sourceID=\"diagram\"\r\n width={\"100%\"}\r\n height={\"150px\"}\r\n />\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n\r\n//Funtion to add the Template of the Node.\r\nfunction setNodeTemplate(obj: Node, diagram: Diagram): Container {\r\n let content: StackPanel = new StackPanel();\r\n content.id = obj.id + \"_outerstack\";\r\n content.orientation = \"Horizontal\";\r\n content.style.strokeColor = \"gray\";\r\n content.padding = { left: 5, right: 10, top: 5, bottom: 5 };\r\n let image: ImageElement = new ImageElement();\r\n image.width = 50;\r\n image.height = 50;\r\n image.style.strokeColor = \"none\";\r\n image.source = (obj.data as EmployeeInfo).ImageUrl;\r\n image.id = obj.id + \"_pic\";\r\n let innerStack: StackPanel = new StackPanel();\r\n innerStack.style.strokeColor = \"none\";\r\n innerStack.margin = { left: 5, right: 0, top: 0, bottom: 0 };\r\n innerStack.id = obj.id + \"_innerstack\";\r\n\r\n let text: TextElement = new TextElement();\r\n text.content = (obj.data as EmployeeInfo).Name;\r\n text.style.color = \"black\";\r\n text.style.bold = true;\r\n text.style.strokeColor = \"none\";\r\n text.style.fill = \"none\";\r\n text.id = obj.id + \"_text1\";\r\n\r\n let desigText: TextElement = new TextElement();\r\n desigText.margin = { left: 0, right: 0, top: 5, bottom: 0 };\r\n desigText.content = (obj.data as EmployeeInfo).Designation;\r\n desigText.style.color = \"black\";\r\n desigText.style.strokeColor = \"none\";\r\n desigText.style.fill = \"none\";\r\n desigText.style.textWrapping = \"Wrap\";\r\n desigText.id = obj.id + \"_desig\";\r\n innerStack.children = [text, desigText];\r\n\r\n content.children = [image, innerStack];\r\n\r\n return content;\r\n}\r\n\r\nexport interface EmployeeInfo {\r\n Name: string;\r\n Designation: string;\r\n ImageUrl: string;\r\n}\r\n\nReactDOM.render(<Overview />, document.getElementById('sample'));","app/sample-base.tsx":"import * as ReactDOM from 'react-dom';\r\nimport * as React from 'react';\r\nimport { RouteComponentProps } from 'react-router-dom';\r\nimport { enableRipple } from '@syncfusion/ej2-base';\r\n\r\nenableRipple((window as any).ripple);\r\nexport class SampleBase<P, S> extends React.PureComponent<RouteComponentProps<any> & P, S>{\r\n public rendereComplete(): void {\r\n /**custom render complete function */\r\n }\r\n componentDidMount(): void {\r\n setTimeout(() => {\r\n this.rendereComplete();\r\n }\r\n );\r\n }\r\n}"}