Skip to content

Commit 3580a04

Browse files
author
minjk-bl
committed
Seaborn chart app prototype
1 parent 5376294 commit 3580a04

File tree

7 files changed

+693
-21
lines changed

7 files changed

+693
-21
lines changed

‎css/m_apps/chartTest.css

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
.vp-chart-setting {
2+
float: right;
3+
color: var(--gray-color);
4+
padding-right: 5px;
5+
cursor: pointer;
6+
}
7+
.vp-tab-bar {
8+
width: 100%;
9+
overflow-y: hidden;
10+
}
11+
.vp-tab-item {
12+
display: inline-block;
13+
position: relative;
14+
width: 85px;
15+
height: 30px;
16+
line-height: 30px;
17+
background: var(--light-gray-color);
18+
cursor: pointer;
19+
border: 0.24px solid #E4E4E4;
20+
box-sizing: border-box;
21+
border-radius: 2px 2px 0px 0px;
22+
font-weight: bold;
23+
text-align: center;
24+
}
25+
.vp-tab-item.vp-focus {
26+
color: var(--font-hightlight);
27+
background: white;
28+
border-bottom: 3px solid #FFCF73;
29+
}
30+
.vp-tab-page {
31+
width: 100%;
32+
height: 180px;
33+
}
34+
35+
.vp-chart-left-box,
36+
.vp-chart-right-box {
37+
padding: 3px;
38+
height: 250px;
39+
}
40+
41+
.vp-chart-preview-box {
42+
min-height: 150px;
43+
}

‎css/root.css

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -129,13 +129,17 @@ body {
129129
}
130130

131131
/* Input & Select Design - width m&s */
132+
.vp-input.l,
133+
.vp-select.l {
134+
width: 232px !important;
135+
}
132136
.vp-input.m,
133137
.vp-select.m {
134-
width: 116px;
138+
width: 116px !important;
135139
}
136140
.vp-input.s,
137141
.vp-select.s {
138-
width: 55px;
142+
width: 55px !important;
139143
}
140144

141145
/* Buttons */

‎data/libraries.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3088,6 +3088,20 @@
30883088
"color": 4,
30893089
"icon": "apps/apps_profiling.svg"
30903090
}
3091+
},
3092+
{
3093+
"id" : "apps_chartTest",
3094+
"type" : "function",
3095+
"level": 1,
3096+
"name" : "Chart Test",
3097+
"tag" : "CHART TEST,APPS",
3098+
"path" : "visualpython - apps - charttest",
3099+
"desc" : "Chart Test",
3100+
"file" : "m_apps/ChartTest",
3101+
"apps" : {
3102+
"color": 4,
3103+
"icon": "apps/apps_chart.svg"
3104+
}
30913105
}
30923106
]
30933107
},

