Skip to content

Commit 6789798

Browse files
vladaskorohodovavladaskorohodova
authored
Diagram: add Getting Started tutorial (DevExpress#6863) (DevExpress#6867)
1 parent dc083d5 commit 6789798

File tree

11 files changed

+660
-119
lines changed

11 files changed

+660
-119
lines changed

‎MenuConfig.xml‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -104,11 +104,9 @@
104104
<MenuRule Destination="10 UI Components/dxFloating Action Button/3 SpeedDialAction API" SourcePattern="ApiReference:^10 UI Components/dxSpeedDialAction" />
105105
<MenuRule Destination="10 UI Components/dx$1/3 API" SourcePattern="ApiReference:^10 UI Components/dx([a-zA-Z]+)" />
106106
<MenuRule Destination="10 UI Components/dx$1/4 Demos" SourcePattern="Howto:^05 UI Components/([a-zA-Z]+)/Demos" />
107-
<MenuRule Destination="10 UI Components/dxDiagram/0 Overview" SourcePattern="Howto:^05 UI Components/Diagram/05 Add the Diagram Component to an Angular CLI Application" VisibleFor="Angular"/>
108107
<MenuRule Destination="10 UI Components/dx$1/0 Overview" SourcePattern="Howto:^05 UI Components/([a-zA-Z]+)/[0-9]+ Overview" />
109108
<MenuRule Destination="10 UI Components/dx$1/0 Overview" SourcePattern="Howto:^05 UI Components/([a-zA-Z]+)/[0-9]+ Visual Elements" />
110109
<MenuRule Destination="10 UI Components/dx$1/1 Getting Started" SourcePattern="Howto:^05 UI Components/(Drawer|FileManager|Floating Action Button)/[0-9]* Getting Started with (File Manager|Navigation Drawer|Floating Action Button)" />
111-
<MenuRule Destination="10 UI Components/dxDiagram/1 Getting Started" SourcePattern="Howto:^05 UI Components/Diagram/00 Getting Started with Diagram" VisibleFor="jQuery"/>
112110
<MenuRule Destination="10 UI Components/dx$1/1 Getting Started" SourcePattern="Howto:^05 UI Components/([a-zA-Z]+)/[0-9]+ Getting Started with ([a-zA-Z]+)" />
113111
<MenuRule Destination="10 UI Components/dx$1/5 Accessibility" SourcePattern="Howto:^05 UI Components/([a-zA-Z]+)/[0-9]+ Accessibility" />
114112
<MenuRule Destination="" SourcePattern="Howto:^05 UI Components/(Accordion|BarGauge|Bullet|ButtonGroup|Chat|CheckBox|CircularGauge|Drawer|DropDownButton|Floating Action Button|LinearGauge|NavBar|Resizable|SlideOut|SlideOutView|TabPanel|Tabs|Toolbar|TreeMap|zz Common)" />

‎applications/GettingStartedWith/Diagram/index.css‎

Whitespace-only changes.

‎applications/GettingStartedWith/Diagram/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<div id="diagram"></div>

‎applications/GettingStartedWith/Diagram/index.js‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
$(function () {
2+
$("#diagram").dxDiagram({
3+
height: 400,
4+
simpleView: true,
5+
toolbox: {
6+
showSearch: false,
7+
groups: [{
8+
category: 'general',
9+
shapes: ['text', 'rectangle'],
10+
}]
11+
},
12+
pageColor: "#f0f0f0",
13+
nodes: {
14+
dataSource: new DevExpress.data.ArrayStore({
15+
key: 'ID',
16+
data: projectTasks,
17+
}),
18+
keyExpr: "ID",
19+
parentKeyExpr: "Parent_ID",
20+
textExpr: "Task_Name",
21+
},
22+
propertiesPanel: {
23+
tabs: [
24+
{
25+
groups: [{ title: 'Object Properties', commands: ['lineStyle', 'lineColor', 'fillColor'] }],
26+
},
27+
],
28+
},
29+
defaultItemProperties: {
30+
textStyle: "font-family: 'Courier New', monospace;"
31+
}
32+
});
33+
34+
35+
});
36+
37+
const projectTasks = [
38+
{
39+
"ID": 1,
40+
"Task_Name": "Project Planning",
41+
"Description": "Define project scope and goals",
42+
},
43+
{
44+
"ID": 2,
45+
"Parent_ID": 1,
46+
"Task_Name": "Requirement Analysis",
47+
"Description": "Gather and document requirements",
48+
},
49+
{
50+
"ID": 3,
51+
"Parent_ID": 1,
52+
"Task_Name": "Resource Allocation",
53+
"Description": "Assign team and resources",
54+
},
55+
{
56+
"ID": 4,
57+
"Parent_ID": 2,
58+
"Task_Name": "Design Specifications",
59+
"Description": "Outline system design",
60+
},
61+
{
62+
"ID": 5,
63+
"Parent_ID": 3,
64+
"Task_Name": "Task Scheduling",
65+
"Description": "Develop project timeline",
66+
},
67+
{
68+
"ID": 6,
69+
"Parent_ID": 2,
70+
"Task_Name": "Risk Assessment",
71+
"Description": "Identify potential risks",
72+
},
73+
{
74+
"ID": 7,
75+
"Parent_ID": 1,
76+
"Task_Name": "Kick-off Meeting",
77+
"Description": "Launch project with stakeholders",
78+
}
79+
];

‎concepts/05 UI Components/Diagram/00 Getting Started with Diagram/00 Getting Started with Diagram.md‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
1-
The Diagram UI component provides a visual interface to help you design new and modify existing diagrams.
1+
#include tutorials-intro-installationnote
22

3-
#include btn-open-demo with {
4-
href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Diagram/Overview/"
5-
}
3+
Diagram is a UI component for creating and editing diagrams.
4+
5+
This tutorial shows how to add a Diagram component to your application and configure the component.
6+
7+
<div class="simulator-desktop-container" data-view="/Content/Applications/24_2/GettingStartedWith/Diagram/index.html, /Content/Applications/24_2/GettingStartedWith/Diagram/index.js, /Content/Applications/24_2/GettingStartedWith/Diagram/index.css"></div>
68

