add a message about no data for chart

src/components/Chart.vue

@@ -1,4 +1,8 @@
 <template>
+<div class="chart-container">
+  <div class="chart-worning" v-show="!sqlResult && visible">
+    There is no data to build a chart. Run your sql query and make sure the result is not empty.
+  </div>
   <PlotlyEditor
     v-show="visible"
     :data="state.data"
@@ -13,7 +17,9 @@
     :debug="true"
     :advancedTraceTypeSelector="true"
     class="chart"
+    :style="{ height: !sqlResult ? 'calc(100% - 40px)' : '100%' }"
   />
+</div>
 </template>
 
 <script>
@@ -87,8 +93,18 @@ export default {
 }
 </script>
 <style scoped>
-.chart {
+.chart-container {
   height: calc(100% - 89px);
+}
+.chart-worning {
+  background-color: var(--color-bg-warning);
+  height: 40px;
+  line-height: 40px;
+  color: var(--color-text-base);
+  font-size: 13px;
+  padding: 0 24px;
+}
+.chart {
   border-top: 1px solid var(--color-border);
 }