chart is a separated component now

src/components/Chart.vue

@@ -0,0 +1,87 @@
+<template>
+  <PlotlyEditor
+    v-show="visible"
+    :data="state.data"
+    :layout="state.layout"
+    :frames="state.frames"
+    :config="{ editable: true }"
+    :dataSources="dataSources"
+    :dataSourceOptions="dataSourceOptions"
+    :plotly="plotly"
+    @onUpdate="update"
+    :useResizeHandler="true"
+    :debug="true"
+    :advancedTraceTypeSelector="true"
+  />
+</template>
+
+<script>
+import plotly from 'plotly.js/dist/plotly'
+import 'react-chart-editor/lib/react-chart-editor.min.css'
+
+import PlotlyEditor from 'react-chart-editor'
+import dereference from 'react-chart-editor/lib/lib/dereference'
+
+export default {
+  name: 'Chart',
+  props: ['sqlResult', 'initChart', 'visible'],
+  components: {
+    PlotlyEditor
+  },
+  data () {
+    return {
+      plotly: plotly,
+      state: this.initChart || {
+        data: [],
+        layout: {},
+        frames: []
+      }
+    }
+  },
+  computed: {
+    dataSources () {
+      if (!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 => ({
+        value: name,
+        label: name
+      }))
+    }
+  },
+  watch: {
+    dataSources () {
+      // we need to update state.data in order to update the graph
+      // https://github.com/plotly/react-chart-editor/issues/948
+      dereference(this.state.data, this.dataSources)
+    }
+  },
+  methods: {
+    update (data, layout, frames) {
+      this.state = { data, layout, frames }
+      this.$emit('update')
+    },
+    getChartSatateForSave () {
+      // we don't need to save the data, only settings
+      // 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
+    }
+  }
+}
+</script>

src/components/MainMenu.vue

@@ -46,7 +46,7 @@ export default {
       const value = {
         id: currentQuery.id,
         query: currentQuery.query,
-        plotly: currentQuery.getPlotlySatateForSave()
+        chart: currentQuery.getChartSatateForSave()
       }
 
       if (isFromScratch) {

src/components/TabContent.vue

@@ -30,19 +30,12 @@
             <pre ref="output" id="output">Results will be displayed here</pre> -->
             <sql-table v-if="result" :data="result" :height="tableViewHeight" />
           </div>
-          <PlotlyEditor
+          <Chart
-            v-show="view === 'chart'"
+            :visible="view === 'chart'"
-            :data="state.data"
+            :sql-result="result"
-            :layout="state.layout"
+            :init-chart="initChart"
-            :frames="state.frames"
+            ref="chart"
-            :config="{ editable: true }"
+            @update="isUnsaved = true"
-            :dataSources="dataSources"
-            :dataSourceOptions="dataSourceOptions"
-            :plotly="plotly"
-            @onUpdate="update"
-            :useResizeHandler="true"
-            :debug="true"
-            :advancedTraceTypeSelector="true"
           />
         </div>
       </template>
@@ -54,9 +47,7 @@
 import SqlTable from '@/components/SqlTable'
 import Splitpanes from '@/components/splitpanes'
 import ViewSwitcher from '@/components/ViewSwitcher'
-
+import Chart from '@/components/Chart'
-import plotly from 'plotly.js/dist/plotly'
-import 'react-chart-editor/lib/react-chart-editor.min.css'
 
 import CM from 'codemirror'
 import { codemirror } from 'vue-codemirror'
@@ -67,27 +58,18 @@ import 'codemirror/addon/hint/show-hint.js'
 import 'codemirror/addon/hint/show-hint.css'
 import 'codemirror/addon/hint/sql-hint.js'
 
-import PlotlyEditor from 'react-chart-editor'
-import dereference from 'react-chart-editor/lib/lib/dereference'
-
 export default {
   name: 'TabContent',
-  props: ['id', 'initName', 'initQuery', 'initPlotly', 'tabIndex'],
+  props: ['id', 'initName', 'initQuery', 'initChart', 'tabIndex'],
   components: {
     codemirror,
     SqlTable,
     Splitpanes,
     ViewSwitcher,
-    PlotlyEditor
+    Chart
   },
   data () {
     return {
-      plotly: plotly,
-      state: this.initPlotly || {
-        data: [],
-        layout: {},
-        frames: []
-      },
       query: this.initQuery,
       cmOptions: {
         // codemirror options
@@ -100,7 +82,7 @@ export default {
       result: null,
       view: 'table',
       tableViewHeight: 0,
-      isUnsaved: !this.name
+      isUnsaved: !this.initName
     }
   },
   computed: {
@@ -145,19 +127,9 @@ export default {
     },
     isUnsaved () {
       this.$store.commit('updateTabState', { index: this.tabIndex, newValue: this.isUnsaved })
-    },
-    dataSources () {
-      // we need to update state.data in order to update the graph
-      // https://github.com/plotly/react-chart-editor/issues/948
-      dereference(this.state.data, this.dataSources)
     }
   },
   methods: {
-    update (data, layout, frames) {
-      this.state = { data, layout, frames }
-      this.isUnsaved = true
-      console.log(this.state)
-    },
     onCmChange (editor) {
       // Don't show autocomplete after a space or semicolon
       const ch = editor.getTokenAt(editor.getCursor()).string.slice(-1)
@@ -188,7 +160,9 @@ export default {
       if (this.view === 'chart') {
         // hack react-chart editor: hidden and show in order to make the graph resize
         this.view = 'not chart'
+        this.$nextTick(() => {
           this.view = 'chart'
+        })
       }
       this.calculateTableHeight()
     },
@@ -202,16 +176,8 @@ export default {
       const freeSpace = bottomPane.offsetHeight - 88 - 42 - 30 - 5 - 40
       this.tableViewHeight = freeSpace - (freeSpace % 40)
     },
-    getPlotlySatateForSave () {
+    getChartSatateForSave () {
-      // we don't need to save the data, only settings
+      return this.$refs.chart.getChartSatateForSave()
-      // 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/Tabs.vue

@@ -35,7 +35,7 @@
       :id="tab.id"
       :init-name="tab.name"
       :init-query="tab.query"
-      :init-plotly="tab.plotly"
+      :init-chart="tab.chart"
       :tab-index="index"
     />
     <div v-if="tabs.length === 0" id="start-guide">