Skip to content

Commit 5b465e3

Browse files
sartrasartra
committed
design
1 parent b124571 commit 5b465e3

File tree

8 files changed

+622
-386
lines changed

8 files changed

+622
-386
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
node_modules
22
package-lock.json
3+
client/.DS_Store

‎client/css/style.css‎

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,44 @@ body{
1111
padding: 0;
1212
}
1313

14+
header {
15+
padding: 1em;
16+
}
17+
1418
#text-area{
1519
flex: 1;
1620
order: 2;
1721
background: #333;
1822
margin-left: 20px;
1923
}
2024

25+
hr {
26+
margin-top: 1em;
27+
}
28+
29+
#logo {
30+
width: 400px;
31+
}
32+
33+
.tablinks {
34+
padding: 1em;
35+
background-color: #022873;
36+
color: white;
37+
margin-top: 10px;
38+
font-size: 1.2em;
39+
}
40+
41+
.monitor-label {
42+
margin: 1em;
43+
}
44+
.tablinks:hover {
45+
background-color: #053FC0;
46+
}
47+
48+
.active{
49+
background-color: #053FC0;
50+
}
51+
2152
div.tooltip {
2253
position: absolute;
2354
text-align: center;
@@ -44,6 +75,7 @@ div.tooltip {
4475
flex-direction: row;
4576
/*border: 1px solid white;*/
4677
margin-top: 50px;
78+
/*width: 100%;*/
4779
}
4880

4981
#sun-container {
@@ -61,7 +93,7 @@ div.tooltip {
6193
.package-info {
6294
border: 5px solid black;
6395
/*background-color: #FFFFFF;*/
64-
width: 110%;
96+
/* width: 110%;*/
6597
padding: 10px;
6698
}
6799

‎client/css/treasury_style.css‎

Lines changed: 33 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -55,29 +55,36 @@ html, body {
5555
margin: 0;
5656
}
5757

58-
#bisankey-container {
58+
#chart1-wrapper {
5959
display: flex;
6060
flex-direction: column;
61-
/* height: 1200px; */
62-
border: 1px solid white;
63-
64-
padding: 10px;
65-
min-height: 600px;
61+
/*height: calc(100vh - 100px); * output container is small for display */
6662
height: auto;
67-
margin-top: 30px;
68-
margin-bottom: 30px;
63+
/*width: calc(100vw - 100px);*/
64+
display: block;
65+
/*border: 1px solid red;*/
6966
}
7067

71-
68+
#chart2-wrapper {
69+
display: flex;
70+
flex-direction: column;
71+
/*height: calc(100vh - 100px); * output container is small for display */
72+
height: auto;
73+
/*width: calc(100vw - 100px);*/
74+
}
7275

7376
#bisankey-container {
74-
/* display: flex;
75-
flex-direction: column;*/
76-
77+
/*border: 1px solid white;*/
78+
order: 1;
79+
padding: 10px;
80+
height: auto;
81+
margin-top: 5px;
82+
margin-bottom: 30px;
7783
}
7884

85+
7986
#chart-info {
80-
/* order:1;*/
87+
order:2;
8188
height: auto;
8289
padding: 10px;
8390
}
@@ -89,13 +96,13 @@ html, body {
8996

9097
.chart-info {
9198
border: 1px solid #001128;
92-
width: 250px;
93-
padding: 10px;
99+
width: 330px;
100+
padding: 16px;
94101
color: #001128;
95102
}
96103

97104
#chart-info {
98-
padding: 0px;
105+
padding: 10px;
99106
margin: 0;
100107
list-style: none;
101108
-ms-box-orient: horizontal;
@@ -109,8 +116,16 @@ html, body {
109116
flex-flow: row wrap;
110117
}
111118

119+
#chart-info p {
120+
display: flex;
121+
flex-wrap: wrap;
122+
}
112123

113-
.node-type {
124+
.stack-data {
125+
max-width: 300px;
126+
}
127+
128+
/*.node-type {
114129
overflow: hidden;
115130
white-space: nowrap;
116-
}
131+
}*/

‎client/img/asycnh-optics-logo.png‎

22.2 KB
Loading

‎client/img/logo-white-02.svg‎

Lines changed: 113 additions & 0 deletions
Loading

‎client/index.html‎

Lines changed: 58 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,68 @@
1010
<script type="text/javascript" src="./src/bisankey.js"></script>
1111
</head>
1212
<body>
13-
<h1>Async Function Monitor</h1>
14-
<div id="bisankey-container">
15-
<div id="func-panel"></div>
1613

14+
15+
<header>
16+
17+
<img id="logo" src='./img/logo-white-02.svg' />
18+
19+
<div class="tab">
20+
<button class="tablinks" onclick="openCity(event, 'chart1-wrapper')">Async Monitor</button>
21+
<button class="tablinks" onclick="openCity(event, 'chart2-wrapper')">Package Monitor</button>
1722
</div>
23+
</header>
24+
25+
<hr>
26+
27+
<div id='chart1-wrapper' class="tabcontent">
28+
<div id="bisankey-container"></div>
1829
<div id="chart-info"></div>
30+
</div>
31+
32+
<div id='chart2-wrapper' class="tabcontent" style="display: none">
1933
<div id="sunburst-container">
20-
<div id="package-panel"></div>
34+
<div id="package-panel"> </div>
2135
</div>
36+
</div>
37+
38+
39+
40+
<script type="text/javascript" src="./src/main.js"></script>
41+
<script type="text/javascript" src="./src/sunBurst.js"></script>
42+
<script type="text/javascript" src="./src/bisankey-graph.js"></script>
43+
44+
<script type="text/javascript">
45+
46+
47+
const sankey = document.getElementById('chart1-wrapper');
48+
const sunburst = document.getElementById('sunburst-container');
49+
const selection = document.getElementById('chart-selection');
50+
51+
function openCity(evt, cityName) {
52+
// Declare all variables
53+
var i, tabcontent, tablinks;
54+
55+
// Get all elements with class="tabcontent" and hide them
56+
tabcontent = document.getElementsByClassName("tabcontent");
57+
for (i = 0; i < tabcontent.length; i++) {
58+
tabcontent[i].style.display = "none";
59+
}
60+
61+
// Get all elements with class="tablinks" and remove the class "active"
62+
tablinks = document.getElementsByClassName("tablinks");
63+
for (i = 0; i < tablinks.length; i++) {
64+
tablinks[i].className = tablinks[i].className.replace(" active", "");
65+
}
66+
67+
// Show the current tab, and add an "active" class to the button that opened the tab
68+
document.getElementById(cityName).style.display = "flex";
69+
evt.currentTarget.className += " active";
70+
}
71+
72+
</script>
73+
2274

23-
<script type="text/javascript" src="./src/main.js"></script>
24-
<script type="text/javascript" src="./src/sunBurst.js"></script>
25-
<script type="text/javascript" src="./src/bisankey-graph.js"></script>
26-
</body>
75+
</body>
2776

28-
</html>
77+
</html>

0 commit comments

Comments
 (0)