feat(ui): pre-populate "series" field based on query result (#222)

core/src/main/resources/site/public/index.html

@@ -100,6 +100,7 @@
                                                         <select id="_qvis_frm_chart_type">
                                                             <option>bar</option>
                                                             <option>line</option>
+                                                            <option>area</option>
                                                         </select>
                                                     </div>
                                                     <div class="form-group">

ui/src/js/console/query.js

@@ -32,12 +32,10 @@ $.fn.query = function () {
   function handleServerResponse(r) {
     bus.trigger(qdb.MSG_QUERY_OK, {
       count: r.count,
-      timings: r.timings
-        ? {
-            ...r.timings,
-            fetch: (Date.now() - time) * 1e6 - r.timings.execute,
-          }
-        : {},
+      timings: r.timings && {
+        ...r.timings,
+        fetch: (Date.now() - time) * 1e6 - r.timings.execute,
+      },
     })
 
     if (r.dataset) {
@@ -158,7 +156,23 @@ $.fn.domController = function () {
   }
 
   function formatTiming(nanos) {
-    return Math.round(nanos / 1e7 + Number.EPSILON) / 100
+    if (nanos === 0) {
+      return "0"
+    }
+
+    if (nanos > 1e9) {
+      return `${Math.round(nanos / 1e9 + Number.EPSILON) / 100}s`
+    }
+
+    if (nanos > 1e6) {
+      return `${Math.round(nanos / 1e6 + Number.EPSILON) / 100}ms`
+    }
+
+    if (nanos > 1e3) {
+      return `${Math.round(nanos / 1e3 + Number.EPSILON) / 100}μs`
+    }
+
+    return `${nanos}ns`
   }
 
   //noinspection JSUnusedLocalSymbols
@@ -167,18 +181,24 @@ $.fn.domController = function () {
     divMsg.removeClass("query-message-error").addClass("query-message-ok")
 
     const rows = m.count
-      ? m.count.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+      ? `<div class="query-result-value">
+            <div>
+              Row count
+            </div>
+            <div>
+                ${m.count.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
+            </div>
+         </div>`
       : ""
-    console.log(x, m)
 
-    if (m.count) {
+    if (m.timings) {
       divMsg.html(`
     <div class="query-result-value">
       <div>
         Execution time
       </div>
       <div>
-        ${formatTiming(m.timings.execute)}s
+        ${formatTiming(m.timings.execute)}
       </div>
     </div>
     <div class="query-result-value">
@@ -186,7 +206,7 @@ $.fn.domController = function () {
         Fetching time
       </div>
       <div>
-        ${formatTiming(m.timings.fetch)}s
+        ${formatTiming(m.timings.fetch)}
       </div>
     </div>
     <div class="query-result-value">
@@ -194,7 +214,7 @@ $.fn.domController = function () {
         Compiling time
       </div>
       <div>
-        ${formatTiming(m.timings.compiler)}s
+        ${formatTiming(m.timings.compiler)}
       </div>
     </div>
     <div class="query-result-value">
@@ -202,18 +222,13 @@ $.fn.domController = function () {
         Counting time
       </div>
       <div>
-        ${formatTiming(m.timings.count)}s
-      </div>
-    </div>
-    <div class="query-result-value">
-      <div>
-        Row count
-      </div>
-      <div>
-        ${rows}
+        ${formatTiming(m.timings.count)}
       </div>
     </div>
+    ${rows}
     `)
+    } else if (rows) {
+      divMsg.html(rows)
     } else {
       divMsg.html("&nbsp;Success!")
     }

ui/src/js/console/quick-vis.js

@@ -295,6 +295,8 @@ $.fn.quickVis = function (msgBus) {
     xAxisPicker.setData(x)
     yAxisPicker.setData(x)
 
+    yAxisPicker.set(x.slice(1).map((item) => item.text))
+
     // stash query text so that we can use this later to server for chart column values
     query = data.query
     clearChart()

ui/src/partials/quick-vis.hbs

@@ -8,6 +8,7 @@
                         <select id="_qvis_frm_chart_type">
                             <option>bar</option>
                             <option>line</option>
+                            <option>area</option>
                         </select>
                     </div>
                     <div class="form-group">

ui/webpack.config.js

@@ -33,7 +33,7 @@ const basePlugins = [
       removeRedundantAttributes: true,
       removeScriptTypeAttributes: true,
       removeStyleLinkTypeAttributes: true,
-      useShortDoctype: true
+      useShortDoctype: true,
     },
   }),
   new MiniCssExtractPlugin({
@@ -63,7 +63,7 @@ module.exports = {
     },
     port: PORT,
     proxy: {
-      context: ["/imp", "/exp", "/exec"],
+      context: ["/imp", "/exp", "/exec", "/chk"],
       target: `http://localhost:${BACKEND_PORT}/`,
     },
   },