generated from nighthawkcoders/student
-
Notifications
You must be signed in to change notification settings - Fork 0
/
frontend.drawio
123 lines (123 loc) · 14 KB
/
frontend.drawio
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
<mxfile host="65bd71144e">
<diagram id="MPC6TNwU1vjBXL1-_xbt" name="Page-1">
<mxGraphModel dx="1171" dy="981" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
<root>
<mxCell id="0"/>
<mxCell id="1" parent="0"/>
<mxCell id="13" value="Frontend" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
<mxGeometry x="355" y="20" width="140" height="90" as="geometry"/>
</mxCell>
<mxCell id="14" value="Fibonacchi" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="13" vertex="1">
<mxGeometry y="30" width="140" height="30" as="geometry"/>
</mxCell>
<mxCell id="15" value="Sorting" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="13" vertex="1">
<mxGeometry y="60" width="140" height="30" as="geometry"/>
</mxCell>
<mxCell id="97" style="edgeStyle=none;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="1" source="19" target="67">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="19" value="Dog API (button)" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
<mxGeometry x="110" y="190" width="140" height="90" as="geometry"/>
</mxCell>
<mxCell id="20" value="Breed" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="19" vertex="1">
<mxGeometry y="30" width="140" height="30" as="geometry"/>
</mxCell>
<mxCell id="21" value="Origin" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="19" vertex="1">
<mxGeometry y="60" width="140" height="30" as="geometry"/>
</mxCell>
<mxCell id="111" style="edgeStyle=none;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="1" source="40" target="45">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="40" value="Fibonacchi" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;shadow=1;" parent="1" vertex="1">
<mxGeometry x="560" y="190" width="140" height="120" as="geometry"/>
</mxCell>
<mxCell id="41" value="4 methods<br>" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;shadow=1;" parent="40" vertex="1">
<mxGeometry y="30" width="140" height="30" as="geometry"/>
</mxCell>
<mxCell id="42" value="User inputs nth number" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;shadow=1;" parent="40" vertex="1">
<mxGeometry y="60" width="140" height="30" as="geometry"/>
</mxCell>
<mxCell id="43" value="Displaying Results<br>" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;shadow=1;" parent="40" vertex="1">
<mxGeometry y="90" width="140" height="30" as="geometry"/>
</mxCell>
<mxCell id="108" style="edgeStyle=none;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="1" source="45" target="105">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="45" value="Fibonacci Methods API" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=50;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;shadow=1;" parent="1" vertex="1">
<mxGeometry x="560" y="370" width="140" height="140" as="geometry"/>
</mxCell>
<mxCell id="49" value="Connect the backend and frotend using the fetch()" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;shadow=1;" parent="45" vertex="1">
<mxGeometry y="50" width="140" height="90" as="geometry"/>
</mxCell>
<mxCell id="90" style="edgeStyle=none;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="1" source="57" target="117">
<mxGeometry relative="1" as="geometry">
<mxPoint x="180" y="710" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="57" value="Performance" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;rounded=0;shadow=0;glass=0;swimlaneLine=1;" parent="1" vertex="1">
<mxGeometry x="110" y="560" width="140" height="90" as="geometry"/>
</mxCell>
<mxCell id="58" value="JSCharting fetch time" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;rounded=1;shadow=1;glass=1;sketch=1;" parent="57" vertex="1">
<mxGeometry y="30" width="140" height="30" as="geometry"/>
</mxCell>
<mxCell id="60" value="Comparing each method via a table" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;rounded=1;shadow=1;glass=1;sketch=1;" parent="57" vertex="1">
<mxGeometry y="60" width="140" height="30" as="geometry"/>
</mxCell>
<mxCell id="67" value="Sorting Algorithms API" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;rounded=0;shadow=0;glass=0;sketch=0;" parent="1" vertex="1">
<mxGeometry x="110" y="370" width="140" height="120" as="geometry"/>
</mxCell>
<mxCell id="71" value="Connect the backend sorting algorithm with the frontend using fetch()" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;rounded=0;shadow=0;glass=0;sketch=0;" parent="67" vertex="1">
<mxGeometry y="30" width="140" height="90" as="geometry"/>
</mxCell>
<mxCell id="72" value="" style="endArrow=classic;html=1;exitX=0.493;exitY=1.003;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" parent="1" source="71" target="57" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="180" y="520" as="sourcePoint"/>
<mxPoint x="179.69567317645442" y="600" as="targetPoint"/>
</mxGeometry>
</mxCell>
<mxCell id="101" value="Displays" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;shadow=1;" vertex="1" parent="1">
<mxGeometry x="560" y="755" width="140" height="130" as="geometry"/>
</mxCell>
<mxCell id="102" value="4 methods&nbsp; time taken" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;shadow=1;" vertex="1" parent="101">
<mxGeometry y="30" width="140" height="30" as="geometry"/>
</mxCell>
<mxCell id="103" value="Time(seconds) graph" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;shadow=1;" vertex="1" parent="101">
<mxGeometry y="60" width="140" height="30" as="geometry"/>
</mxCell>
<mxCell id="104" value="The resulting list&nbsp; on table" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;shadow=1;" vertex="1" parent="101">
<mxGeometry y="90" width="140" height="40" as="geometry"/>
</mxCell>
<mxCell id="109" style="edgeStyle=none;html=1;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="1" source="105" target="101">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="105" value="Performance" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;rounded=0;shadow=0;glass=0;swimlaneLine=1;" vertex="1" parent="1">
<mxGeometry x="560" y="595" width="140" height="90" as="geometry"/>
</mxCell>
<mxCell id="106" value="JSCharting fetch time" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;rounded=1;shadow=1;glass=1;sketch=1;" vertex="1" parent="105">
<mxGeometry y="30" width="140" height="30" as="geometry"/>
</mxCell>
<mxCell id="107" value="Comparing each method via a table" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;rounded=1;shadow=1;glass=1;sketch=1;" vertex="1" parent="105">
<mxGeometry y="60" width="140" height="30" as="geometry"/>
</mxCell>
<mxCell id="110" style="edgeStyle=none;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="1" source="14" target="40">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="112" style="edgeStyle=none;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="1" source="15" target="19">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="117" value="Displays" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;shadow=1;" vertex="1" parent="1">
<mxGeometry x="110" y="740" width="140" height="140" as="geometry"/>
</mxCell>
<mxCell id="118" value="4 methods&nbsp; time taken" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;shadow=1;" vertex="1" parent="117">
<mxGeometry y="30" width="140" height="30" as="geometry"/>
</mxCell>
<mxCell id="119" value="Time(seconds) graph" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;shadow=1;" vertex="1" parent="117">
<mxGeometry y="60" width="140" height="30" as="geometry"/>
</mxCell>
<mxCell id="120" value="The resulting nth nymver and list on a table" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;shadow=1;" vertex="1" parent="117">
<mxGeometry y="90" width="140" height="50" as="geometry"/>
</mxCell>
</root>
</mxGraphModel>
</diagram>
</mxfile>