‎data/m_apps/chartLibrary.js

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
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 CHART_LIBRARIES = {
23+
/** Relational plots */
24+
'scatterplot': {
25+
name: 'Scatter Plot',
26+
code: '${allocateTo} = sns.scatterplot(${data}${x}${y}${hue}${etc})',
27+
description: 'Draw a scatter plot with possibility of several semantic groupings.',
28+
options: [
29+
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'], usePair: true },
30+
{ name: 'x', component: ['col_select'], usePair: true },
31+
{ name: 'y', component: ['col_select'], usePair: true },
32+
{ name: 'hue', component: ['col_select'], usePair: true },
33+
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
34+
]
35+
},
36+
'lineplot': {
37+
name: 'Line Plot',
38+
code: '${allocateTo} = sns.lineplot(${data}${x}${y}${hue}${etc})',
39+
description: 'Draw a line plot with possibility of several semantic groupings.',
40+
options: [
41+
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'], usePair: true },
42+
{ name: 'x', component: ['col_select'], usePair: true },
43+
{ name: 'y', component: ['col_select'], usePair: true },
44+
{ name: 'hue', component: ['col_select'], usePair: true },
45+
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
46+
]
47+
},
48+
/** Distribution plots */
49+
'histplot': {
50+
name: 'Histogram Plot',
51+
code: '${allocateTo} = sns.histplot(${data}${x}${y}${hue}${etc})',
52+
description: 'Plot univariate or bivariate histograms to show distributions of datasets.',
53+
options: [
54+
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'], usePair: true },
55+
{ name: 'x', component: ['col_select'], usePair: true },
56+
{ name: 'y', component: ['col_select'], usePair: true },
57+
{ name: 'hue', component: ['col_select'], usePair: true },
58+
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
59+
]
60+
},
61+
'kdeplot': {
62+
name: 'Kernel Density Plot',
63+
code: '${allocateTo} = sns.kdeplot(${data}${x}${y}${hue}${etc})',
64+
description: 'Plot univariate or bivariate distributions using kernel density estimation.',
65+
options: [
66+
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'], usePair: true },
67+
{ name: 'x', component: ['col_select'], usePair: true },
68+
{ name: 'y', component: ['col_select'], usePair: true },
69+
{ name: 'hue', component: ['col_select'], usePair: true },
70+
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
71+
]
72+
},
73+
'ecdfplot': {
74+
name: 'Empirical Cumulative Distribution Plot',
75+
code: '${allocateTo} = sns.ecdfplot(${data}${x}${y}${hue}${etc})',
76+
description: 'Plot empirical cumulative distribution functions.',
77+
options: [
78+
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'], usePair: true },
79+
{ name: 'x', component: ['col_select'], usePair: true },
80+
{ name: 'y', component: ['col_select'], usePair: true },
81+
{ name: 'hue', component: ['col_select'], usePair: true },
82+
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
83+
]
84+
},
85+
'rugplot': {
86+
name: 'Rug Plot',
87+
code: '${allocateTo} = sns.rugplot(${data}${x}${y}${hue}${etc})',
88+
description: 'Plot marginal distributions by drawing ticks along the x and y axes.',
89+
options: [
90+
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'], usePair: true },
91+
{ name: 'x', component: ['col_select'], usePair: true },
92+
{ name: 'y', component: ['col_select'], usePair: true },
93+
{ name: 'hue', component: ['col_select'], usePair: true },
94+
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
95+
]
96+
},
97+
/** Categorical plots */
98+
'stripplot': {
99+
name: 'Strip Plot',
100+
code: '${allocateTo} = sns.stripplot(${data}${x}${y}${hue}${etc})',
101+
description: 'Draw a scatterplot where one variable is categorical.',
102+
options: [
103+
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'], usePair: true },
104+
{ name: 'x', component: ['col_select'], usePair: true },
105+
{ name: 'y', component: ['col_select'], usePair: true },
106+
{ name: 'hue', component: ['col_select'], usePair: true },
107+
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
108+
]
109+
},
110+
'swarmplot': {
111+
name: 'Swarm Plot',
112+
code: '${allocateTo} = sns.swarmplot(${data}${x}${y}${hue}${etc})',
113+
description: 'Draw a categorical scatterplot with non-overlapping points.',
114+
options: [
115+
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'], usePair: true },
116+
{ name: 'x', component: ['col_select'], usePair: true },
117+
{ name: 'y', component: ['col_select'], usePair: true },
118+
{ name: 'hue', component: ['col_select'], usePair: true },
119+
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
120+
]
121+
},
122+
'boxplot': {
123+
name: 'Box Plot',
124+
code: '${allocateTo} = sns.boxplot(${data}${x}${y}${hue}${etc})',
125+
description: 'Draw a box plot to show distributions with respect to categories.',
126+
options: [
127+
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'], usePair: true },
128+
{ name: 'x', component: ['col_select'], usePair: true },
129+
{ name: 'y', component: ['col_select'], usePair: true },
130+
{ name: 'hue', component: ['col_select'], usePair: true },
131+
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
132+
]
133+
},
134+
'violinplot': {
135+
name: 'Violin Plot',
136+
code: '${allocateTo} = sns.violinplot(${data}${x}${y}${hue}${etc})',
137+
description: 'Draw a combination of boxplot and kernel density estimate.',
138+
options: [
139+
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'], usePair: true },
140+
{ name: 'x', component: ['col_select'], usePair: true },
141+
{ name: 'y', component: ['col_select'], usePair: true },
142+
{ name: 'hue', component: ['col_select'], usePair: true },
143+
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
144+
]
145+
},
146+
'pointplot': {
147+
name: 'Point Plot',
148+
code: '${allocateTo} = sns.pointplot(${data}${x}${y}${hue}${etc})',
149+
description: 'Show point estimates and confidence intervals using scatter plot glyphs.',
150+
options: [
151+
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'], usePair: true },
152+
{ name: 'x', component: ['col_select'], usePair: true },
153+
{ name: 'y', component: ['col_select'], usePair: true },
154+
{ name: 'hue', component: ['col_select'], usePair: true },
155+
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
156+
]
157+
},
158+
'barplot': {
159+
name: 'Bar Plot',
160+
code: '${allocateTo} = sns.barplot(${data}${x}${y}${hue}${etc})',
161+
description: 'Show point estimates and confidence intervals as rectangular bars.',
162+
options: [
163+
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'], usePair: true },
164+
{ name: 'x', component: ['col_select'], usePair: true },
165+
{ name: 'y', component: ['col_select'], usePair: true },
166+
{ name: 'hue', component: ['col_select'], usePair: true },
167+
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
168+
]
169+
},
170+
}
171+
172+
return CHART_LIBRARIES;
173+
});

