add chart module (refactoring)

src/chart.js

@@ -0,0 +1,34 @@
+import dereference from 'react-chart-editor/lib/lib/dereference'
+
+export function getDataSourcesFromSqlResult (sqlResult) {
+  if (!sqlResult) {
+    return {}
+  }
+  const dataSorces = {}
+  const matrix = sqlResult.values
+  const [row] = matrix
+  const transposedMatrix = row.map((value, column) => matrix.map(row => row[column]))
+  sqlResult.columns.forEach((column, index) => {
+    dataSorces[column] = transposedMatrix[index]
+  })
+  return dataSorces
+}
+
+export function getOptionsFromDataSources (dataSources) {
+  return Object.keys(dataSources).map(name => ({
+    value: name,
+    label: name
+  }))
+}
+
+export function getChartStateForSave (state, dataSources) {
+  // we don't need to save the data, only settings
+  // so we modify state.data using dereference
+  const stateCopy = JSON.parse(JSON.stringify(state))
+  const emptySources = {}
+  for (const key in dataSources) {
+    emptySources[key] = []
+  }
+  dereference(stateCopy.data, emptySources)
+  return stateCopy
+}

src/components/Chart.vue

@@ -12,6 +12,7 @@
     :dataSourceOptions="dataSourceOptions"
     :plotly="plotly"
     @onUpdate="update"
+    @onRender="go"
     :useResizeHandler="true"
     :debug="true"
     :advancedTraceTypeSelector="true"
@@ -26,6 +27,11 @@ import plotly from 'plotly.js/dist/plotly'
 import 'react-chart-editor/lib/react-chart-editor.min.css'
 
 import PlotlyEditor from 'react-chart-editor'
+import {
+  getOptionsFromDataSources,
+  getDataSourcesFromSqlResult,
+  getChartStateForSave
+} from '@/chart'
 import dereference from 'react-chart-editor/lib/lib/dereference'
 
 export default {
@@ -46,23 +52,10 @@ export default {
   },
   computed: {
     dataSources () {
-      if (!this.sqlResult) {
+      return getDataSourcesFromSqlResult(this.sqlResult)
-        return {}
-      }
-      const dataSorces = {}
-      const matrix = this.sqlResult.values
-      const [row] = matrix
-      const transposedMatrix = row.map((value, column) => matrix.map(row => row[column]))
-      this.sqlResult.columns.forEach((column, index) => {
-        dataSorces[column] = transposedMatrix[index]
-      })
-      return dataSorces
     },
     dataSourceOptions () {
-      return Object.keys(this.dataSources).map(name => ({
+      return getOptionsFromDataSources(this.dataSources)
-        value: name,
-        label: name
-      }))
     }
   },
   watch: {
@@ -73,20 +66,15 @@ export default {
     }
   },
   methods: {
+    go (data, layout, frames) {
+      // TODO: check changes and enable Save button if needed
+    },
     update (data, layout, frames) {
       this.state = { data, layout, frames }
       this.$emit('update')
     },
     getChartStateForSave () {
-      // we don't need to save the data, only settings
+      return getChartStateForSave(this.state, this.dataSources)
-      // so we modify state.data using dereference
-      const stateCopy = JSON.parse(JSON.stringify(this.state))
-      const emptySources = {}
-      for (const key in this.dataSources) {
-        emptySources[key] = []
-      }
-      dereference(stateCopy.data, emptySources)
-      return stateCopy
     }
   }
 }

src/components/MainMenu.vue

@@ -77,7 +77,8 @@ export default {
         return false
       }
       const tabIndex = this.currentQuery.tabIndex
-      return this.$store.state.tabs[tabIndex].isUnsaved
+      const tab = this.$store.state.tabs[tabIndex]
+      return tab && tab.isUnsaved
     },
     isPredefined () {
       if (this.currentQuery) {

src/components/Tab.vue

@@ -139,9 +139,6 @@ export default {
       // 40 - height of table header
       const freeSpace = bottomPane.offsetHeight - 88 - 42 - 30 - 5 - 40
       this.tableViewHeight = freeSpace - (freeSpace % 40)
-    },
-    getChartStateForSave () {
-      return this.$refs.chart.getChartStateForSave()
     }
   }
 }

src/storedQueries.js

@@ -25,7 +25,7 @@ export default {
     const value = {
       id: queryTab.isPredefined ? nanoid() : queryTab.id,
       query: queryTab.query,
-      chart: queryTab.getChartStateForSave(),
+      chart: queryTab.$refs.chart.getChartStateForSave(),
       name: newName || queryTab.initName
     }
 

tests/unit/storedQueries.spec.js

@@ -187,15 +187,19 @@ describe('storedQueries.js', () => {
       query: 'select * from foo',
       chart: [],
       initName: null,
+      $refs: {
+        chart: {
           getChartStateForSave () {
-        return []
+            return ['chart']
+          }
+        }
       }
     }
     const value = storedQueries.save(tab, 'foo')
     expect(value.id).to.equal(tab.id)
     expect(value.name).to.equal('foo')
     expect(value.query).to.equal(tab.query)
-    expect(value.chart).to.eql(tab.getChartStateForSave())
+    expect(value.chart).to.eql(['chart'])
     expect(value).to.have.property('createdAt').which.within(now, nowPlusMinute)
     const queries = storedQueries.getStoredQueries()
     expect(JSON.stringify(queries)).to.equal(JSON.stringify([value]))
@@ -207,8 +211,12 @@ describe('storedQueries.js', () => {
       query: 'select * from foo',
       chart: [],
       initName: null,
+      $refs: {
+        chart: {
           getChartStateForSave () {
-        return []
+            return ['chart']
+          }
+        }
       }
     }
 
@@ -223,7 +231,7 @@ describe('storedQueries.js', () => {
     expect(second.id).to.equal(first.id)
     expect(second.name).to.equal(first.name)
     expect(second.query).to.equal(tab.query)
-    expect(second.chart).to.eql(first.chart)
+    expect(second.chart).to.eql(['chart'])
     expect(new Date(second.createdAt).getTime()).to.equal(first.createdAt.getTime())
   })
 
@@ -235,8 +243,12 @@ describe('storedQueries.js', () => {
       query: 'select * from foo',
       chart: [],
       initName: 'foo predefined',
+      $refs: {
+        chart: {
           getChartStateForSave () {
-        return []
+            return ['chart']
+          }
+        }
       },
       isPredefined: true
     }
@@ -247,7 +259,7 @@ describe('storedQueries.js', () => {
     expect(queries[0]).to.have.property('id').which.not.equal(tab.id)
     expect(queries[0].name).to.equal('foo')
     expect(queries[0].query).to.equal(tab.query)
-    expect(queries[0].chart).to.eql(tab.getChartStateForSave())
+    expect(queries[0].chart).to.eql(['chart'])
     expect(new Date(queries[0].createdAt)).to.be.within(now, nowPlusMinute)
   })
 })