7-
[tags] jquery
9+
Each section in this tutorial describes one configuration step. You can also find full source code in the GitHub repository.
10+
11+
#include btn-open-github with {
12+
href: "https://github.com/DevExpress-Examples/devextreme-getting-started-with-diagram"
13+
}

‎concepts/05 UI Components/Diagram/00 Getting Started with Diagram/05 Add the Diagram Component to a Page.md‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
---
2+
##### jQuery
3+
4+
[Add DevExtreme to your jQuery application](/concepts/58%20jQuery%20Components/05%20Add%20DevExtreme%20to%20a%20jQuery%20Application/00%20Add%20DevExtreme%20to%20a%20jQuery%20Application.md '/Documentation/Guide/jQuery_Components/Add_DevExtreme_to_a_jQuery_Application/') and add Diagram resources (scripts and styles) to the page:
5+
6+
<!-- tab: index.js -->
7+
$(function() {
8+
$("#diagram").dxDiagram({ });
9+
});
10+
11+
<!-- tab: index.html -->
12+
<html>
13+
<head>
14+
<!-- ... -->
15+
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
16+
<script src="https://cdn3.devexpress.com/jslib/minor_24_2/js/dx-diagram.min.js"></script>
17+
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/minor_24_2/css/dx-diagram.min.css">
18+
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/minor_24_2/css/dx.light.css">
19+
<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/minor_24_2/js/dx.all.js"></script>
20+
<script type="text/javascript" src="index.js"></script>
21+
<script type="text/javascript" src="data.js"></script>
22+
</head>
23+
<body>
24+
<div id="diagram"></div>
25+
</body>
26+
</html>
27+
28+
29+
##### Angular
30+
31+
[Add DevExtreme to your Angular application](/concepts/40%20Angular%20Components/10%20Getting%20Started/03%20Add%20DevExtreme%20to%20an%20Angular%20CLI%20Application '/Documentation/Guide/Angular_Components/Getting_Started/Add_DevExtreme_to_an_Angular_CLI_Application/'), then install `devexpress-diagram` (`npm i devexpress-diagram`), and add Diagram resources (scripts and styles) to the page:
32+
33+
<!-- tab: app.component.html -->
34+
<dx-diagram></dx-diagram>
35+
36+
<!-- tab: app.module.ts -->
37+
import { BrowserModule } from '@angular/platform-browser';
38+
import { NgModule } from '@angular/core';
39+
import { AppComponent } from './app.component';
40+
41+
import { DxDiagramModule } from 'devextreme-angular';
42+
43+
@NgModule({
44+
declarations: [
45+
AppComponent
46+
],
47+
imports: [
48+
BrowserModule,
49+
DxDiagramModule
50+
],
51+
providers: [ ],
52+
bootstrap: [AppComponent]
53+
})
54+
export class AppModule { }
55+
56+
<!-- tab: angular.json -->
57+
// ...
58+
"styles": [
59+
// ...
60+
"node_modules/devexpress-diagram/dist/dx-diagram.min.css",
61+
],
62+
63+
##### Vue
64+
65+
[Add DevExtreme to your Vue application](/concepts/55%20Vue%20Components/05%20Add%20DevExtreme%20to%20a%20Vue%20Application/00%20Add%20DevExtreme%20to%20a%20Vue%20Application.md '/Documentation/Guide/Vue_Components/Add_DevExtreme_to_a_Vue_Application/') and add Diagram resources (scripts and styles) to the page:
66+
67+
<!-- tab: App.vue -->
68+
<template>
69+
<DxDiagram>
70+
</DxDiagram>
71+
</template>
72+
73+
<script setup>
74+
import 'devextreme/dist/css/dx.light.css';
75+
import 'devexpress-diagram/dist/dx-diagram.min.css';
76+
import { DxDiagram } from 'devextreme-vue/diagram';
77+
</script>
78+
79+
##### React
80+
81+
[Add DevExtreme to your React application](/concepts/50%20React%20Components/05%20Add%20DevExtreme%20to%20a%20React%20Application/00%20Add%20DevExtreme%20to%20a%20React%20Application.md '/Documentation/Guide/React_Components/Add_DevExtreme_to_a_React_Application/') and use the following code snippet to create a Diagram component:
82+
83+
<!-- tab: App.js -->
84+
import React from 'react';
85+
86+
import 'devextreme/dist/css/dx.light.css';
87+
import 'devexpress-diagram/dist/dx-diagram.min.css';
88+
89+
import { Diagram } from 'devextreme-react/diagram';
90+
91+
function App() {
92+
return (
93+
<Diagram>
94+
</Diagram>
95+
);
96+
}
97+
98+
export default App;
99+
100+
---

‎concepts/05 UI Components/Diagram/00 Getting Started with Diagram/10 Add the Diagram Component to a Page.md‎

Lines changed: 0 additions & 62 deletions
This file was deleted.

0 commit comments

Comments
 (0)