Fix Visualization menus

minjk-bl · minjk-bl · commit 229b4070232f · 2022-05-16T15:57:25.000+09:00
diff --git a/html/m_visualize/seaborn.html b/html/m_visualize/seaborn.html
@@ -36,7 +36,8 @@
             </div>
         </div>
     </div> -->
-    <div class="vp-chart-body" style="margin-top:10px;">
+    <!-- <div class="vp-chart-body" style="margin-top:10px;"> -->
+    <div class="vp-chart-body" >
         <div class="vp-chart-left-box">
             <div class="vp-tab-bar figure" data-level="figure">
                 <div class="vp-tab-item vp-focus" data-type="1">Plot</div>
@@ -119,7 +120,10 @@
                                 <div class="vp-tab-page vp-grid-box" data-type="style" style="display: none;">
                                     <!-- STYLE: grid / marker / color -->
                                     <label for="color" class="vp-bold">Color</label>
-                                    <input type="color" id="color" class="vp-state"/>
+                                    <div>
+                                        <label><input type="checkbox" id="useColor" class="vp-state"/><span></span></label>
+                                        <input type="color" id="color" class="vp-state" disabled/>
+                                    </div>
                                     <label for="useGrid" class="vp-bold">Grid</label>
                                     <div>
                                         <select id="useGrid" class="vp-select vp-state">
diff --git a/js/m_visualize/ChartSetting.js b/js/m_visualize/ChartSetting.js
@@ -31,7 +31,7 @@ define([
             this.state = {
                 figureWidth: 12,
                 figureHeight: 8,
-                styleSheet: 'seaborn-darkgrid',
+                styleSheet: '',
                 fontName: '',
                 fontSize: 10,
                 ...this.state
diff --git a/js/m_visualize/Seaborn.js b/js/m_visualize/Seaborn.js
@@ -50,6 +50,7 @@ define([
                 y_label: '',
                 legendPos: '',
                 // style options
+                useColor: false,
                 color: '',
                 useGrid: '',
                 gridColor: '',
@@ -196,6 +197,11 @@ define([
                 }
             });
 
+            // use color or not
+            $(this.wrapSelector('#useColor')).on('change', function() {
+                $(that.wrapSelector('#color')).prop('disabled', $(this).prop('checked') == false);
+            });
+
             // preview refresh
             $(this.wrapSelector('#previewRefresh')).on('click', function() {
                 that.loadPreview();
@@ -517,7 +523,7 @@ define([
             let { 
                 chartType, data, userOption='',
                 title, x_label, y_label, legendPos,
-                color, useGrid, gridColor, markerStyle,
+                useColor, color, useGrid, gridColor, markerStyle,
                 x_limit_from, x_limit_to, y_limit_from, y_limit_to,
                 useSampling, sampleCount 
             } = this.state;
@@ -530,7 +536,7 @@ define([
             let chartCode = new com_String();
 
             let etcOptionCode = []
-            if (color != '') {
+            if (useColor == true && color != '') {
                 etcOptionCode.push(com_util.formatString("color='{0}'", color));
             }
             if (markerStyle != '') {
@@ -577,7 +583,7 @@ define([
             if (useGrid != '') {
                 gridCodeList.push(useGrid);
             }
-            if (gridColor != '') {
+            if (useGrid == 'True' && gridColor != '') {
                 gridCodeList.push(com_util.formatString("color='{0}'", gridColor));
             }
             if (gridCodeList.length > 0) {
