Skip to content

Commit 7f771e0

Browse files
author
minjk-bl
committed
Add color option on Plotly app
1 parent c0e4486 commit 7f771e0

File tree

2 files changed

+59
-19
lines changed

2 files changed

+59
-19
lines changed

‎data/m_visualize/plotlyLibrary.js

Lines changed: 34 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -25,68 +25,74 @@ define([
2525
//========================================================================
2626
'scatter': {
2727
name: 'Scatter Plot',
28-
code: '${allocateTo} = px.scatter(${data}${x}${y}${etc})',
28+
code: '${allocateTo} = px.scatter(${data}${x}${y}${color}${etc})',
2929
description: 'Draw a scatter plot with possibility of several semantic groupings.',
3030
options: [
3131
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'] },
3232
{ name: 'x', component: ['col_select'], usePair: true },
3333
{ name: 'y', component: ['col_select'], usePair: true },
34+
{ name: 'color', component: ['col_select'], usePair: true },
3435
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
3536
]
3637
},
3738
'line': {
3839
name: 'Line Plot',
39-
code: '${allocateTo} = px.line(${data}${x}${y}${etc})',
40+
code: '${allocateTo} = px.line(${data}${x}${y}${color}${etc})',
4041
description: 'Draw a line plot with possibility of several semantic groupings.',
4142
options: [
4243
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'] },
4344
{ name: 'x', component: ['col_select'], usePair: true },
4445
{ name: 'y', component: ['col_select'], usePair: true },
46+
{ name: 'color', component: ['col_select'], usePair: true },
4547
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
4648
]
4749
},
4850
'area': {
4951
name: 'Line Plot',
50-
code: '${allocateTo} = px.area(${data}${x}${y}${etc})',
52+
code: '${allocateTo} = px.area(${data}${x}${y}${color}${etc})',
5153
description: 'Draw a area plot.',
5254
options: [
5355
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'] },
5456
{ name: 'x', component: ['col_select'], usePair: true },
5557
{ name: 'y', component: ['col_select'], usePair: true },
58+
{ name: 'color', component: ['col_select'], usePair: true },
5659
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
5760
]
5861
},
5962
'bar': {
6063
name: 'Bar Plot',
61-
code: '${allocateTo} = px.bar(${data}${x}${y}${etc})',
64+
code: '${allocateTo} = px.bar(${data}${x}${y}${color}${etc})',
6265
description: 'Draw a bar plot.',
6366
options: [
6467
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'] },
6568
{ name: 'x', component: ['col_select'], usePair: true },
6669
{ name: 'y', component: ['col_select'], usePair: true },
70+
{ name: 'color', component: ['col_select'], usePair: true },
6771
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
6872
]
6973
},
7074
'funnel': {
7175
name: 'Funnel Plot',
72-
code: '${allocateTo} = px.funnel(${data}${x}${y}${etc})',
76+
code: '${allocateTo} = px.funnel(${data}${x}${y}${color}${etc})',
7377
description: 'Draw a funnel plot.',
7478
options: [
7579
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'] },
7680
{ name: 'x', component: ['col_select'], usePair: true },
7781
{ name: 'y', component: ['col_select'], usePair: true },
82+
{ name: 'color', component: ['col_select'], usePair: true },
7883
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
7984
]
8085
},
8186
'timeline': {
8287
name: 'Timeline Plot',
83-
code: '${allocateTo} = px.timeline(${data}${x_start}${x_end}${y}${etc})',
88+
code: '${allocateTo} = px.timeline(${data}${x_start}${x_end}${y}${color}${etc})',
8489
description: 'Draw a timeline plot.',
8590
options: [
8691
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'] },
8792
{ name: 'x_start', label: 'X start', component: ['col_select'], usePair: true },
8893
{ name: 'x_end', label: 'X end', component: ['col_select'], usePair: true },
8994
{ name: 'y', component: ['col_select'], usePair: true },
95+
{ name: 'color', component: ['col_select'], usePair: true },
9096
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
9197
]
9298
},
@@ -95,62 +101,67 @@ define([
95101
//========================================================================
96102
'pie': {
97103
name: 'Pie Plot',
98-
code: '${allocateTo} = px.pie(${data}${values}${names}${etc})',
104+
code: '${allocateTo} = px.pie(${data}${values}${names}${color}${etc})',
99105
description: 'Draw a pie plot.',
100106
options: [
101107
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'] },
102108
{ name: 'values', label: 'Values', component: ['col_select'], usePair: true },
103109
{ name: 'names', label: 'Names', component: ['col_select'], usePair: true },
110+
{ name: 'color', component: ['col_select'], usePair: true },
104111
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
105112
]
106113
},
107114
'sunburst': {
108115
name: 'Sunburst',
109-
code: '${allocateTo} = px.sunburst(${data}${values}${names}${parents}${path}${etc})',
116+
code: '${allocateTo} = px.sunburst(${data}${values}${names}${color}${parents}${path}${etc})',
110117
description: 'Draw a sunburst plot.',
111118
options: [
112119
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'] },
113120
{ name: 'values', label: 'Values', component: ['col_select'], usePair: true },
114121
{ name: 'names', label: 'Names', component: ['col_select'], usePair: true },
122+
{ name: 'color', component: ['col_select'], usePair: true },
115123
{ name: 'parents', label: 'Parents', component: ['col_select'], usePair: true },
116124
{ name: 'path', label: 'Path', component: ['data_select'], var_type: ['ndarray', 'list'], usePair: true },
117125
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
118126
]
119127
},
120128
'treemap': {
121129
name: 'Treemap',
122-
code: '${allocateTo} = px.treemap(${data}${values}${names}${parents}${path}${etc})',
130+
code: '${allocateTo} = px.treemap(${data}${values}${names}${color}${parents}${path}${etc})',
123131
description: 'Draw a treemap plot.',
124132
options: [
125133
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'] },
126134
{ name: 'values', label: 'Values', component: ['col_select'], usePair: true },
127135
{ name: 'names', label: 'Names', component: ['col_select'], usePair: true },
136+
{ name: 'color', component: ['col_select'], usePair: true },
128137
{ name: 'parents', label: 'Parents', component: ['col_select'], usePair: true },
129138
{ name: 'path', label: 'Path', component: ['data_select'], var_type: ['ndarray', 'list'], usePair: true },
130139
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
131140
]
132141
},
133142
'icicle': {
134143
name: 'Icicle',
135-
code: '${allocateTo} = px.icicle(${data}${values}${names}${parents}${path}${etc})',
144+
code: '${allocateTo} = px.icicle(${data}${values}${names}${color}${parents}${path}${etc})',
136145
description: 'Draw a icicle plot.',
137146
options: [
138147
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'] },
139148
{ name: 'values', label: 'Values', component: ['col_select'], usePair: true },
140149
{ name: 'names', label: 'Names', component: ['col_select'], usePair: true },
150+
{ name: 'color', component: ['col_select'], usePair: true },
141151
{ name: 'parents', label: 'Parents', component: ['col_select'], usePair: true },
142152
{ name: 'path', label: 'Path', component: ['data_select'], var_type: ['ndarray', 'list'], usePair: true },
143153
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
144154
]
145155
},
146156
'funnel_area': {
147157
name: 'Funnel area',
148-
code: '${allocateTo} = px.funnel_area(${data}${values}${names}${etc})',
158+
code: '${allocateTo} = px.funnel_area(${data}${values}${names}${color}${etc})',
149159
description: 'Draw a funnel area.',
150160
options: [
151161
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'] },
152162
{ name: 'values', label: 'Values', component: ['col_select'], usePair: true },
153163
{ name: 'names', label: 'Names', component: ['col_select'], usePair: true },
164+
{ name: 'color', component: ['col_select'], usePair: true },
154165
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
155166
]
156167
},
@@ -159,56 +170,61 @@ define([
159170
//========================================================================
160171
'histogram': {
161172
name: 'Histogram',
162-
code: '${allocateTo} = px.histogram(${data}${x}${y}${etc})',
173+
code: '${allocateTo} = px.histogram(${data}${x}${y}${color}${etc})',
163174
description: 'Draw a histogram plot.',
164175
options: [
165176
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'] },
166177
{ name: 'x', component: ['col_select'], usePair: true },
167178
{ name: 'y', component: ['col_select'], usePair: true },
179+
{ name: 'color', component: ['col_select'], usePair: true },
168180
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
169181
]
170182
},
171183
'box': {
172184
name: 'Box plot',
173-
code: '${allocateTo} = px.box(${data}${x}${y}${etc})',
185+
code: '${allocateTo} = px.box(${data}${x}${y}${color}${etc})',
174186
description: 'Draw a box plot.',
175187
options: [
176188
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'] },
177189
{ name: 'x', component: ['col_select'], usePair: true },
178190
{ name: 'y', component: ['col_select'], usePair: true },
191+
{ name: 'color', component: ['col_select'], usePair: true },
179192
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
180193
]
181194
},
182195
'violin': {
183196
name: 'Violin plot',
184-
code: '${allocateTo} = px.violin(${data}${x}${y}${etc})',
197+
code: '${allocateTo} = px.violin(${data}${x}${y}${color}${etc})',
185198
description: 'Draw a violin plot.',
186199
options: [
187200
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'] },
188201
{ name: 'x', component: ['col_select'], usePair: true },
189202
{ name: 'y', component: ['col_select'], usePair: true },
203+
{ name: 'color', component: ['col_select'], usePair: true },
190204
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
191205
]
192206
},
193207
'strip': {
194208
name: 'Strip plot',
195-
code: '${allocateTo} = px.strip(${data}${x}${y}${etc})',
209+
code: '${allocateTo} = px.strip(${data}${x}${y}${color}${etc})',
196210
description: 'Draw a strip plot.',
197211
options: [
198212
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'] },
199213
{ name: 'x', component: ['col_select'], usePair: true },
200214
{ name: 'y', component: ['col_select'], usePair: true },
215+
{ name: 'color', component: ['col_select'], usePair: true },
201216
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
202217
]
203218
},
204219
'ecdf': {
205220
name: 'Ecdf plot',
206-
code: '${allocateTo} = px.ecdf(${data}${x}${y}${etc})',
221+
code: '${allocateTo} = px.ecdf(${data}${x}${y}${color}${etc})',
207222
description: 'Draw a ecdf plot.',
208223
options: [
209224
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'] },
210225
{ name: 'x', component: ['col_select'], usePair: true },
211226
{ name: 'y', component: ['col_select'], usePair: true },
227+
{ name: 'color', component: ['col_select'], usePair: true },
212228
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
213229
]
214230
},
@@ -229,13 +245,14 @@ define([
229245
},
230246
'density_contour': {
231247
name: 'Density contour',
232-
code: '${allocateTo} = px.density_contour(${data}${x}${y}${z}${etc})',
248+
code: '${allocateTo} = px.density_contour(${data}${x}${y}${z}${color}${etc})',
233249
description: 'Draw a density contour plot.',
234250
options: [
235251
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'] },
236252
{ name: 'x', component: ['col_select'], usePair: true },
237253
{ name: 'y', component: ['col_select'], usePair: true },
238254
{ name: 'z', component: ['col_select'], usePair: true },
255+
{ name: 'color', component: ['col_select'], usePair: true },
239256
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
240257
]
241258
},

0 commit comments

Comments
 (0)