tyler.durden/dashy
1
0
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2025-07-26 07:05:43 +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

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

@ -1,12 +1,18 @@
<template> <template>
<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 class="percentage-chart" :style="makeWrapperStyles(height)">
<div <div
v-for="(block, inx) in blocks" :key="inx" v-for="(block, inx) in blocks" :key="inx"
class="inner" :style="makeDimens(block, inx)" class="inner" :style="makeDimens(block, inx)"
v-tooltip="block.label" v-tooltip="`${block.label} - ${block.width}%`"
></div> ></div>
</div> </div>
<!-- Chart Legend / Key -->
<div class="legend"> <div class="legend">
<div v-for="(block, inx) in blocks" :key="inx" <div v-for="(block, inx) in blocks" :key="inx"
class="legend-item" v-tooltip="`${Math.round(block.width)}%`"> class="legend-item" v-tooltip="`${Math.round(block.width)}%`">
@ -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,12 +80,25 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.percentage-chart-wrapper {
// Chart Title
.title {
p {
font-size: 1rem;
margin: 0.5rem 0;
color: var(--widget-text-color);
opacity: var(--dimming-factor);
}
}
// Main Chart
.percentage-chart { .percentage-chart {
width: 100%; width: 100%;
background: grey; background: grey;
position: relative; position: relative;
height: 2rem; height: 2rem;
margin: 0.5rem auto; margin: 0.5rem auto;
border-radius: 3px;
overflow: hidden;
.inner { .inner {
position: absolute; position: absolute;
width: 30%; width: 30%;
@ -87,6 +109,7 @@ export default {
} }
} }
} }
// Chart Legend
.legend { .legend {
display: flex; display: flex;
margin-top: 0.5rem; margin-top: 0.5rem;
@ -109,4 +132,5 @@ export default {
} }
} }
} }
}
</style> </style>