link to docs, disable some settings, check result set

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

@@ -1,6 +1,6 @@
 <template>
   <div ref="chartContainer" class="chart-container">
-    <div v-show="!dataSources" class="warning chart-warning">
+    <div v-show="!dataSources" class="warning data-view-warning">
       There is no data to build a chart. Run your SQL query and make sure the
       result is not empty.
     </div>
@@ -184,13 +184,6 @@ export default {
   height: 100%;
 }
 
-.chart-warning {
-  height: 40px;
-  line-height: 40px;
-  border-bottom: 1px solid var(--color-border);
-  box-sizing: border-box;
-}
-
 .chart {
   min-height: 242px;
 }

src/views/MainView/Workspace/Tabs/Tab/DataView/Graph/GraphEditor.vue

@@ -7,7 +7,9 @@
             <Field>
               Map your result set records to node and edge properties required
               to build a graph. Learn more about result set requirements in the
-              documentation.
+              <a href="https://sqliteviz.com/docs/graph/" target="_blank">
+                documentation</a
+              >.
             </Field>
             <Field label="Object type">
               <Dropdown
@@ -291,7 +293,7 @@ export default {
               nodes: {
                 size: {
                   type: 'constant',
-                  value: 4
+                  value: 10
                 },
                 color: {
                   type: 'constant',

src/views/MainView/Workspace/Tabs/Tab/DataView/Graph/index.vue

@@ -1,13 +1,20 @@
 <template>
   <div ref="graphContainer" class="graph-container">
-    <div v-show="!dataSources" class="warning chart-warning">
+    <div v-show="!dataSources" class="warning data-view-warning">
       There is no data to build a graph. Run your SQL query and make sure the
       result is not empty.
     </div>
+    <div v-show="!dataSourceIsValid" class="warning data-view-warning">
+      Result set is invalid for graph visualisation. Learn more in
+      <a href="https://sqliteviz.com/docs/graph/" target="_blank">
+        documentation</a
+      >.
+    </div>
     <div
       class="graph"
       :style="{
-        height: !dataSources ? 'calc(100% - 40px)' : '100%'
+        height:
+          !dataSources || !dataSourceIsValid ? 'calc(100% - 40px)' : '100%'
       }"
     >
       <GraphEditor
@@ -25,6 +32,7 @@
 import 'react-chart-editor/lib/react-chart-editor.css'
 import events from '@/lib/utils/events'
 import GraphEditor from './GraphEditor.vue'
+import { dataSourceIsValid } from '@/lib/graphHelper'
 
 export default {
   name: 'Graph',
@@ -48,7 +56,6 @@ export default {
       resizeObserver: null
     }
   },
-
   created() {
     this.$emit('update:exportToSvgEnabled', false)
     this.$emit('update:exportToHtmlEnabled', false)
@@ -66,6 +73,11 @@ export default {
       this.handleResize()
     }
   },
+  computed: {
+    dataSourceIsValid() {
+      return !this.dataSources || dataSourceIsValid(this.dataSources)
+    }
+  },
   methods: {
     getOptionsForSave() {
       return this.$refs.graphEditor.settings
@@ -93,13 +105,6 @@ export default {
   height: 100%;
 }
 
-.chart-warning {
-  height: 40px;
-  line-height: 40px;
-  border-bottom: 1px solid var(--color-border);
-  box-sizing: border-box;
-}
-
 .graph {
   min-height: 242px;
 }

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

@@ -326,4 +326,8 @@ export default {
 .pivot-output:empty {
   flex-grow: 0;
 }
+
+:deep(.js-plotly-plot) {
+  height: 100%;
+}
 </style>

src/views/MainView/Workspace/index.vue

@@ -42,8 +42,8 @@ export default {
     ) {
       const stmt = [
         '/*',
-        ' * Your database is empty. In order to start building charts',
-        ' * you should create a table and insert data into it.',
+        ' * Your database is empty. In order to start building data visualisations',
+        ' * you should create tables and insert data into them.',
         ' */',
         'CREATE TABLE house',
         '(',
@@ -54,7 +54,20 @@ export default {
         "('Gryffindor', 100),",
         "('Hufflepuff', 90),",
         "('Ravenclaw', 95),",
-        "('Slytherin', 80);"
+        "('Slytherin', 80);",
+        '',
+        'CREATE TABLE student',
+        '(',
+        '  id INTEGER,',
+        '  name TEXT,',
+        '  house TEXT',
+        ');',
+        'INSERT INTO student VALUES',
+        "(1, 'Harry Potter', 'Gryffindor'),",
+        "(2, 'Ron Weasley', 'Gryffindor'),",
+        "(3, 'Draco Malfoy', 'Slytherin'),",
+        "(4, 'Luna Lovegood', 'Ravenclaw'),",
+        "(5, 'Cedric Diggory', 'Hufflepuff');"
       ].join('\n')
 
       const tabId = await this.$store.dispatch('addTab', { query: stmt })