events

src/components/DbUploader.vue

@@ -58,6 +58,7 @@ import fIo from '@/lib/utils/fileIo'
 import ChangeDbIcon from '@/components/svg/changeDb'
 import database from '@/lib/database'
 import CsvImport from '@/components/CsvImport'
+import { send } from '@/lib/utils/events'
 
 export default {
   name: 'DbUploader',
@@ -127,6 +128,13 @@ export default {
       if (fIo.isDatabase(file)) {
         this.loadDb(file)
       } else {
+        send({
+          category: 'database',
+          action: 'import',
+          value: file.size,
+          label: 'from=csv new_db=true'
+        })
+
         this.file = file
         await this.$nextTick()
         const csvImport = this.$refs.addCsv

src/lib/database/index.js

@@ -7,6 +7,8 @@ import Worker from './_worker.js'
 // https://github.com/nolanlawson/promise-worker
 import PromiseWorker from 'promise-worker'
 
+import { send } from '@/lib/utils/events'
+
 function getNewDatabase () {
   const worker = new Worker()
   return new Database(worker)
@@ -76,6 +78,15 @@ class Database {
 
     this.dbName = file ? fu.getFileName(file) : 'database'
     this.refreshSchema()
+
+    send({
+      category: 'database',
+      action: 'import',
+      value: file ? file.size : 0,
+      label: file
+        ? 'from=sqlite new_db=true'
+        : 'from=none new_db=true'
+    })
   }
 
   async refreshSchema () {
@@ -114,6 +125,12 @@ class Database {
       throw new Error(data.error)
     }
     fu.exportToFile(data, fileName)
+    send({
+      category: 'database',
+      action: 'export',
+      value: data.byteLength,
+      label: 'to=sqlite'
+    })
   }
 
   async validateTableName (name) {

src/lib/storedInquiries/index.js

@@ -1,5 +1,6 @@
 import { nanoid } from 'nanoid'
 import fu from '@/lib/utils/fileIo'
+import { send } from '@/lib/utils/events'
 import migration from './_migrations'
 
 const migrate = migration._migrate
@@ -103,9 +104,27 @@ export default {
   importInquiries () {
     return fu.importFile()
       .then(str => {
-        return this.deserialiseInquiries(str)
+        const inquires = this.deserialiseInquiries(str)
+
+        send({
+          category: 'inquiry',
+          action: 'import',
+          value: inquires.length
+        })
+
+        return inquires
       })
   },
+  export (inquiryList, fileName) {
+    const jsonStr = this.serialiseInquiries(inquiryList)
+    fu.exportToFile(jsonStr, fileName)
+
+    send({
+      category: 'inquiry',
+      action: 'export',
+      value: inquiryList.length
+    })
+  },
 
   async readPredefinedInquiries () {
     const res = await fu.readFile('./inquiries.json')

src/lib/utils/events.js

@@ -0,0 +1,11 @@
+export function send (payload) {
+  console.log(payload)
+  if (!window.sendEvent) {
+    return
+  }
+
+  const event = new CustomEvent('sqliteviz-app-event', {
+    detail: payload
+  })
+  window.dispatchEvent(event)
+}

src/registerServiceWorker.js

@@ -1,3 +1,4 @@
+import { send } from '@/lib/utils/events'
 let refresh = false
 
 function invokeServiceWorkerUpdateFlow (registration) {
@@ -41,4 +42,11 @@ if ('serviceWorker' in navigator) {
       }
     })
   })
+
+  window.addEventListener('appinstalled', () => {
+    send({
+      category: 'pwa',
+      action: 'install'
+    })
+  })
 }

src/views/Main/Inquiries/index.vue

@@ -159,7 +159,6 @@ import TextField from '@/components/TextField'
 import CheckBox from '@/components/CheckBox'
 import tooltipMixin from '@/tooltipMixin'
 import storedInquiries from '@/lib/storedInquiries'
-import fu from '@/lib/utils/fileIo'
 
 export default {
   name: 'Inquiries',
@@ -385,8 +384,7 @@ export default {
       return this.$store.state.tabs.findIndex(tab => tab.id === id)
     },
     exportToFile (inquiryList, fileName) {
-      const jsonStr = storedInquiries.serialiseInquiries(inquiryList)
-      fu.exportToFile(jsonStr, fileName)
+      storedInquiries.export(inquiryList, fileName)
     },
     exportSelectedInquiries () {
       const inquiryList = this.allInquiries.filter(

src/views/Main/MainMenu.vue

@@ -57,6 +57,7 @@ import TextField from '@/components/TextField'
 import CloseIcon from '@/components/svg/close'
 import storedInquiries from '@/lib/storedInquiries'
 import AppDiagnosticInfo from './AppDiagnosticInfo'
+import { send } from '@/lib/utils/events'
 
 export default {
   name: 'MainMenu',
@@ -110,6 +111,12 @@ export default {
           this.$router.push('/workspace')
         }
       })
+
+      send({
+        category: 'inquiry',
+        action: 'create',
+        label: 'auto=false'
+      })
     },
     cancelSave () {
       this.$modal.hide('save')
@@ -163,6 +170,10 @@ export default {
 
       // Signal about saving
       this.$root.$emit('inquirySaved')
+      send({
+        category: 'inquiry',
+        action: 'save'
+      })
     },
     _keyListener (e) {
       if (this.$route.path === '/workspace') {

src/views/Main/Workspace/Schema/index.vue

@@ -33,6 +33,7 @@
 
 <script>
 import fIo from '@/lib/utils/fileIo'
+import { send } from '@/lib/utils/events'
 import TableDescription from './TableDescription'
 import TextField from '@/components/TextField'
 import TreeChevron from '@/components/svg/treeChevron'
@@ -86,6 +87,13 @@ export default {
       csvImport.reset()
       await csvImport.previewCsv()
       csvImport.open()
+
+      send({
+        category: 'database',
+        action: 'import',
+        value: this.file.size,
+        label: 'from=csv new_db=false'
+      })
     }
   }
 }

src/views/Main/Workspace/Tabs/Tab/DataView/Chart/index.vue

@@ -31,10 +31,15 @@ import PlotlyEditor from 'react-chart-editor'
 import chartHelper from '@/lib/chartHelper'
 import dereference from 'react-chart-editor/lib/lib/dereference'
 import fIo from '@/lib/utils/fileIo'
+import { send } from '@/lib/utils/events'
 
 export default {
   name: 'Chart',
-  props: ['dataSources', 'initOptions', 'importToPngEnabled', 'importToSvgEnabled'],
+  props: [
+    'dataSources', 'initOptions',
+    'importToPngEnabled', 'importToSvgEnabled',
+    'forPivot'
+  ],
   components: {
     PlotlyEditor
   },
@@ -60,6 +65,19 @@ export default {
     plotly.setPlotConfig({
       notifyOnLogging: 1
     })
+    this.$watch(
+      () => JSON.stringify(
+        this.state.data.map(trace => `${trace.type}-${trace.mode}`)
+      ),
+      (value) => {
+        send({
+          category: 'viz_plotly',
+          action: 'render',
+          label: `type=${value} pivot=${this.forPivot ? 'true' : 'false'}`
+        })
+      },
+      { deep: true }
+    )
   },
   mounted () {
     this.resizeObserver = new ResizeObserver(this.handleResize)

src/views/Main/Workspace/Tabs/Tab/DataView/Pivot/index.vue

@@ -23,6 +23,7 @@ import pivotHelper from './pivotHelper'
 import Chart from '@/views/Main/Workspace/Tabs/Tab/DataView/Chart'
 import chartHelper from '@/lib/chartHelper'
 import Vue from 'vue'
+import { send } from '@/lib/utils/events'
 const ChartClass = Vue.extend(Chart)
 
 export default {
@@ -89,6 +90,11 @@ export default {
       handler () {
         this.$emit('update:importToPngEnabled', this.pivotOptions.rendererName !== 'TSV Export')
         this.$emit('update:importToSvgEnabled', this.viewStandartChart || this.viewCustomChart)
+        send({
+          category: 'viz_pivot',
+          action: 'render',
+          label: `type=${this.pivotOptions.rendererName}`
+        })
       }
     },
     pivotOptions () {
@@ -179,11 +185,11 @@ export default {
     async prepareCopy () {
       if (this.viewCustomChart) {
         return await this.pivotOptions.rendererOptions.customChartComponent.prepareCopy()
-      } else if (this.viewStandartChart) {
-        return await chartHelper.getImageDataUrl(this.$refs.pivotOutput, 'png')
-      } else {
-        return await pivotHelper.getPivotCanvas(this.$refs.pivotOutput)
       }
+      if (this.viewStandartChart) {
+        return await chartHelper.getImageDataUrl(this.$refs.pivotOutput, 'png')
+      }
+      return await pivotHelper.getPivotCanvas(this.$refs.pivotOutput)
     },
 
     async saveAsSvg () {
@@ -198,20 +204,23 @@ export default {
     saveAsHtml () {
       if (this.viewCustomChart) {
         this.pivotOptions.rendererOptions.customChartComponent.saveAsHtml()
-      } else if (this.viewStandartChart) {
+        return
+      }
+
+      if (this.viewStandartChart) {
         const chartState = chartHelper.getChartData(this.$refs.pivotOutput)
         fIo.exportToFile(
           chartHelper.getHtml(chartState),
           'chart.html',
           'text/html'
         )
-      } else {
-        fIo.exportToFile(
-          pivotHelper.getPivotHtml(this.$refs.pivotOutput),
-          'pivot.html',
-          'text/html'
-        )
+        return
       }
+      fIo.exportToFile(
+        pivotHelper.getPivotHtml(this.$refs.pivotOutput),
+        'pivot.html',
+        'text/html'
+      )
     }
   }
 }

src/views/Main/Workspace/Tabs/Tab/DataView/Pivot/pivotHelper.js

@@ -51,6 +51,8 @@ export function _getDataSources (pivotData) {
 
 function customChartRenderer (data, options) {
   options.customChartComponent.dataSources = _getDataSources(data)
+  options.customChartComponent.forPivot = true
+
   options.customChartComponent.$mount()
 
   return $(options.customChartComponent.$el)

src/views/Main/Workspace/Tabs/Tab/DataView/index.vue

@@ -95,6 +95,7 @@ import ClipboardIcon from '@/components/svg/clipboard'
 import cIo from '@/lib/utils/clipboardIo'
 import loadingDialog from '@/components/LoadingDialog'
 import time from '@/lib/utils/time'
+import { send } from '@/lib/utils/events'
 
 export default {
   name: 'DataView',
@@ -123,6 +124,11 @@ export default {
       dataToCopy: null
     }
   },
+  computed: {
+    plotlyInPivot () {
+      return this.mode === 'pivot' && this.$refs.viewComponent.viewCustomChart
+    }
+  },
   watch: {
     mode () {
       this.$emit('update')
@@ -148,6 +154,7 @@ export default {
       */
       await time.sleep(0)
       this.$refs.viewComponent.saveAsPng()
+      this.exportSignal('png')
     },
     getOptionsForSave () {
       return this.$refs.viewComponent.getOptionsForSave()
@@ -178,6 +185,7 @@ export default {
     async copyToClipboard () {
       cIo.copyImage(this.dataToCopy)
       this.$modal.hide('prepareCopy')
+      this.exportSignal('clipboard')
     },
     cancelCopy () {
       this.dataToCopy = null
@@ -186,9 +194,20 @@ export default {
 
     saveAsSvg () {
       this.$refs.viewComponent.saveAsSvg()
+      this.exportSignal('svg')
     },
     saveAsHtml () {
       this.$refs.viewComponent.saveAsHtml()
+      this.exportSignal('html')
+    },
+    exportSignal (to) {
+      send({
+        category: this.plotlyInPivot || this.mode === 'chart'
+          ? 'viz_plotly' : 'viz_pivot',
+        action: 'export',
+        label: `type=${to}${this.plotlyInPivot
+        ? ' pivot=true' : this.mode === 'chart' ? ' pivot=false' : ''}`
+      })
     }
   }
 }

src/views/Main/Workspace/Tabs/Tab/RunResult.vue

@@ -72,6 +72,7 @@ import fIo from '@/lib/utils/fileIo'
 import cIo from '@/lib/utils/clipboardIo'
 import time from '@/lib/utils/time'
 import loadingDialog from '@/components/LoadingDialog'
+import { send } from '@/lib/utils/events'
 
 export default {
   name: 'RunResult',
@@ -117,10 +118,28 @@ export default {
     },
 
     exportToCsv () {
+      if (this.result && this.result.values) {
+        send({
+          category: 'resultset',
+          action: 'export',
+          value: this.result.values[this.result.columns[0]].length,
+          label: 'to=csv'
+        })
+      }
+
       fIo.exportToFile(csv.serialize(this.result), 'result_set.csv', 'text/csv')
     },
 
     async prepareCopy () {
+      if (this.result && this.result.values) {
+        send({
+          category: 'resultset',
+          action: 'export',
+          value: this.result.values[this.result.columns[0]].length,
+          label: 'to=clipboard'
+        })
+      }
+
       if ('ClipboardItem' in window) {
         this.preparingCopy = true
         this.$modal.show('prepareCSVCopy')

src/views/Main/Workspace/Tabs/Tab/index.vue

@@ -56,6 +56,7 @@ import DataView from './DataView'
 import RunResult from './RunResult'
 import time from '@/lib/utils/time'
 import Teleport from 'vue2-teleport'
+import { send } from '@/lib/utils/events'
 
 export default {
   name: 'Tab',
@@ -121,11 +122,33 @@ export default {
         const start = new Date()
         this.result = await state.db.execute(this.query + ';')
         this.time = time.getPeriod(start, new Date())
+
+        if (this.result && this.result.values) {
+          send({
+            category: 'resultset',
+            action: 'create',
+            value: this.result.values[this.result.columns[0]].length
+          })
+        }
+
+        send({
+          category: 'query',
+          action: 'run',
+          value: this.time,
+          label: 'status=success'
+        })
       } catch (err) {
         this.error = {
           type: 'error',
           message: err
         }
+
+        send({
+          category: 'query',
+          action: 'run',
+          value: 0,
+          label: 'status=error'
+        })
       }
       state.db.refreshSchema()
       this.isGettingResults = false

src/views/Main/Workspace/index.vue

@@ -19,6 +19,7 @@
 import Splitpanes from '@/components/Splitpanes'
 import Schema from './Schema'
 import Tabs from './Tabs'
+import { send } from '@/lib/utils/events'
 
 export default {
   name: 'Workspace',
@@ -49,6 +50,12 @@ export default {
 
       const tabId = await this.$store.dispatch('addTab', { query: stmt })
       this.$store.commit('setCurrentTabId', tabId)
+
+      send({
+        category: 'inquiry',
+        action: 'create',
+        label: 'auto=true'
+      })
     }
   }
 }