Skip to content

Commit fb32f5a

Browse files
author
minjk-bl
committed
Seaborn - Set preview image depend on its size, Add color & grid color
1 parent f9de015 commit fb32f5a

4 files changed

Lines changed: 48 additions & 30 deletions

File tree

‎css/m_visualize/seaborn.css‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,18 +35,25 @@
3535
}
3636
.vp-tab-page {
3737
width: 100%;
38+
height: 100%;
39+
}
40+
.vp-tab-page-box.figure {
41+
height: calc(100% - 30px);
42+
align-content: baseline;
43+
grid-template-rows: 1fr;
3844
}
3945
.vp-tab-page-box.plot {
40-
/* height: calc(100% - 30px); */
46+
height: calc(100% - 30px);
4147
min-height: 352px;
4248
align-content: baseline;
4349
}
4450
.vp-chart-plot-box {
45-
51+
height: 100%;
4652
}
4753
.vp-chart-body {
4854
display: grid;
4955
grid-template-columns: calc(50% - 8px) calc(50% - 8px);
56+
grid-template-rows: 1fr;
5057
grid-row-gap: 5px;
5158
grid-column-gap: 15px;
5259
align-items: baseline;
@@ -73,9 +80,12 @@
7380
.vp-chart-preview-box {
7481
min-height: 352px;
7582
width: 100%;
76-
height: calc(100% - 70px);
83+
height: calc(100% - 30px);
84+
}
85+
.vp-chart-preview-box img {
86+
width: 100%;
87+
height: 100%;
7788
}
78-
7989
.vp-tab-page label {
8090
margin-bottom: 0px;
8191
}

‎html/m_visualize/seaborn.html‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -118,12 +118,17 @@
118118
</div>
119119
<div class="vp-tab-page vp-grid-box" data-type="style" style="display: none;">
120120
<!-- STYLE: grid / marker / color -->
121+
<label for="color" class="vp-bold">Color</label>
122+
<input type="color" id="color" class="vp-state"/>
121123
<label for="useGrid" class="vp-bold">Grid</label>
122-
<select id="useGrid" class="vp-select vp-state">
123-
<option value="">Select option...</option>
124-
<option value="True">True</option>
125-
<option value="False">False</option>
126-
</select>
124+
<div>
125+
<select id="useGrid" class="vp-select vp-state">
126+
<option value="">Select option...</option>
127+
<option value="True">True</option>
128+
<option value="False">False</option>
129+
</select>
130+
<input type="color" id="gridColor" class="vp-state"/>
131+
</div>
127132
<label for="useMarker" class="vp-bold">Marker</label>
128133
<div class="vp-grid-col-p50">
129134
<select id="markerStyle" class="vp-select vp-state">
@@ -170,10 +175,10 @@
170175

171176
</div>
172177
</div>
173-
<div class="vp-chart-preview-size-box vp-grid-col-95 mt5">
178+
<!-- <div class="vp-chart-preview-size-box vp-grid-col-95 mt5">
174179
<label>Preview Size</label>
175180
<input type="range" id="previewSize" max="5" min="-5" value="0"/>
176-
</div>
181+
</div> -->
177182
</div>
178183
</div>
179184

‎js/com/component/PopupComponent.js‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -633,13 +633,11 @@ define([
633633
switch(tagName) {
634634
case 'INPUT':
635635
let inputType = $(tag).prop('type');
636-
if (inputType == 'text' || inputType == 'number' || inputType == 'hidden') {
637-
newValue = $(tag).val();
638-
break;
639-
}
640636
if (inputType == 'checkbox') {
641637
newValue = $(tag).prop('checked');
642-
break;
638+
} else {
639+
// inputType == 'text' || inputType == 'number' || inputType == 'hidden' || inputType == 'color' || inputType == 'range'
640+
newValue = $(tag).val();
643641
}
644642
break;
645643
case 'TEXTAREA':

‎js/m_visualize/Seaborn.js‎

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,9 @@ define([
5050
y_label: '',
5151
legendPos: '',
5252
// style options
53+
color: '',
5354
useGrid: '',
55+
gridColor: '',
5456
markerStyle: '',
5557
// setting options
5658
x_limit_from: '',
@@ -207,12 +209,6 @@ define([
207209
}
208210
evt.stopPropagation();
209211
});
210-
211-
// set preview size
212-
$(this.wrapSelector('#previewSize')).on('change', function() {
213-
that.loadPreview();
214-
});
215-
216212
}
217213

218214
templateForBody() {
@@ -522,7 +518,7 @@ define([
522518
let {
523519
chartType, data, userOption='',
524520
title, x_label, y_label, legendPos,
525-
useGrid, markerStyle,
521+
color, useGrid, gridColor, markerStyle,
526522
x_limit_from, x_limit_to, y_limit_from, y_limit_to,
527523
useSampling, sampleCount
528524
} = this.state;
@@ -535,6 +531,9 @@ define([
535531
let chartCode = new com_String();
536532

537533
let etcOptionCode = []
534+
if (color != '') {
535+
etcOptionCode.push(com_util.formatString("color='{0}'", color));
536+
}
538537
if (markerStyle != '') {
539538
// TODO: marker to seaborn argument (ex. marker='+' / markers={'Lunch':'s', 'Dinner':'X'})
540539
etcOptionCode.push(com_util.formatString("marker='{0}'", markerStyle));
@@ -573,10 +572,17 @@ define([
573572
if (legendPos != '') {
574573
chartCode.appendFormatLine("plt.legend(loc='{0}')", legendPos);
575574
}
575+
// Style - Grid
576+
// plt.grid(True, axis='x', color='red', alpha=0.5, linestyle='--')
577+
let gridCodeList = [];
576578
if (useGrid != '') {
577-
chartCode.appendFormatLine("plt.grid({0})", useGrid);
578-
// TODO: grid types
579-
// plt.grid(True, axis='x', color='red', alpha=0.5, linestyle='--')
579+
gridCodeList.push(useGrid);
580+
}
581+
if (gridColor != '') {
582+
gridCodeList.push(com_util.formatString("color='{0}'", gridColor));
583+
}
584+
if (gridCodeList.length > 0) {
585+
chartCode.appendFormatLine("plt.grid({0})", gridCodeList.join(', '));
580586
}
581587
chartCode.append('plt.show()');
582588

@@ -591,10 +597,9 @@ define([
591597
code.appendFormatLine("{0}warnings.simplefilter('ignore')", indent);
592598

593599
// set figure size for preview chart
594-
let defaultWidth = 5;
595-
let defaultHeight = 4;
596-
let previewSize = parseInt($(this.wrapSelector('#previewSize')).val());
597-
code.appendFormatLine('{0}plt.figure(figsize=({1}, {2}))', indent, defaultWidth + previewSize, defaultHeight + previewSize);
600+
let defaultWidth = 8;
601+
let defaultHeight = 6;
602+
code.appendFormatLine('{0}plt.figure(figsize=({1}, {2}))', indent, defaultWidth, defaultHeight);
598603
if (useSampling) {
599604
// data sampling code for preview
600605
convertedData = data + '.sample(n=' + sampleCount + ', random_state=0)';

0 commit comments

Comments
 (0)