Apps > Chart - fix x, y limit option

minjk-bl · minjk-bl · commit fc6d70b6fc77 · 2022-01-21T12:24:31.000+09:00
diff --git a/css/root.css b/css/root.css
@@ -253,6 +253,10 @@ body {
 .vp-cursor {
     cursor: pointer;
 }
+/* hidden */
+.vp-hidden {
+    display: none;
+}
 /* No-selection */
 .vp-no-selection {
     -webkit-touch-callout: none; /* iOS Safari */
diff --git a/html/m_apps/chart.html b/html/m_apps/chart.html
@@ -263,11 +263,19 @@
                         </tr>
                         <tr>
                             <th>X Limit</th>
-                            <td><input type="text" class="vp-input vp-state" id="xlimit" placeholder="(min, max)" /></td>
+                            <td>
+                                <input type="number" class="vp-input vp-state" id="xlimit_min" placeholder="Minimum limit" />
+                                <input type="number" class="vp-input vp-state" id="xlimit_max" placeholder="Maximum limit" />
+                                <input type="text" class="vp-hidden vp-state" id="xlim"/>
+                            </td>
                         </tr>
                         <tr>
                             <th>Y Limit</th>
-                            <td><input type="text" class="vp-input vp-state" id="ylimit" placeholder="(min, max)" /></td>
+                            <td>
+                                <input type="number" class="vp-input vp-state" id="ylimit_min" placeholder="Minimum limit" />
+                                <input type="number" class="vp-input vp-state" id="ylimit_max" placeholder="Maximum limit" />
+                                <input type="text" class="vp-hidden vp-state" id="ylim"/>
+                            </td>
                         </tr>
                         <tr>
                             <th></th>
diff --git a/js/m_apps/Chart.js b/js/m_apps/Chart.js
@@ -133,6 +133,28 @@ define([
                 });
                 fileNavi.open();
             });
+            
+            // xlimit
+            $(this.wrapSelector('#xlimit_min')).change(function() {
+                let xlim_min = $(that.wrapSelector('#xlimit_min')).val();
+                let xlim_max = $(that.wrapSelector('#xlimit_max')).val();
+                $(that.wrapSelector('#xlim')).val(com_util.formatString('({0}, {1})', xlim_min, xlim_max));
+            });
+            $(this.wrapSelector('#xlimit_max')).change(function() {
+                let xlim_min = $(that.wrapSelector('#xlimit_min')).val();
+                let xlim_max = $(that.wrapSelector('#xlimit_max')).val();
+                $(that.wrapSelector('#xlim')).val(com_util.formatString('({0}, {1})', xlim_min, xlim_max));
+            });
+            $(this.wrapSelector('#ylimit_min')).change(function() {
+                let ylim_min = $(that.wrapSelector('#ylimit_min')).val();
+                let ylim_max = $(that.wrapSelector('#ylimit_max')).val();
+                $(that.wrapSelector('#ylim')).val(com_util.formatString('({0}, {1})', ylim_min, ylim_max));
+            });
+            $(this.wrapSelector('#ylimit_max')).change(function() {
+                let ylim_min = $(that.wrapSelector('#ylimit_min')).val();
+                let ylim_max = $(that.wrapSelector('#ylimit_max')).val();
+                $(that.wrapSelector('#ylim')).val(com_util.formatString('({0}, {1})', ylim_min, ylim_max));
+            });
         }
 
         templateForBody() {
