React-samples/src/diagram/local-data.js at master · SyncfusionExamples/React-samples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var ej2_react_diagrams_1 = require("@syncfusion/ej2-react-diagrams");
var sample_base_1 = require("../common/sample-base");
var ej2_data_1 = require("@syncfusion/ej2-data");
exports.species = [
    { Name: "Species", fillColor: "#3DD94A" },
    { Name: "Plants", Category: "Species" },
    { Name: "Fungi", Category: "Species" },
    { Name: "Lichens", Category: "Species" },
    { Name: "Animals", Category: "Species" },
    { Name: "Mosses", Category: "Plants" },
    { Name: "Ferns", Category: "Plants" },
    { Name: "Gymnosperms", Category: "Plants" },
    { Name: "Dicotyledens", Category: "Plants" },
    { Name: "Monocotyledens", Category: "Plants" },
    { Name: "Invertebrates", Category: "Animals" },
    { Name: "Vertebrates", Category: "Animals" },
    { Name: "Insects", Category: "Invertebrates" },
    { Name: "Molluscs", Category: "Invertebrates" },
    { Name: "Crustaceans", Category: "Invertebrates" },
    { Name: "Others", Category: "Invertebrates" },
    { Name: "Fish", Category: "Vertebrates" },
    { Name: "Amphibians", Category: "Vertebrates" },
    { Name: "Reptiles", Category: "Vertebrates" },
    { Name: "Birds", Category: "Vertebrates" },
    { Name: "Mammals", Category: "Vertebrates" }
];
var LocalData = (function (_super) {
    __extends(LocalData, _super);
    function LocalData() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    LocalData.prototype.render = function () {
        return (React.createElement("div", { className: "control-pane" },
            React.createElement("div", { className: "control-section" },
                React.createElement("div", { className: "content-wrapper", style: { width: "100%" } },
                    React.createElement(ej2_react_diagrams_1.DiagramComponent, { id: "diagram", width: "100%", height: "490",
                        //Configures data source
                        dataSourceSettings: {
                            id: "Name",
                            parentId: "Category",
                            dataManager: new ej2_data_1.DataManager(exports.species),
                            //binds the external data with node
                            doBinding: function (nodeModel, data, diagram) {
                                nodeModel.annotations = [
                                    {
                                        /* tslint:disable:no-string-literal */
                                        content: data["Name"],
                                        style: { color: "black" }
                                    }
                                ];
                                /* tslint:disable:no-string-literal */
                                nodeModel.style = {
                                    fill: "#ffeec7",
                                    strokeColor: "#f5d897",
                                    strokeWidth: 1
                                };
                            }
                        },
                        //Configrues organizational chart layout
                        layout: {
                            type: "HierarchicalTree",
                            horizontalSpacing: 15,
                            verticalSpacing: 50,
                            margin: { top: 10, left: 10, right: 10, bottom: 0 }
                        },
                        //Sets the default values of nodes
                        getNodeDefaults: function (obj, diagram) {
                            //Initialize shape
                            obj.shape = { type: "Basic", shape: "Rectangle" };
                            obj.style = { strokeWidth: 1 };
                            obj.width = 95;
                            obj.height = 30;
                        },
                        //Sets the default values of connector
                        getConnectorDefaults: function (connector, diagram) {
                            connector.type = "Orthogonal";
                            connector.style.strokeColor = "#4d4d4d";
                            connector.targetDecorator.shape = "None";
                        },
                        //Disables all interactions except zoom/pan
                        tool: ej2_react_diagrams_1.DiagramTools.ZoomPan, snapSettings: { constraints: 0 } },
                        React.createElement(ej2_react_diagrams_1.Inject, { services: [ej2_react_diagrams_1.DataBinding, ej2_react_diagrams_1.HierarchicalTree] })))),
            React.createElement("div", { id: "action-description" },
                React.createElement("p", null, "This sample visualizes the classifications of species using hierarchical tree layout algorithm. Data Manager support is used to bind data with the diagram.")),
            React.createElement("div", { id: "description" },
                React.createElement("p", null,
                    "This example shows how to generate a diagram from the saved data. The ",
                    React.createElement("code", null, "dataSourceSettings"),
                    " property can be used to map an external data source with the diagram control. The",
                    React.createElement("code", null, "id"),
                    " property of ",
                    React.createElement("code", null, "dataSourceSettings"),
                    " can be used to define a unique field of an external data. The",
                    React.createElement("code", null, "parentId"),
                    " property can be used to define the relationship between the objects."),
                React.createElement("p", { style: { fontWeight: 500 } }, "Injecting Module"),
                React.createElement("p", null,
                    "The diagram component\u2019s features are segregated into individual feature-wise modules. To generate diagrams from an external data source, inject ",
                    React.createElement("code", null, "DataBinding"),
                    " module into",
                    " ",
                    React.createElement("code", null, "services"),
                    ". To automatically arrange the objects in a hierarchical structure, inject",
                    React.createElement("code", null, "DataBinding"),
                    " module into ",
                    React.createElement("code", null, "services"),
                    "."),
                React.createElement("br", null))));
    };
    return LocalData;
}(sample_base_1.SampleBase));
exports.LocalData = LocalData;