selfhosted
/
dashy
mirror of https://github.com/lissy93/dashy
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

📦 Adds legend, and customizable height and title to percentage chart component

This commit is contained in:
Alicia Sykes 2022-01-08 11:59:40 +00:00
parent e253a35b05
commit 9884087975
1 changed files with 73 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
src/components/Charts/PercentageChart.vue
View File

@ -1,20 +1,26 @@
<template>
<div>
<div class="percentage-chart" :style="makeWrapperStyles(height)">
<div
v-for="(block, inx) in blocks" :key="inx"
class="inner" :style="makeDimens(block, inx)"
v-tooltip="block.label"
></div>
</div>
<div class="legend">
<div v-for="(block, inx) in blocks" :key="inx"
class="legend-item" v-tooltip="`${Math.round(block.width)}%`">
<div class="dot" v-if="block.label" :style="makeDotColor(block)"></div>
<div class="txt" v-if="block.label">{{ block.label }}</div>
<div class="percentage-chart-wrapper">
<!-- Chart Heading -->
<div class="title" v-if="title">
<p>{{ title }}</p>
</div>
<!-- Percentage Chart -->
<div class="percentage-chart" :style="makeWrapperStyles(height)">
<div
v-for="(block, inx) in blocks" :key="inx"
class="inner" :style="makeDimens(block, inx)"
v-tooltip="`${block.label} - ${block.width}%`"
></div>
</div>
<!-- Chart Legend / Key -->
<div class="legend">
<div v-for="(block, inx) in blocks" :key="inx"
class="legend-item" v-tooltip="`${Math.round(block.width)}%`">
<div class="dot" v-if="block.label" :style="makeDotColor(block)"></div>
<div class="txt" v-if="block.label">{{ block.label }}</div>
</div>
</div>
</div>
</div>
</template>
<script>
@ -25,11 +31,15 @@ export default {
type: Boolean,
default: true,
},
height: {
number: Boolean,
default: 1,
},
values: Array,
title: String,
},
data() {
return {
height: 1.5,
defaultColors: [
'#eb5cad', '#985ceb', '#5346f3', '#5c90eb', '#5cdfeb',
'#00CCB4', '#5ceb8d', '#afeb5c', '#eff961',
@ -40,14 +50,13 @@ export default {
blocks() {
let startPositionSum = 0;
const results = [];
console.log(this.values);
const total = this.values.reduce((prev, cur) => (prev.size || prev) + cur.size);
const multiplier = this.showAsPercent ? 100 / total : 1;
this.values.forEach((value, index) => {
const defaultColor = this.defaultColors[index % this.defaultColors.length];
results.push({
start: startPositionSum,
width: value.size * multiplier,
width: Math.round(value.size * multiplier),
color: value.color || defaultColor,
label: value.label,
});
@ -71,41 +80,56 @@ export default {
</script>
<style scoped lang="scss">
.percentage-chart {
width: 100%;
background: grey;
position: relative;
height: 2rem;
margin: 0.5rem auto;
.inner {
position: absolute;
width: 30%;
height: 100%;
box-shadow: inset 0px -1px 2px #000000bf;
&:hover {
box-shadow: inset 0px -1px 4px #000000bf;
}
}
}
.legend {
display: flex;
margin-top: 0.5rem;
.legend-item {
display: flex;
align-items: center;
.dot {
width: 1rem;
height: 1rem;
border-radius: 1rem;
}
.txt {
font-size: 0.8rem;
margin: 0.5rem;
.percentage-chart-wrapper {
// Chart Title
.title {
p {
font-size: 1rem;
margin: 0.5rem 0;
color: var(--widget-text-color);
opacity: var(--dimming-factor);
}
&:hover {
.txt { opacity: 1; }
}
// Main Chart
.percentage-chart {
width: 100%;
background: grey;
position: relative;
height: 2rem;
margin: 0.5rem auto;
border-radius: 3px;
overflow: hidden;
.inner {
position: absolute;
width: 30%;
height: 100%;
box-shadow: inset 0px -1px 2px #000000bf;
&:hover {
box-shadow: inset 0px -1px 4px #000000bf;
}
}
}
// Chart Legend
.legend {
display: flex;
margin-top: 0.5rem;
.legend-item {
display: flex;
align-items: center;
.dot {
width: 1rem;
height: 1rem;
border-radius: 1rem;
}
.txt {
font-size: 0.8rem;
margin: 0.5rem;
color: var(--widget-text-color);
opacity: var(--dimming-factor);
}
&:hover {
.txt { opacity: 1; }
}
}
}
}