feat(@cubejs-client/vue): vue query builder (#1824)

* feat(@cubejs-client/vue): vue query builder

* wip

* other chart types

* graphql wip

* graphql wip

* vue-query-builder: TimeDimensions and DateRange to components

* vue-query-builder: Add charts to Dashboard page

* vue-query-builder: cubejsApi to router

* vue-query-builder: add charts by type to dashboard page

* vue-query-builder: add grid-layout

* vue-query-builder: update grid layout

* vue-query-builder: grid

* vue-query-builder: grid update height

* vue-query-builder: clear explore page, sessionGranularity to heuristicsFn

* fix

* tests and query builder fixes

* test fix

* improvements

* lint fixes

* refactoring, fixes

* tests fix

* error fix

* test fix

* missing type

* updated yarn.lock

Co-authored-by: Leonid Yakovlev <leonid@cube.dev>

examples/vue-query-builder/dashboard-app/jsconfig.json

@@ -0,0 +1,5 @@
+{
+  "include": [
+    "./src/**/*"
+  ]
+}

examples/vue-query-builder/dashboard-app/package.json

@@ -11,10 +11,23 @@
   "dependencies": {
     "@cubejs-client/core": "^0.24.0",
     "@cubejs-client/vue": "^0.19.43",
+    "apollo-boost": "^0.4.9",
+    "apollo-cache-inmemory": "^1.6.6",
+    "apollo-client": "^2.6.10",
+    "apollo-link": "^1.2.14",
+    "apollo-link-http": "^1.5.17",
+    "apollo-link-schema": "^1.2.5",
     "chart.js": "^2.9.3",
     "core-js": "^3.6.5",
+    "graphql": "^15.5.0",
+    "graphql-tag": "^2.11.0",
+    "graphql-tools": "5.0.0",
     "vue": "^2.6.11",
+    "vue-apollo": "^3.0.5",
     "vue-chartkick": "^0.6.0",
+    "vue-grid-layout": "^2.3.12",
+    "vue-router": "^3.5.1",
+    "vuedraggable": "^2.24.3",
     "vuetify": "^2.2.11"
   },
   "devDependencies": {

examples/vue-query-builder/dashboard-app/src/App.vue

@@ -1,11 +1,6 @@
 <template>
   <v-app>
-    <v-app-bar
-      app
-      color="#43436B"
-      dark
-      class="px-4"
-    >
+    <v-app-bar app color="#43436B" dark class="px-4">
       <div class="d-flex align-center">
         <v-img
           alt="Vuetify Logo"
@@ -15,86 +10,96 @@
           transition="scale-transition"
         />
       </div>
+
+        <v-tabs align-with-title>
+          <v-tab to="/explore">Explore</v-tab>
+          <v-tab to="/dashboard">Dashboard</v-tab>
+        </v-tabs>
+
       <v-spacer></v-spacer>
+
       <v-hover v-slot:default="{ hover }">
-        <a class="custom-btn mr-4" href="https://github.com/cube-js/cube.js/tree/master/examples/vue-query-builder" target="_blank">
-          <v-img v-if="!hover"
+        <a
+          class="custom-btn mr-4"
+          href="https://github.com/cube-js/cube.js/tree/master/examples/vue-query-builder"
+          target="_blank"
+        >
+          <v-img
+            v-if="!hover"
             alt="GitHub Logo"
             src="./assets/github.svg"
             class="mr-2"
             width="20px"
             height="20px"
             transition="scale-transition"
           />
-          <v-img v-else
-                 alt="GitHub Logo"
-                 src="./assets/githubWhite.svg"
-                 class="mr-2"
-                 width="20px"
-                 height="20px"
-                 transition="scale-transition"
+          <v-img
+            v-else
+            alt="GitHub Logo"
+            src="./assets/githubWhite.svg"
+            class="mr-2"
+            width="20px"
+            height="20px"
+            transition="scale-transition"
           />
           <button type="button">GitHub</button>
         </a>
       </v-hover>
       <v-hover v-slot:default="{ hover }">
         <a class="custom-btn" href="https://slack.cube.dev/" target="_blank">
-          <v-img v-if="!hover"
+          <v-img
+            v-if="!hover"
             alt="Slack Logo"
             src="./assets/slack.svg"
             class="mr-2"
             width="20px"
             height="20px"
             transition="scale-transition"
           />
-          <v-img v-else
-                 alt="Slack Logo"
-                 src="./assets/slackWhite.svg"
-                 class="mr-2"
-                 width="20px"
-                 height="20px"
-                 transition="scale-transition"
+          <v-img
+            v-else
+            alt="Slack Logo"
+            src="./assets/slackWhite.svg"
+            class="mr-2"
+            width="20px"
+            height="20px"
+            transition="scale-transition"
           />
           <button type="button">Slack</button>
         </a>
       </v-hover>
     </v-app-bar>
 
     <v-main>
-      <HelloWorld/>
+      <router-view></router-view>
     </v-main>
   </v-app>
 </template>
-
 <script>
-import HelloWorld from './components/HelloWorld'
-
 export default {
   name: 'App',
 
-  components: {
-    HelloWorld
-  }
-}
+  components: {},
+};
 </script>
 
 <style scoped>
-  .custom-btn {
-    display: flex;
-    align-items: center;
-    padding: 6px 12px;
-    background: rgba(243, 243, 251, 0.1);
-    border-radius: 4px;
-    text-decoration: none;
-    font-style: normal;
-    font-weight: normal;
-    font-size: 16px;
-    line-height: 26px;
-    letter-spacing: 0.02em;
-    font-feature-settings: 'ss03' on, 'ss04' on;
-    color: #FFFFFF;
-  }
-  .custom-btn:hover {
-    background: rgba(243, 243, 251, 0.2);
-  }
+.custom-btn {
+  display: flex;
+  align-items: center;
+  padding: 6px 12px;
+  background: rgba(243, 243, 251, 0.1);
+  border-radius: 4px;
+  text-decoration: none;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 16px;
+  line-height: 26px;
+  letter-spacing: 0.02em;
+  font-feature-settings: 'ss03' on, 'ss04' on;
+  color: #ffffff;
+}
+.custom-btn:hover {
+  background: rgba(243, 243, 251, 0.2);
+}
 </style>