Add Sort option to Plotly app

minjk-bl · minjk-bl · commit c1147ae64443 · 2022-06-22T19:45:49.000+09:00
diff --git a/html/m_visualize/plotly.html b/html/m_visualize/plotly.html
@@ -78,6 +78,14 @@
         
                                 </select>
                             </div>
+                            <div class="vp-grid-box pt-option">
+                                <label class="vp-bold">Sort</label>
+                                <select id="sort" class="vp-select vp-state">
+                                    <option value="">Select option...</option>
+                                    <option value="total descending">Total descending</option>
+                                    <option value="total ascending">Total ascending</option>
+                                </select>
+                            </div>
                         </div>
                         <label for="userOption" class="vp-bold">User Option</label>
                         <input type="text" id="userOption" class="vp-input vp-state wp100" placeholder="key=value, ..."/>
diff --git a/js/m_visualize/Plotly.js b/js/m_visualize/Plotly.js
@@ -41,6 +41,7 @@ define([
                 x_start: '', x_end: '',
                 values: '', names: '', parents: '',
                 color: '',
+                sort: '',
                 userOption: '',
                 title: '',
                 x_label: '',
@@ -136,6 +137,7 @@ define([
                     $(that.wrapSelector('#y')).closest('.pt-option').show();
                     $(that.wrapSelector('#color')).closest('.pt-option').show();
                 }
+                $(that.wrapSelector('#sort')).closest('.pt-option').show();
             });
 
             // use data or not
@@ -348,6 +350,7 @@ define([
                 $(page).find('#y').closest('.pt-option').show();
                 $(page).find('#color').closest('.pt-option').show();
             }
+            $(page).find('#sort').closest('.pt-option').show();
 
             //================================================================
             // Load state
@@ -482,7 +485,7 @@ define([
              */
             let { 
                 chartType,
-                data, x, y, color, setXY,
+                data, x, y, color, setXY, sort,
                 userOption, userCode,
                 title, x_label, y_label
             } = this.state;
@@ -549,6 +552,11 @@ define([
                 , etcOptionCode.length > 0? ', ' + etcOptionCode.join(', '): '');
             code.appendFormatLine("fig = {0}", generatedCode);
 
+            // sort code
+            if (sort && sort != '') {
+                code.appendFormatLine("fig.update_xaxes(categoryorder='{0}')", sort);
+            }
+
             if (userCode && userCode != '') {
                 code.appendLine(userCode);
             }
