Add x_label, y_label option on Plotly app

minjk-bl · minjk-bl · commit c0e44861426c · 2022-06-20T14:19:57.000+09:00
diff --git a/html/m_visualize/plotly.html b/html/m_visualize/plotly.html
@@ -70,6 +70,12 @@
                                 <label class="vp-bold">Parents</label>
                                 <select id="parents" class="vp-select vp-state">
         
+                                </select>
+                            </div>
+                            <div class="vp-grid-box pt-option">
+                                <label class="vp-bold">Color</label>
+                                <select id="color" class="vp-select vp-state">
+        
                                 </select>
                             </div>
                         </div>
@@ -79,7 +85,16 @@
                     <div class="vp-tab-page vp-grid-box" data-type="info" style="display: none;">
                         <label for="title" class="vp-bold">Title</label>
                         <input type="text" id="title" class="vp-input vp-state wp100" placeholder="Title for the chart" />
-
+                        <div class="vp-grid-col-p50">
+                            <div class="vp-grid-box">
+                                <label for="x_label" class="vp-bold">X Label</label>
+                                <input type="text" id="x_label" class="vp-input vp-state" placeholder="Type X Label" />
+                            </div>
+                            <div class="vp-grid-box">
+                                <label for="y_label" class="vp-bold">Y Label</label>
+                                <input type="text" id="y_label" class="vp-input vp-state" placeholder="Type Y Label" />
+                            </div>
+                        </div>
 
                     </div>
                     <div class="vp-tab-page vp-grid-box" data-type="style" style="display: none;">
diff --git a/js/m_visualize/Plotly.js b/js/m_visualize/Plotly.js
@@ -37,8 +37,14 @@ define([
             this.state = {
                 chartType: 'scatter',
                 data: '',
+                x: '', y: '', z: '',
+                x_start: '', x_end: '',
+                values: '', names: '', parents: '',
+                color: '',
                 userOption: '',
                 title: '',
+                x_label: '',
+                y_label: '',
                 userCode: '',
                 autoRefresh: true,
                 ...this.state
@@ -453,9 +459,9 @@ define([
              */
             let { 
                 chartType,
-                data, x, y, setXY,
+                data, x, y, color, setXY,
                 userOption, userCode,
-                title
+                title, x_label, y_label
             } = this.state;
             let code = new com_String();
             let config = this.chartConfig[chartType];
@@ -465,6 +471,42 @@ define([
             if (title != '') {
                 etcOptionCode.push(com_util.formatString("title='{0}'", title));
             }
+            let labelOptions = [];
+            // add x_label
+            if (x_label != '') {
+                if (setXY === true) {
+                    // replace 'x' to x_label
+                    labelOptions.push(com_util.formatString("'x': '{0}'", x_label));
+                } else {
+                    // if x is selected
+                    if (x != '') {
+                        // replace x column name to x_label
+                        labelOptions.push(com_util.formatString("{0}: '{1}'", x, x_label));
+                    } else {
+                        // replace 'index' to x_label
+                        labelOptions.push(com_util.formatString("'index': '{0}'", x_label));
+                    }
+                }
+            }
+            // add y_label
+            if (y_label != '') {
+                if (setXY === true) {
+                    // replace 'y' to y_label
+                    labelOptions.push(com_util.formatString("'y': '{0}'", y_label));
+                } else {
+                    // if y is selected
+                    if (y != '') {
+                        // replace y column name to y_label
+                        labelOptions.push(com_util.formatString("{0}: '{1}'", y, y_label));
+                    } else {
+                        // replace 'index' to y_label
+                        labelOptions.push(com_util.formatString("'index': '{0}'", y_label));
+                    }
+                }
+            }
+            if (labelOptions.length > 0) {
+                etcOptionCode.push(com_util.formatString("labels={ {0} }", labelOptions.join(', ')));
+            }
             // add user option
             if (userOption != '') {
                 etcOptionCode.push(userOption);
