Skip to content

Commit 3311da6

Browse files
author
minjk-bl
committed
Add WordCloud app under Visualization
1 parent d75e2b2 commit 3311da6

4 files changed

Lines changed: 427 additions & 0 deletions

File tree

‎css/m_visualize/wordCloud.css‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
2+
/* temporary style for word cloud popup */
3+
.vp-popup-body-top-bar {
4+
position: absolute;
5+
left: calc(50% - 250px);
6+
}
7+
.vp-popup-codeview-box {
8+
height: 200px;
9+
}
10+
/* word cloud styles */
11+
.vp-wc-body {
12+
display: grid;
13+
grid-template-columns: calc(50% - 8px) calc(50% - 8px);
14+
grid-template-rows: 1fr;
15+
grid-row-gap: 5px;
16+
grid-column-gap: 15px;
17+
align-items: baseline;
18+
align-content: center;
19+
height: 100%;
20+
}
21+
.vp-wc-left-box label {
22+
margin-bottom: 0px;
23+
}
24+
.vp-wc-left-box,
25+
.vp-wc-right-box {
26+
height: calc(100% - 10px);
27+
}
28+
.vp-wc-option-box {
29+
height: calc(100% - 30px);
30+
}
31+
.vp-tab-bar {
32+
width: 100%;
33+
overflow-y: hidden;
34+
}
35+
.vp-tab-item {
36+
display: inline-block;
37+
position: relative;
38+
width: 85px;
39+
height: 30px;
40+
line-height: 30px;
41+
background: var(--light-gray-color);
42+
cursor: pointer;
43+
border: 0.24px solid #E4E4E4;
44+
box-sizing: border-box;
45+
border-radius: 2px 2px 0px 0px;
46+
font-weight: bold;
47+
text-align: center;
48+
}
49+
.vp-tab-item.vp-focus {
50+
color: var(--font-highlight);
51+
background: white;
52+
border-bottom: 3px solid #FFCF73;
53+
}
54+
.vp-tab-page {
55+
width: 100%;
56+
height: 100%;
57+
}
58+
.vp-tab-page-box {
59+
height: calc(100% - 30px);
60+
min-height: 352px;
61+
align-content: baseline;
62+
}
63+
.vp-wc-preview-title {
64+
line-height: 30px;
65+
}
66+
.vp-wc-preview-option {
67+
float: right;
68+
padding-right: 5px;
69+
}
70+
.vp-wc-preview-box {
71+
min-height: 352px;
72+
width: 100%;
73+
height: calc(100% - 30px);
74+
}
75+
.vp-wc-preview-box img {
76+
width: 100%;
77+
height: 100%;
78+
}
79+
.vp-tab-page label {
80+
margin-bottom: 0px;
81+
}
82+
.vp-wc-setting-footer {
83+
position: absolute;
84+
left: 20px;
85+
bottom: 15px;
86+
}

‎html/m_visualize/wordCloud.html‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<body>
2+
<div class="vp-wc-body" >
3+
<div class="vp-wc-left-box">
4+
<div class="vp-bold">
5+
<span class="vp-wc-preview-title vp-orange-text">Required options</span>
6+
</div>
7+
<div class="vp-wc-option-box">
8+
<div class="vp-tab-bar">
9+
<div class="vp-tab-item vp-focus" data-type="data">Data</div>
10+
<div class="vp-tab-item" data-type="wordcloud">WordCloud</div>
11+
<div class="vp-tab-item" data-type="plot">Plot</div>
12+
</div>
13+
<div class="vp-tab-page-box vp-grid-border-box vp-scrollbar">
14+
<div class="vp-tab-page vp-grid-box" data-type="data">
15+
<label for="data" class="vp-bold">Data</label>
16+
<div class="vp-grid-col-p50">
17+
<div>
18+
<input type="text" id="data" class="vp-input vp-state"/>
19+
<div id="vp_wcOpenFile" class="vp-file-browser-button"></div>
20+
</div>
21+
<label><input type="checkbox" id="useFile" class="vp-state"><span>Use file</span></label>
22+
</div>
23+
24+
<div class="vp-wc-file-option vp-grid-box">
25+
<label for="encoding" class="vp-bold">File encoding</label>
26+
<input type="text" id="encoding" class="vp-input vp-state" />
27+
</div>
28+
29+
<label for="wordCount" class="vp-bold">Number of words</label>
30+
<input type="number" id="wordCount" class="vp-input vp-state" min="0" value="200"/>
31+
32+
</div>
33+
<div class="vp-tab-page vp-grid-box" data-type="wordcloud" style="display: none;">
34+
<label for="stopWords" class="vp-bold">Stop words</label>
35+
<input type="text" id="stopWords" class="vp-input vp-state" placeholder="word1,word2, ..."/>
36+
37+
<label for="fontPath" class="vp-bold">Font path</label>
38+
<input type="text" id="fontPath" class="vp-input vp-state" />
39+
40+
<label for="userOption" class="vp-bold">User Option</label>
41+
<input type="text" id="userOption" class="vp-input vp-state wp100" placeholder="key=value, ..."/>
42+
</div>
43+
<div class="vp-tab-page vp-grid-box" data-type="plot" style="display: none;">
44+
<label for="figWidth" class="vp-bold">Figure size</label>
45+
<div>
46+
<input type="number" id="figWidth" class="vp-input vp-state" min="0" value="8" placeholder="Width"/>
47+
<input type="number" id="figHeight" class="vp-input vp-state" min="0" value="20" placeholder="Height"/>
48+
</div>
49+
</div>
50+
</div>
51+
</div>
52+
53+
</div>
54+
<div class="vp-wc-right-box">
55+
<div class="vp-bold">
56+
<span class="vp-wc-preview-title">Preview</span>
57+
</div>
58+
<div class="vp-wc-preview-box vp-grid-border-box">
59+
<span></span>
60+
<div id="vp_wcPreview" class="vp-center">
61+
62+
</div>
63+
</div>
64+
</div>
65+
</div>
66+
67+
</body>

‎img/apps/apps_wordcloud.svg‎

Lines changed: 5 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)