Skip to content

Commit f011573

Browse files
author
minjk-bl
committed
Plotly temporary commit
1 parent 5e07c79 commit f011573

File tree

5 files changed

+591
-0
lines changed

5 files changed

+591
-0
lines changed

‎css/component/popupComponent.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,7 @@
114114
cursor: pointer;
115115
}
116116
.vp-popup-body {
117+
position: relative;
117118
width: 100%;
118119
height: calc(100% - 80px);
119120
padding: 15px;

‎css/m_visualize/plotly.css

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

‎data/m_visualize/plotlyLibrary.js

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
define([
2+
], function () {
3+
/**
4+
* name
5+
* library
6+
* description
7+
* code
8+
* options: [
9+
* {
10+
* name
11+
* label
12+
* [optional]
13+
* component :
14+
* - 1darr / 2darr / ndarr / scalar / param / dtype / tabblock
15+
* default
16+
* required
17+
* usePair
18+
* code
19+
* }
20+
* ]
21+
*/
22+
var PLOTLY_LIBRARIES = {
23+
'scatter': {
24+
name: 'Scatter Plot',
25+
code: '${allocateTo} = px.scatter(${data}${x}${y}${etc})',
26+
description: 'Draw a scatter plot with possibility of several semantic groupings.',
27+
options: [
28+
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'] },
29+
{ name: 'x', component: ['col_select'], usePair: true },
30+
{ name: 'y', component: ['col_select'], usePair: true },
31+
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
32+
]
33+
},
34+
'line': {
35+
name: 'Line Plot',
36+
code: '${allocateTo} = px.line(${data}${x}${y}${etc})',
37+
description: 'Draw a line plot with possibility of several semantic groupings.',
38+
options: [
39+
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'] },
40+
{ name: 'x', component: ['col_select'], usePair: true },
41+
{ name: 'y', component: ['col_select'], usePair: true },
42+
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
43+
]
44+
},
45+
'area': {
46+
name: 'Line Plot',
47+
code: '${allocateTo} = px.area(${data}${x}${y}${etc})',
48+
description: 'Draw a area plot.',
49+
options: [
50+
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'] },
51+
{ name: 'x', component: ['col_select'], usePair: true },
52+
{ name: 'y', component: ['col_select'], usePair: true },
53+
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
54+
]
55+
},
56+
'bar': {
57+
name: 'Bar Plot',
58+
code: '${allocateTo} = px.bar(${data}${x}${y}${etc})',
59+
description: 'Draw a bar plot.',
60+
options: [
61+
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'] },
62+
{ name: 'x', component: ['col_select'], usePair: true },
63+
{ name: 'y', component: ['col_select'], usePair: true },
64+
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
65+
]
66+
},
67+
'funnel': {
68+
name: 'Funnel Plot',
69+
code: '${allocateTo} = px.funnel(${data}${x}${y}${etc})',
70+
description: 'Draw a funnel plot.',
71+
options: [
72+
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'] },
73+
{ name: 'x', component: ['col_select'], usePair: true },
74+
{ name: 'y', component: ['col_select'], usePair: true },
75+
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
76+
]
77+
},
78+
'timeline': {
79+
name: 'Timeline Plot',
80+
code: '${allocateTo} = px.timeline(${data}${x_start}${x_end}${y}${etc})',
81+
description: 'Draw a timeline plot.',
82+
options: [
83+
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'] },
84+
{ name: 'x_start', component: ['col_select'], usePair: true },
85+
{ name: 'x_end', component: ['col_select'], usePair: true },
86+
{ name: 'y', component: ['col_select'], usePair: true },
87+
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
88+
]
89+
},
90+
}
91+
92+
return PLOTLY_LIBRARIES;
93+
});

‎html/m_visualize/plotly.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-pt-body" >
3+
<div class="vp-pt-left-box">
4+
<div class="vp-bold">
5+
<span class="vp-pt-preview-title vp-orange-text">Required options</span>
6+
</div>
7+
<div class="vp-pt-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="style">Style</div>
11+
<div class="vp-tab-item" data-type="setting">Setting</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="chartType" class="vp-bold vp-orange-text">Chart Type</label>
16+
<select id="chartType" class="vp-select vp-state wp100">
17+
18+
</select>
19+
20+
<label class="vp-bold">Data</label>
21+
<div class="vp-grid-col-p50">
22+
<input type="text" id="data" class="vp-input vp-state"/>
23+
<label><input type="checkbox" id="setXY" class="vp-state"><span>Set X and Y individually</span></label>
24+
</div>
25+
<div class="vp-grid-col-p50">
26+
<div class="vp-grid-box">
27+
<label for="x" class="vp-bold">X-axis Value</label>
28+
<select id="x" class="vp-select vp-state">
29+
30+
</select>
31+
</div>
32+
<div class="vp-grid-box">
33+
<label for="y" class="vp-bold">Y-axis Value</label>
34+
<select id="y" class="vp-select vp-state">
35+
36+
</select>
37+
</div>
38+
</div>
39+
40+
41+
42+
<label for="userOption" class="vp-bold">User Option</label>
43+
<input type="text" id="userOption" class="vp-input vp-state wp100" placeholder="key=value, ..."/>
44+
</div>
45+
<div class="vp-tab-page vp-grid-box" data-type="style" style="display: none;">
46+
47+
48+
</div>
49+
<div class="vp-tab-page vp-grid-box" data-type="setting" style="display: none;">
50+
51+
52+
</div>
53+
</div>
54+
</div>
55+
56+
</div>
57+
<div class="vp-pt-right-box">
58+
<div class="vp-bold">
59+
<span class="vp-pt-preview-title">Preview</span>
60+
</div>
61+
<div class="vp-pt-preview-box vp-grid-border-box">
62+
<div id="vp_ptPreview" class="vp-pt-preview-content vp-center"></div>
63+
</div>
64+
</div>
65+
</div>
66+
67+
</body>

0 commit comments

Comments
 (0)