zynfly/sqliteviz
1
0
Fork 0
mirror of https://github.com/lana-k/sqliteviz.git synced 2025-12-06 18:18:53 +08:00
Code Issues Projects Releases Wiki Activity

add a message about no data for chart

Browse Source
This commit is contained in:
lana-k
2020-10-25 21:31:18 +01:00
parent 37aa2d35d5
commit 0a3a94444e
2 changed files with 19 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/styles/variables.css
View File

@@ -11,6 +11,7 @@
--color-blue-dark: #0D76BF; --color-blue-dark: #0D76BF;
--color-blue-dark-2: #2A3F5F; --color-blue-dark-2: #2A3F5F;
--color-red: #EF553B; --color-red: #EF553B;
--color-yellow: #FBEFCB;
@@ -18,6 +19,7 @@
--color-bg-light-2: var(--color-gray-light-2); --color-bg-light-2: var(--color-gray-light-2);
--color-bg-light-3: var(--color-gray-light-5); --color-bg-light-3: var(--color-gray-light-5);
--color-bg-dark: var(--color-gray-dark); --color-bg-dark: var(--color-gray-dark);
--color-bg-warning: var(--color-yellow);
--color-accent: var(--color-blue-medium); --color-accent: var(--color-blue-medium);
--color-accent-shade: var(--color-blue-dark); --color-accent-shade: var(--color-blue-dark);
--color-border-light: var(--color-gray-light-2); --color-border-light: var(--color-gray-light-2);

18
src/components/Chart.vue
View File

@@ -1,4 +1,8 @@
<template> <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 <PlotlyEditor
v-show="visible" v-show="visible"
:data="state.data" :data="state.data"
@@ -13,7 +17,9 @@
:debug="true" :debug="true"
:advancedTraceTypeSelector="true" :advancedTraceTypeSelector="true"
class="chart" class="chart"
:style="{ height: !sqlResult ? 'calc(100% - 40px)' : '100%' }"
/> />
</div>
</template> </template>
<script> <script>
@@ -87,8 +93,18 @@ export default {
} }
</script> </script>
<style scoped> <style scoped>
.chart { .chart-container {
height: calc(100% - 89px); 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); border-top: 1px solid var(--color-border);
} }