‎html/m_apps/chartTest.html

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<body>
2+
<div class="vp-grid-col-p50" style="height:270px;">
3+
<!-- Chart & Data Selection Box-->
4+
<div class="vp-chart-left-box">
5+
<div class="vp-bold">
6+
Chart Type
7+
<span id="chartSetting" class="vp-chart-setting vp-no-selection">
8+
<i class="fa fa-gear"></i> Setting
9+
</span>
10+
</div>
11+
<div class="vp-grid-border-box vp-grid-col-95">
12+
<label for="chartType" class="vp-orange-text">Type of Chart</label>
13+
<select id="chartType" class="vp-select vp-state">
14+
15+
</select>
16+
</div>
17+
<div class="vp-bold">Data Selection</div>
18+
<div class="vp-grid-border-box vp-grid-col-95">
19+
<label for="data" class="vp-orange-text">Variable</label>
20+
<input type="text" id="data" class="vp-input vp-state" />
21+
<label for="x" class="vp-orange-text">X Value</label>
22+
<select id="x" class="vp-select">
23+
24+
</select>
25+
<label for="y" class="vp-orange-text">Y Value</label>
26+
<select id="y" class="vp-select">
27+
28+
</select>
29+
</div>
30+
</div>
31+
<!-- Tab Option Box -->
32+
<div class="vp-chart-right-box">
33+
<div class="vp-tab-bar">
34+
<div class="vp-tab-item vp-focus" data-type="info">Info</div>
35+
<div class="vp-tab-item" data-type="element">Element</div>
36+
<div class="vp-tab-item" data-type="figure">Figure</div>
37+
</div>
38+
<div class="vp-tab-page-box vp-grid-border-box vp-scrollbar">
39+
<div class="vp-tab-page vp-grid-col-95" data-type="info">
40+
<label for="title">Title</label>
41+
<input type="text" id="title" class="vp-input vp-state" placeholder="Title for the chart" />
42+
<label for="x_label">X Label</label>
43+
<input type="text" id="x_label" class="vp-input vp-state" placeholder="X Label" />
44+
<label for="y_label">Y Label</label>
45+
<input type="text" id="y_label" class="vp-input vp-state" placeholder="Y Label" />
46+
<label for="x_limit_from">X Limit</label>
47+
<div class="vp-grid-col-p50">
48+
<input type="text" id="x_limit_from" class="vp-input m vp-state" placeholder="From" />
49+
<input type="text" id="x_limit_to" class="vp-input m vp-state placeholder="To" />
50+
</div>
51+
<label for="y_limit_from">Y Limit</label>
52+
<div class="vp-grid-col-p50">
53+
<input type="text" id="y_limit_from" class="vp-input m vp-state" placeholder="From" />
54+
<input type="text" id="y_limit_to" class="vp-input m vp-state" placeholder="To" />
55+
</div>
56+
<label for="useLegend">Legend</label>
57+
<div class="vp-grid-col-p50">
58+
<select id="useLegend" class="vp-select m vp-state">
59+
<option value="False">False</option>
60+
<option value="True">True</option>
61+
</select>
62+
<select id="legendPos" class="vp-select m vp-state">
63+
<!-- Legend Position FIXME: -->
64+
65+
</select>
66+
</div>
67+
</div>
68+
<div class="vp-tab-page vp-grid-col-95" data-type="element" style="display: none;">
69+
ELEMENT
70+
</div>
71+
<div class="vp-tab-page vp-grid-col-95" data-type="figure" style="display: none;">
72+
FIGURE
73+
</div>
74+
</div>
75+
</div>
76+
</div>
77+
<div>
78+
<div class="vp-bold">Chart Preview <button id="previewTest" class="vp-button activated">Preview Test</button></div>
79+
<div class="vp-chart-preview-box vp-grid-border-box">
80+
<span></span>
81+
<div id="chartPreview" class="vp-center">
82+
83+
</div>
84+
</div>
85+
</div>
86+
</body>

0 commit comments

Comments
 (0)