Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit3580a04

Browse files
author
minjk-bl
committed
Seaborn chart app prototype
1 parent5376294 commit3580a04

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

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp