Skip to content

Instantly share code, notes, and snippets.

@TravisMullen

TravisMullen/ProgressGauge.vue

Last active September 29, 2022 23:29
Show Gist options
  • Save TravisMullen/0e344a8bf679fb6e369fc9166d7a0e72 to your computer and use it in GitHub Desktop.
Save TravisMullen/0e344a8bf679fb6e369fc9166d7a0e72 to your computer and use it in GitHub Desktop.
Download ZIP
ProgressGauge
Raw
filters.js
/**
* Adjusts a number to the specified digit.
*
* @param {"round" | "floor" | "ceil"} type The type of adjustment.
* @param {number} value The number.
* @param {number} exp The exponent (the 10 logarithm of the adjustment base).
* @returns {number} The adjusted value.
*/
function decimalAdjust(type, value, exp) {
type = String(type);
if (!["round", "floor", "ceil"].includes(type)) {
throw new TypeError(
"The type of decimal adjustment must be one of 'round', 'floor', or 'ceil'."
);
}
exp = Number(exp);
value = Number(value);
if (exp % 1 !== 0 || Number.isNaN(value)) {
return NaN;
} else if (exp === 0) {
return Math[type](value);
}
const [magnitude, exponent = 0] = value.toString().split("e");
const adjustedValue = Math[type](`${magnitude}e${exponent - exp}`);
// Shift back
const [newMagnitude, newExponent = 0] = adjustedValue.toString().split("e");
return Number(`${newMagnitude}e${+newExponent + exp}`);
}
export function floor10 (value, exp) {
// Decimal floor
if (!Math.floor10) {
Math.floor10 = function (_value, _exp) {
return decimalAdjust('floor', _value, _exp)
}
}
return Math.floor10(value, exp)
}
Raw
ProgressGauge.vue
<template>
<div class="progress-gauge">
<!-- <strong>{{ progress | floor10 }}</strong> -->
<svg ref="container" class="progress" :width="size" :height="size" :viewBox="`0 0 ${size} ${size}`"
:style="{ strokeDashoffset: dashoffset, strokeDasharray: circumference }">
<circle ref="meter" class="progress-meter" :cx="innerSize" :cy="innerSize" :r="radius" stroke-width="12" />
<circle ref="value" class="progress-value" :cx="innerSize" :cy="innerSize" :r="radius" stroke-width="12" />
</svg>
<!-- <input id="control" type="range" value="60" /> -->
</div>
</template>
<script>
import { floor10 } from './filters.js'
export default {
name: 'progress-gauge',
filters: {
floor10
},
props: {
value: {
type: Number,
default: 0
},
max: {
type: Number,
default: 100
},
size: {
type: Number,
default: 120
}
},
computed: {
innerSize () {
return this.size / 2
},
radius () {
return this.size * 0.41
},
circumference () {
return 2 * Math.PI * this.radius
},
progress () {
return this.value / this.max
},
dashoffset () {
return this.circumference * (1 - this.progress)
}
},
beforeCreate () {
// this.$refs.container
// var control = document.getElementById('control');
// var progressValue = document.querySelector('.progress-value');
// var RADIUS = 54;
// var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
// function progress(value) {
// var progress = value / 100;
// var dashoffset = CIRCUMFERENCE * (1 - progress);
// console.log('progress:', value + '%', '|', 'offset:', dashoffset)
// progressValue.style.strokeDashoffset = dashoffset;
// }
// control.addEventListener('input', function(event) {
// progress(event.target.valueAsNumber);
// });
// progressValue.style.strokeDasharray = CIRCUMFERENCE;
// progress(60);
//
// let percentage = this.syncing.currentBlock / this.syncing.highestBlock
// // return Math.floor(percentage * 100)
// return percentage * 100
// }
}
}
</script>
<style lang="scss" scoped>
// Global Styles
// ----------------
//
$custom-easing: cubic-bezier(1, .1, 0, 0.9) !default;
$yellow: #FCBD00 !default;
$dark-yellow: #CC9200 !default;
$red: #D2352E !default;
$dark-red: #A82022 !default;
$green: #86A031 !default;
$dark-green: #485936 !default;
$cream: #F5F3CD !default;
$white: #fefefe !default;
$black: #161417 !default; // black!
$dark-color: rgb(46, 47, 41) !default;
$grey: #ccc !default;
$grey-dark: darken($grey, 60) !default;
$grey-light: lighten($grey, 8) !default;
$rem-base: 16px !default;
$base-font-size: 100% !default;
$base-line-height: 1.5 !default;
$headers: "h1,h2,h3,h4,h5,h6" !default;
$font-weight-normal: normal !default;
$font-weight-bold: bold !default;
$body-background: $yellow !default;
$body-font-color: $black !default;
$body-font-family: 'Avenir', Helvetica, Arial, sans-serif !default;
$alt-font-family: "flottflottregular", cursive, sans-serif !default;
$body-font-weight: $font-weight-normal !default;
$body-font-style: normal !default;
$body-antialiased: true !default;
$primary-color: $red !default;
$secondary-color: $cream !default;
$alert-color: $dark-red !default;
$alert-dark: darken($alert-color, 15) !default;
$info-color: $black !default;
$success-color: $green !default;
$success-dark: $dark-green !default;
$warning-color: $dark-yellow !default;
$warning-dark: darken($warning-color, 15) !default;
$global-radius: rem-calc(8) !default;
$global-rounded: 1000px !default;
$global-padding: 1rem !default;
$global-spacing: rem-calc(15) !default;
.progress-gauge {
// position: absolute;
// top: 0;
// right: 0;
// bottom: 0;
// left: 0;
// margin: auto;
// display: flex;
// align-items: center;
// justify-content: center;
// flex-direction: column;
filter: drop-shadow(rem-calc($global-padding) rem-calc(2) rem-calc(2) $dark-yellow);
// :first-child {
// margin-bottom: rem-calc(20);
// }
}
.progress {
// display: block;
transform: rotate(-90deg);
}
.progress-meter,
.progress-value {
fill: none;
}
.progress-meter {
stroke: $cream;
}
.progress-value {
stroke: $secondary-color;
&.complete {
stroke: $success-color;
}
&.almost-complete {
stroke: $warning-color;
}
stroke-linecap: round;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment