tyler.durden/dashy
1
0
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2025-07-24 22:25:16 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

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