fabio286/antares
1
1
Fork 0
mirror of https://github.com/Fabio286/antares.git synced 2025-02-17 12:10:39 +01:00
Code Issues Releases Wiki Activity

feat: pie chart with table size in database explore bar

Browse Source
This commit is contained in:
Fabio 2020-10-15 17:22:19 +02:00
parent d4ecaf65e5
commit 426628f268
1 changed files with 82 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
src/renderer/components/WorkspaceExploreBarDatabase.vue
View File

@ -25,6 +25,11 @@
<i class="table-icon mdi mdi-18px mr-1" :class="table.type === 'view' ? 'mdi-table-eye' : 'mdi-table'" /> <i class="table-icon mdi mdi-18px mr-1" :class="table.type === 'view' ? 'mdi-table-eye' : 'mdi-table'" />
<span>{{ table.name }}</span> <span>{{ table.name }}</span>
</a> </a>
<div class="table-size tooltip tooltip-left mr-1" :data-tooltip="formatBytes(table.size)">
<div class="pie" :style="piePercentage(table.size)">
<div class="pie-center" />
</div>
</div>
</li> </li>
</ul> </ul>
</div> </div>
@ -34,6 +39,7 @@
<script> <script>
import { mapActions, mapGetters } from 'vuex'; import { mapActions, mapGetters } from 'vuex';
import { formatBytes } from 'common/libs/formatBytes';
export default { export default {
name: 'WorkspaceExploreBarDatabase', name: 'WorkspaceExploreBarDatabase',
@ -47,57 +53,104 @@ export default {
}), }),
breadcrumbs () { breadcrumbs () {
return this.getWorkspace(this.connection.uid).breadcrumbs; return this.getWorkspace(this.connection.uid).breadcrumbs;
},
maxSize () {
return this.database.tables.reduce((acc, curr) => {
if (curr.size > acc) acc = curr.size;
return acc;
}, 0);
} }
}, },
methods: { methods: {
...mapActions({ ...mapActions({
changeBreadcrumbs: 'workspaces/changeBreadcrumbs' changeBreadcrumbs: 'workspaces/changeBreadcrumbs'
}), }),
formatBytes,
showDatabaseContext (event, database) { showDatabaseContext (event, database) {
this.$emit('show-database-context', { event, database }); this.$emit('show-database-context', { event, database });
}, },
showTableContext (table) { showTableContext (table) {
this.$emit('show-table-context', table); this.$emit('show-table-context', table);
},
piePercentage (val) {
const perc = val / this.maxSize * 100;
return { background: `conic-gradient(lime ${perc}%, white 0)` };
} }
} }
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.workspace-explorebar-database { .workspace-explorebar-database {
.database-name, .database-name,
a.table-name { a.table-name {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0.1rem; padding: 0.1rem;
cursor: pointer; cursor: pointer;
font-size: 0.7rem; font-size: 0.7rem;
> span { > span {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
display: block; display: block;
text-overflow: ellipsis; text-overflow: ellipsis;
}
&:hover {
color: $body-font-color;
background: rgba($color: #fff, $alpha: 0.05);
border-radius: 2px;
}
.database-icon,
.table-icon {
opacity: 0.7;
}
} }
.menu-item { &:hover {
line-height: 1.2; color: inherit;
background: inherit;
} }
.database-tables { .database-icon,
margin-left: 1.2rem; .table-icon {
opacity: 0.7;
} }
} }
.menu-item {
line-height: 1.2;
position: relative;
&:hover {
color: $body-font-color;
background: rgba($color: #fff, $alpha: 0.05);
border-radius: 2px;
}
}
.database-tables {
margin-left: 1.2rem;
}
.table-size {
position: absolute;
right: 0;
top: 0;
cursor: pointer;
display: flex;
align-items: center;
height: 100%;
opacity: 0.1;
transition: opacity 0.2s;
&:hover {
opacity: 0.8;
}
&::after {
font-weight: 400;
font-size: 0.5rem;
}
.pie {
width: 14px;
height: 14px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
}
}
</style> </style>