Skip to content

Commit 6c65f8a

Browse files
michaeledmichaeled
committed
Refactoring diagram code
1 parent 16b5e14 commit 6c65f8a

File tree

3 files changed

+62
-57
lines changed

3 files changed

+62
-57
lines changed

‎README.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -162,10 +162,10 @@ OPTIONS
162162
-t, --type=svg|dot (required) [default: svg] graph output file type
163163
164164
EXAMPLES
165-
$ csdx content-type:diagram -s "xxxxxxxxxxxxxxxxxxx" -o "./content-model.svg"
166-
$ csdx content-type:diagram -a "management token" -o "./content-model.svg"
167-
$ csdx content-type:diagram -a "management token" -o "./content-model.svg" -d "landscape"
168-
$ csdx content-type:diagram -a "management token" -o "./content-model.dot" -t "dot"
165+
$ csdx content-type:diagram -s "xxxxxxxxxxxxxxxxxxx" -o "content-model.svg"
166+
$ csdx content-type:diagram -a "management token" -o "content-model.svg"
167+
$ csdx content-type:diagram -a "management token" -o "content-model.svg" -d "landscape"
168+
$ csdx content-type:diagram -a "management token" -o "content-model.dot" -t "dot"
169169
```
170170

171171
_See code: [src/commands/content-type/diagram.ts](https://github.com/Contentstack-Solutions/contentstack-cli-content-type/blob/v1.0.6/src/commands/content-type/diagram.ts)_

‎src/commands/content-type/diagram.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import Command from '../../core/command'
22
import {flags} from '@contentstack/cli-command'
33
import cli from 'cli-ux'
4-
import {createDiagram, CreateDiagramOptions} from '../../core/content-type/diagram'
4+
import {createDiagram, CreateDiagramOptions, DiagramOrientation} from '../../core/content-type/diagram'
55

66
export default class DiagramCommand extends Command {
77
static description = 'create a visual diagram of a Stack\'s Content Types';
88

99
static examples = [
10-
'$ csdx content-type:diagram -s "xxxxxxxxxxxxxxxxxxx" -o "./content-model.svg"',
11-
'$ csdx content-type:diagram -a "management token" -o "./content-model.svg"',
12-
'$ csdx content-type:diagram -a "management token" -o "./content-model.svg" -d "landscape"',
13-
'$ csdx content-type:diagram -a "management token" -o "./content-model.dot" -t "dot"',
10+
'$ csdx content-type:diagram -s "xxxxxxxxxxxxxxxxxxx" -o "content-model.svg"',
11+
'$ csdx content-type:diagram -a "management token" -o "content-model.svg"',
12+
'$ csdx content-type:diagram -a "management token" -o "content-model.svg" -d "landscape"',
13+
'$ csdx content-type:diagram -a "management token" -o "content-model.dot" -t "dot"',
1414
];
1515

1616
static flags = {
@@ -85,7 +85,7 @@ export default class DiagramCommand extends Command {
8585
outputFileName: outputPath,
8686
outputFileType: flags.type,
8787
style: {
88-
orientation: flags.direction === 'portrait' ? 'LR' : 'TD',
88+
orientation: flags.direction === 'portrait' ? DiagramOrientation.Portrait : DiagramOrientation.Landscape
8989
},
9090
}
9191

‎src/core/content-type/diagram.ts‎

Lines changed: 52 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,44 @@ import * as fs from 'fs'
33
import moment from 'moment'
44
const {graphviz} = require('node-graphviz')
55

6+
const theme = {
7+
graph: {
8+
fontname: 'Helvetica',
9+
fontsize: '60',
10+
fontcolor: '#2a0f57',
11+
},
12+
13+
node: {
14+
fontname: 'Helvetica',
15+
fontsize: '14',
16+
fontcolor: '#555555',
17+
},
18+
19+
edge: {
20+
fontname: 'Helvetica',
21+
fontsize: '14',
22+
color: '#2a0f57',
23+
},
24+
25+
table: {
26+
heading: {
27+
bgcolor: '#7c4dff',
28+
color: '#bab7c7',
29+
label: {
30+
color: 'white',
31+
},
32+
},
33+
row: {
34+
bgcolor: '#f7f7f7',
35+
},
36+
},
37+
38+
entities: {
39+
hasOption: '✓',
40+
spacer: '—',
41+
},
42+
}
43+
644
enum DiagramNodeType {
745
ContentType,
846
GlobalFields
@@ -11,7 +49,7 @@ enum DiagramNodeType {
1149
interface DiagramNode {
1250
uid: string;
1351
title: string;
14-
fields: any[];
52+
fields: DiagramNodeField[];
1553
}
1654

1755
interface DiagramNodeField {
@@ -39,8 +77,13 @@ export interface CreateDiagramResults {
3977
outputPath: string;
4078
}
4179

80+
export enum DiagramOrientation {
81+
Portrait = 'LR',
82+
Landscape = 'TD'
83+
}
84+
4285
export interface DiagramStyleOptions {
43-
orientation: 'LR' | 'TD';
86+
orientation: DiagramOrientation
4487
}
4588

4689
export async function createDiagram(options: CreateDiagramOptions): Promise<CreateDiagramResults> {
@@ -61,44 +104,6 @@ export async function createDiagram(options: CreateDiagramOptions): Promise<Crea
61104
}
62105
}
63106

64-
const theme = {
65-
graph: {
66-
fontname: 'Helvetica',
67-
fontsize: '60',
68-
fontcolor: '#2a0f57',
69-
},
70-
71-
node: {
72-
fontname: 'Helvetica',
73-
fontsize: '14',
74-
fontcolor: '#555555',
75-
},
76-
77-
edge: {
78-
fontname: 'Helvetica',
79-
fontsize: '14',
80-
color: '#2a0f57',
81-
},
82-
83-
table: {
84-
heading: {
85-
bgcolor: '#7c4dff',
86-
color: '#bab7c7',
87-
label: {
88-
color: 'white',
89-
},
90-
},
91-
row: {
92-
bgcolor: '#f7f7f7',
93-
},
94-
},
95-
96-
entities: {
97-
hasOption: '&#x2713;',
98-
spacer: '&mdash;',
99-
},
100-
}
101-
102107
function createNodes(contentTypes: any[]) {
103108
const result = [] as DiagramNode[]
104109

@@ -256,13 +261,13 @@ function createDotTableRows(node: DiagramNode) {
256261

257262
return fields.map((field: any, _: any) => {
258263
return `<tr>
259-
<td bgcolor="${theme.table.row.bgcolor}" align="left" port="${field.path}">${field.title}</td>
260-
<td bgcolor="${theme.table.row.bgcolor}" align="left">${field.type === null ? 'block' : field.type}</td>
261-
<td bgcolor="${theme.table.row.bgcolor}" align="left">${field.references.join(', ')}</td>
262-
<td bgcolor="${theme.table.row.bgcolor}" align="center">${field.multiple ? theme.entities.hasOption : ''}</td>
263-
<td bgcolor="${theme.table.row.bgcolor}" align="center">${field.mandatory ? theme.entities.hasOption : ''}</td>
264-
<td bgcolor="${theme.table.row.bgcolor}" align="center">${field.unique ? theme.entities.hasOption : ''}</td>
265-
</tr>`
264+
<td bgcolor="${theme.table.row.bgcolor}" align="left" port="${field.path}">${field.title}</td>
265+
<td bgcolor="${theme.table.row.bgcolor}" align="left">${field.type === null ? 'block' : field.type}</td>
266+
<td bgcolor="${theme.table.row.bgcolor}" align="left">${field.references.join(', ')}</td>
267+
<td bgcolor="${theme.table.row.bgcolor}" align="center">${field.multiple ? theme.entities.hasOption : ''}</td>
268+
<td bgcolor="${theme.table.row.bgcolor}" align="center">${field.mandatory ? theme.entities.hasOption : ''}</td>
269+
<td bgcolor="${theme.table.row.bgcolor}" align="center">${field.unique ? theme.entities.hasOption : ''}</td>
270+
</tr>`
266271
}).join('\n')
267272
}
268273

0 commit comments

Comments
 (0)